Skip to content

N
nexpie-grafana-theme
Commit 90602942 by Patrick O'Carroll Committed by Torkel Ödegaard
Options

New alert design (#9214) 

* ux: updated alert design

* fixed bg-color for alerts

* more changes to alerts, index fixed
parent 057b8a6b
Showing with 74 additions and 46 deletions
public/app/core/services/alert_srv.ts
...@@ -33,6 +33,14 @@ export class AlertSrv { ...@@ -33,6 +33,14 @@ export class AlertSrv {
appEvents.on('confirm-modal', this.showConfirmModal.bind(this)); 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) { set(title, text, severity, timeout) {
if (_.isObject(text)) { if (_.isObject(text)) {
console.log('alert error', text); console.log('alert error', text);
...@@ -45,6 +53,7 @@ export class AlertSrv { ...@@ -45,6 +53,7 @@ export class AlertSrv {
title: title || '', title: title || '',
text: text || '', text: text || '',
severity: severity || 'info', severity: severity || 'info',
icon: this.getIconForSeverity(severity)
}; };
var newAlertJson = angular.toJson(newAlert); var newAlertJson = angular.toJson(newAlert);
......
public/app/features/plugins/ds_edit_ctrl.ts
...@@ -126,7 +126,7 @@ export class DataSourceEditCtrl { ...@@ -126,7 +126,7 @@ export class DataSourceEditCtrl {
return; return;
} }
this.testing = {done: false}; this.testing = {done: false, status: 'error'};
// make test call in no backend cache context // make test call in no backend cache context
this.backendSrv.withNoBackendCache(() => { this.backendSrv.withNoBackendCache(() => {
......
public/app/features/plugins/partials/ds_edit.html
...@@ -59,11 +59,17 @@ ...@@ -59,11 +59,17 @@
<div ng-if="ctrl.testing" class="gf-form-group"> <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> <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-icon">
<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 class="alert-title">{{ctrl.testing.title}}</div>
<div ng-bind='ctrl.testing.message'></div> <div ng-bind='ctrl.testing.message'></div>
</div> </div>
</div> </div>
</div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button> <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
......
public/sass/_variables.dark.scss
...@@ -240,12 +240,12 @@ $paginationActiveBackground: $blue; ...@@ -240,12 +240,12 @@ $paginationActiveBackground: $blue;
// ------------------------- // -------------------------
$state-warning-text: $warn; $state-warning-text: $warn;
$state-warning-bg: $brand-warning; $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; $infoText: $blue-dark;
$infoBackground: $blue-dark; $infoBackground: $blue-dark;
...@@ -258,6 +258,8 @@ $popover-border-color: $gray-1; ...@@ -258,6 +258,8 @@ $popover-border-color: $gray-1;
$popover-help-bg: $btn-secondary-bg; $popover-help-bg: $btn-secondary-bg;
$popover-help-color: $text-color; $popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
$tooltipColor: $popover-help-color; $tooltipColor: $popover-help-color;
......
public/sass/_variables.light.scss
...@@ -261,27 +261,22 @@ $paginationActiveBackground: $blue; ...@@ -261,27 +261,22 @@ $paginationActiveBackground: $blue;
// ------------------------- // -------------------------
$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; $infoText: $blue;
$infoBackground: $blue-dark; $infoBackground: $blue-dark;
$infoBorder: transparent;
// popover // popover
$popover-bg: $gray-5; $popover-bg: $gray-5;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $gray-3; $popover-border-color: $gray-3;
$popover-help-bg: $blue-dark; $popover-help-bg: $blue-dark;
$popover-help-color: $gray-6; $popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
......
public/sass/base/_type.scss
...@@ -35,17 +35,17 @@ a.muted:focus { color: darken($text-muted, 10%); } ...@@ -35,17 +35,17 @@ a.muted:focus { color: darken($text-muted, 10%); }
a.text-warning:hover, a.text-warning:hover,
a.text-warning:focus { color: darken($state-warning-text, 10%); } 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:hover,
a.text-error:focus { color: darken($errorText, 10%); } a.text-error:focus { color: darken($error-text-color, 10%); }
.text-info { color: $infoText; } .text-info { color: $infoText; }
a.text-info:hover, a.text-info:hover,
a.text-info:focus { color: darken($infoText, 10%); } 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:hover,
a.text-success:focus { color: darken($successText, 10%); } a.text-success:focus { color: darken($success-text-color, 10%); }
a { cursor: pointer; } a { cursor: pointer; }
a[disabled] { a[disabled] {
......
public/sass/components/_alerts.scss
...@@ -7,30 +7,32 @@ ...@@ -7,30 +7,32 @@
// ------------------------- // -------------------------
.alert { .alert {
padding: 0.5rem 2rem 0.5rem 1rem; padding: 1.5rem 2rem 1.5rem 1.5rem;
margin-bottom: $line-height-base; 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; background-color: $state-warning-bg;
position: relative; position: relative;
color: $white; 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; border-radius: 2px;
display: flex;
flex-direction: row;
} }
// Alternate styles // Alternate styles
// ------------------------- // -------------------------
.alert-success { .alert-success {
background-color: $successBackground; background: $alert-success-bg;
} }
.alert-danger, .alert-danger,
.alert-error { .alert-error {
background-color: $errorBackground; background: $alert-error-bg;
} }
.alert-info { .alert-info {
background-color: $infoBackground; background: $infoBackground;
} }
.alert-warning { .alert-warning {
...@@ -39,28 +41,23 @@ ...@@ -39,28 +41,23 @@
.page-alert-list { .page-alert-list {
z-index: 8000; z-index: 8000;
min-width: 300px; min-width: 400px;
max-width: 300px; max-width: 600px;
position: fixed; position: fixed;
right: 20px; right: 20px;
top: 56px; top: 56px;
} }
.alert-close { .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; border: none;
font-size: 1.1rem; background: none;
color: $dark-4; display: flex;
align-items: center;
.fa { .fa {
position: relative; align-self: flex-end;
top: -2px; font-size: 1.5rem;
color: rgba(255,255,255,.75)
} }
} }
...@@ -68,3 +65,18 @@ ...@@ -68,3 +65,18 @@
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
padding-bottom: 2px; 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
public/sass/components/_drop.scss
...@@ -5,7 +5,7 @@ $useDropShadow: false; ...@@ -5,7 +5,7 @@ $useDropShadow: false;
$attachmentOffset: 0%; $attachmentOffset: 0%;
$easing: cubic-bezier(0, 0, 0.265, 1.00); $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("popover", $popover-bg, $popover-color, $popover-border-color);
@include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-theme("help", $popover-help-bg, $popover-help-color);
......
public/sass/pages/_dashboard.scss
...@@ -138,7 +138,7 @@ div.flot-text { ...@@ -138,7 +138,7 @@ div.flot-text {
&--error { &--error {
display: block; display: block;
color: $text-color; color: $text-color;
@include panel-corner-color($errorBackground); @include panel-corner-color($popover-error-bg);
.fa:before { .fa:before {
content: "\f12a"; content: "\f12a";
} }
......
public/views/index.html
...@@ -31,11 +31,14 @@ ...@@ -31,11 +31,14 @@
<div class="page-alert-list"> <div class="page-alert-list">
<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert"> <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)"> <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> </button>
<div class="alert-title">{{alert.title}}</div>
<div ng-bind='alert.text'></div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment