diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts index ced6ffc6467..2412f32e29a 100644 --- a/public/app/core/services/alert_srv.ts +++ b/public/app/core/services/alert_srv.ts @@ -33,6 +33,14 @@ export class AlertSrv { appEvents.on('confirm-modal', this.showConfirmModal.bind(this)); } + getIconForSeverity(severity) { + switch (severity) { + case 'success': return 'fa fa-check'; + case 'error': return 'fa fa-exclamation-triangle'; + default: return 'fa fa-exclamation'; + } + } + set(title, text, severity, timeout) { if (_.isObject(text)) { console.log('alert error', text); @@ -45,6 +53,7 @@ export class AlertSrv { title: title || '', text: text || '', severity: severity || 'info', + icon: this.getIconForSeverity(severity) }; var newAlertJson = angular.toJson(newAlert); diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index b4a3c897e34..5fbb6f12477 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -126,7 +126,7 @@ export class DataSourceEditCtrl { return; } - this.testing = {done: false}; + this.testing = {done: false, status: 'error'}; // make test call in no backend cache context this.backendSrv.withNoBackendCache(() => { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 803198bcca1..9a74d3b85ea 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -59,9 +59,15 @@
Testing....
-
-
{{ctrl.testing.title}}
-
+
+
+ + +
+
+
{{ctrl.testing.title}}
+
+
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c3c673c517d..cea26ba73ed 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -240,12 +240,12 @@ $paginationActiveBackground: $blue; // ------------------------- $state-warning-text: $warn; $state-warning-bg: $brand-warning; +$error-text-color: #E84D4D; +$success-text-color: #12D95A; -$errorText: #E84D4D; -$errorBackground: $btn-danger-bg; - -$successText: #12D95A; -$successBackground: $btn-success-bg; +//$alert-error-bg: linear-gradient(90deg, #d94636, #e55f39); +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $infoText: $blue-dark; $infoBackground: $blue-dark; @@ -258,6 +258,8 @@ $popover-border-color: $gray-1; $popover-help-bg: $btn-secondary-bg; $popover-help-color: $text-color; +$popover-error-bg: $btn-danger-bg; + // Tooltips and popovers // ------------------------- $tooltipColor: $popover-help-color; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 19751887fa5..d90eadf500d 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -259,29 +259,24 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: lighten($orange, 10%); -$state-warning-bg: $orange; -$warningBorder: transparent; +$state-warning-text: lighten($orange, 10%); +$state-warning-bg: $orange; +$error-text-color: lighten($red, 10%); +$success-text-color: lighten($green, 10%); -$errorText: lighten($red, 10%); -$errorBackground: $red; -$errorBorder: transparent; - -$successText: lighten($green, 10%); -$successBackground: $green; -$successBorder: transparent; +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $infoText: $blue; $infoBackground: $blue-dark; -$infoBorder: transparent; // popover $popover-bg: $gray-5; $popover-color: $text-color; $popover-border-color: $gray-3; - $popover-help-bg: $blue-dark; $popover-help-color: $gray-6; +$popover-error-bg: $btn-danger-bg; // Tooltips and popovers // ------------------------- diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 7dd6c2f94e7..62c8fc6b3b8 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -35,17 +35,17 @@ a.muted:focus { color: darken($text-muted, 10%); } a.text-warning:hover, a.text-warning:focus { color: darken($state-warning-text, 10%); } -.text-error { color: $errorText; } +.text-error { color: $error-text-color; } a.text-error:hover, -a.text-error:focus { color: darken($errorText, 10%); } +a.text-error:focus { color: darken($error-text-color, 10%); } .text-info { color: $infoText; } a.text-info:hover, a.text-info:focus { color: darken($infoText, 10%); } -.text-success { color: $successText; } +.text-success { color: $success-text-color; } a.text-success:hover, -a.text-success:focus { color: darken($successText, 10%); } +a.text-success:focus { color: darken($success-text-color, 10%); } a { cursor: pointer; } a[disabled] { diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 859e3b88f8c..79d9afef50d 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -7,30 +7,32 @@ // ------------------------- .alert { - padding: 0.5rem 2rem 0.5rem 1rem; + padding: 1.5rem 2rem 1.5rem 1.5rem; margin-bottom: $line-height-base; - text-shadow: 0 1px 0 rgba(255,255,255,.5); + text-shadow: 0 2px 0 rgba(255,255,255,.5); background-color: $state-warning-bg; position: relative; color: $white; - text-shadow: 0 1px 0 rgba(0,0,0,.5); + text-shadow: 0 1px 0 rgba(0,0,0,.2); border-radius: 2px; + display: flex; + flex-direction: row; } // Alternate styles // ------------------------- .alert-success { - background-color: $successBackground; + background: $alert-success-bg; } .alert-danger, .alert-error { - background-color: $errorBackground; + background: $alert-error-bg; } .alert-info { - background-color: $infoBackground; + background: $infoBackground; } .alert-warning { @@ -39,28 +41,23 @@ .page-alert-list { z-index: 8000; - min-width: 300px; - max-width: 300px; + min-width: 400px; + max-width: 600px; position: fixed; right: 20px; top: 56px; } .alert-close { - position: absolute; - top: -4px; - right: -2px; - width: 16px; - height: 16px; - padding: 0; - background: $white; - border-radius: 50%; + padding: 0 0 0 1rem; border: none; - font-size: 1.1rem; - color: $dark-4; + background: none; + display: flex; + align-items: center; .fa { - position: relative; - top: -2px; + align-self: flex-end; + font-size: 1.5rem; + color: rgba(255,255,255,.75) } } @@ -68,3 +65,18 @@ font-weight: $font-weight-semi-bold; padding-bottom: 2px; } + +.alert-icon { + padding: 0 1rem 0 0; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + .fa { + font-size: 1.5rem; + } +} + +.alert-body { + flex-grow: 1; +} \ No newline at end of file diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index ae8ad806351..9e3c884bc68 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -5,7 +5,7 @@ $useDropShadow: false; $attachmentOffset: 0%; $easing: cubic-bezier(0, 0, 0.265, 1.00); -@include drop-theme("error", $errorBackground, $popover-color); +@include drop-theme("error", $popover-error-bg, $popover-color); @include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color); @include drop-theme("help", $popover-help-bg, $popover-help-color); diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 242f76b41bc..7aacbce4f6b 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -138,7 +138,7 @@ div.flot-text { &--error { display: block; color: $text-color; - @include panel-corner-color($errorBackground); + @include panel-corner-color($popover-error-bg); .fa:before { content: "\f12a"; } diff --git a/public/views/index.html b/public/views/index.html index b3c504740da..f7ea0d59caf 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -31,11 +31,14 @@
+
+
+
{{alert.title}}
+
+
-
{{alert.title}}
-