From c505fc37839ed84c597f2d8a03c54c13204c4b32 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Fri, 16 Nov 2018 13:02:29 +0100
Subject: [PATCH] moved slider into label to make it clickable, styled slider
 in dark and light theme, created variables for slider

---
 public/app/core/components/switch.ts | 20 +++++++++--------
 public/sass/_variables.dark.scss     |  8 +++++++
 public/sass/_variables.light.scss    |  8 +++++++
 public/sass/components/_switch.scss  | 33 +++++++++++++++-------------
 4 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index edfed5593e0..1fce79105dc 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -1,16 +1,18 @@
 import coreModule from 'app/core/core_module';
 
 const template = `
-<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
-  {{ctrl.label}}
-  <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
-    {{ctrl.tooltip}}
-  </info-popover>
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
+  <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-switch {{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__slider"></span>
+  </div>
 </label>
-<div class="gf-form-switch {{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__slider"></span>
-</div>
 `;
 
 export class SwitchCtrl {
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 8aa01cf245d..8a9c8bddccb 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -355,3 +355,11 @@ $diff-json-icon: $gray-7;
 
 //Submenu
 $variable-option-bg: $blue-dark;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $black;
+$switch-slider-color: $dark-2;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-shadow: 0 0 3px black;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index ec34c963344..8b93139bfba 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -364,3 +364,11 @@ $diff-json-icon: $gray-4;
 
 //Submenu
 $variable-option-bg: $blue-light;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-shadow: 0 0 3px $dark-5;
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index f97d655f4a8..5f21675fccf 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -88,12 +88,16 @@ gf-form-switch[disabled] {
   }
 }
 
+.gf-form-switch-container {
+  display: flex;
+}
+
 .gf-form-switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
-  background: black;
+  background: $switch-bg;
 
   input {
     opacity: 0;
@@ -105,37 +109,36 @@ gf-form-switch[disabled] {
 /* The slider */
 .gf-form-switch__slider {
   position: absolute;
-  cursor: pointer;
   top: 8px;
-  left: 14px;
-  right: 10px;
+  left: 16px;
+  right: 14px;
   bottom: 10px;
-  background: #1d1d1d;
-  transition: 0.4s;
-  border-radius: 34px;
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
 
   &::before {
     position: absolute;
     content: '';
-    height: 16px;
-    width: 16px;
+    height: 12px;
+    width: 12px;
     left: 2px;
-    bottom: 0px;
-    background: #333333;
+    bottom: 2px;
+    background: $switch-slider-color;
     transition: 0.4s;
     border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
   }
 }
 
 input:checked + .gf-form-switch__slider {
-  background: linear-gradient(90deg, $orange, $red);
+  background: $switch-slider-on-bg;
 }
 
 /* input:focus + .gf-form-switch__slider { */
 /*   box-shadow: 0 0 1px #2196f3; */
 /* } */
 
-input:checked + .gf-form-switch__slider:before {
-  transform: translateX(20px);
-  box-shadow: 0 0 5px black;
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(14px);
 }