dashboard-edit-view -> gf-box and new box design

src/app/directives/dashEditLink.js

@@ -92,7 +92,7 @@ function (angular, $) {
             hideScrollbars(true);
             hideScrollbars(true);
 
 
             var src = "'" + payload.src + "'";
             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);
             elem.append(view);
             $compile(elem.contents())(editorScope);
             $compile(elem.contents())(editorScope);
           }
           }

src/app/panels/timepicker/editor.html

   <div class="editor-row">
   <div class="editor-row">
 		<div class="section">
 		<div class="section">
+			<div>
 			<div class="tight-form">
 			<div class="tight-form">
 				<ul class="tight-form-list">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 148px">
 					<li class="tight-form-item" style="width: 148px">
@@ -34,6 +35,7 @@
 				</ul>
 				</ul>
 				<div class="clearfix"></div>
 				<div class="clearfix"></div>
 			</div>
 			</div>
+			</div>
 
 
 			<p>
 			<p>
 			<br>
 			<br>

src/app/partials/dasheditor.html

-<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-model="editor.index" bs-tabs style="text-transform:capitalize;">
 		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
 		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
@@ -11,9 +7,13 @@
 		</div>
 		</div>
 	</div>
 	</div>
 
 
+	<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<i class="fa fa-remove"></i>
+	</button>
+
 </div>
 </div>
 
 
-<div class="dashboard-editor-body">
+<div class="gf-box-body">
 
 
 		<div ng-if="editor.index == 0">
 		<div ng-if="editor.index == 0">
 			<div class="editor-row">
 			<div class="editor-row">
@@ -93,7 +93,7 @@
 	<div class="clearfix"></div>
 	<div class="clearfix"></div>
 </div>
 </div>
 
 
-<div class="dashboard-editor-footer">
+<div class="gf-box-footer">
 	<div class="grafana-version-info" ng-show="editor.index === 0">
 	<div class="grafana-version-info" ng-show="editor.index === 0">
 		<span class="editor-option small">
 		<span class="editor-option small">
 			Grafana version: {{grafana.version}} &nbsp;&nbsp;
 			Grafana version: {{grafana.version}} &nbsp;&nbsp;
@@ -101,6 +101,4 @@
 		<span grafana-version-check>
 		<span grafana-version-check>
 		</span>
 		</span>
 	</div>
 	</div>
-
-	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
 </div>
 </div>

src/css/less/bootswatch.dark.less

@@ -212,7 +212,7 @@ div.subnav {
 
 
 .nav-tabs {
 .nav-tabs {
 
 
-	border-bottom: 1px solid @fullEditBorder;
+	border-bottom: none;
 
 
 	& > li > a {
 	& > li > a {
 		.border-radius(0);
 		.border-radius(0);

src/css/less/gfbox.less

+.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;
+  }
+}
+

src/css/less/grafana.less

@@ -10,6 +10,7 @@
 @import "singlestat.less";
 @import "singlestat.less";
 @import "tightform.less";
 @import "tightform.less";
 @import "sidemenu.less";
 @import "sidemenu.less";
+@import "gfbox.less";
 
 
 .row-control-inner {
 .row-control-inner {
   padding:0px;
   padding:0px;
@@ -294,45 +295,6 @@
   max-width: 400px;
   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 {
 .grafana-version-info {
   position: absolute;
   position: absolute;

src/css/less/sidemenu.less

@@ -96,11 +96,11 @@
 .sidemenu-logo-container {
 .sidemenu-logo-container {
   background: @grafanaPanelBackground;
   background: @grafanaPanelBackground;
   text-align: center;
   text-align: center;
-  border-bottom: 2px solid black;
+  border-bottom: 1px solid black;
   img {
   img {
     display: inline-block;
     display: inline-block;
     width: 102px;
     width: 102px;
-    padding: 6px 0px 7px 11px;
+    padding: 6px 0px 6px 11px;
   }
   }
 }
 }