Convert the default boring checkbox to the shiny new and beautiful toggle based on the umb-toggle directive

src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.controller.js

@@ -1,4 +1,30 @@
 angular.module("umbraco").controller("Umbraco.PrevalueEditors.BooleanController",
     function ($scope) {
-        $scope.htmlId = "bool-" + String.CreateGuid();
+
+        function updateToggleValue() {
+            $scope.toggleValue = false;
+
+            if ($scope.model && $scope.model.value && ($scope.model.value.toString() === "1" || angular.lowercase($scope.model.value) === "true")) {
+                $scope.toggleValue = true;
+            }
+        }
+
+        if($scope.model.value === null){
+            $scope.model.value = "0";
+        }
+
+        updateToggleValue();
+
+        $scope.toggle = function(){
+            if($scope.model.value === 1 || $scope.model.value === "1"){
+                $scope.model.value = "0";
+                updateToggleValue();
+
+                return;
+            }
+
+            $scope.model.value = "1";
+
+            updateToggleValue();
+        }
     });

src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.html

@@ -1,4 +1,6 @@
-<label ng-controller="Umbraco.PrevalueEditors.BooleanController" for="{{htmlId}}" class="checkbox">
-    <input name="boolean" type="checkbox" ng-model="model.value" ng-true-value="1" ng-false-value="0" id="{{htmlId}}" />
-    <localize key="general_yes">Yes</localize>
-</label>
+<div ng-controller="Umbraco.PrevalueEditors.BooleanController">
+    <umb-toggle
+        checked="toggleValue"
+        on-click="toggle()">
+    </umb-toggle>
+</div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.controller.js

@@ -4,7 +4,7 @@ function booleanEditorController($scope, $rootScope, assetsService) {
         $scope.renderModel = {
             value: false
         };
-        
+
         if ($scope.model.config && $scope.model.config.default && $scope.model.config.default.toString() === "1" && $scope.model && !$scope.model.value) {
             $scope.renderModel.value = true;
         }
@@ -16,10 +16,6 @@ function booleanEditorController($scope, $rootScope, assetsService) {
 
     setupViewModel();
 
-    $scope.$watch("renderModel.value", function (newVal) {
-        $scope.model.value = newVal === true ? "1" : "0";
-    });
-
     //here we declare a special method which will be called whenever the value has changed from the server
     //this is instead of doing a watch on the model.value = faster
     $scope.model.onValueChanged = function (newVal, oldVal) {
@@ -27,5 +23,17 @@ function booleanEditorController($scope, $rootScope, assetsService) {
         setupViewModel();
     };
 
+    // Update the value when the toggle is clicked
+    $scope.toggle = function(){
+        if($scope.renderModel.value){
+            $scope.model.value = "0";
+            setupViewModel();
+            return;
+        }
+
+        $scope.model.value = "1";
+        setupViewModel();
+    };
+
 }
 angular.module("umbraco").controller("Umbraco.PropertyEditors.BooleanController", booleanEditorController);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.html

@@ -1,3 +1,6 @@
 <div class="umb-editor umb-boolean" ng-controller="Umbraco.PropertyEditors.BooleanController">
-    <input type="checkbox" ng-model="renderModel.value" id="{{model.alias}}" />    
-</div>
+    <umb-toggle
+        checked="renderModel.value"
+        on-click="toggle()">
+    </umb-toggle>
+</div>