diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-10-16 08:13:53 -0700 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-10-22 09:45:35 -0700 |
commit | 5e930c0aeb5b66df2c357be4d5c33d4828c2783f (patch) | |
tree | 56fe47b702eab9ab6cbd9c6b6acc8d9c56fc2e86 /app/common | |
parent | d11b9277aea0baeafa4488084d27cfef0e607480 (diff) | |
download | phosphor-webui-5e930c0aeb5b66df2c357be4d5c33d4828c2783f.tar.gz phosphor-webui-5e930c0aeb5b66df2c357be4d5c33d4828c2783f.zip |
Update toast notification
Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success toast which will be dismissed
automatically after 10 secs.
- Small updates to critical and success/on icon
- Added new colors for toast status background colors
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9077109042621b2d3346b4121d6344da502b6b26
Diffstat (limited to 'app/common')
-rw-r--r-- | app/common/services/toastService.js | 36 | ||||
-rw-r--r-- | app/common/styles/base/colors.scss | 14 | ||||
-rw-r--r-- | app/common/styles/elements/toast.scss | 55 |
3 files changed, 90 insertions, 15 deletions
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; } } |