Worked on styling for confirm dialogs, #1554

src/app/features/admin/adminUsersCtrl.js

@@ -20,8 +20,7 @@ function (angular) {
 
     $scope.deleteUser = function(user) {
       $scope.appEvent('confirm-modal', {
-        title: 'Delete user',
+        title: 'Do you want to delete ' + user.login + '?',
-        text: 'Are you sure you want to delete user: ' + user.login,
         onConfirm: function() {
           backendSrv.delete('/api/admin/users/' + user.id).then(function() {
             $scope.getUsers();

src/app/features/dashboard/dashboardNavCtrl.js

@@ -78,7 +78,8 @@ function (angular, _, moment) {
 
         $scope.appEvent('confirm-modal', {
           title: 'Someone else has updated this dashboard!',
-          text: "Do you STILL want to save?",
+          text: "Would you still like to save this dashboard?",
+          yesText: "Save & Overwrite",
           icon: "fa-warning",
           onConfirm: function() {
             $scope.saveDashboard({overwrite: true});
@@ -91,7 +92,8 @@ function (angular, _, moment) {
 
         $scope.appEvent('confirm-modal', {
           title: 'Another dashboard with the same name exists',
-          text: "Do you STILL want to save and ovewrite it?",
+          text: "Would you still like to save this dashboard?",
+          yesText: "Save & Overwrite",
           icon: "fa-warning",
           onConfirm: function() {
             $scope.saveDashboard({overwrite: true});
@@ -102,8 +104,7 @@ function (angular, _, moment) {
 
     $scope.deleteDashboard = function() {
       $scope.appEvent('confirm-modal', {
-        title: 'Delete dashboard',
+        title: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
-        text: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
         onConfirm: function() {
           $scope.deleteDashboardConfirmed();
         }

src/app/features/dashboard/rowCtrl.js

@@ -49,8 +49,7 @@ function (angular, app, _, config) {
 
     $scope.delete_row = function() {
       $scope.appEvent('confirm-modal', {
-        title: 'Delete row',
+        title: 'Are you sure you want to delete this row?',
-        text: 'Are you sure you want to delete this row?',
         onConfirm: function() {
           $scope.dashboard.rows = _.without($scope.dashboard.rows, $scope.row);
         }
@@ -82,8 +81,7 @@ function (angular, app, _, config) {
 
     $scope.remove_panel_from_row = function(row, panel) {
       $scope.appEvent('confirm-modal', {
-        title: 'Remove panel',
+        title: 'Are you sure you want to remove this panel?',
-        text: 'Are you sure you want to remove this panel?',
         onConfirm: function() {
           row.panels = _.without(row.panels, panel);
         }

src/app/partials/confirm_modal.html

@@ -17,29 +17,9 @@
 	</div>
 
 	<div class="confirm-modal-buttons">
-		<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
+		<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
-		<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">Save &amp; Overwrite</button>
+		<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">{{yesText}}</button>
 	</div>
 
-	<!-- <div class="gf&#45;box&#45;header"> -->
-	<!-- 	<div class="gf&#45;box&#45;title"> -->
-	<!-- 		<i class="fa {{icon}}"></i> -->
-	<!-- 		{{title}} -->
-	<!-- 	</div> -->
-	<!-- </div> -->
-  <!--  -->
-	<!-- <div class="gf&#45;box&#45;body" style="min&#45;height: 0px;"> -->
-	<!-- 	<p class="row&#45;fluid text&#45;center large"> -->
-	<!-- 		{{text}} -->
-	<!-- 		<br> -->
-	<!-- 		<br> -->
-	<!-- 	</p> -->
-	<!-- 	<div class="row&#45;fluid"> -->
-	<!-- 	<span class="span4"></span> -->
-	<!-- 	<button type="button" class="btn btn&#45;primary span2" ng&#45;click="dismiss()">No</button> -->
-	<!--   <button type="button" class="btn btn&#45;danger span2" ng&#45;click="onConfirm();dismiss();">Yes</button> -->
-	<!-- 	<span class="span4"></span> -->
-  <!-- </div> -->
-
 </div>
 

src/app/partials/unsaved-changes.html

@@ -1,20 +1,22 @@
-<div class="modal-body gf-box gf-box-no-margin">
+<div class="modal-body">
-	<div class="gf-box-header text-center">
+
-		<span class="gf-box-title">
+	<a class="modal-close" ng-click="dismiss();">
-			<i class="fa fa-exclamation"></i>
+		<i class="fa fa-remove"></i>
-			Unsaved changes
+	</a>
-		</span>
+
-		<button class="gf-box-header-close-btn" ng-click="dismiss();">
+	<div class="confirm-modal-icon">
-			<i class="fa fa-remove"></i>
+		<i class="fa fa-exclamation"></i>
-		</button>
 	</div>
 
-	<div class="gf-box-body" style="min-height: 0;">
+	<div class="confirm-modal-title">
-		<div class="row-fluid text-center">
+		Unsaved changes
-			<button type="button" class="btn btn-success span4" ng-click="save();dismiss();">Save</button>
-			<button type="button" class="btn btn-danger span4" ng-click="ignore();dismiss();">Ignore</button>
-			<button type="button" class="btn btn-inverse span4" ng-click="dismiss()">Cancel</button>
-		</div>
 	</div>
+
+	<div class="confirm-modal-buttons">
+		<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
+		<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">Ignore</button>
+		<button type="button" class="btn btn-success" ng-click="save();dismiss();">Save</button>
+	</div>
+
 </div>
 

src/app/services/alertSrv.js

@@ -65,6 +65,8 @@ function (angular, _) {
       scope.text = payload.text;
       scope.onConfirm = payload.onConfirm;
       scope.icon = payload.icon || "fa-check";
+      scope.yesText = payload.yesText || "Yes";
+      scope.noText = payload.noText || "Cancel";
 
       var confirmModal = $modal({
         template: './app/partials/confirm_modal.html',

src/css/less/grafana.less

@@ -259,7 +259,7 @@
 .confirm-modal {
   border: 1px solid @grafanaTargetFuncBackground;
   max-width: 500px;
-  background-color: @modalBackground;
+  background-color: @grafanaPanelBackground;
   text-align: center;
 
   .modal-close {
@@ -267,22 +267,26 @@
     font-size: 140%;
     padding: 10px;
   }
+
   .confirm-modal-icon {
     padding-top: 41px;
     font-size: 280%;
     color: @green;
     padding-bottom: 20px;
   }
+
   .confirm-modal-title {
     font-size: 18px;
     color: @linkColor;
     margin-bottom: 15px;
   }
+
   .confirm-modal-text {
     font-size: 16px;
-    margin-bottom: 25px;
   }
+
   .confirm-modal-buttons {
+    margin-top: 35px;
     margin-bottom: 35px;
     button {
       margin-right: 5px

src/css/less/variables.light.less

@@ -54,7 +54,7 @@
 @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
 @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
 
-@modalBackground: @white;
+@modalBackground: @bodyBackground;
 
 // Scaffolding
 // -------------------------