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 78 additions and 50 deletions
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-title">{{ctrl.testing.title}}</div>
<div ng-bind='ctrl.testing.message'></div>
<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 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;
$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;
......
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
// -------------------------
......
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;
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
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>
......
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