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,12 +39,27 @@
 			</div>
 		</div>
 
-		<h5 class="section-heading">On/Off Toggles</h5>
+    <div class="section">
+      <h5 class="section-heading">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>
+        <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>

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

@@ -31,19 +31,19 @@
 					<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>
+					</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>
-					</div>
 					<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>

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

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