From 4a8449d80d5cb92fa8b5ee20c771faf963d03b8f Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Thu, 4 Apr 2019 11:47:03 +0200
Subject: [PATCH] Replace listview bulk action checkboxes with umb-toggle
 (#5128)

---
 .../src/less/property-editors.less            |  7 --
 .../bulkActionPermissions.prevalues.html      | 75 +++++++++++--------
 2 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 279163d64b..9d2c3301fb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -920,13 +920,6 @@
     min-height:200px;
 }
 
-//
-// Nested boolean (e.g. list view bulk action permissions)
-// -------------------------------------------------------
-.umb-nested-boolean label {margin-bottom: 8px; float: left; width: 320px;}
-.umb-nested-boolean label span {float: left; width: 80%;}
-.umb-nested-boolean label input[type='checkbox'] {margin-right: 10px; float: left;}
-
 //
 // Custom styles of property editors in property preview in document type editor
 // -----------------------------------------------------------------------------
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/bulkActionPermissions.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/bulkActionPermissions.prevalues.html
index 66b8045df1..46b82dc56a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/bulkActionPermissions.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/bulkActionPermissions.prevalues.html
@@ -1,32 +1,47 @@
 <div class="umb-property-editor">
-    <div class="umb-nested-boolean">
-        <label>
-            <input type="checkbox" ng-model="model.value.allowBulkPublish" id="allowBulkPublish"/>
-            <span>Allow bulk publish (content only)</span>
-        </label>
-    </div>
-    <div class="umb-nested-boolean">
-        <label>
-            <input type="checkbox" ng-model="model.value.allowBulkUnpublish" id="allowBulkUnpublish" />
-            <span>Allow bulk unpublish (content only)</span>
-        </label>
-    </div>
-    <div class="umb-nested-boolean">
-        <label>
-            <input type="checkbox" ng-model="model.value.allowBulkCopy" id="allowBulkCopy" />
-            <span>Allow bulk copy (content only)</span>
-        </label>
-    </div>
-    <div class="umb-nested-boolean">
-        <label>
-            <input type="checkbox" ng-model="model.value.allowBulkMove" id="allowBulkMove" />
-            <span>Allow bulk move</span>
-        </label>
-    </div>
-    <div class="umb-nested-boolean">
-        <label>
-            <input type="checkbox" ng-model="model.value.allowBulkDelete" id="allowBulkDelete" />
-            <span>Allow bulk delete</span>
-        </label>
-    </div>
+
+    <umb-toggle checked="model.value.allowBulkPublish"
+                on-click="model.value.allowBulkPublish = !model.value.allowBulkPublish"
+                show-labels="true"
+                label-position="right"
+                label-off="Allow bulk publish (content only)"
+                label-on="Allow bulk publish (content only)"
+                class="mb1">
+    </umb-toggle>
+
+    <umb-toggle checked="model.value.allowBulkUnpublish"
+                on-click="model.value.allowBulkUnpublish = !model.value.allowBulkUnpublish"
+                show-labels="true"
+                label-position="right"
+                label-off="Allow bulk unpublish (content only)"
+                label-on="Allow bulk unpublish (content only)"
+                class="mb1">
+    </umb-toggle>
+
+    <umb-toggle checked="model.value.allowBulkCopy"
+                on-click="model.value.allowBulkCopy = !model.value.allowBulkCopy"
+                show-labels="true"
+                label-position="right"
+                label-off="Allow bulk copy (content only)"
+                label-on="Allow bulk copy (content only)"
+                class="mb1">
+    </umb-toggle>
+
+    <umb-toggle checked="model.value.allowBulkMove"
+                on-click="model.value.allowBulkMove = !model.value.allowBulkMove"
+                show-labels="true"
+                label-position="right"
+                label-off="Allow bulk move"
+                label-on="Allow bulk move"
+                class="mb1">
+    </umb-toggle>
+
+    <umb-toggle checked="model.value.allowBulkDelete"
+                on-click="model.value.allowBulkDelete = !model.value.allowBulkDelete"
+                show-labels="true"
+                label-position="right"
+                label-off="Allow bulk delete"
+                label-on="Allow bulk delete">
+    </umb-toggle>
+
 </div>