From 59ade61687724de75a6e385616734425cb388321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 30 Jan 2015 12:57:14 +0100
Subject: [PATCH] dashboard-edit-view -> gf-box and new box design

---
 src/app/directives/dashEditLink.js    |  2 +-
 src/app/panels/timepicker/editor.html |  2 +
 src/app/partials/dasheditor.html      | 16 ++++----
 src/css/less/bootswatch.dark.less     |  2 +-
 src/css/less/gfbox.less               | 59 +++++++++++++++++++++++++++
 src/css/less/grafana.less             | 40 +-----------------
 src/css/less/sidemenu.less            |  4 +-
 7 files changed, 73 insertions(+), 52 deletions(-)
 create mode 100644 src/css/less/gfbox.less

diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js
index b8f3cae2da3..b17c73bc14d 100644
--- a/src/app/directives/dashEditLink.js
+++ b/src/app/directives/dashEditLink.js
@@ -92,7 +92,7 @@ function (angular, $) {
             hideScrollbars(true);
 
             var src = "'" + payload.src + "'";
-            var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
+            var view = $('<div class="gf-box" ng-include="' + src + '"></div>');
             elem.append(view);
             $compile(elem.contents())(editorScope);
           }
diff --git a/src/app/panels/timepicker/editor.html b/src/app/panels/timepicker/editor.html
index 8771bcadb20..33a5fbfaf00 100644
--- a/src/app/panels/timepicker/editor.html
+++ b/src/app/panels/timepicker/editor.html
@@ -1,5 +1,6 @@
   <div class="editor-row">
 		<div class="section">
+			<div>
 			<div class="tight-form">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 148px">
@@ -34,6 +35,7 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
+			</div>
 
 			<p>
 			<br>
diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html
index fd94432ba5f..21b76cce8e6 100644
--- a/src/app/partials/dasheditor.html
+++ b/src/app/partials/dasheditor.html
@@ -1,8 +1,4 @@
-<div class="dashboard-editor-header">
-	<div class="dashboard-editor-title">
-		<i class="fa fa-cogs"></i>
-		Dashboard settings
-	</div>
+<div class="gf-box-header">
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
 		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
@@ -11,9 +7,13 @@
 		</div>
 	</div>
 
+	<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<i class="fa fa-remove"></i>
+	</button>
+
 </div>
 
-<div class="dashboard-editor-body">
+<div class="gf-box-body">
 
 		<div ng-if="editor.index == 0">
 			<div class="editor-row">
@@ -93,7 +93,7 @@
 	<div class="clearfix"></div>
 </div>
 
-<div class="dashboard-editor-footer">
+<div class="gf-box-footer">
 	<div class="grafana-version-info" ng-show="editor.index === 0">
 		<span class="editor-option small">
 			Grafana version: {{grafana.version}} &nbsp;&nbsp;
@@ -101,6 +101,4 @@
 		<span grafana-version-check>
 		</span>
 	</div>
-
-	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
 </div>
diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less
index a1b06114d38..dd8b24b2176 100644
--- a/src/css/less/bootswatch.dark.less
+++ b/src/css/less/bootswatch.dark.less
@@ -212,7 +212,7 @@ div.subnav {
 
 .nav-tabs {
 
-	border-bottom: 1px solid @fullEditBorder;
+	border-bottom: none;
 
 	& > li > a {
 		.border-radius(0);
diff --git a/src/css/less/gfbox.less b/src/css/less/gfbox.less
new file mode 100644
index 00000000000..cd42a5573b9
--- /dev/null
+++ b/src/css/less/gfbox.less
@@ -0,0 +1,59 @@
+.gf-box {
+  margin: 30px;
+  background-color: @grafanaPanelBackground;
+  position: relative;
+  border: 1px solid @grafanaTargetFuncBackground;
+  border-top: none;
+}
+
+.gf-box-header-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  padding: 8px;
+  font-size: 120%;
+  color: @textColor;
+  &:hover {
+    color: @white;
+  }
+}
+
+.gf-box-body {
+  padding: 20px;
+  min-height: 150px;
+}
+
+.gf-box-footer {
+  overflow: hidden;
+}
+
+.gf-box-header {
+  overflow: hidden;
+  background-color: @grafanaTargetBackground;
+  border-top: 1px solid @grafanaTargetFuncBackground;
+  border-bottom: 1px solid @grafanaTargetFuncBackground;
+  .tabs {
+    float: left;
+  }
+  .nav {
+    margin: 0;
+  }
+}
+
+.gf-box-title {
+  border-bottom: 1px solid @fullEditBorder;
+  padding-right: 20px;
+  float: left;
+  color: @linkColor;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 38px;
+  margin: 0;
+  .fa {
+    padding: 0 8px 0 5px;
+    color: @textColor;
+  }
+}
+
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index e01b56a96e9..c53b71df775 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -10,6 +10,7 @@
 @import "singlestat.less";
 @import "tightform.less";
 @import "sidemenu.less";
+@import "gfbox.less";
 
 .row-control-inner {
   padding:0px;
@@ -294,45 +295,6 @@
   max-width: 400px;
 }
 
-.dashboard-edit-view {
-  padding: 20px;
-  background-color: @grafanaPanelBackground;
-  position: relative;
-}
-
-.dashboard-editor-body {
-  padding: 20px 10px;
-  min-height: 100px;
-}
-
-.dashboard-editor-footer {
-  overflow: hidden;
-}
-
-.dashboard-editor-header {
-  overflow: hidden;
-  .tabs {
-    float: left;
-  }
-  .nav {
-    margin: 0;
-  }
-}
-
-.dashboard-editor-title {
-  border-bottom: 1px solid @fullEditBorder;
-  padding-right: 20px;
-  float: left;
-  color: @linkColor;
-  font-size: 20px;
-  font-weight: normal;
-  line-height: 38px;
-  margin: 0;
-  .fa {
-    padding: 0 8px 0 5px;
-    color: @textColor;
-  }
-}
 
 .grafana-version-info {
   position: absolute;
diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less
index 2634c431398..5d8d28e3b77 100644
--- a/src/css/less/sidemenu.less
+++ b/src/css/less/sidemenu.less
@@ -96,11 +96,11 @@
 .sidemenu-logo-container {
   background: @grafanaPanelBackground;
   text-align: center;
-  border-bottom: 2px solid black;
+  border-bottom: 1px solid black;
   img {
     display: inline-block;
     width: 102px;
-    padding: 6px 0px 7px 11px;
+    padding: 6px 0px 6px 11px;
   }
 }