From 259d33082281bf5360e3f9f6b2ca777e2c5ae2a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 5 Mar 2015 18:01:41 +0100
Subject: [PATCH] Began work on modal css polish, #1554

---
 .../dashboard/partials/shareModal.html        |  3 +-
 src/app/partials/confirm_modal.html           | 58 +++++++++++++------
 src/css/less/forms.less                       |  2 +-
 src/css/less/grafana.less                     | 30 ++++++++++
 src/css/less/variables.dark.less              |  4 +-
 src/css/less/variables.light.less             |  2 +
 6 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/src/app/features/dashboard/partials/shareModal.html b/src/app/features/dashboard/partials/shareModal.html
index f1386f7728b..23bd179528a 100644
--- a/src/app/features/dashboard/partials/shareModal.html
+++ b/src/app/features/dashboard/partials/shareModal.html
@@ -17,6 +17,7 @@
 
 	<div class="gf-box-body">
 
+		<br>
 		<div class="gf-form">
 			<div class="gf-form-row">
 					<editor-checkbox text="Current time range" model="forCurrent" change="buildUrl()"></editor-checkbox>
@@ -43,7 +44,7 @@
 				</div>
 			<div>
 
-			<div class="editor-row" style="margin-top: 15px;" ng-if="toPanel">
+			<div class="editor-row" style="margin-top: 5px;" ng-if="toPanel">
 				<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image<a>
 			</div>
 		</div>
diff --git a/src/app/partials/confirm_modal.html b/src/app/partials/confirm_modal.html
index 1b1c3ea335e..0988187d661 100644
--- a/src/app/partials/confirm_modal.html
+++ b/src/app/partials/confirm_modal.html
@@ -1,23 +1,45 @@
-<div class="modal-body gf-box gf-box-no-margin">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
-			<i class="fa {{icon}}"></i>
-			{{title}}
-		</div>
+<div class="modal-body">
+
+	<a class="modal-close" ng-click="dismiss();">
+		<i class="fa fa-remove"></i>
+	</a>
+
+	<div class="confirm-modal-icon">
+		<i class="fa {{icon}}"></i>
 	</div>
 
-	<div class="gf-box-body" style="min-height: 0px;">
-		<p class="row-fluid text-center large">
-			{{text}}
-			<br>
-			<br>
-		</p>
-		<div class="row-fluid">
-		<span class="span4"></span>
-		<button type="button" class="btn btn-primary span2" ng-click="dismiss()">No</button>
-	  <button type="button" class="btn btn-danger span2" ng-click="onConfirm();dismiss();">Yes</button>
-		<span class="span4"></span>
-  </div>
+	<div class="confirm-modal-title">
+		{{title}}
+	</div>
+
+	<div class="confirm-modal-text">
+		{{text}}
+	</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="onConfirm();dismiss();">Save &amp; Overwrite</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>
 
diff --git a/src/css/less/forms.less b/src/css/less/forms.less
index 86825048c59..c75ae068ea9 100644
--- a/src/css/less/forms.less
+++ b/src/css/less/forms.less
@@ -13,7 +13,7 @@ input[type="checkbox"].cr1 {
 
 input[type="checkbox"]+.cr1 {
   display: inline-block;
-  height: 19px;
+  height: 20px;
   clear: none;
   text-indent: 2px;
   margin: 0;
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index f981201fa20..0984d8b5d20 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -257,5 +257,35 @@
 }
 
 .confirm-modal {
+  border: 1px solid @grafanaTargetFuncBackground;
   max-width: 500px;
+  background-color: @modalBackground;
+  text-align: center;
+
+  .modal-close {
+    float: right;
+    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-bottom: 35px;
+    button {
+      margin-right: 5px
+    }
+  }
 }
diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less
index 94d74c917b4..6aab758ad82 100644
--- a/src/css/less/variables.dark.less
+++ b/src/css/less/variables.dark.less
@@ -41,6 +41,8 @@
 @grafanaTargetFuncBackground: #333;
 @grafanaTargetFuncHightlight: #444;
 
+@modalBackground: @black;
+
 // Scaffolding
 // -------------------------
 @bodyBackground:        rgb(22,22,22);
@@ -71,6 +73,7 @@
 @headingsColor:         @white; // empty to use BS default, @textColor
 @inputText:             @black;
 
+
 // Component sizing
 // -------------------------
 // Based on 14px font-size and 20px line-height
@@ -178,7 +181,6 @@
 @zindexModalBackdrop:     1040;
 @zindexModal:             1050;
 
-
 // Sprite icons path
 // -------------------------
 @iconSpritePath:          "../img/glyphicons-halflings.png";
diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less
index fc63123a844..73564b5aa73 100644
--- a/src/css/less/variables.light.less
+++ b/src/css/less/variables.light.less
@@ -54,6 +54,8 @@
 @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
 @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
 
+@modalBackground: @white;
+
 // Scaffolding
 // -------------------------
 @bodyBackground:        #EAEAEA;