fix umb-toggle labels + add documentation

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

@@ -1,22 +1,89 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbToggle
+@restrict E
+@scope
+
+@description
+<b>Added in Umbraco version 7.7.0</b> Use this directive to render an umbraco toggle.
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-toggle
+            checked="vm.checked"
+            on-click="vm.toggle()"
+            label-on="Start"
+            label-off="Stop"
+            label-position="right">
+        </umb-toggle>
+
+    </div>
+</pre>
+
+<h3>Controller example</h3>
+<pre>
+    (function () {
+        "use strict";
+
+        function Controller() {
+
+            var vm = this;
+            vm.checked = false;
+
+            vm.toggle = toggle;
+
+            function toggle() {
+                vm.checked = !vm.checked;
+            }
+        }
+
+        angular.module("umbraco").controller("My.Controller", Controller);
+
+    })();
+</pre>
+
+@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=} 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").
+
+**/
+
 (function () {
     'use strict';
 
-    function ToggleDirective() {
+    function ToggleDirective(localizationService) {
 
         function link(scope, el, attr, ctrl) {
 
+            scope.displayLabelOn = "";
+            scope.displayLabelOff = "";
+
             function onInit() {
                 setLabelText();
             }
 
             function setLabelText() {
 
-                if (!scope.labelOn) {
-                    scope.labelOn = "On";
+                // set default label for "on"
+                if (scope.labelOn) {
+                    scope.displayLabelOn = scope.labelOn;
+                } else {
+                    localizationService.localize("general_on").then(function (value) {
+                        scope.displayLabelOn = value;
+                    });
                 }
 
-                if (!scope.labelOff) {
-                    scope.labelOff = "Off";
+                // set default label for "Off"
+                if (scope.labelOff) {
+                    scope.displayLabelOff = scope.labelOff;
+                } else {
+                    localizationService.localize("general_off").then(function (value) {
+                        scope.displayLabelOff = value;
+                    });
                 }
 
             }
@@ -35,13 +102,14 @@
             restrict: 'E',
             replace: true,
             templateUrl: 'views/components/buttons/umb-toggle.html',
-            link: link,
             scope: {
                 checked: "=",
+                onClick: "&",
                 labelOn: "@?",
                 labelOff: "@?",
-                onClick: "&"
-            }
+                labelPosition: "@?"
+            },
+            link: link
         };
 
         return directive;

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

@@ -4,8 +4,7 @@
 }
 
 .umb-toggle__label {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 12px;
     color: @gray-2;
 }
 
@@ -17,10 +16,6 @@
     margin-left: 8px;
 }
 
-.umb-toggle__label--active {
-    color: @gray-1;
-}
-
 .umb-toggle__handler {
     display: inline-block;
     width: 20px;

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

@@ -1,11 +1,17 @@
 <a href="" ng-click="click()" class="umb-toggle" ng-class="{'umb-toggle--checked': checked}">
 
-    <span class="umb-toggle__label umb-toggle__label--left" ng-class="{'umb-toggle__label--active': checked}">{{ labelOff }}</span>
+    <span ng-if="!labelPosition || labelPosition === 'left'">
+        <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">
         <div class="umb-toggle__handler shadow-depth-1"></div>
     </div>
 
-    <span class="umb-toggle__label umb-toggle__label--right" ng-class="{'umb-toggle__label--active': checked}">{{ labelOn }}</span>
+    <span ng-if="labelPosition === 'right'">
+        <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>
 
 </a>

src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml

@@ -482,8 +482,10 @@
     <key alias="next">Next</key>
     <key alias="no">No</key>
     <key alias="of">of</key>
+    <key alias="off">Off</key>
     <key alias="ok">OK</key>
     <key alias="open">Open</key>
+    <key alias="on">On</key>
     <key alias="or">or</key>
     <key alias="password">Password</key>
     <key alias="path">Path</key>