From f44e634da43f0be024f8ebe6756f11ab442d2abc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 20 Nov 2018 09:39:56 +0100
Subject: [PATCH] switch slider changes

---
 public/app/core/components/switch.ts          | 12 ++-
 .../plugins/partials/ds_http_settings.html    | 16 ++--
 public/sass/components/_switch.scss           | 85 +++++++++++--------
 3 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index 4d3477006ac..4a1d3ff804f 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -1,7 +1,7 @@
 import coreModule from 'app/core/core_module';
 
 const template = `
-<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
   <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
     {{ctrl.label}}
     <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
@@ -16,8 +16,14 @@ const template = `
 `;
 
 const checkboxTemplate = `
-<label for="check-{{ctrl.id}}" class="gf-form-check-container">
-  <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
+   <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
+    {{ctrl.label}}
+    <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
+      {{ctrl.tooltip}}
+    </info-popover>
+  </div>
+  <div class="gf-form-checkbox {{ctrl.switchClass}}" ng-if="ctrl.show">
     <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
     <span class="gf-form-switch__checkbox"></span>
   </div>
diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html
index 17aedd48afd..521e2d3cdc6 100644
--- a/public/app/features/plugins/partials/ds_http_settings.html
+++ b/public/app/features/plugins/partials/ds_http_settings.html
@@ -71,15 +71,21 @@
 	<h3 class="page-heading">Auth</h3>
 	<div class="gf-form-group">
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth
+			  headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11"
+			  switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10"
+			  checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for
+			  verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11"
+			  switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10"
+			  checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 	</div>
 
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index d168dbeb225..4a545b6e73d 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -33,6 +33,57 @@ gf-form-switch[disabled] {
     width: 0;
     height: 0;
   }
+}
+
+/* The slider */
+.gf-form-switch__slider {
+  position: absolute;
+  top: 8px;
+  left: 16px;
+  right: 14px;
+  bottom: 10px;
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
+  width: 29px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    bottom: 2px;
+    background: $switch-slider-color;
+    transition: 0.4s;
+    border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
+  }
+}
+
+input:checked + .gf-form-switch__slider {
+  background: $switch-slider-on-bg;
+}
+
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(14px);
+}
+
+.gf-form-checkbox {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: $gf-form-input-height;
+  background: $switch-bg;
+  border: 1px solid $input-border-color;
+  border-left: none;
+  border-radius: $input-border-radius;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
 
   &--transparent {
     background: transparent;
@@ -64,40 +115,6 @@ gf-form-switch[disabled] {
   }
 }
 
-/* The slider */
-.gf-form-switch__slider {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  right: 14px;
-  bottom: 10px;
-  background: $switch-slider-off-bg;
-  border-radius: 8px;
-  height: 16px;
-  width: 29px;
-
-  &::before {
-    position: absolute;
-    content: '';
-    height: 12px;
-    width: 12px;
-    left: 2px;
-    bottom: 2px;
-    background: $switch-slider-color;
-    transition: 0.4s;
-    border-radius: 50%;
-    box-shadow: $switch-slider-shadow;
-  }
-}
-
-input:checked + .gf-form-switch__slider {
-  background: $switch-slider-on-bg;
-}
-
-input:checked + .gf-form-switch__slider::before {
-  transform: translateX(14px);
-}
-
 .gf-form-switch__checkbox {
   position: absolute;
   left: 16px;