IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

New alert design (#9214)

Browse Source 
* ux: updated alert design

* fixed bg-color for alerts

* more changes to alerts, index fixed
This commit is contained in:
Patrick O'Carroll 2017-09-12 08:01:44 +02:00 committed by Torkel Ödegaard
parent 057b8a6b2d
commit 90602942f5
10 changed files with 77 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/core/services/alert_srv.ts
View File

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

2
public/app/features/plugins/ds_edit_ctrl.ts
View File

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

12
public/app/features/plugins/partials/ds_edit.html
View File

@ -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>

12
public/sass/_variables.dark.scss
View File

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

19
public/sass/_variables.light.scss
View File

@ -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
// -------------------------

8
public/sass/base/_type.scss
View File

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

52
public/sass/components/_alerts.scss
View File

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

2
public/sass/components/_drop.scss
View File

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

2
public/sass/pages/_dashboard.scss
View File

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

9
public/views/index.html
View File

@ -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>