From a3374fd08a82d1064b044280d11309c5ba763f93 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 20 Oct 2015 19:15:33 +0200 Subject: [PATCH 1/4] add client side drag and drop to list view content grid --- .../components/umbcontentgrid.directive.js | 14 ++++++++++++++ .../src/less/components/umb-content-grid.less | 15 +++++++++++++-- .../src/views/components/umb-content-grid.html | 2 +- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js index 4ab935276b..1fe365c73f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js @@ -5,6 +5,20 @@ function link(scope, el, attr, ctrl) { + scope.contentItemSortingOptions = { + distance: 10, + tolerance: "pointer", + opacity: 0.7, + scroll: true, + cursor: "move", + zIndex: 6000, + placeholder: "umb-content-grid__placeholder", + start: function(e, ui) { + ui.placeholder.height(ui.item.height()); + ui.placeholder.width(ui.item.width()); + } + }; + scope.clickItem = function(item) { if(scope.onClick) { scope.onClick(item); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less index 544c11f5ff..defe3f181f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less @@ -10,8 +10,12 @@ flex: 0 1 200px; cursor: pointer; position: relative; - margin-right: 20px; - margin-bottom: 20px; + margin: 10px; + border: 1px solid #ffffff; +} + +.umb-content-grid__item:hover { + border: 1px solid @blue; } .umb-content-grid__item:hover .umb-content-grid__action { @@ -113,3 +117,10 @@ animation-duration: 0.2s; animation-timing-function: ease-in-out; } + +.umb-content-grid__placeholder { + background: @grayLighter; + border: 2px dashed @grayLight; + box-sizing: border-box; + margin: 10px; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html index 99b70ff70c..bee3d912b5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html @@ -1,4 +1,4 @@ -
+
Date: Tue, 20 Oct 2015 19:16:59 +0200 Subject: [PATCH 2/4] Add no item text to list view content grid --- .../src/less/components/umb-content-grid.less | 8 ++++++++ .../src/views/components/umb-content-grid.html | 2 ++ .../views/propertyeditors/listview/layouts/grid/grid.html | 1 - 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less index defe3f181f..91efc0a2d1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less @@ -124,3 +124,11 @@ box-sizing: border-box; margin: 10px; } + +.umb-content-grid__no-items { + font-size: 16px; + font-weight: bold; + color: @grayLight; + padding-top: 50px; + padding-bottom: 50px; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html index bee3d912b5..709331258b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html @@ -27,4 +27,6 @@
+
There are no items to show
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html index 4a4612c40d..67c1ac2fc7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html @@ -4,7 +4,6 @@ ng-if="entityType !== 'media'"> Date: Tue, 20 Oct 2015 19:18:35 +0200 Subject: [PATCH 3/4] move layout config to options model --- .../listview/listview.controller.js | 19 ++++++++++--------- .../propertyeditors/listview/listview.html | 8 ++++---- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js index 5b3cff6563..a802f2d221 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js @@ -68,18 +68,19 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific { alias: 'updateDate', header: 'Last edited', isSystem: 1 }, { alias: 'updater', header: 'Last edited by', isSystem: 1 } ], + layout: { + layouts: $scope.model.config.layouts, + activeLayout: getFirstAllowedLayout($scope.model.config.layouts) + }, allowBulkPublish: true, allowBulkUnpublish: true, allowBulkMove: true, allowBulkDelete: true, }; - // set active layout - $scope.layout.activeLayout = getFirstAllowedLayout($scope.model.config.layouts); - //update all of the system includeProperties to enable sorting _.each($scope.options.includeProperties, function(e, i) { - + if (e.isSystem) { //NOTE: special case for contentTypeAlias, it's a system property that cannot be sorted @@ -88,7 +89,7 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific if (e.alias != "contentTypeAlias") { e.allowSorting = true; } - + //localize the header var key = getLocalizedKey(e.alias); localizationService.localize(key).then(function (v) { @@ -184,7 +185,7 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific //$location.search("page", $scope.options.pageNumber); } }; - + /*Loads the search results, based on parameters set in prev,next,sort and so on*/ /*Pagination is done by an array of objects, due angularJS's funky way of monitoring state @@ -441,9 +442,9 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific var alias = e.alias; - // First try to pull the value directly from the alias (e.g. updatedBy) + // First try to pull the value directly from the alias (e.g. updatedBy) var value = result[alias]; - + // If this returns an object, look for the name property of that (e.g. owner.name) if (value === Object(value)) { value = value['name']; @@ -515,4 +516,4 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific } -angular.module("umbraco").controller("Umbraco.PropertyEditors.ListViewController", listViewController); \ No newline at end of file +angular.module("umbraco").controller("Umbraco.PropertyEditors.ListViewController", listViewController); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html index 1ea594fa10..294a24c3d0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html @@ -52,9 +52,9 @@ + ng-if="options.layout.layouts" + layouts="options.layout.layouts" + active-layout="options.layout.activeLayout"> @@ -120,7 +120,7 @@ -
+