From 0992bd849a47b6eb57c47015b94b1ce5e341b0ad Mon Sep 17 00:00:00 2001 From: Kenn Jacobsen Date: Thu, 9 Jan 2020 13:16:31 +0100 Subject: [PATCH] Review: Media picker UX updates (#5241) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Don't allow editing media items (including folders) in the media picker * Define explicitly if media grid files and folders can be opened + remove "edit item" functionality * Ensure that files and folders can always be opened (edited) in the media library grid view * Remove "edit item" handling from the media picker + update click handlers to select items when their names are clicked (when applicable) * Remove obsolete "allowMediaEdit" from mediapicker controller. * Remove obsolete "allowMediaEdit" from mediapicker controller again (after merge). * Make things work again after merging from latest dev * Corrected focusable elements + hover styling * breadcrumbs styling adjustment Co-authored-by: Niels Lyngsø --- .../components/umbmediagrid.directive.js | 13 ++---- .../src/less/components/umb-breadcrumbs.less | 26 +++++++++--- .../src/less/components/umb-media-grid.less | 34 +++++++++++---- .../src/less/property-editors.less | 2 +- .../mediapicker/mediapicker.controller.js | 42 ++++--------------- .../mediapicker/mediapicker.html | 11 +++-- .../src/views/components/umb-media-grid.html | 20 ++++++--- .../prevalueeditors/mediafolderpicker.html | 2 +- .../listview/layouts/grid/grid.html | 4 +- .../mediapicker/mediapicker.controller.js | 2 +- .../mediapicker/mediapicker.html | 2 +- 11 files changed, 84 insertions(+), 74 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js index 1b011d2e19..1c4bf4d583 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js @@ -312,14 +312,7 @@ Use this directive to generate a thumbnail grid of media items. scope.onDetailsHover(item, $event, hover); } }; - - scope.clickEdit = function(item, $event) { - if (scope.onClickEdit) { - scope.onClickEdit({"item": item}) - $event.stopPropagation(); - } - }; - + var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue) { if (angular.isArray(newValue)) { activate(); @@ -341,8 +334,8 @@ Use this directive to generate a thumbnail grid of media items. onDetailsHover: "=", onClick: '=', onClickName: "=", - onClickEdit: "&?", - allowOnClickEdit: "@?", + allowOpenFolder: "=", + allowOpenFile: "=", filterBy: "=", itemMaxWidth: "@", itemMaxHeight: "@", diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less index 0afcfdd1f9..630bc4c11b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less @@ -4,6 +4,7 @@ margin-left: 0; display: flex; flex-wrap: wrap; + user-select: none; } .umb-breadcrumbs__ancestor { @@ -12,10 +13,23 @@ } .umb-breadcrumbs__action { + position: relative; background: transparent; border: 0 none; - padding: 0; - margin-top: -4px; + border-radius: 3px; + padding: 0 4px; + color: @ui-option-type; + + &.--current { + font-weight: bold; + pointer-events: none; + } + + &:hover { + color: @ui-option-type-hover; + background-color: @white; + } + } .umb-breadcrumbs__ancestor-link, @@ -39,13 +53,13 @@ .umb-breadcrumbs__separator { position: relative; top: 1px; - margin-left: 5px; - margin-right: 5px; + margin: 0 1px; + margin-top: -3px; color: @gray-7; } input.umb-breadcrumbs__add-ancestor { - height: 25px; - margin: 0 0 0 3px; + height: 24px; + margin: -2px 0 -2px 3px; width: 100px; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less index 4feadc272c..5d6b7ad962 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less @@ -40,25 +40,41 @@ } } -.umb-media-grid__item.-selectable { +.umb-media-grid__item.-selectable, +.umb-media-grid__item.-folder {// If folders isnt selectable, they opens if clicked, therefor... cursor: pointer; - - .tabbing-active &:focus { - outline: 2px solid @inputBorderTabFocus; - } } .umb-media-grid__item.-file { background-color: @white; } +.umb-media-grid__item.-folder { + + &.-selectable { + .media-grid-item-edit:hover .umb-media-grid__item-name, + .media-grid-item-edit:focus .umb-media-grid__item-name { + text-decoration: underline; + } + } + + &.-unselectable { + &:hover, &:focus { + .umb-media-grid__item-name { + text-decoration: underline; + } + } + } +} + + .umb-media-grid__item.-selected { color:@ui-selected-type; .umb-media-grid__item-overlay { color: @ui-selected-type; } } -.umb-media-grid__item.-selected, +.umb-media-grid__item.-selected, .umb-media-grid__item.-selectable:hover { &::before { content: ""; @@ -139,10 +155,10 @@ background: fade(@white, 92%); transition: opacity 150ms; - &:hover { + &.-can-open:hover { text-decoration: underline; } - + .tabbing-active &:focus { opacity: 1; } @@ -190,7 +206,7 @@ align-items: center; color: @black; transition: opacity 150ms; - + &:hover { color: @ui-action-discreet-type-hover; } diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index d3961cbba0..112f94572d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -249,7 +249,7 @@ transition: all 150ms ease-in-out; - &:focus, + &:active, &:hover { color: @ui-action-discreet-type-hover; border-color: @ui-action-discreet-type-hover; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js index bb7ce6f727..01f61a16ae 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js @@ -1,7 +1,7 @@ //used for the media picker dialog angular.module("umbraco") .controller("Umbraco.Editors.MediaPickerController", - function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService) { + function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService) { var vm = this; @@ -22,7 +22,6 @@ angular.module("umbraco") vm.clickHandler = clickHandler; vm.clickItemName = clickItemName; - vm.editMediaItem = editMediaItem; vm.gotoFolder = gotoFolder; var dialogOptions = $scope.model; @@ -37,8 +36,7 @@ angular.module("umbraco") $scope.cropSize = dialogOptions.cropSize; $scope.lastOpenedNode = localStorageService.get("umbLastOpenedMediaNodeId"); $scope.lockedFolder = true; - $scope.allowMediaEdit = dialogOptions.allowMediaEdit ? dialogOptions.allowMediaEdit : false; - + var userStartNodes = []; var umbracoSettings = Umbraco.Sys.ServerVariables.umbracoSettings; @@ -132,7 +130,7 @@ angular.module("umbraco") // ID of a UDI or legacy int ID still could be null/undefinied here // As user may dragged in an image that has not been saved to media section yet - if(id){ + if (id) { entityResource.getById(id, "Media") .then(function (node) { $scope.target = node; @@ -144,8 +142,7 @@ angular.module("umbraco") openDetailsDialog(); } }, gotoStartNode); - } - else { + } else { // No ID set - then this is going to be a tmpimg that has not been uploaded // User editing this will want to be changing the ALT text openDetailsDialog(); @@ -254,11 +251,14 @@ angular.module("umbraco") } } - function clickItemName(item) { + function clickItemName(item, event, index) { if (item.isFolder) { gotoFolder(item); } - } + else { + $scope.clickHandler(item, event, index); + } + }; function selectMedia(media) { if (!media.selectable) { @@ -510,30 +510,6 @@ angular.module("umbraco") } } - function editMediaItem(item) { - var mediaEditor = { - id: item.id, - submit: function (model) { - editorService.close() - // update the media picker item in the picker so it matched the saved media item - // the media picker is using media entities so we get the - // entity so we easily can format it for use in the media grid - if (model && model.mediaNode) { - entityResource.getById(model.mediaNode.id, "media") - .then(function (mediaEntity) { - angular.extend(item, mediaEntity); - setMediaMetaData(item); - setUpdatedMediaNodes(item); - }); - } - }, - close: function (model) { - setUpdatedMediaNodes(item); - editorService.close(); - } - }; - editorService.mediaEditor(mediaEditor); - }; /** * Called when the umbImageGravity component updates the focal point value diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html index 373dfbcba7..917010dbb6 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html @@ -56,19 +56,19 @@
  • -
  • - +
  • - +
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html index 87ccf08d62..5d93c59f5e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html @@ -27,7 +27,7 @@
  • -
    • 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 6c7a9c7f06..07d5215793 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 @@ -52,7 +52,9 @@ + on-click-name="vm.goToItem" + allow-open-folder="true" + allow-open-file="true">
  • -