From 99a9af833ea4d35670d6b9816cd49710ef9a33ca Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 7 Oct 2015 14:31:48 +0200 Subject: [PATCH] U4-7179: add layout selector to list view --- .../components/umblayoutselector.directive.js | 105 +++++++++++++++++ src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../less/components/umb-layout-selector.less | 59 ++++++++++ .../views/components/umb-layout-selector.html | 15 +++ .../listview/layouts/list/list.html | 83 ++++++++++++++ .../listview/listview.controller.js | 23 ++++ .../propertyeditors/listview/listview.html | 106 +++--------------- 7 files changed, 304 insertions(+), 88 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umblayoutselector.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblayoutselector.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblayoutselector.directive.js new file mode 100644 index 0000000000..ea3eedd968 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblayoutselector.directive.js @@ -0,0 +1,105 @@ +(function() { + 'use strict'; + + function LayoutSelectorDirective() { + + function link(scope, el, attr, ctrl) { + + scope.layoutDropDownIsOpen = false; + scope.showLayoutSelector = true; + + function activate() { + + setVisibility(); + + setActiveLayout(scope.layouts); + + } + + function setVisibility() { + + var numberOfAllowedLayouts = getNumberOfAllowedLayouts(scope.layouts); + + if(numberOfAllowedLayouts === 1) { + scope.showLayoutSelector = false; + } + + } + + function getNumberOfAllowedLayouts(layouts) { + + var allowedLayouts = 0; + + for (var i = 0; layouts.length > i; i++) { + + var layout = layouts[i]; + + if(layout.selected === true) { + allowedLayouts++; + } + + } + + return allowedLayouts; + } + + function setActiveLayout(layouts) { + + for (var i = 0; layouts.length > i; i++) { + + var layout = layouts[i]; + + if(layout.name === scope.activeLayout.name && layout.path === scope.activeLayout.path) { + layout.active = true; + } + + } + + } + + scope.pickLayout = function(selectedLayout) { + + for (var i = 0; scope.layouts.length > i; i++) { + + var layout = scope.layouts[i]; + + layout.active = false; + } + + selectedLayout.active = true; + + scope.activeLayout = selectedLayout; + + scope.layoutDropDownIsOpen = false; + + }; + + scope.toggleLayoutDropdown = function() { + scope.layoutDropDownIsOpen = !scope.layoutDropDownIsOpen; + }; + + scope.closeLayoutDropdown = function() { + scope.layoutDropDownIsOpen = false; + }; + + activate(); + + } + + var directive = { + restrict: 'E', + replace: true, + templateUrl: 'views/components/umb-layout-selector.html', + scope: { + layouts: '=', + activeLayout: '=' + }, + link: link + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbLayoutSelector', LayoutSelectorDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 22e8fac980..f02cccf4d4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -95,6 +95,7 @@ @import "components/umb-tabs.less"; @import "components/umb-load-indicator.less"; @import "components/umb-breadcrumbs.less"; +@import "components/umb-layout-selector.less"; @import "components/overlays/umb-overlay-backdrop.less"; @import "components/buttons/umb-button.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less new file mode 100644 index 0000000000..43e0c5ae52 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less @@ -0,0 +1,59 @@ +.umb-layout-selector { + display: inline-block; + position: relative; +} + +.umb-layout-selector__active-layout { + box-sizing: border-box; + border: 1px solid transparent; + cursor: pointer; + height: 30px; + width: 30px; + margin: 0 8px; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.umb-layout-selector__active-layout:hover { + border-color: @grayLight; +} + +.umb-layout-selector__dropdown { + position: absolute; + padding: 5px; + background: #333; + z-index: 999; + display: flex; + background: #fff; + flex-wrap: wrap; + flex-direction: column; + transform: translate(-50%,0); + left: 50%; +} + +.umb-layout-selector__dropdown-item { + padding: 5px; + margin: 3px 5px; + display: flex; + align-content: center; + justify-content: center; + border: 1px solid transparent; + flex-direction: column; + cursor: pointer; +} + +.umb-layout-selector__dropdown-item:hover { + border: 1px solid @grayLight; +} + +.umb-layout-selector__dropdown-item.-active { + border: 1px solid @blue; +} + +.umb-layout-selector__dropdown-item-icon { + font-size: 20px; + color: @gray; + text-align: center; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html new file mode 100644 index 0000000000..a7b2e0e556 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html @@ -0,0 +1,15 @@ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html new file mode 100644 index 0000000000..d3363f613d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + Name + + + + + + + +
+

There are no items show in the list.

+
+ + + + + + {{result[column.alias]}} +
+
+
+ +
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 0569c9faca..5ac02b9045 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 @@ -51,6 +51,8 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific $scope.pagination = []; $scope.isNew = false; $scope.actionInProgress = false; + $scope.layout = {}; + $scope.layout.activeLayout = {}; $scope.listViewResultSet = { totalPages: 0, items: [] @@ -71,6 +73,9 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific 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) { @@ -91,6 +96,24 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific } }); + function getFirstAllowedLayout(layouts) { + + var firstAllowedLayout = {}; + + for (var i = 0; layouts.length > i; i++) { + + var layout = layouts[i]; + + if (layout.selected === true) { + firstAllowedLayout = layout; + break; + } + + } + + return firstAllowedLayout; + } + function showNotificationsAndReset(err, reload, successMsg) { //check if response is ysod 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 211524caf0..6bed8145a4 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 @@ -44,96 +44,26 @@ -
-
- - -
-
+
+ +
+
+ + +
+
+ + + + +
+ - - - - - +
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Name - - - - - - - -
-

There are no items show in the list.

-
- - - - - - {{result[column.alias]}} -
-
-
- -