ux(): created new gf-form-switch directive clean/refactoring

public/app/core/components/switch.ts

@@ -0,0 +1,47 @@
+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+
+var template = `
+<label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
+<div class="gf-form-switch {{ctrl.switchClass}}" >
+  <input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
+  <label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
+</div>
+`;
+
+export class SwitchCtrl {
+  onChange: any;
+
+  internalOnChange() {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.onChange();
+        resolve();
+      });
+    });
+  }
+
+}
+
+export function switchDirective() {
+  return {
+    restrict: 'E',
+    controller: SwitchCtrl,
+    controllerAs: 'ctrl',
+    bindToController: true,
+    scope: {
+      checked: "=",
+      label: "@",
+      labelClass: "@",
+      switchClass: "@",
+      onChange: "&",
+    },
+    template: template,
+  };
+}
+
+coreModule.directive('gfFormSwitch', switchDirective);

public/app/core/core.ts

@@ -29,6 +29,7 @@ import {colorPicker} from './components/colorpicker';
 import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import {layoutSelector} from './components/layout_selector/layout_selector';
+import {switchDirective} from './components/switch';
 import 'app/core/controllers/all';
 import 'app/core/services/all';
 import 'app/core/routes/routes';
@@ -44,5 +45,6 @@ export {
   searchDirective,
   colorPicker,
   layoutSelector,
+  switchDirective,
   infoPopover
 };

public/app/features/panel/partials/panelTime.html

@@ -23,15 +23,16 @@
 			ng-change="ctrl.refresh()" ng-model-onblur></input>
 	</div>
 
-	<div class="gf-form">
-		<span class="gf-form-label">
-			<i class="fa fa-clock-o"></i>
-		</span>
-		<label class="gf-form-label width-12">Hide time override info</label>
-		<div class="gf-form-switch max-width-6">
-			<input id="cmn-toggle-122" type="checkbox" ng-model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()">
-			<label for="cmn-toggle-122" data-on="Yes" data-off="No"></label>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label">
+				<i class="fa fa-clock-o"></i>
+			</span>
 		</div>
+		<gf-form-switch class="gf-form max-width-30"
+			label="Hide time override info" label-class="width-12"
+			checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.render()">
+		</gf-form-switch>
 	</div>
 </div>
 

public/app/plugins/panel/graph/styleEditor.html

@@ -1,27 +1,18 @@
 <div class="editor-row gf-form-group">
   <div class="section">
     <h5 class="section-heading">Draw Modes</h5>
-    <div class="gf-form">
-      <label for="cmn-toggle-3" class="gf-form-label width-5">Bars</label>
-			<div class="gf-form-switch">
-				<input id="cmn-toggle-3" type="checkbox" ng-model="ctrl.panel.bars">
-				<label for="cmn-toggle-3" data-on="Yes" data-off="No"></label>
-			</div>
-    </div>
-    <div class="gf-form">
-      <label for="cmn-toggle-2" class="gf-form-label width-5">Lines</label>
-			<div class="gf-form-switch">
-				<input id="cmn-toggle-2" type="checkbox" ng-model="ctrl.panel.lines">
-				<label for="cmn-toggle-2" data-on="Yes" data-off="No"></label>
-			</div>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label width-5">Points</label>
-			<div class="gf-form-switch">
-				<input id="cmn-toggle-1" type="checkbox" ng-model="ctrl.panel.points">
-				<label for="cmn-toggle-1" data-on="Yes" data-off="No"></label>
-			</div>
-		</div>
+		<gf-form-switch class="gf-form"
+			label="Bars" label-class="width-5"
+			checked="ctrl.panel.bars" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="Lines" label-class="width-5"
+			checked="ctrl.panel.lines" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="Points" label-class="width-5"
+			checked="ctrl.panel.points" on-change="ctrl.render()">
+		</gf-form-switch>
 	</div>
 	<div class="section">
 		<h5 class="section-heading">Mode Options</h5>
@@ -43,13 +34,10 @@
 				<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
 			</div>
 		</div>
-		<div class="gf-form" ng-show="ctrl.panel.lines">
-			<label class="gf-form-label width-8">Staircase</label>
-			<div class="gf-form-switch max-width-5">
-				<input id="cmn-toggle-122" type="checkbox" ng-model="ctrl.panel.steppedLine">
-				<label for="cmn-toggle-122" data-on="Yes" data-off="No"></label>
-			</div>
-		</div>
+		<gf-form-switch class="gf-form"
+			label="Staircase" label-class="width-8"
+			checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
+		</gf-form-switch>
 	</div>
 	<div class="section">
 		<h5 class="section-heading">Misc options</h5>
@@ -75,20 +63,14 @@
 
 	<div class="section">
 		<h5 class="section-heading">Multiple Series</h5>
-		<div class="gf-form">
-			<label class="gf-form-label width-7">Stack</label>
-			<div class="gf-form-switch">
-				<input id="cmn-toggle-7" type="checkbox" ng-model="ctrl.panel.stack">
-				<label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
-			</div>
-		</div>
-		<div class="gf-form" ng-show="ctrl.panel.stack">
-			<label class="gf-form-label width-7">Percent</label>
-			<div class="gf-form-switch">
-				<input id="cmn-toggle-8" type="checkbox" ng-model="ctrl.panel.percent">
-				<label for="cmn-toggle-8" data-on="Yes" data-off="No"></label>
-			</div>
-		</div>
+		<gf-form-switch class="gf-form"
+			label="Stack" label-class="width-7"
+			checked="ctrl.panel.stack" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form" ng-show="ctrl.panel.stack"
+			label="Percent" label-class="width-7"
+			checked="ctrl.panel.percent" on-change="ctrl.render()">
+		</gf-form-switch>
 		<div class="gf-form" ng-show="ctrl.panel.stack">
 			<label class="gf-form-label width-7">Tooltip value</label>
 			<div class="gf-form-select-wrapper max-width-8">

public/sass/components/_gf-form.scss

@@ -1,9 +1,7 @@
 $gf-form-margin: 0.25rem;
-$gf-form-label-margin: 0.25rem;
 
 .gf-form {
   margin-bottom: $gf-form-margin;
-  margin-right: $gf-form-margin;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -38,20 +36,20 @@ $gf-form-label-margin: 0.25rem;
 
 .gf-form-label {
   padding: $input-padding-y $input-padding-x;
+  margin-right: $gf-form-margin;
   line-height: $input-line-height;
   flex-shrink: 0;
 
   background-color: $input-label-bg;
   display: block;
   font-size: $font-size-sm;
-  margin-right: $gf-form-label-margin;
 
   border: $input-btn-border-width solid transparent;
   @include border-radius($label-border-radius-sm);
 }
 
 .gf-form-switch-wrapper {
-  margin-right: $gf-form-label-margin;
+  margin-right: $gf-form-margin;
 }
 
 .gf-form-checkbox {
@@ -71,6 +69,7 @@ $gf-form-label-margin: 0.25rem;
   display: block;
   width: 100%;
   padding: $input-padding-y $input-padding-x;
+  margin-right: $gf-form-margin;
   font-size: $font-size-base;
   line-height: $input-line-height;
   color: $input-color;
@@ -113,6 +112,7 @@ $gf-form-label-margin: 0.25rem;
 }
 
 .gf-form-select-wrapper {
+  margin-right: $gf-form-margin;
   position: relative;
   background-color: $input-bg;
 
@@ -143,10 +143,6 @@ $gf-form-label-margin: 0.25rem;
   }
 }
 
-.gf-form-select-wrapper + .gf-form-select-wrapper {
-  margin-left: $gf-form-label-margin;
-}
-
 .gf-form-btn {
   padding: $input-padding-y $input-padding-x;
   line-height: $input-line-height;