Add umb-table directive, restyling, use directive in listview

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

@@ -0,0 +1,70 @@
+(function() {
+   'use strict';
+
+   function TableDirective() {
+
+      function link(scope, el, attr, ctrl) {
+
+         scope.clickItem = function(item, $event) {
+            if(scope.onClick) {
+               scope.onClick(item);
+               $event.stopPropagation();
+            }
+         };
+
+        scope.selectItem = function(item, $index, $event) {
+            if(scope.onSelect) {
+               scope.onSelect(item, $index, $event);
+               $event.stopPropagation();
+            }
+        };
+
+        scope.selectAll = function($event) {
+            if(scope.onSelectAll) {
+                scope.onSelectAll($event);
+            }
+        };
+
+        scope.isSelectedAll = function() {
+            if(scope.onSelectedAll) {
+                return scope.onSelectedAll();
+            }
+        };
+
+        scope.isSortDirection = function (col, direction) {
+            if (scope.onSortingDirection) {
+                return scope.onSortingDirection(col, direction);
+            }
+        };
+        
+        scope.sort = function(field, allow) {
+            if(scope.onSort) {
+                scope.onSort(field, allow);
+            }
+        };
+
+      }
+
+      var directive = {
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/umb-table.html',
+         scope: {
+            items: '=',
+            itemProperties: "=",
+            onSelect: '=',
+            onClick: "=",
+            onSelectAll: "=",
+            onSelectedAll: "=",
+            onSortingDirection: "=",
+            onSort:"="
+         },
+         link: link
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbTable', TableDirective);
+
+})();

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

@@ -12,7 +12,7 @@
          var item = null;
 
          if ($event.shiftKey === true) {
-
+             
             if(selectedIndex > firstSelectedIndex) {
 
                start = firstSelectedIndex;
@@ -94,11 +94,89 @@
          }
       }
 
+      function selectAllItems(items, selection, $event) {
+
+          var checkbox = $event.target;
+          var clearSelection = false;
+
+          if (!angular.isArray(items)) {
+             return;
+          }
+
+          selection.length = 0;
+
+          for (var i = 0; i < items.length; i++) {
+
+             var item = items[i];
+
+             if (checkbox.checked) {
+                selection.push({id: item.id});
+             } else {
+                clearSelection = true;
+             }
+
+             item.selected = checkbox.checked;
+
+          }
+
+          if (clearSelection) {
+             selection.length = 0;
+         }
+
+      }
+
+      function isSelectedAll(items, selection) {
+
+          var numberOfSelectedItem = 0;
+
+          for(var itemIndex = 0; items.length > itemIndex; itemIndex++) {
+              var item = items[itemIndex];
+
+              for(var selectedIndex = 0; selection.length > selectedIndex; selectedIndex++) {
+                  var selectedItem = selection[selectedIndex];
+
+                  if(item.id === selectedItem.id) {
+                      numberOfSelectedItem++;
+                  }
+              }
+
+          }
+
+          if(numberOfSelectedItem === items.length) {
+              return true;
+          }
+
+      }
+
+
+      function setSortingDirection(col, direction, options) {
+          return options.orderBy.toUpperCase() === col.toUpperCase() && options.orderDirection === direction;
+      }
+
+
+      function setSorting(field, allow, options) {
+          if (allow) {
+              options.orderBy = field;
+
+              if (options.orderDirection === "desc") {
+                  options.orderDirection = "asc";
+              } else {
+                  options.orderDirection = "desc";
+              }
+          }
+      }
+
+
+
       var service = {
          selectHandler: selectHandler,
          selectItem: selectItem,
          deselectItem: deselectItem,
-         clearSelection: clearSelection
+         clearSelection: clearSelection,
+         selectAllItems: selectAllItems,
+         isSelectedAll: isSelectedAll,
+         setSortingDirection: setSortingDirection,
+         setSorting: setSorting
       };
 
       return service;

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -73,14 +73,14 @@
 @import "gridview.less";
 @import "footer.less";
 @import "dragdrop.less";
-@import "dashboards.less"; 
+@import "dashboards.less";
 
 @import "forms/umb-validation-label.less";
 
 // Umbraco Components
-@import "components/editor.less"; 
-@import "components/overlays.less"; 
-@import "components/card.less"; 
+@import "components/editor.less";
+@import "components/overlays.less";
+@import "components/card.less";
 @import "components/umb-sub-views.less";
 @import "components/umb-editor-navigation.less";
 @import "components/umb-editor-sub-views.less";
@@ -90,6 +90,7 @@
 @import "components/umb-child-selector.less";
 @import "components/umb-group-builder.less";
 @import "components/umb-list-view.less";
+@import "components/umb-table.less";
 @import "components/umb-confirm-delete.less";
 @import "components/umb-keyboard-shortcuts-overview.less";
 @import "components/umb-checkbox-list.less";
@@ -112,7 +113,7 @@
 @import "components/umb-file-dropzone.less";
 
 //page specific styles
-@import "pages/document-type-editor.less"; 
+@import "pages/document-type-editor.less";
 @import "pages/login.less";
 
 

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -0,0 +1,199 @@
+// // //
+// New list view styles
+// // //
+
+
+// Tooltip in table header
+.select-all:hover {
+    .tooltip {
+        opacity: 1;
+        left: 60px;
+        transform: translate(0px, 2px);
+        background: @white;
+
+        color: @black;
+    }
+}
+
+
+// Table styles
+.umb-table {
+    border: 1px solid @grayLight;
+    width: 100%;
+}
+
+.umb-table td {
+    padding-top: 16px;
+    padding-bottom: 16px;
+}
+
+.umb-table th {
+  font-weight: normal
+}
+
+
+
+// Table head styles
+.umb-table thead {
+    background-color: @white;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+
+.umb-table thead a {
+    cursor: default;
+    color: fade(@gray, 75%);
+    text-decoration: none;
+    position: relative;
+
+    &:hover {
+        color: @black;
+        text-decoration: none;
+    }
+}
+
+.umb-table thead i {
+    position: absolute;
+    padding-left: 3px;
+    padding-top: 1px;
+
+}
+
+.umb-table thead .sortable:hover {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.umb-table thead input[type="checkbox"] {
+  margin-left: 7px;
+}
+
+
+
+// Table body styles
+.umb-table tbody + tbody {
+    border-top: 1px solid @grayLighter;
+}
+
+.umb-table tbody td {
+  position: relative;
+}
+
+.umb-table tbody td,
+.umb-table tbody th {
+    border-top: 1px solid @grayLight;
+}
+
+.umb-table tbody tr {
+    color: @gray;
+    font-size: 13px;
+    user-select: none;
+
+    &:hover {
+        background-color: fade(@blue, 5%);
+    }
+}
+
+.umb-table tbody input[type="checkbox"] {
+    display: none;
+    margin-left: 7px;
+    z-index: 5;
+}
+
+.umb-table tbody .selected,
+.umb-table tbody .selected:hover {
+    background-color: fade(@blue, 7%);
+}
+
+.umb-table tbody tr i {
+    font-size: 20px;
+}
+
+.umb-table tbody tr a {
+    color: @black;
+    font-weight: bold;
+    font-size: 14px;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.umb-table tbody i {
+  display: block;
+  top: 10px;
+  left:6px;
+  padding: 0 0 0 4px;
+  z-index: 6;
+  width: 20px;
+  height: 20px;
+}
+
+
+// Table foot
+
+.umb-table tfoot {
+	background: @grayLighter;
+}
+
+.umb-table tfoot td:last-child {
+  border-left: none
+}
+
+.umb-table tfoot th {
+	padding: 0 20px;
+}
+
+
+
+// Form/caption
+.umb-table caption {
+  background: @white;
+  text-align: left;
+  vertical-align: middle;
+}
+
+
+.umb-table form {
+  position: relative;
+  margin: 0;
+}
+
+.umb-table input[type="text"] {
+  background: none;
+  -webkit-transition: all .5s;
+  -moz-transition: all .5s;
+  -o-transition: all .5s;
+  transition: all .5s;
+  width: 60px;
+  padding: 4px 0 4px 20px;
+  border: 1px solid @grayLight;
+}
+
+
+// Table input
+.umb-table input::-webkit-input-placeholder {
+   color: @gray;
+}
+
+.umb-table input:-moz-placeholder {
+   color: @gray;
+}
+
+.umb-table input::-moz-placeholder {
+   color: @gray;
+}
+
+.umb-table input:-ms-input-placeholder {
+   color: @gray;
+}
+
+.umb-table input[type="text"]:focus {
+  width: 200px;
+  border: 1px solid @grayLight;
+  background: @white;
+  color: @black
+}

src/Umbraco.Web.UI.Client/src/less/listview.less

@@ -134,7 +134,7 @@
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  background-color: @grayLighter;
+  background-color: @white;
 }
 
 .umb-listview table tfoot {

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

@@ -0,0 +1,61 @@
+
+
+<table class="table">
+
+    <thead>
+        <tr>
+            <td style="width: 35px" class="select-all">
+                <label for="checkall" class="tooltip">Select all</label>
+                <input id="checkall" type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()">
+            </td>
+            <td>
+                <a href="#" ng-click="sort('Name', true)" prevent-default class="sortable">
+                    <localize key="general_name">Name</localize>
+                    <i class="icon" ng-class="{'icon-navigation-up': isSortDirection('Name', 'asc'), 'icon-navigation-down': isSortDirection('Name', 'desc')}"></i>
+                </a>
+            </td>
+
+            <td ng-repeat="column in itemProperties">
+                <a href="#" ng-click="sort(column.alias, column.allowSorting)" ng-class="{'sortable':column.allowSorting}" prevent-default>
+                    <span ng-bind="column.header"></span>
+                    <i class="icon" ng-class="{'icon-navigation-up': isSortDirection(column.alias, 'asc'), 'icon-navigation-down': isSortDirection(column.alias, 'desc')}"></i>
+                </a>
+            </td>
+        </tr>
+    </thead>
+
+
+
+    <tbody ng-show="items.length === 0">
+        <tr>
+            <td colspan="{{itemProperties.length + 2}}">
+                <p><localize key="content_listViewNoItems">There are no items show in the list.</localize></p>
+            </td>
+        </tr>
+    </tbody>
+
+
+
+    <tbody ng-show="items.length > 0">
+        <tr ng-repeat="item in items"
+            ng-class="{selected:item.selected}"
+            ng-click="selectItem(item, $index, $event)"
+            >
+
+            <td>
+                <i class="icon {{item.icon}}" ng-class="getIcon(item)"></i>
+            </td>
+
+            <td>
+                <a href="" ng-class="{inactive: (entityType === 'content' && !item.published) || isTrashed}"
+                    ng-click="clickItem(item, $event)"
+                    ng-bind="item.name"></a>
+            </td>
+
+            <td ng-repeat="column in itemProperties">
+                <span>{{item[column.alias]}}</span>
+            </td>
+        </tr>
+    </tbody>
+
+</table>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html

@@ -1,54 +1,15 @@
 <div ng-controller="Umbraco.PropertyEditors.ListView.ListLayoutController as vm">
 
-   <table class="table table-striped">
-       <thead>
-           <tr>
-               <td style="width: 35px">
-                   <input type="checkbox" ng-click="vm.selectAll($event)" ng-checked="vm.isSelectedAll()">
-               </td>
-               <td>
-                   <a href="#" ng-click="vm.sort('Name', true)" prevent-default class="sortable">
-                       <localize key="general_name">Name</localize>
-                       <i class="icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
-                   </a>
-               </td>
+    <umb-table
+        items="items"
+        item-properties="options.includeProperties"
+        on-select="vm.selectItem"
+        on-click="vm.clickItem"
+        on-select-all="vm.selectAll"
+        on-selected-all="vm.isSelectedAll"
+        on-sorting-direction="vm.isSortDirection"
+        on-sort="vm.sort"
+    >
+    </umb-table>
 
-               <td ng-repeat="column in options.includeProperties">
-                   <a href="#" ng-click="vm.sort(column.alias, column.allowSorting)" ng-class="{'sortable':column.allowSorting}" prevent-default>
-                       <span ng-bind="column.header"></span>
-                       <i class="icon" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
-                   </a>
-               </td>
-           </tr>
-       </thead>
-
-       <tbody ng-show="items.length === 0">
-           <tr>
-               <td colspan="{{options.includeProperties.length + 2}}">
-                   <p><localize key="content_listViewNoItems">There are no items show in the list.</localize></p>
-               </td>
-           </tr>
-       </tbody>
-
-       <tbody ng-show="items.length > 0">
-           <tr ng-repeat="item in items"
-               ng-class="{selected:item.selected}">
-
-               <td>
-                   <i class="icon {{item.icon}}" ng-class="getIcon(item)"></i>
-                   <input type="checkbox" ng-click="vm.selectItem(item)" ng-model="item.selected" no-dirty-check>
-               </td>
-               <td>
-                   <a ng-class="{inactive: (entityType === 'content' && !item.published) || isTrashed}"
-                      href="#{{item.editPath}}"
-                      ng-bind="item.name"></a>
-               </td>
-
-               <td ng-repeat="column in options.includeProperties">
-                   <span>{{item[column.alias]}}</span>
-               </td>
-           </tr>
-       </tbody>
-
-   </table>
 </div>

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

@@ -1,99 +1,46 @@
 (function() {
-   "use strict";
+    "use strict";
 
-   function ListViewListLayoutController($scope) {
+    function ListViewListLayoutController($scope, listViewHelper, $location) {
 
-      var vm = this;
+        var vm = this;
 
-      vm.selectItem = selectItem;
-      vm.selectAll = selectAll;
-      vm.isSelectedAll = isSelectedAll;
-      vm.isSortDirection = isSortDirection;
-      vm.sort = sort;
+        vm.selectItem = selectItem;
+        vm.clickItem = clickItem;
+        vm.selectAll = selectAll;
+        vm.isSelectedAll = isSelectedAll;
+        vm.isSortDirection = isSortDirection;
+        vm.sort = sort;
 
-      function selectAll($event) {
-         var checkbox = $event.target;
-         var clearSelection = false;
+        function selectAll($event) {
+            listViewHelper.selectAllItems($scope.items, $scope.selection, $event);
+        }
 
-         if (!angular.isArray($scope.items)) {
-            return;
-         }
+        function isSelectedAll() {
+            return listViewHelper.isSelectedAll($scope.items, $scope.selection);
+        }
 
-         $scope.selection.length = 0;
+        function selectItem(selectedItem, $index, $event) {
+            listViewHelper.selectHandler(selectedItem, $index, $scope.items, $scope.selection, $event);
+        }
 
-         for (var i = 0; i < $scope.items.length; i++) {
+        function clickItem(item) {
+            $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
+        }
 
-            var entity = $scope.items[i];
+        function isSortDirection(col, direction) {
+            return listViewHelper.setSortingDirection(col, direction, $scope.options);
+        }
 
-            if (checkbox.checked) {
-               $scope.selection.push({id: entity.id});
-            } else {
-               clearSelection = true;
+        function sort(field, allow) {
+            if (allow) {
+                listViewHelper.setSorting(field, allow, $scope.options);
+                $scope.getContent($scope.contentId);
             }
+        }
 
-            entity.selected = checkbox.checked;
+    }
 
-         }
-
-         if (clearSelection) {
-            $scope.selection.length = 0;
-         }
-
-      }
-
-      function selectItem(item) {
-
-         var selection = $scope.selection;
-         var isSelected = false;
-
-         for (var i = 0; selection.length > i; i++) {
-            var selectedItem = selection[i];
-
-            if (item.id === selectedItem.id) {
-               isSelected = true;
-               selection.splice(i, 1);
-               item.selected = false;
-            }
-         }
-
-         if (!isSelected) {
-            selection.push({id: item.id});
-            item.selected = true;
-         }
-
-      }
-
-      function isSelectedAll() {
-         if (!angular.isArray($scope.items)) {
-            return false;
-         }
-         return _.every($scope.items, function(item) {
-            return item.selected;
-         });
-      }
-
-      function isSortDirection(col, direction) {
-          return $scope.options.orderBy.toUpperCase() == col.toUpperCase() && $scope.options.orderDirection == direction;
-      }
-
-      function sort(field, allow) {
-          if (allow) {
-             $scope.options.orderBy = field;
-
-             if ($scope.options.orderDirection === "desc") {
-                  $scope.options.orderDirection = "asc";
-             }
-             else {
-                  $scope.options.orderDirection = "desc";
-             }
-
-             $scope.getContent($scope.contentId);
-
-          }
-      }
-
-   }
-
-   angular.module("umbraco").controller("Umbraco.PropertyEditors.ListView.ListLayoutController", ListViewListLayoutController);
+    angular.module("umbraco").controller("Umbraco.PropertyEditors.ListView.ListLayoutController", ListViewListLayoutController);
 
 })();