Add disabled state to toggle (#3967)

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: "@?",

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;
 }

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;

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>

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>