ux(): dashboard settings form polish, added on hover tooltip for checkbox directive

public/app/core/components/info_popover.ts

@@ -18,7 +18,7 @@ export function infoPopover() {
 
       var offset = attrs.offset || '0 -10px';
       var position = attrs.position || 'right middle';
-      var classes = 'drop-help';
+      var classes = 'drop-help drop-hide-out-of-bounds';
       if (attrs.wide) {
         classes += ' drop-wide';
       }

public/app/core/components/switch.ts

@@ -4,6 +4,7 @@ import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';
 import coreModule from 'app/core/core_module';
+import Drop from 'tether-drop';
 
 var template = `
 <label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
@@ -44,10 +45,27 @@ export function switchDirective() {
       checked: "=",
       label: "@",
       labelClass: "@",
+      tooltip: "@",
       switchClass: "@",
       onChange: "&",
     },
     template: template,
+    link: (scope, elem) => {
+      if (scope.ctrl.tooltip) {
+        var drop = new Drop({
+          target: elem[0],
+          content: scope.ctrl.tooltip,
+          position: "right middle",
+          classes: 'drop-help',
+          openOn: 'hover',
+          hoverOpenDelay: 400,
+        });
+
+        scope.$on('$destroy', function() {
+          drop.destroy();
+        });
+      }
+    }
   };
 }
 

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

@@ -19,10 +19,11 @@
 <div class="tabbed-view-body">
 	<div ng-if="editor.index == 0">
 
-		<div class="gf-form-group">
+		<div class="gf-form-group section">
+      <h5 class="section-heading">Details</h5>
 			<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>
+				<input type="text" class="gf-form-input 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>
@@ -38,74 +39,89 @@
 			</div>
 		</div>
 
-		<h5 class="section-heading">On/Off Toggles</h5>
-		<div class="gf-form-group">
-			<div class="gf-form-inline">
-				<gf-form-switch class="gf-form" label="Editable" checked="dashboard.editable" switch-class="max-width-6"></gf-form-switch>
-				<gf-form-switch class="gf-form" label="Hide Controls (CTRL+H)" checked="dashboard.hideControls" switch-class="max-width-6"></gf-form-switch>
-				<gf-form-switch class="gf-form" label="Shared Crosshair (CTRL+O)" checked="dashboard.sharedCrosshair" switch-class="max-width-6"></gf-form-switch>
-			</div>
-		</div>
-	</div>
+    <div class="section">
+      <h5 class="section-heading">Toggles</h5>
+      <div class="gf-form-group">
+        <gf-form-switch class="gf-form"
+                        label="Editable"
+                        tooltip="Uncheck, then save and reload to disable all dashboard editing"
+                        checked="dashboard.editable"
+                        label-class="width-10">
+        </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Hide Controls"
+                        tooltip="Hide row controls. Shortcut: CTRL+H"
+                        checked="dashboard.hideControls"
+                        label-class="width-10">
+        </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Shared Crosshair"
+                        tooltip="Shared Crosshair line on all graphs. Shortcut: CTRL+O"
+                        checked="dashboard.sharedCrosshair"
+                        label-class="width-10">
+        </gf-form-switch>
+      </div>
+    </div>
+  </div>
 
-	<div ng-if="editor.index == 1">
-		<h5 class="section-heading">Rows settings</h5>
+  <div ng-if="editor.index == 1">
+    <h5 class="section-heading">Rows settings</h5>
 
-		<div class="gf-form-group">
-			<div class="gf-form-inline" ng-repeat="row in dashboard.rows">
-				<div class="gf-form">
-					<span class="gf-form-label">Title</span>
-					<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
-				</div>
-				<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
+    <div class="gf-form-group">
+      <div class="gf-form-inline" ng-repeat="row in dashboard.rows">
+        <div class="gf-form">
+          <span class="gf-form-label">Title</span>
+          <input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
+        </div>
+        <gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
 
-				<div class="gf-form">
-					<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
-						<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
-					</button>
-					<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
-						<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
-					</button>
-					<button class="btn btn-inverse gf-form-btn" click="dashboard.rows = _.without(dashboard.rows,row)">
-						<i class="fa fa-trash"></i>
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
+        <div class="gf-form">
+          <button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
+            <i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
+          </button>
+          <button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
+            <i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
+          </button>
+          <button class="btn btn-inverse gf-form-btn" click="dashboard.rows = _.without(dashboard.rows,row)">
+            <i class="fa fa-trash"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<div ng-if="editor.index == 2">
-		<dash-links-editor></dash-links-editor>
-	</div>
+  <div ng-if="editor.index == 2">
+    <dash-links-editor></dash-links-editor>
+  </div>
 
-	<div ng-if="editor.index == 3">
-		<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
-	</div>
+  <div ng-if="editor.index == 3">
+    <gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
+  </div>
 
-	<div ng-if="editor.index == 4">
-		<h5 class="section-heading">Dashboard info</h5>
-		<div class="gf-form-group">
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Last updated at:</span>
-				<span class="gf-form-label width-18">{{formatDate(dashboardMeta.updated)}}</span>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Last updated by:</span>
-				<span class="gf-form-label width-18">{{dashboardMeta.updatedBy}}&nbsp;</span>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Created at:</span>
-				<span class="gf-form-label width-18">{{formatDate(dashboardMeta.created)}}&nbsp;</span>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Created by:</span>
-				<span class="gf-form-label width-18">{{dashboardMeta.createdBy}}&nbsp;</span>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Current version:</span>
-				<span class="gf-form-label width-18">{{dashboardMeta.version}}&nbsp;</span>
-			</div>
-		</div>
-	</div>
+  <div ng-if="editor.index == 4">
+    <h5 class="section-heading">Dashboard info</h5>
+    <div class="gf-form-group">
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Last updated at:</span>
+        <span class="gf-form-label width-18">{{formatDate(dashboardMeta.updated)}}</span>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Last updated by:</span>
+        <span class="gf-form-label width-18">{{dashboardMeta.updatedBy}}&nbsp;</span>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Created at:</span>
+        <span class="gf-form-label width-18">{{formatDate(dashboardMeta.created)}}&nbsp;</span>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Created by:</span>
+        <span class="gf-form-label width-18">{{dashboardMeta.createdBy}}&nbsp;</span>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Current version:</span>
+        <span class="gf-form-label width-18">{{dashboardMeta.version}}&nbsp;</span>
+      </div>
+    </div>
+  </div>
 </div>
 

public/app/features/plugins/partials/ds_edit.html

@@ -31,26 +31,26 @@
 					<div class="gf-form">
 						<span class="gf-form-label width-7">Name</span>
 						<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
-						<info-popover offset="0px -130px">
-							The name is used when you select the data source in panels.
-							The <code>Default</code> data source is preselected in new
-							panels.
-						</info-popover>
 					</div>
+					<info-popover offset="0px -130px">
+						The name is used when you select the data source in panels.
+						The <code>Default</code> data source is preselected in new
+						panels.
+					</info-popover>
 					<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
 				</div>
 
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Type</span>
-					<div class="gf-form-select-wrapper">
-						<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
+					<div class="gf-form-select-wrapper max-width-21">
+						<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
 					</div>
 				</div>
 			</div>
 
 			<rebuild-on-change property="ctrl.datasourceMeta.id">
-				<plugin-component type="datasource-config-ctrl">
-				</plugin-component>
+			<plugin-component type="datasource-config-ctrl">
+			</plugin-component>
 			</rebuild-on-change>
 
 			<div ng-if="ctrl.testing" style="margin-top: 25px">

public/sass/components/_drop.scss

@@ -15,11 +15,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
     display: block;
   }
 
-  &.drop-open.drop-help.drop-out-of-bounds,
-  &.drop-open-transitionend.drop-help.drop-out-of-bounds {
-    display: none;
-  }
-}
+ }
 
 .drop-element, .drop-element * {
   box-sizing: border-box;
@@ -38,6 +34,12 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
   }
 }
 
+.drop-hide-out-of-bounds {
+  &.drop-open.drop-help.drop-out-of-bounds,
+  &.drop-open-transitionend.drop-help.drop-out-of-bounds {
+    display: none;
+  }
+}
 @include drop-theme("help", $popover-help-bg, $popover-help-color);
 @include drop-theme("popover", $popover-bg, $popover-color);
 

public/sass/components/_old_stuff.scss

@@ -1,9 +1,9 @@
 
-div.editor-row {
+.editor-row {
   vertical-align: top;
 }
 
-div.editor-row div.section {
+.section {
   margin-right: 20px;
   vertical-align: top;
   display: inline-block;