From 2e239939fc8008923f68967643d01fec8957c06f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 20 Jun 2017 14:52:32 +0200
Subject: [PATCH] add umb-toggle component

---
 .../components/buttons/umbtoggle.directive.js | 56 +++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../less/components/buttons/umb-toggle.less   | 49 ++++++++++++++++
 .../views/components/buttons/umb-toggle.html  | 11 ++++
 4 files changed, 117 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html

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
new file mode 100644
index 0000000000..772142c5d6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js
@@ -0,0 +1,56 @@
+(function () {
+    'use strict';
+
+    function ToggleDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+            function onInit() {
+                setLabelText();
+            }
+
+            function setLabelText() {
+
+                if (!scope.labelOn) {
+                    scope.labelOn = "On";
+                }
+
+                if (!scope.labelOff) {
+                    scope.labelOff = "Off";
+                }
+
+            }
+
+            scope.click = function() {
+                if(scope.onClick) {
+                    scope.onClick();
+                }
+            };
+
+            onInit();
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/buttons/umb-toggle.html',
+            link: link,
+            scope: {
+                checked: "=",
+                labelOn: "@?",
+                labelOff: "@?",
+                onClick: "&"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbToggle', ToggleDirective);
+
+})();
+
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 1a4a530430..ee53b57b9f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -127,6 +127,7 @@
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
 @import "components/buttons/umb-era-button.less";
+@import "components/buttons/umb-toggle.less";
 
 @import "components/notifications/umb-notifications.less";
 @import "components/umb-file-dropzone.less";
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
new file mode 100644
index 0000000000..13ab1845f7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less
@@ -0,0 +1,49 @@
+.umb-toggle {
+	display: flex;
+	align-items: center;
+}
+
+.umb-toggle__label {
+    font-size: 14px;
+    font-weight: 600;
+    color: @gray-2;
+}
+
+.umb-toggle__label--left {
+    margin-right: 8px;
+}
+
+.umb-toggle__label--right {
+    margin-left: 8px;
+}
+
+.umb-toggle__label--active {
+    color: @gray-1;
+}
+
+.umb-toggle__handler {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: @white;
+    border-radius: 50px;
+    transform: rotate(-45deg);
+}
+
+.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--checked .umb-toggle__toggle {
+    background-color: @green;
+}
+
+.umb-toggle--checked .umb-toggle__handler {
+    transform: translate3d(21px, 0, 0) rotate(0);
+}
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
new file mode 100644
index 0000000000..160ce93c2e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html
@@ -0,0 +1,11 @@
+<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>
+
+    <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>
+
+</a>
\ No newline at end of file