Small improvements to dashboard alerts, less intrusive, do not push down page anymore, Closes #822

src/app/controllers/dashboardNavCtrl.js

@@ -78,7 +78,7 @@ function (angular, _, moment, config, store) {
       var clone = angular.copy($scope.dashboard);
       $scope.db.saveDashboard(clone)
         .then(function(result) {
-          alertSrv.set('Dashboard Saved', 'Dashboard has been saved as "' + result.title + '"','success', 5000);
+          alertSrv.set('Dashboard Saved', 'Saved as "' + result.title + '"','success', 3000);
 
           if (result.url !== $location.path()) {
             $location.search({});
@@ -88,7 +88,7 @@ function (angular, _, moment, config, store) {
           $rootScope.$emit('dashboard-saved', $scope.dashboard);
 
         }, function(err) {
-          alertSrv.set('Save failed', err, 'error',5000);
+          alertSrv.set('Save failed', err, 'error', 5000);
         });
     };
 

src/css/less/bootswatch.light.less

@@ -59,6 +59,7 @@ a.text-success:hover { color: darken(@green, 10%); }
 	}
 
 	.brand {
+		padding: 0px 15px;
 
 		&:hover {
 			color: @navbarLinkColorHover;
@@ -461,7 +462,6 @@ legend {
 // -----------------------------------------------------
 
 .alert {
-	.border-radius(0);
 	text-shadow: none;
 
 	&-heading, h1, h2, h3, h4, h5, h6 {

src/css/less/overrides.less

@@ -317,13 +317,38 @@ div.flot-text {
   color: @textColor !important;
 }
 
-.dashboard-notice {
+.page-alert-list {
   z-index:8000;
-  margin-left:0px;
-  padding:3px 0px 3px 0px;
-  width:100%;
-  padding-left:20px;
-  color: @white;
+  min-width: 300px;
+  max-width: 300px;
+  position: fixed;
+  right: 20px;
+  top: 56px;
+
+  .alert {
+    color: @white;
+    padding-bottom: 13px;
+    position: relative;
+  }
+
+  .alert-close {
+    position: absolute;
+    top: -4px;
+    right: -2px;
+    width: 19px;
+    height: 19px;
+    padding: 0;
+    background: @grayLighter;
+    border-radius: 50%;
+    border: none;
+    font-size: 1.1rem;
+    color: @grayDarker;
+  }
+
+  .alert-title {
+    font-weight: bold;
+    padding-bottom: 2px;
+  }
 }
 
 

src/index.html

@@ -24,12 +24,17 @@
 
     <link rel="stylesheet" href="css/grafana.light.min.css" ng-if="grafana.style === 'light'">
 
-    <div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} dashboard-notice" ng-show="$last">
-      <button type="button" class="close" ng-click="dashAlerts.clear(alert)" style="padding-right:50px">&times;</button>
-      <strong>{{alert.title}}</strong> <span ng-bind-html='alert.text'></span> <div style="padding-right:10px" class='pull-right small'> {{$index + 1}} alert(s) </div>
-    </div>
+		<div class="page-alert-list">
+			<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
+				<button type="button" class="alert-close" ng-click="dashAlerts.clear(alert)">
+					<i class="icon-remove-sign"></i>
+				</button>
+				<div class="alert-title">{{alert.title}}</div>
+				<div ng-bind-html='alert.text'></div>
+			</div>
+		</div>
 
-    <div ng-view></div>
+		<div ng-view></div>
 
-  </body>
+	</body>
 </html>