New alert design (#9214)

* ux: updated alert design

* fixed bg-color for alerts

* more changes to alerts, index fixed

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);

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(() => {

public/app/features/plugins/partials/ds_edit.html

@@ -59,9 +59,15 @@
 
 			<div ng-if="ctrl.testing" class="gf-form-group">
 				<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-				<div class="alert-{{ctrl.testing.status}} alert">
+				<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
-					<div class="alert-title">{{ctrl.testing.title}}</div>
+					<div class="alert-icon">
-					<div ng-bind='ctrl.testing.message'></div>
+							<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
+							<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
+					</div>
+					<div class="alert-body">
+						<div class="alert-title">{{ctrl.testing.title}}</div>
+						<div ng-bind='ctrl.testing.message'></div>
+					</div>
 				</div>
 			</div>
 

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;
+//$alert-error-bg:          linear-gradient(90deg, #d94636, #e55f39);
-$errorBackground:         $btn-danger-bg;
+$alert-error-bg:          linear-gradient(90deg, #d44939, #e0603d);
-
+$alert-success-bg:        linear-gradient(90deg, #3aa655, #47b274);
-$successText:             #12D95A;
-$successBackground:       $btn-success-bg;
 
 $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;

public/sass/_variables.light.scss

@@ -259,29 +259,24 @@ $paginationActiveBackground:          $blue;
 
 // Form states and alerts
 // -------------------------
-$state-warning-text:             lighten($orange, 10%);
+$state-warning-text:            lighten($orange, 10%);
-$state-warning-bg:       $orange;
+$state-warning-bg:              $orange;
-$warningBorder:           transparent;
+$error-text-color:              lighten($red, 10%);
+$success-text-color:            lighten($green, 10%);
 
-$errorText:               lighten($red, 10%);
+$alert-error-bg:          linear-gradient(90deg, #d44939, #e0603d);
-$errorBackground:         $red;
+$alert-success-bg:        linear-gradient(90deg, #3aa655, #47b274);
-$errorBorder:             transparent;
-
-$successText:             lighten($green, 10%);
-$successBackground:       $green;
-$successBorder:           transparent;
 
 $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
 // -------------------------

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] {

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;
+  min-width: 400px;
-  max-width: 300px;
+  max-width: 600px;
   position: fixed;
   right: 20px;
   top: 56px;
 }
 
 .alert-close {
-  position: absolute;
+  padding: 0 0 0 1rem;
-  top: -4px;
-  right: -2px;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  background: $white;
-  border-radius: 50%;
   border: none;
-  font-size: 1.1rem;
+  background: none;
-  color: $dark-4;
+  display: flex;
+  align-items: center;
   .fa {
-    position: relative;
+    align-self: flex-end;
-    top: -2px;
+    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;
+}

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);
 

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";
     }

public/views/index.html

@@ -31,11 +31,14 @@
 
 			<div class="page-alert-list">
 				<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
+					<div class="alert-icon"><i class="{{alert.icon}}"></i></div>
+					<div class="alert-body">
+						<div class="alert-title">{{alert.title}}</div>
+						<div class="alert-text" ng-bind='alert.text'></div>
+					</div>
 					<button type="button" class="alert-close" ng-click="dashAlerts.clear(alert)">
-						<i class="fa fa-times-circle"></i>
+						<i class="fa fa fa-remove"></i>
 					</button>
-					<div class="alert-title">{{alert.title}}</div>
-					<div ng-bind='alert.text'></div>
 				</div>
 			</div>