From fdeaaad738e61098ac910b47ed23bc5ea0e93c92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 11 Sep 2019 10:12:01 +0200 Subject: [PATCH] allow mediapicker to only pick folders --- .../components/umbmediagrid.directive.js | 22 ++++++++++++++++++- .../src/less/components/umb-media-grid.less | 20 +++++++++++++---- .../mediapicker/mediapicker.controller.js | 18 +++++++++------ .../mediapicker/mediapicker.html | 2 ++ .../src/views/components/umb-media-grid.html | 2 +- 5 files changed, 51 insertions(+), 13 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 6a11b07734..ec4469e56f 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 @@ -118,7 +118,9 @@ Use this directive to generate a thumbnail grid of media items. var item = scope.items[i]; setItemData(item); setOriginalSize(item, itemMaxHeight); - + + item.selectable = getSelectableState(item); + // remove non images when onlyImages is set to true if(scope.onlyImages === "true" && !item.isFolder && !item.thumbnail){ scope.items.splice(i, 1); @@ -188,6 +190,22 @@ Use this directive to generate a thumbnail grid of media items. } } } + + /** + * Returns wether a item should be selectable or not. + */ + function getSelectableState(item) { + + // check if item is a folder or image + if (item.isFolder) { + return !scope.disableFolderSelect && !scope.onlyImages; + } else { + return !scope.onlyFolders; + } + + return false; + + } function setOriginalSize(item, maxHeight) { @@ -331,7 +349,9 @@ Use this directive to generate a thumbnail grid of media items. itemMaxHeight: "@", itemMinWidth: "@", itemMinHeight: "@", + disableFolderSelect: "@", onlyImages: "@", + onlyFolders: "@", includeSubFolders: "@", currentFolderId: "@" }, 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 8c8e4b101c..840377647c 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 @@ -21,12 +21,19 @@ margin: 10px; position: relative; - user-select: none; - cursor: pointer; + user-select: none; box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); transition: box-shadow 150ms ease-in-out; } +.umb-media-grid__item.-unselectable { + +} + +.umb-media-grid__item.-selectable { + cursor: pointer; +} + .umb-media-grid__item.-file { background-color: @white; } @@ -37,7 +44,8 @@ color: @ui-selected-type; } } -.umb-media-grid__item.-selected, .umb-media-grid__item:hover { +.umb-media-grid__item.-selected, +.umb-media-grid__item.-selectable:hover { &::before { content: ""; position: absolute; @@ -52,7 +60,7 @@ pointer-events: none; } } -.umb-media-grid__item:hover { +.umb-media-grid__item.-selectable:hover { &::before { opacity: .33; } @@ -159,6 +167,10 @@ } } +.umb-media-grid__item-name { + cursor: pointer; +} + .umb-media-grid__item-name { white-space: nowrap; overflow: hidden; 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 47182bfbee..faabb73708 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 @@ -2,7 +2,7 @@ angular.module("umbraco") .controller("Umbraco.Editors.MediaPickerController", function ($scope, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService) { - + if (!$scope.model.title) { localizationService.localizeMany(["defaultdialogs_selectMedia", "general_includeFromsubFolders"]) .then(function (data) { @@ -14,9 +14,10 @@ angular.module("umbraco") } var dialogOptions = $scope.model; - + $scope.disableFolderSelect = dialogOptions.disableFolderSelect; $scope.onlyImages = dialogOptions.onlyImages; + $scope.onlyFolders = dialogOptions.onlyFolders; $scope.showDetails = dialogOptions.showDetails; $scope.multiPicker = (dialogOptions.multiPicker && dialogOptions.multiPicker !== "0") ? true : false; $scope.startNodeId = dialogOptions.startNodeId ? dialogOptions.startNodeId : -1; @@ -188,26 +189,25 @@ angular.module("umbraco") }; $scope.clickHandler = function (image, event, index) { + if (image.isFolder) { if ($scope.disableFolderSelect) { $scope.gotoFolder(image); } else { - eventsService.emit("dialogs.mediaPicker.select", image); selectImage(image); } } else { - eventsService.emit("dialogs.mediaPicker.select", image); if ($scope.showDetails) { - + $scope.target = image; - + // handle both entity and full media object if (image.image) { $scope.target.url = image.image; } else { $scope.target.url = mediaHelper.resolveFile(image); } - + $scope.openDetailsDialog(); } else { selectImage(image); @@ -222,6 +222,9 @@ angular.module("umbraco") }; function selectImage(image) { + if(!image.selectable) { + return; + } if (image.selected) { for (var i = 0; $scope.model.selection.length > i; i++) { var imageInSelection = $scope.model.selection[i]; @@ -234,6 +237,7 @@ angular.module("umbraco") if (!$scope.multiPicker) { deselectAllImages($scope.model.selection); } + eventsService.emit("dialogs.mediaPicker.select", image); image.selected = true; $scope.model.selection.push(image); } 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 6eee269cee..b57fa96d44 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 @@ -98,7 +98,9 @@ item-max-height="150" item-min-width="100" item-min-height="100" + disable-folder-select={{disableFolderSelect}} only-images={{onlyImages}} + only-folder={{onlyFolders}} include-sub-folders={{showChilds}} current-Folder-id="{{currentFolder.id}}"> diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html index 4cc4c105fc..60f407f06b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html @@ -1,5 +1,5 @@
-
+