update umb-toggle to show icons as default instead of labels

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js

@@ -11,12 +11,19 @@
 <pre>
     <div ng-controller="My.Controller as vm">
 
+        <umb-toggle
+            checked="vm.checked"
+            on-click="vm.toggle()">
+        </umb-toggle>
+
         <umb-toggle
             checked="vm.checked"
             on-click="vm.toggle()"
+            show-labels="true"
             label-on="Start"
             label-off="Stop"
-            label-position="right">
+            label-position="right"
+            hide-icons="true">
         </umb-toggle>
 
     </div>
@@ -46,9 +53,11 @@
 
 @param {boolean} checked Set to <code>true</code> or <code>false</code> to toggle 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".
 @param {string=} labelOff Set a custom label for when the switched is turned off. It will default to "Off".
 @param {string=} labelPosition Sets the label position to the left or right of the switch. It will default to "left" ("left", "right").
+@param {string=} hideIcons Set to <code>true</code> or <code>false</code> to hide the icons on the switch.
 
 **/
 
@@ -107,7 +116,9 @@
                 onClick: "&",
                 labelOn: "@?",
                 labelOff: "@?",
-                labelPosition: "@?"
+                labelPosition: "@?",
+                showLabels: "@?",
+                hideIcons: "@?"
             },
             link: link
         };

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less

@@ -3,6 +3,35 @@
 	align-items: center;
 }
 
+.umb-toggle__handler {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background-color: @white;
+    border-radius: 50px;
+    transform: rotate(-45deg);
+}
+
+.umb-toggle__toggle {
+    cursor: pointer;
+    display: inline-block;
+    width: 48px;
+    height: 24px;
+    background: @gray-8;
+    border-radius: 90px;
+    position: relative;
+}
+
+.umb-toggle--checked .umb-toggle__toggle {
+    background-color: @green;
+}
+
+.umb-toggle--checked .umb-toggle__handler {
+    transform: translate3d(24px, 0, 0) rotate(0);
+}
+
+/* Labels */
+
 .umb-toggle__label {
     font-size: 12px;
     color: @gray-2;
@@ -16,29 +45,21 @@
     margin-left: 8px;
 }
 
-.umb-toggle__handler {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    background-color: @white;
-    border-radius: 50px;
-    transform: rotate(-45deg);
+/* Icons */
+
+.umb-toggle__icon {
+    position: absolute;
+    top: 3px;
+    text-decoration: none;
+    transition: all 0.2s ease;
 }
 
-.umb-toggle__toggle {
-    cursor: pointer;
-    display: inline-block;
-    width: 40px;
-    height: 20px;
-    background: @gray-8;
-    border-radius: 90px;
-    transition: background-color 0.2s ease;
+.umb-toggle__icon--left {
+    left: 7px;
+    color: @white;
 }
 
-.umb-toggle--checked .umb-toggle__toggle {
-    background-color: @green;
-}
-
-.umb-toggle--checked .umb-toggle__handler {
-    transform: translate3d(21px, 0, 0) rotate(0);
-}
+.umb-toggle__icon--right {
+    right: 7px;
+    color: @gray-5;
+}

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html

@@ -1,15 +1,17 @@
 <a href="" ng-click="click()" class="umb-toggle" ng-class="{'umb-toggle--checked': checked}">
 
-    <span ng-if="!labelPosition || labelPosition === 'left'">
+    <span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
         <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>
         <span ng-if="checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOn }}</span>
     </span>
 
     <div class="umb-toggle__toggle">
+        <i ng-if="checked && !hideIcons" class="umb-toggle__icon umb-toggle__icon--left icon-check"></i>
         <div class="umb-toggle__handler shadow-depth-1"></div>
+        <i ng-if="!checked && !hideIcons" class="umb-toggle__icon umb-toggle__icon--right icon-wrong"></i>
     </div>
 
-    <span ng-if="labelPosition === 'right'">
+    <span ng-if="labelPosition === 'right' && showLabels === 'true'">
         <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--right">{{ displayLabelOff }}</span>
         <span ng-if="checked" class="umb-toggle__label umb-toggle__label--right">{{ displayLabelOn }}</span>
     </span>