Merge pull request #5140 from umbraco/temp8-ui-use-umb-checkbox-for-select-all-in-listview

Use umb-checkbox for select all in listview

src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js

@@ -397,6 +397,54 @@
             }
 
         }
+        
+        
+        /**
+        * @ngdoc method
+        * @name umbraco.services.listViewHelper#selectAllItemsToggle
+        * @methodOf umbraco.services.listViewHelper
+        *
+        * @description
+        * Helper method for toggling the select state on all items.
+        *
+        * @param {Array} items Items to toggle selection on, should be $scope.items
+        * @param {Array} selection Listview selection, available as $scope.selection
+        */
+        
+        function selectAllItemsToggle(items, selection) {
+            
+            if (!angular.isArray(items)) {
+                return;
+            }
+            
+            if (isSelectedAll(items, selection)) {
+                // unselect all items
+                angular.forEach(items, function (item) {
+                    item.selected = false;
+                });
+                
+                // reset selection without loosing reference.
+                selection.length = 0;
+                
+            } else {
+                
+                // reset selection without loosing reference.
+                selection.length = 0;
+                
+                // select all items
+                angular.forEach(items, function (item) {
+                    var obj = {
+                        id: item.id
+                    };
+                    if (item.key) {
+                        obj.key = item.key;
+                    }
+                    item.selected = true;
+                    selection.push(obj);
+                });
+            }
+
+        }
 
         /**
         * @ngdoc method
@@ -527,6 +575,7 @@
           deselectItem: deselectItem,
           clearSelection: clearSelection,
           selectAllItems: selectAllItems,
+          selectAllItemsToggle: selectAllItemsToggle,
           isSelectedAll: isSelectedAll,
           setSortingDirection: setSortingDirection,
           setSorting: setSorting,

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

@@ -4,15 +4,15 @@
         <div class="umb-table-head">
             <div class="umb-table-row">
                 <div class="umb-table-cell">
-                    <input class="umb-table__input" type="checkbox"
-                           ng-show="vm.allowSelectAll"
-                           ng-click="vm.selectAll($event)"
-                           ng-checked="vm.isSelectedAll()">
+
+                    <a href="" style="text-decoration: none;" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
+                        <umb-checkmark checked="vm.isSelectedAll()" size="xs"></umb-checkmark>
+                    </a>
+
                 </div>
                 <div class="umb-table-cell umb-table__name">
-                        <localize key="general_name">Name</localize>
-                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
-                    </a>
+                    <localize key="general_name">Name</localize>
+                    <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
                 </div>
                 <div class="umb-table-cell" ng-show="vm.items[0].state">
                     <localize key="general_status">Status</localize>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js

@@ -40,8 +40,8 @@
             }
         }
 
-        function selectAll($event) {
-            listViewHelper.selectAllItems($scope.items, $scope.selection, $event);
+        function selectAll() {
+            listViewHelper.selectAllItemsToggle($scope.items, $scope.selection);
         }
 
         function isSelectedAll() {