summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/assets/icons/icon-critical.svg2
-rw-r--r--app/assets/icons/icon-on.svg2
-rw-r--r--app/common/services/toastService.js36
-rw-r--r--app/common/styles/base/colors.scss14
-rw-r--r--app/common/styles/elements/toast.scss55
-rw-r--r--app/index.js2
6 files changed, 94 insertions, 17 deletions
diff --git a/app/assets/icons/icon-critical.svg b/app/assets/icons/icon-critical.svg
index 85a6736..58675ef 100644
--- a/app/assets/icons/icon-critical.svg
+++ b/app/assets/icons/icon-critical.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 2.3c4.3 0 7.7 3.5 7.7 7.7s-3.5 7.7-7.7 7.7-7.7-3.4-7.7-7.7S5.8 2.3 10 2.3m0-1.9C4.7.4.3 4.7.3 10.1s4.3 9.7 9.7 9.7 9.7-4.3 9.7-9.7S15.3.4 10 .4z" fill="#da1416"/><circle cx="10" cy="10" r="7.7" opacity=".4" fill="#da1416"/><path d="M4.5 4.5l11 11.1m0-11.1l-11 11.1" fill="none" stroke="#da1416" stroke-width="2" stroke-miterlimit="10"/></svg> \ No newline at end of file
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#e0182d" d="M8 0a8 8 0 11-8 8 8 8 0 018-8zM4.71 3.29L3.29 4.71l8 8 1.41-1.41z" data-name="Icon/status/Error"/></svg> \ No newline at end of file
diff --git a/app/assets/icons/icon-on.svg b/app/assets/icons/icon-on.svg
index ac750b0..ae5843c 100644
--- a/app/assets/icons/icon-on.svg
+++ b/app/assets/icons/icon-on.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 12L3.5 8.5 5 7l2 2 4-4 1.5 1.5L7 12z" fill="#34bc6e"/></svg> \ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 12L3.5 8.5 5 7l2 2 4-4 1.5 1.5L7 12z" fill="#0A7D06"/></svg> \ No newline at end of file
diff --git a/app/common/services/toastService.js b/app/common/services/toastService.js
index c199e96..0718e4d 100644
--- a/app/common/services/toastService.js
+++ b/app/common/services/toastService.js
@@ -13,15 +13,39 @@ window.angular && (function(angular) {
angular.module('app.common.services').service('toastService', [
'ngToast', '$sce',
function(ngToast, $sce) {
+ function initToast(
+ type = 'create', title = '', message = '', dismissOnTimeout = false) {
+ const iconStatus = type === 'success' ?
+ 'on' :
+ type === 'danger' ? 'error' : type === 'warning' ? 'warn' : null;
+ const content = $sce.trustAsHtml(`
+ <div role="alert" class="alert-content-container">
+ <status-icon ng-if="${iconStatus !== null}"
+ status="${iconStatus}"
+ class="status-icon">
+ </status-icon>
+ <div class="alert-content">
+ <h2 class="alert-content__header">${title}</h2>
+ <p class="alert-content__body">${message}</p>
+ </div>
+ </div>`);
+ ngToast[type]({content, dismissOnTimeout, compileContent: true});
+ };
+
this.error = function(message) {
- var errorMessage = $sce.trustAsHtml(
- '<div role="alert"><b>Error</b><br>' + message + '</div>');
- ngToast.create({className: 'danger', content: errorMessage});
+ initToast('danger', 'Error', message);
};
+
this.success = function(message) {
- var successMessage = $sce.trustAsHtml(
- '<div role="alert"><b>Success!</b><br>' + message + '</div>');
- ngToast.create({className: 'success', content: successMessage});
+ initToast('success', 'Success!', message, true);
+ };
+
+ this.warn = function(message) {
+ initToast('warning', 'Warning', message);
+ };
+
+ this.info = function(title, message) {
+ initToast('info', title, message);
};
}
]);
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index a31c603..c034a7c 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -4,6 +4,7 @@ $color--blue-50: #1D3458;
$color--blue-40: #2D60E5;
$color--blue-30: #7295F1;
$color--blue-20: #CCD7F4;
+$color--blue-10: #EFF2FB;
$color--grey-100: #333333;
$color--grey-80: #666666;
@@ -21,13 +22,16 @@ $color--teal-20: #CCF0F5;
$color--green-50: #0A7D06;
$color--green-20: #C6E8C5;
+$color--green-10: #ECFDF1;
$color--yellow-70: #DB7C00;
$color--yellow-50: #FEDF39;
$color--yellow-20: #FFF8E4;
+$color--yellow-10: #FFF8E4;
$color--red-50: #DA1416;
$color--red-20: #FAD3D3;
+$color--red-10: #FCE9E9;
// Color mapping
$base-01--01: $color--blue-100;
@@ -85,3 +89,13 @@ $box-shadow-color: $base-02--05;
$status-error: $accent-04--01;
$status-ok: $accent-02--01;
$status-warn: $accent-03--01;
+
+$notification-info--dark: $color--blue-40;
+$notification-info--light: $color--blue-10;
+$notification-success--dark: $color--green-50;
+$notification-success--light: $color--green-10;
+$notification-warn--dark: $color--yellow-50;
+$notification-warn--light: $color--yellow-10;
+$notification-error--dark: $color--red-50;
+$notification-error--light: $color--red-10;
+
diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss
index e9b1980..a46ce66 100644
--- a/app/common/styles/elements/toast.scss
+++ b/app/common/styles/elements/toast.scss
@@ -1,18 +1,55 @@
// Overrides style for ngToast notifications
.ng-toast {
- margin-top: 9em;
+ margin-top: 9rem;
.close {
- margin: .3em;
- }
- .title {
- font-weight: bold;
- }
- .ng-toast__message {
- max-width: 400px;
+ color: $text-01;
+ opacity: 1;
+ font-size: 1.2rem;
+ font-weight: 400;
}
.alert {
- color: $text-01;
+ border: none; //override inherited border styles
border-radius: 0;
+ border-left-width: 3px;
+ border-left-style: solid;
text-align: left;
+ color: $text-01;
+ padding-left: 1rem;
+ width: 350px;
+ }
+ .alert-content-container {
+ display: flex;
+ flex-direction: row;
+ }
+ .alert-content__header {
+ font-size: 1rem;
+ font-weight: bold;
+ margin-bottom: 0;
+ line-height:1.5;
+ }
+ .alert-content__body {
+ margin:0;
+ line-height: 1.2;
+ }
+ .alert-danger {
+ background-color: $notification-error--light;
+ border-left-color: $notification-error--dark;
+ }
+ .alert-success {
+ background-color: $notification-success--light;
+ border-left-color: $notification-success--dark;
+ }
+ .alert-warning {
+ background-color: $notification-warn--light;
+ border-left-color: $notification-warn--dark;
+ }
+ .alert-info {
+ background-color: $notification-info--light;
+ border-left-color: $notification-info--dark;
+ }
+ .status-icon {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 0.8rem;
}
}
diff --git a/app/index.js b/app/index.js
index 715ed31..62fff23 100644
--- a/app/index.js
+++ b/app/index.js
@@ -174,6 +174,8 @@ window.angular && (function(angular) {
animation: 'fade',
timeout: 10000,
dismissButton: true,
+ dismissOnTimeout: false,
+ dismissOnClick: false,
maxNumber: 6
});
}
OpenPOWER on IntegriCloud