From d231db8ef25455c2d1f291b9b707e4d95a251a9f Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 7 Jan 2019 12:41:07 +0100
Subject: [PATCH] Add disabled state to toggle (#3967)

---
 .../components/buttons/umbtoggle.directive.js          |  4 ++++
 .../src/less/components/buttons/umb-toggle.less        | 10 ++++++++--
 .../src/less/components/users/umb-permission.less      | 10 ++++++----
 .../src/views/components/buttons/umb-toggle.html       |  2 +-
 .../src/views/languages/edit.html                      |  3 ++-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js
index e3c4cbf40c..c2c9ec068b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js
@@ -18,6 +18,7 @@
 
         <umb-toggle
             checked="vm.checked"
+            disabled="vm.disabled"
             on-click="vm.toggle()"
             show-labels="true"
             label-on="Start"
@@ -38,6 +39,7 @@
 
             var vm = this;
             vm.checked = false;
+            vm.disabled = false;
 
             vm.toggle = toggle;
 
@@ -52,6 +54,7 @@
 </pre>
 
 @param {boolean} checked Set to <code>true</code> or <code>false</code> to toggle the switch.
+@param {boolean} disabled Set to <code>true</code> or <code>false</code> to disable the switch.
 @param {callback} onClick The function which should be called when the toggle is clicked.
 @param {string=} showLabels Set to <code>true</code> or <code>false</code> to show a "On" or "Off" label next to the switch.
 @param {string=} labelOn Set a custom label for when the switched is turned on. It will default to "On".
@@ -115,6 +118,7 @@
             templateUrl: 'views/components/buttons/umb-toggle.html',
             scope: {
                 checked: "=",
+                disabled: "=",
                 onClick: "&",
                 labelOn: "@?",
                 labelOff: "@?",
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
index 150963cbb2..4c30ae583c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
@@ -28,7 +28,8 @@
 
 .umb-toggle__toggle {
     cursor: pointer;
-    display: inline-block;
+    align-items: center;
+    display: flex;
     width: 48px;
     height: 24px;
     background: @gray-8;
@@ -41,6 +42,11 @@
     background-color: @green;
 }
 
+.umb-toggle--disabled .umb-toggle__toggle {
+    cursor: not-allowed;
+    opacity: 0.8;
+}
+
 .umb-toggle--checked .umb-toggle__handler {
     transform: translate3d(24px, 0, 0) rotate(0);
 }
@@ -63,7 +69,7 @@
 
 .umb-toggle__icon {
     position: absolute;
-    top: 3px;
+    line-height: 1em;
     text-decoration: none;
     transition: all 0.2s ease;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less
index f5a81e3393..0d74986d65 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less
@@ -4,10 +4,6 @@
     padding: 7px 0;
 }
 
-.umb-permission--disabled {
-    opacity: 0.8;
-}
-
 .umb-permission:last-of-type {
     border-bottom: none;
 }
@@ -25,6 +21,12 @@
     cursor: pointer;
 }
 
+.umb-permission--disabled .umb-permission__toggle,
+.umb-permission--disabled .umb-permission__content {
+    cursor: not-allowed;
+    opacity: 0.8;
+}
+
 .umb-permission__description {
     font-size: 13px;
     color: @gray-4;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html
index bc5c114bb6..c8039448fd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html
@@ -1,4 +1,4 @@
-<button ng-click="click()" type="button" class="umb-toggle" ng-class="{'umb-toggle--checked': checked}">
+<button ng-click="click()" type="button" class="umb-toggle" ng-disabled="disabled" ng-class="{'umb-toggle--checked': checked, 'umb-toggle--disabled': disabled}">
 
     <span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
         <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/languages/edit.html b/src/Umbraco.Web.UI.Client/src/views/languages/edit.html
index 533337549b..4c9ef8dc9a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/languages/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/languages/edit.html
@@ -39,7 +39,8 @@
                             <div class="umb-permission" ng-click="vm.toggleDefault()" ng-class="{'umb-permission--disabled': vm.initIsDefault}">
                                 <umb-toggle
                                     class="umb-permission__toggle"
-                                    checked="vm.language.isDefault">
+                                    checked="vm.language.isDefault"
+                                    disabled="vm.initIsDefault">
                                 </umb-toggle>
                                 <div class="umb-permission__content" >
                                     <div>{{vm.labels.defaultLanguage}}</div>