From fc983f97514bc451b976157c1107b375a3a36338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 21 Mar 2016 14:08:18 +0100
Subject: [PATCH] ux(): checkbox v2 tweaks

---
 public/app/features/panel/partials/panelTime.html | 10 +++++++---
 public/app/plugins/panel/graph/styleEditor.html   | 15 +++++++++------
 public/sass/components/_switch.scss               |  6 ++++--
 public/sass/utils/_widths.scss                    |  4 ++--
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/public/app/features/panel/partials/panelTime.html b/public/app/features/panel/partials/panelTime.html
index 7fd398a9282..77a554faa86 100644
--- a/public/app/features/panel/partials/panelTime.html
+++ b/public/app/features/panel/partials/panelTime.html
@@ -9,7 +9,7 @@
 
 		<input type="text" class="gf-form-input max-width-8" placeholder="1h"
 			empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
-			ng-change="ctrl.refresh()" ng-model-onblur>
+			ng-change="ctrl.refresh()" ng-model-onblur></input>
 	</div>
 
 	<div class="gf-form">
@@ -20,14 +20,18 @@
 		<span class="gf-form-label width-6">Amount</span>
 		<input type="text" class="gf-form-input max-width-8" placeholder="1h"
 			empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
-			ng-change="ctrl.refresh()" ng-model-onblur>
+			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>
-		<editor-checkbox text="Hide time override info" model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()"></editor-checkbox>
+		<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>
 	</div>
 </div>
 
diff --git a/public/app/plugins/panel/graph/styleEditor.html b/public/app/plugins/panel/graph/styleEditor.html
index 395d393c21a..f1079341f6d 100644
--- a/public/app/plugins/panel/graph/styleEditor.html
+++ b/public/app/plugins/panel/graph/styleEditor.html
@@ -2,14 +2,14 @@
   <div class="section">
     <h5 class="section-heading">Draw Modes</h5>
     <div class="gf-form">
-      <label class="gf-form-label width-5">Bars</label>
+      <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 class="gf-form-label width-5">Lines</label>
+      <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>
@@ -27,25 +27,28 @@
 		<h5 class="section-heading">Mode Options</h5>
 		<div class="gf-form" ng-show="ctrl.panel.lines">
 			<label class="gf-form-label width-8">Fill</label>
-			<div class="gf-form-select-wrapper">
+			<div class="gf-form-select-wrapper max-width-5">
 				<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,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">Line Width</label>
-			<div class="gf-form-select-wrapper">
+			<div class="gf-form-select-wrapper max-width-5">
 				<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,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.points">
 			<label class="gf-form-label width-8">Point Radius</label>
-			<div class="gf-form-select-wrapper">
+			<div class="gf-form-select-wrapper max-width-5">
 				<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>
-			<editor-checkbox text="" model="ctrl.panel.steppedLine" change="ctrl.render()"></editor-checkbox>
+			<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>
 	</div>
 	<div class="section">
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index b65639a5cc1..74184a4fcde 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -8,6 +8,9 @@ $switch-height: 1.5rem;
 
 .gf-form-switch {
   position: relative;
+  max-width: 4.5rem;
+  flex-grow: 1;
+  min-width: 4.0rem;
 
   input {
     position: absolute;
@@ -22,7 +25,7 @@ $switch-height: 1.5rem;
     cursor: pointer;
     outline: none;
     user-select: none;
-    width: 5rem;
+    width: 100%;
     height: 2.65rem;
     background-color: $page-bg;
   }
@@ -35,7 +38,6 @@ $switch-height: 1.5rem;
     bottom: 0;
     right: 0;
     color: #fff;
-    font-family: "Open Sans";
     font-size: $font-size-sm;
     text-align: center;
     line-height: 2.6rem;
diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss
index bd6fc78ef90..b4bdbdb6ccc 100644
--- a/public/sass/utils/_widths.scss
+++ b/public/sass/utils/_widths.scss
@@ -6,13 +6,13 @@
 // widths
 @for $i from 1 through 30 {
   .width-#{$i} {
-    width: ($spacer * $i) - $gf-form-margin;
+    width: ($spacer * $i) - $gf-form-margin !important;
   }
 }
 
 @for $i from 1 through 30 {
   .max-width-#{$i} {
-    max-width: ($spacer * $i) - $gf-form-margin;
+    max-width: ($spacer * $i) - $gf-form-margin !important;
     flex-grow: 1;
   }
 }