From 95b4f9141ef5ee4f335ed7b8cdfb9093a8982235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 1 Feb 2019 14:06:44 +0100 Subject: [PATCH 01/13] test for gathering url for list items so you can Ctrl/CMD+click. --- .../components/umbcontentgrid.directive.js | 7 ++++ .../components/umbtable.directive.js | 7 ++++ .../src/views/components/umb-table.html | 3 +- .../grid/grid.listviewlayout.controller.js | 37 +++++++++++++++++-- .../listview/layouts/list/list.html | 1 + .../list/list.listviewlayout.controller.js | 32 ++++++++++++++-- 6 files changed, 79 insertions(+), 8 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 3994770c8e..5bacda4ecd 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 @@ -115,6 +115,12 @@ Use this directive to generate a list of content items presented as a flexbox gr scope.onClick(item, $event, $index); } }; + + scope.getItemUrl = function(item) { + if(scope.getItemUrl) { + scope.getItemUrl(item); + } + }; scope.clickItemName = function(item, $event, $index) { if(scope.onClickName) { @@ -131,6 +137,7 @@ Use this directive to generate a list of content items presented as a flexbox gr scope: { content: '=', contentProperties: "=", + getItemUrl: "&", onClick: "=", onClickName: "=" }, diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js index ae41073c0d..1a297f7cc3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js @@ -123,6 +123,12 @@ } }; + vm.getItemUrl = function (item) { + if (vm.getItemUrl) { + vm.getItemUrl({ item: item}); + } + }; + vm.selectItem = function (item, $index, $event) { if (vm.onSelect) { vm.onSelect({ item: item, $index: $index, $event: $event }); @@ -171,6 +177,7 @@ allowSelectAll: '<', onSelect: '&', onClick: '&', + getItemUrl: '&', onSelectAll: '&', onSelectedAll: '&', onSortingDirection: '&', diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html index efd212b517..36c5814986 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html @@ -40,7 +40,8 @@
- diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js index 9a28627aa1..3060928d7e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js @@ -9,7 +9,7 @@ (function () { "use strict"; - function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper, mediaTypeHelper) { + function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper, mediaTypeHelper, editorService) { var vm = this; var umbracoSettings = Umbraco.Sys.ServerVariables.umbracoSettings; @@ -115,9 +115,38 @@ function selectFolder(folder, $event, $index) { listViewHelper.selectHandler(folder, $index, $scope.folders, $scope.selection, $event); } - - function goToItem(item, $event, $index) { - $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id); + + function getItemUrl(item) { + // if item.id is 2147483647 (int.MaxValue) use item.key + + console.log("request URL for", item) + console.log($scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id)) + + return $scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id); + } + + function goToItem(node, $event, $index) { + + var contentEditor = { + id: node.id, + submit: function (model) { + // update the node + node.name = model.contentNode.name; + // TODO: node.description = model.contentNode.description; + node.published = model.contentNode.hasPublishedVersion; + if (entityType !== "Member") { + entityResource.getUrl(model.contentNode.id, entityType).then(function (data) { + node.url = data; + }); + } + editorService.close(); + }, + close: function () { + editorService.close(); + } + }; + editorService.contentEditor(contentEditor); + } activate(); 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 index 4cfa8c7984..d095adc7e3 100644 --- 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 @@ -44,6 +44,7 @@ item-properties="options.includeProperties" on-select="vm.selectItem(item, $index, $event)" on-click="vm.clickItem(item)" + get-item-url="vm.getItemUrl(item)" on-select-all="vm.selectAll($event)" on-selected-all="vm.isSelectedAll()" on-sorting-direction="vm.isSortDirection(col, direction)" diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js index 00e6c6edb4..881ce7bdcd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js @@ -22,6 +22,7 @@ vm.selectItem = selectItem; vm.clickItem = clickItem; + vm.getItemUrl = getItemUrl; vm.selectAll = selectAll; vm.isSelectedAll = isSelectedAll; vm.isSortDirection = isSortDirection; @@ -51,10 +52,35 @@ function selectItem(selectedItem, $index, $event) { listViewHelper.selectHandler(selectedItem, $index, $scope.items, $scope.selection, $event); } - - function clickItem(item) { + + function getItemUrl(item) { // if item.id is 2147483647 (int.MaxValue) use item.key - $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id)); + return $scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id); + } + + function clickItem(item) { + + var contentEditor = { + id: node.id, + submit: function (model) { + // update the node + node.name = model.contentNode.name; + // TODO: node.description = model.contentNode.description; + node.published = model.contentNode.hasPublishedVersion; + if (entityType !== "Member") { + entityResource.getUrl(model.contentNode.id, entityType).then(function (data) { + node.url = data; + }); + } + editorService.close(); + }, + close: function () { + editorService.close(); + } + }; + editorService.contentEditor(contentEditor); + + } function isSortDirection(col, direction) { From 1098db1632e6dfc2d1fa79ad1e62478680630ca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 11 Mar 2019 14:52:16 +0100 Subject: [PATCH 02/13] use item.editPath for new tab URL --- .../components/umbcontentgrid.directive.js | 11 +++-------- .../directives/components/umbtable.directive.js | 12 +++--------- .../src/less/components/umb-content-grid.less | 4 ++-- .../src/views/components/umb-content-grid.html | 7 +++++-- .../src/views/components/umb-table.html | 2 +- .../layouts/grid/grid.listviewlayout.controller.js | 9 --------- .../propertyeditors/listview/layouts/list/list.html | 1 - .../layouts/list/list.listviewlayout.controller.js | 4 ++-- 8 files changed, 16 insertions(+), 34 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 5bacda4ecd..f226d924af 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 @@ -115,17 +115,13 @@ Use this directive to generate a list of content items presented as a flexbox gr scope.onClick(item, $event, $index); } }; - - scope.getItemUrl = function(item) { - if(scope.getItemUrl) { - scope.getItemUrl(item); - } - }; scope.clickItemName = function(item, $event, $index) { - if(scope.onClickName) { + if(scope.onClickName && !($event.metaKey || $event.ctrlKey)) { scope.onClickName(item, $event, $index); + $event.preventDefault(); } + $event.stopPropagation(); }; } @@ -137,7 +133,6 @@ Use this directive to generate a list of content items presented as a flexbox gr scope: { content: '=', contentProperties: "=", - getItemUrl: "&", onClick: "=", onClickName: "=" }, diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js index 1a297f7cc3..3f1929e97d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js @@ -117,16 +117,11 @@ var vm = this; vm.clickItem = function (item, $event) { - if (vm.onClick) { + if (vm.onClick && !($event.metaKey || $event.ctrlKey)) { vm.onClick({ item: item}); - $event.stopPropagation(); - } - }; - - vm.getItemUrl = function (item) { - if (vm.getItemUrl) { - vm.getItemUrl({ item: item}); + $event.preventDefault(); } + $event.stopPropagation(); }; vm.selectItem = function (item, $index, $event) { @@ -177,7 +172,6 @@ allowSelectAll: '<', onSelect: '&', onClick: '&', - getItemUrl: '&', onSelectAll: '&', onSelectedAll: '&', onSortingDirection: '&', 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 d2fa2be0c7..2a4a3be2e4 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 @@ -13,7 +13,6 @@ user-select: none; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16); border-radius: 3px; - } .umb-content-grid__item.-selected { @@ -59,7 +58,8 @@ display: inline-flex; color: @ui-option-type; - &:hover { + &:hover, &:focus { + text-decoration: none; color:@ui-option-type-hover; } } 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 487be4af87..ce85537d7c 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 @@ -10,10 +10,13 @@
-
+ {{ item.name }} -
+
  • diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html index 36c5814986..65955f31eb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html @@ -41,7 +41,7 @@
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js index 3060928d7e..70dd2926b6 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js @@ -116,15 +116,6 @@ listViewHelper.selectHandler(folder, $index, $scope.folders, $scope.selection, $event); } - function getItemUrl(item) { - // if item.id is 2147483647 (int.MaxValue) use item.key - - console.log("request URL for", item) - console.log($scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id)) - - return $scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id); - } - function goToItem(node, $event, $index) { var contentEditor = { 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 index d095adc7e3..4cfa8c7984 100644 --- 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 @@ -44,7 +44,6 @@ item-properties="options.includeProperties" on-select="vm.selectItem(item, $index, $event)" on-click="vm.clickItem(item)" - get-item-url="vm.getItemUrl(item)" on-select-all="vm.selectAll($event)" on-selected-all="vm.isSelectedAll()" on-sorting-direction="vm.isSortDirection(col, direction)" diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js index b796da8d0f..f26f077e66 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js @@ -19,7 +19,7 @@ vm.activeDrag = false; vm.isRecycleBin = $scope.contentId === '-21' || $scope.contentId === '-20'; vm.acceptedMediatypes = []; - + vm.selectItem = selectItem; vm.clickItem = clickItem; vm.selectAll = selectAll; @@ -55,7 +55,7 @@ function clickItem(item) { // if item.id is 2147483647 (int.MaxValue) use item.key $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id)); - } + } function isSortDirection(col, direction) { return listViewHelper.setSortingDirection(col, direction, $scope.options); From 48ec795e7b9450f036006a2ba3285565554aeb5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 11 Mar 2019 14:54:11 +0100 Subject: [PATCH 03/13] do not open as infinite editing yet. --- .../grid/grid.listviewlayout.controller.js | 24 ++----------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js index 70dd2926b6..9a2ff4975d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js @@ -116,28 +116,8 @@ listViewHelper.selectHandler(folder, $index, $scope.folders, $scope.selection, $event); } - function goToItem(node, $event, $index) { - - var contentEditor = { - id: node.id, - submit: function (model) { - // update the node - node.name = model.contentNode.name; - // TODO: node.description = model.contentNode.description; - node.published = model.contentNode.hasPublishedVersion; - if (entityType !== "Member") { - entityResource.getUrl(model.contentNode.id, entityType).then(function (data) { - node.url = data; - }); - } - editorService.close(); - }, - close: function () { - editorService.close(); - } - }; - editorService.contentEditor(contentEditor); - + function goToItem(item, $event, $index) { + $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id); } activate(); From 4a26bfe3c3a288fc689d6c5c95475561c1e289b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2019 15:00:32 +0100 Subject: [PATCH 04/13] clean up imports --- .../listview/layouts/grid/grid.listviewlayout.controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js index 9a2ff4975d..292ca3f975 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js @@ -9,7 +9,7 @@ (function () { "use strict"; - function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper, mediaTypeHelper, editorService) { + function ListViewGridLayoutController($scope, mediaHelper, $location, listViewHelper, mediaTypeHelper) { var vm = this; var umbracoSettings = Umbraco.Sys.ServerVariables.umbracoSettings; From 873d230e0e9111b57ea2f2b6c18b06664f4cf647 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2019 16:19:02 +0100 Subject: [PATCH 05/13] improve hover state for open user --- .../src/less/components/users/umb-user-cards.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less index e24f68078b..3508750232 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less @@ -50,8 +50,13 @@ .umb-user-card__goToUser { &:hover { + text-decoration: none; .umb-user-card__name { - text-decoration: underline; + text-decoration: underline; + color: @ui-option-type-hover; + } + .umb-avatar { + border: 1px solid @ui-option-type-hover; } } } From c6dfc28f0388d15502a75be0a33f64b717e0db8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2019 16:34:41 +0100 Subject: [PATCH 06/13] make open user able to open in a new tab + only use pointer is selectable + improved hover state for open user --- .../less/components/users/umb-user-cards.less | 6 ++- .../users/views/users/users.controller.js | 38 ++++++++++++++---- .../src/views/users/views/users/users.html | 40 +++++++++++-------- 3 files changed, 57 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less index 3508750232..7fb4f543a7 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less @@ -17,6 +17,10 @@ outline: none; text-decoration: none !important; } + +.umb-user-card.-selectable { + cursor: pointer; +} .umb-user-card.-selected { &::before { content: ""; @@ -31,7 +35,6 @@ box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); pointer-events: none; } - } .umb-user-card__content { @@ -44,7 +47,6 @@ box-sizing: border-box; display: flex; flex-direction: column; - cursor: pointer; max-width: 100%; } diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index 941d72b8c9..65520ef638 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -96,6 +96,7 @@ vm.toggleFilter = toggleFilter; vm.setUsersViewState = setUsersViewState; vm.selectLayout = selectLayout; + vm.isSelectable = isSelectable; vm.selectUser = selectUser; vm.clearSelection = clearSelection; vm.clickUser = clickUser; @@ -200,10 +201,14 @@ selectedLayout.active = true; vm.activeLayout = selectedLayout; } - + + function isSelectable(user) { + return !user.isCurrentUser; + } + function selectUser(user) { - if (user.isCurrentUser) { + if (!isSelectable(user)) { return; } @@ -227,10 +232,14 @@ vm.selection = []; } - function clickUser(user) { - goToUser(user.id); + function clickUser(user, $event) { + if (!($event.metaKey || $event.ctrlKey)) { + goToUser(user); + $event.preventDefault(); + } + $event.stopPropagation(); } - + function disableUsers() { vm.disableUserButtonState = "busy"; usersResource.disableUsers(vm.selection).then(function (data) { @@ -551,8 +560,12 @@ vm.page.copyPasswordButtonState = "init"; } - function goToUser(userId) { - $location.path('users/users/user/' + userId).search("create", null).search("invite", null); + function goToUser(user) { + $location.path('users/users/user/' + user.id).search("create", null).search("invite", null); + } + + function getEditPath(user) { + return '/users/users/user/' + user.id; } // helpers @@ -569,8 +582,9 @@ vm.usersOptions.pageSize = data.pageSize; vm.usersOptions.totalItems = data.totalItems; vm.usersOptions.totalPages = data.totalPages; - + formatDates(vm.users); + addEditPaths(vm.users); setUserDisplayState(vm.users); vm.userStatesFilter = usersHelper.getUserStatesFilter(data.userStates); @@ -610,6 +624,14 @@ } }); } + + function addEditPaths(users) { + angular.forEach(users, function (user) { + if (!user.editPath) { + user.editPath = getEditPath(user); + } + }); + } function setBulkActions(users) { diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index cefc3c5c86..483d4e2bc4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -191,18 +191,18 @@
-
+
-
- - {{ user.userDisplayState.name }} - + + {{ user.userDisplayState.name }} + +
{{user.name}}
-
+
{{ userGroup.name }},
@@ -257,16 +257,22 @@
- - - + + + + + + + + + {{user.name}} + - {{user.name}} {{ userGroup.name }}, {{ user.formattedLastLogin }} @@ -490,7 +496,7 @@ type="button" button-style="action" label-key="user_goToProfile" - action="vm.goToUser(vm.newUser.id);" + action="vm.goToUser(vm.newUser);" size="m">
@@ -540,7 +546,7 @@ type="button" button-style="action" label-key="user_goToProfile" - action="vm.goToUser(vm.newUser.id);" + action="vm.goToUser(vm.newUser);" size="m">
From 970f336a5d848f63617b8cce3f54e87075562d0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Mar 2019 16:41:34 +0100 Subject: [PATCH 07/13] clean up imports --- .../src/views/users/views/users/users.controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index 65520ef638..1ddb27991d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -1,7 +1,7 @@ (function () { "use strict"; - function UsersController($scope, $timeout, $location, $routeParams, usersResource, userGroupsResource, userService, localizationService, contentEditingHelper, usersHelper, formHelper, notificationsService, dateHelper, editorService) { + function UsersController($scope, $timeout, $location, $routeParams, usersResource, userGroupsResource, userService, localizationService, usersHelper, formHelper, dateHelper, editorService) { var vm = this; var localizeSaving = localizationService.localize("general_saving"); From 137c08eaf30e0099b36072753e6f67bb64783e03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 19 Mar 2019 09:06:05 +0100 Subject: [PATCH 08/13] Parse $event argument --- .../src/views/users/views/users/users.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 483d4e2bc4..4131076118 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -196,7 +196,7 @@ {{ user.userDisplayState.name }} - +
@@ -258,7 +258,7 @@
- + - + {{user.name}} From 542eb2ab1d9a82c535a2a87426e7304778f8c388 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 19 Mar 2019 10:04:13 +0100 Subject: [PATCH 09/13] borrow great stuff from KJAC. --- .../less/components/users/umb-user-cards.less | 2 +- .../users/views/users/users.controller.js | 46 +++++++++++-------- .../src/views/users/views/users/users.html | 10 ++-- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less index 7fb4f543a7..190f977880 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less @@ -51,7 +51,7 @@ } .umb-user-card__goToUser { - &:hover { + &:hover, &:focus { text-decoration: none; .umb-user-card__name { text-decoration: underline; diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index 1ddb27991d..d19339931a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -231,15 +231,28 @@ }); vm.selection = []; } - - function clickUser(user, $event) { - if (!($event.metaKey || $event.ctrlKey)) { - goToUser(user); - $event.preventDefault(); - } - $event.stopPropagation(); - } + function clickUser(user, $event) { + + $event.stopPropagation(); + + if ($event) { + // targeting a new tab/window? + if ($event.ctrlKey || + $event.shiftKey || + $event.metaKey || // apple + ($event.button && $event.button === 1) // middle click, >IE9 + everyone else + ) { + // yes, let the link open itself + return; + } + } + + goToUser(user); + $event.preventDefault(); + + } + function disableUsers() { vm.disableUserButtonState = "busy"; usersResource.disableUsers(vm.selection).then(function (data) { @@ -561,11 +574,15 @@ } function goToUser(user) { - $location.path('users/users/user/' + user.id).search("create", null).search("invite", null); + $location.path(pathToUser(user.id).search("create", null).search("invite", null); } function getEditPath(user) { - return '/users/users/user/' + user.id; + return pathToUser(userId) + "?mculture=" + $location.search().mculture; + } + + function pathToUser(userId) { + return "/users/users/user/" + userId; } // helpers @@ -584,7 +601,6 @@ vm.usersOptions.totalPages = data.totalPages; formatDates(vm.users); - addEditPaths(vm.users); setUserDisplayState(vm.users); vm.userStatesFilter = usersHelper.getUserStatesFilter(data.userStates); @@ -624,14 +640,6 @@ } }); } - - function addEditPaths(users) { - angular.forEach(users, function (user) { - if (!user.editPath) { - user.editPath = getEditPath(user); - } - }); - } function setBulkActions(users) { diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 4131076118..27c8c295ab 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -191,12 +191,12 @@
-
+
{{ user.userDisplayState.name }} - +
@@ -244,7 +244,7 @@ @@ -258,7 +258,7 @@
- + - + {{user.name}} From 4b02bf2ddf41e691dff97309ff64076c70afe031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 19 Mar 2019 10:55:36 +0100 Subject: [PATCH 10/13] use umb-table for users table --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../less/components/users/umb-user-table.less | 27 ++++++++ .../src/views/users/views/users/users.html | 61 +++++++++---------- 3 files changed, 57 insertions(+), 32 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 88988485fe..8c0df988d1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -167,6 +167,7 @@ @import "components/umb-property-file-upload.less"; @import "components/users/umb-user-cards.less"; +@import "components/users/umb-user-table.less"; @import "components/users/umb-user-details.less"; @import "components/users/umb-user-group-picker-list.less"; @import "components/users/umb-user-group-preview.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less new file mode 100644 index 0000000000..fcbefa934c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less @@ -0,0 +1,27 @@ +.umb-user-table-col-avatar { + flex: 0 0 32px; + padding: 15px 0; +} + +.umb-user-table-row { + cursor: default; +} + +.umb-user-table-row.-selectable { + cursor: pointer; +} +.umb-user-table-row.-selected { + + &::before { + content: ""; + position: absolute; + z-index:1; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border: 2px solid @ui-selected-border; + box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%); + pointer-events: none; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 27c8c295ab..2d5c38da0f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -226,38 +226,35 @@
- - - - - - - - - - - - - +
+
Name
+
User group
+
Last login
+
Status
+ + +
+
-
- - - - - - - -
+
+
+
+
-
NameUser groupLast loginStatus
+ ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}" + class="umb-table-row umb-user-table-row"> +
-
+ +
-
+ +
{{user.name}} -
{{ userGroup.name }}, {{ user.formattedLastLogin }} + +
{{ userGroup.name }},
+
{{ user.formattedLastLogin }}
+
{{ user.userDisplayState.name }} -
+
+
+
+
From 3f10c78bee189d4230d1148b5475176dd5b2d549 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 19 Mar 2019 11:04:52 +0100 Subject: [PATCH 11/13] correct js error --- .../src/views/users/views/users/users.controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index d19339931a..7080303eb0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -574,7 +574,7 @@ } function goToUser(user) { - $location.path(pathToUser(user.id).search("create", null).search("invite", null); + $location.path(pathToUser(user.id).search("create", null).search("invite", null)); } function getEditPath(user) { From 7f45d852ed8dc225062af6f3d7075423725abbc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 19 Mar 2019 13:03:02 +0100 Subject: [PATCH 12/13] fix search icon location --- src/Umbraco.Web.UI.Client/src/less/listview.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less index 8b5a295752..c77e4fd1a4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/listview.less +++ b/src/Umbraco.Web.UI.Client/src/less/listview.less @@ -30,7 +30,7 @@ position: absolute; padding: 5px 8px; pointer-events: none; - top: 0; + top: 2px; } input[type="text"] { From 9597bde7bb81da4625cbf20c795d0170528dfaf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 19 Mar 2019 13:03:59 +0100 Subject: [PATCH 13/13] visual corrections + remember view layout in a cookie --- .../less/components/users/umb-user-table.less | 94 ++++++++++++++----- .../users/views/users/users.controller.js | 33 +++++-- .../src/views/users/views/users/users.html | 6 +- 3 files changed, 98 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less index fcbefa934c..1fcaf04183 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less @@ -1,27 +1,73 @@ -.umb-user-table-col-avatar { - flex: 0 0 32px; - padding: 15px 0; -} +.umb-user-table { -.umb-user-table-row { - cursor: default; -} - -.umb-user-table-row.-selectable { - cursor: pointer; -} -.umb-user-table-row.-selected { - - &::before { - content: ""; - position: absolute; - z-index:1; - top: 1px; - left: 1px; - right: 1px; - bottom: 1px; - border: 2px solid @ui-selected-border; - box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%); - pointer-events: none; + .umb-user-table-col-avatar { + flex: 0 0 32px; + padding: 15px 0; } + + .umb-table-cell a { + &:hover, &:focus { + .umb-avatar { + border: 1px solid @ui-option-type-hover; + } + } + } + + .umb-table-body .umb-table-cell.umb-table__name { + margin: 0; + padding: 0; + a { + display: flex; + padding: 6px 2px; + height: 42px; + span { + margin: auto 14px; + } + } + } + .umb-table-cell.umb-table__name a { + &:hover, &:focus { + text-decoration: underline; + } + } + + .umb-user-table-row { + cursor: default; + .umb-checkmark { + visibility: hidden; + } + } + + .umb-user-table-row.-selectable { + cursor: pointer; + + + } + + .umb-user-table-row.-selectable:hover { + .umb-checkmark { + visibility: visible; + } + } + + .umb-user-table-row.-selected { + + .umb-checkmark { + visibility: visible; + } + + &::before { + content: ""; + position: absolute; + z-index:1; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border: 2px solid @ui-selected-border; + box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%); + pointer-events: none; + } + } + } diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index 7080303eb0..f2cf4e6fd8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -1,7 +1,9 @@ (function () { "use strict"; - function UsersController($scope, $timeout, $location, $routeParams, usersResource, userGroupsResource, userService, localizationService, usersHelper, formHelper, dateHelper, editorService) { + function UsersController($scope, $timeout, $location, $routeParams, usersResource, + userGroupsResource, userService, localizationService, usersHelper, formHelper, + dateHelper, editorService, $cookies) { var vm = this; var localizeSaving = localizationService.localize("general_saving"); @@ -63,10 +65,18 @@ "selected": true } ]; - - // Set card layout to active by default - vm.activeLayout = vm.layouts[0]; - + + var cookieUmbUserLayout = $cookies.get("umbUserLayout"); + + if (cookieUmbUserLayout) { + vm.activeLayout = vm.layouts.find(x => x.path === cookieUmbUserLayout); + } + if (vm.activeLayout === undefined) { + // Set card layout to active by default + vm.activeLayout = vm.layouts[0]; + } + + // Don't show the invite button if no email is configured if (Umbraco.Sys.ServerVariables.umbracoSettings.showUserInvite) { vm.defaultButton = { @@ -100,6 +110,7 @@ vm.selectUser = selectUser; vm.clearSelection = clearSelection; vm.clickUser = clickUser; + vm.getEditPath = getEditPath; vm.disableUsers = disableUsers; vm.enableUsers = enableUsers; vm.unlockUsers = unlockUsers; @@ -200,6 +211,10 @@ }); selectedLayout.active = true; vm.activeLayout = selectedLayout; + + var expireDate = new Date(); + expireDate.setDate(expireDate.getDate() + 365); + $cookies.put("umbUserLayout", selectedLayout.path, {path: "/", expires: expireDate}); } function isSelectable(user) { @@ -574,15 +589,15 @@ } function goToUser(user) { - $location.path(pathToUser(user.id).search("create", null).search("invite", null)); + $location.path(pathToUser(user)).search("create", null).search("invite", null); } function getEditPath(user) { - return pathToUser(userId) + "?mculture=" + $location.search().mculture; + return pathToUser(user) + "?mculture=" + $location.search().mculture; } - function pathToUser(userId) { - return "/users/users/user/" + userId; + function pathToUser(user) { + return "/users/users/user/" + user.id; } // helpers diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 2d5c38da0f..26bc478b08 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -226,7 +226,7 @@
-
+
@@ -267,7 +267,9 @@
- {{user.name}} + + {{user.name}} +
{{ userGroup.name }},