Panacea
Panacea is the collection of vanilla Javascript components and services created to enable our developers to use whatever Javascript framework they want while still maintaining a single codebase for these components and services.
Custom Components
Notifications
Notifications are messages to alert the user of important information related to their current activity - whether it is the system reaching out to the user, or users reaching out to other users via the system.
Message
Notification messages are messages triggered by users themselves or showing actions triggered by other users. They will automatically close after 5 seconds.
<div class="notify message">
<div class="notify-item row">
<div class="meta-icon">
<img src="https://aurora-dls.cmtelecom.com/assets/images/img_avatar.png">
</div>
<div class="meta-info">
<div class="meta-info-title">Ishmaila
Muhupatsi
</div>
<div class="meta-info-desc">We should try to
minimize the amount of effort
</div>
</div>
<div class="meta-actions">
<div class="meta-time">09:02</div>
<button class="close" type="button">
<span class="cm-icon cm-icon-close"></span>
</button>
</div>
</div>
</div> window.addNotification(
{
"type":"message",
"title":"my notification title",
"message":"I just call to say...",
"image":"https://www.rd.com/wp-content/uploads/2017/04/Try-Not-to-Laugh-At-These-25-Adorable-and-Funny-Baby-Pictures-115992457-Max-Bukovski-FT.jpg"
}
);Toast (Success)
Toasts are messages triggered by the system to show its status to the user. Think of errors, successes or warnings. They will automatically close after 5 seconds.
<div class="notify toast success">
<div class="notify-item row">
<div class="meta-icon">
<span class="cm-icon cm-icon-verification"></span>
</div>
<div class="meta-info">
<div class="meta-info-title">Success</div>
</div>
</div>
</div> window.addNotification(
{
"type":"success",
"title":"All went well"
}
);Toast (Failure)
Toasts are messages triggered by the system to show its status to the user. Think of errors, successes or warnings. They will automatically close after 5 seconds.
<div class="notify toast error">
<div class="notify-item row">
<div class="meta-icon">
<span class="cm-icon cm-icon-error"></span>
</div>
<div class="meta-info">
<div class="meta-info-title">Error</div>
</div>
</div>
</div> window.addNotification(
{
"type":"error",
"title":"This went so wrong"
}
);Toast (Informative)
Notification messages are messages triggered by users themselves or showing actions triggered by other users. They will automatically close after 5 seconds.
<div class="notify toast informative">
<div class="notify-item row">
<div class="meta-icon">
<span class="cm-icon cm-icon-verification"></span>
</div>
<div class="meta-info">
<div class="meta-info-title">Success</div>
</div>
</div>
</div> window.addNotification(
{
"type":"info",
"title":"Just to let you know..."
}
);