ux(): updated dashboard settings view

public/app/features/dashboard/partials/settings.html

@@ -16,60 +16,40 @@
 	</button>
 </div>
 
-<div class="tabbed-view-body" style="padding-bottom: 50px;">
+<div class="tabbed-view-body">
 	<div ng-if="editor.index == 0">
-		<div class="editor-row">
-			<div class="tight-form-section">
-				<h5>Dashboard info</h5>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 90px">
-							Title
-						</li>
-						<li>
-							<input type="text" class="input-large tight-form-input" ng-model='dashboard.title'></input>
-						</li>
-						<li class="tight-form-item">
-							Tags
-							<tip>Press enter to a add tag</tip>
-						</li>
-						<li>
-							<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
-							</bootstrap-tagsinput>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form last">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 90px">
-							Timezone
-						</li>
-						<li>
-							<select ng-model="dashboard.timezone" class='input-small tight-form-input' ng-options="f for f in ['browser','utc']"></select>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+
+		<h5 class="section-heading">Dashboard Detail</h5>
+		<div class="gf-form-group">
+			<div class="gf-form">
+				<label class="gf-form-label width-7">Title</label>
+				<input type="text" class="gf-form-input max-width-25" ng-model='dashboard.title'></input>
+			</div>
+			<div class="gf-form">
+				<label class="gf-form-label width-7">Tags<tip>Press enter to a add tag</tip></label>
+				<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
+				</bootstrap-tagsinput>
+			</div>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-7">Timezone</label>
+				<div class="gf-form-select-wrapper">
+					<select ng-model="dashboard.timezone" class='gf-form-input' ng-options="f for f in ['browser','utc']"></select>
 				</div>
 			</div>
 		</div>
 
-		<div class="editor-row">
-			<div class="tight-form-section">
-				<h5>Toggles</h5>
-				<div class="tight-form last">
-					<ul class="tight-form-list">
-						<li class="tight-form-item">
-							<editor-checkbox text="Editable" model="dashboard.editable"></editor-checkbox>
-						</li>
-						<li class="tight-form-item">
-							<editor-checkbox text="Hide Controls (CTRL+H)" model="dashboard.hideControls"></editor-checkbox>
-						</li>
-						<li class="tight-form-item last">
-							<editor-checkbox text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-checkbox>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+		<h5 class="section-heading">On/Off Toggles</h5>
+		<div class="gf-form-group">
+			<div class="gf-form-inline">
+				<div class="gf-form">
+					<editor-checkbox text="Editable" model="dashboard.editable"></editor-checkbox>
+				</div>
+				<div class="gf-form">
+					<editor-checkbox text="Hide Controls (CTRL+H)" model="dashboard.hideControls"></editor-checkbox>
+				</div>
+				<div class="gf-form">
+					<editor-checkbox text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-checkbox>
 				</div>
 			</div>
 		</div>
@@ -116,68 +96,68 @@
 		<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
 	</div>
 
-  <div ng-if="editor.index == 4">
-    <div class="row">
-      <h5>Dashboard info</h5>
-      <div class="pull-left tight-form">
-        <div class="tight-form">
-          <ul class="tight-form-list">
-            <li class="tight-form-item" style="width: 120px">
-              Last updated at:
-            </li>
-            <li class="tight-form-item" style="width: 180px">
-              {{formatDate(dashboardMeta.updated)}}
-            </li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
-        <div class="tight-form">
-          <ul class="tight-form-list">
-            <li class="tight-form-item" style="width: 120px">
-              Last updated by:
-            </li>
-            <li class="tight-form-item" style="width: 180px">
-              {{dashboardMeta.updatedBy}}
-            </li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
-        <div class="tight-form">
-          <ul class="tight-form-list">
-            <li class="tight-form-item" style="width: 120px">
-              Created at:
-            </li>
-            <li class="tight-form-item" style="width: 180px">
-              {{formatDate(dashboardMeta.created)}}
-            </li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
-        <div class="tight-form">
-          <ul class="tight-form-list">
-            <li class="tight-form-item" style="width: 120px">
-              Created by:
-            </li>
-            <li class="tight-form-item" style="width: 180px">
-              {{dashboardMeta.createdBy}}
-            </li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
-        <div class="tight-form">
-          <ul class="tight-form-list">
-            <li class="tight-form-item" style="width: 120px">
-              Current version:
-            </li>
-            <li class="tight-form-item" style="width: 180px">
-              {{dashboardMeta.version}}
-            </li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div ng-if="editor.index == 4">
+		<div class="row">
+			<h5>Dashboard info</h5>
+			<div class="pull-left tight-form">
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 120px">
+							Last updated at:
+						</li>
+						<li class="tight-form-item" style="width: 180px">
+							{{formatDate(dashboardMeta.updated)}}
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 120px">
+							Last updated by:
+						</li>
+						<li class="tight-form-item" style="width: 180px">
+							{{dashboardMeta.updatedBy}}
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 120px">
+							Created at:
+						</li>
+						<li class="tight-form-item" style="width: 180px">
+							{{formatDate(dashboardMeta.created)}}
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 120px">
+							Created by:
+						</li>
+						<li class="tight-form-item" style="width: 180px">
+							{{dashboardMeta.createdBy}}
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form">
+					<ul class="tight-form-list">
+						<li class="tight-form-item" style="width: 120px">
+							Current version:
+						</li>
+						<li class="tight-form-item" style="width: 180px">
+							{{dashboardMeta.version}}
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+			</div>
+		</div>
+	</div>
 
 </div>
 

public/sass/components/_tabbed_view.scss

@@ -3,7 +3,7 @@
   background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
   margin: -$dashboard-padding;
   margin-bottom: $spacer*2;
-  padding: $spacer*2;
+  padding: $spacer*3;
 }
 
 .tabbed-view-header {
@@ -39,7 +39,11 @@
 }
 
 .tabbed-view-body {
-  padding: 20px;
-  min-height: 150px;
+  padding: $spacer*2;
+  min-height: 250px;
 }
 
+.section-heading {
+  font-size: 1.1rem;
+  margin-bottom: 0.6rem;
+}

public/sass/components/_tabs.scss

@@ -44,15 +44,18 @@
 }
 
 .gf-tabs-link {
-  padding: ($spacer * 0.75) $spacer;
+  padding: 0.80rem 1rem 0.60rem 1rem;
   margin-right: $spacer/2;
   line-height: $line-height-base;
   border: 1px solid transparent;
-  @include border-radius(4px 4px 0 0);
+  position: relative;
+  top: 3px;
+
+  @include border-radius(2px 2px 0 0);
 
   &:hover,
   &:focus {
-    border-color: $divider-border-color;
+    border-color: #F9952B;
     color: $link-color;
   }
 
@@ -60,11 +63,9 @@
   &.active:hover,
   &.active:focus {
     @include border-radius(3px);
-    border: 1px solid $divider-border-color;
+    border: 1px solid #F9952B;
     background-color: transparent;
     border-bottom: 1px solid $panel-bg;
     color: $link-color;
-    position: relative;
-    top: 1px;
   }
 }