diff --git a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card-grid.less b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card-grid.less index f7e5764335..ed5f6db8c1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card-grid.less +++ b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card-grid.less @@ -130,8 +130,10 @@ } .umb-media-card-grid__create-button.--disabled, -.umb-media-card-grid__create-button.--disabled:hover { +.umb-media-card-grid__create-button.--disabled:hover, +.umb-media-card-grid__create-button[disabled], +.umb-media-card-grid__create-button[disabled]:hover { color: @gray-7; border-color: @gray-7; - cursor: default; + cursor: not-allowed; } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html index 5e67aafe3e..c65172ab37 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html @@ -1 +1,4 @@ - + + diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html index f40c6bc437..4fe0b24320 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html @@ -13,7 +13,8 @@ class="btn-reset umb-media-card-grid--inline-create-button" ng-click="vm.addMediaAt($index, $event)" ng-controller="Umbraco.PropertyEditors.MediaPicker3PropertyEditor.CreateButtonController as inlineCreateButtonCtrl" - ng-mousemove="inlineCreateButtonCtrl.onMouseMove($event)"> + ng-mousemove="inlineCreateButtonCtrl.onMouseMove($event)" + ng-disabled="!vm.allowAddMedia">
@@ -29,7 +30,7 @@ - @@ -42,7 +43,7 @@ id="{{vm.model.alias}}" type="button" class="btn-reset umb-media-card-grid__create-button umb-outline" - ng-disabled="!vm.allowAdd" + ng-disabled="!vm.allowAddMedia" ng-click="vm.addMediaAt(vm.model.value.length, $event)">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js index 2699fa479b..0446dac804 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js @@ -28,7 +28,7 @@ } }); - function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource) { + function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs) { var unsubscribe = []; @@ -43,6 +43,10 @@ vm.activeMediaEntry = null; vm.supportCopy = clipboardService.isSupported(); + vm.allowAddMedia = true; + vm.allowRemoveMedia = true; + vm.allowEditMedia = true; + vm.addMediaAt = addMediaAt; vm.editMedia = editMedia; vm.removeMedia = removeMedia; @@ -55,6 +59,16 @@ vm.labels.content_createEmpty = data[1]; }); + $attrs.$observe('readonly', (value) => { + vm.readonly = value !== undefined; + + vm.allowAddMedia = !vm.readonly; + vm.allowRemoveMedia = !vm.readonly; + vm.allowEditMedia = !vm.readonly; + + vm.sortableOptions.disabled = vm.readonly; + }); + vm.$onInit = function() { vm.validationLimit = vm.model.config.validationLimit || {}; @@ -144,6 +158,8 @@ } function addMediaAt(createIndex, $event) { + if (!vm.allowAddMedia) return; + var mediaPicker = { startNodeId: vm.model.config.startNodeId, startNodeIsVirtual: vm.model.config.startNodeIsVirtual, @@ -203,6 +219,7 @@ // To be used by infinite editor. (defined here cause we need configuration from property editor) function changeMediaFor(mediaEntry, onSuccess) { + if (!vm.allowAddMedia) return; var mediaPicker = { startNodeId: vm.model.config.startNodeId, @@ -238,12 +255,15 @@ } function resetCrop(cropEntry) { + if (!vm.allowEditMedia) return; + Object.assign(cropEntry, vm.model.config.crops.find( c => c.alias === cropEntry.alias)); cropEntry.coordinates = null; setDirty(); } function updateMediaEntryData(mediaEntry) { + if (!vm.allowEditMedia) return; mediaEntry.crops = mediaEntry.crops || []; mediaEntry.focalPoint = mediaEntry.focalPoint || { @@ -263,6 +283,8 @@ } function removeMedia(media) { + if (!vm.allowRemoveMedia) return; + var index = vm.model.value.indexOf(media); if (index !== -1) { vm.model.value.splice(index, 1); @@ -270,6 +292,8 @@ } function deleteAllMedias() { + if (!vm.allowRemoveMedia) return; + vm.model.value = []; } @@ -278,6 +302,7 @@ } function editMedia(mediaEntry, options, $event) { + if (!vm.allowEditMedia) return; if($event) $event.stopPropagation(); @@ -370,6 +395,7 @@ } function requestPasteFromClipboard(createIndex, pasteEntry, pasteType) { + if (!vm.allowAddMedia) return; if (pasteEntry === undefined) { return false; @@ -408,6 +434,7 @@ distance: 5, tolerance: "pointer", scroll: true, + disabled: vm.readonly, update: function (ev, ui) { setDirty(); } @@ -420,7 +447,7 @@ copyAllMediasAction.isDisabled = vm.model.value.length === 0; } if (removeAllMediasAction) { - removeAllMediasAction.isDisabled = vm.model.value.length === 0; + removeAllMediasAction.isDisabled = vm.model.value.length === 0 || !vm.allowRemoveMedia; } // validate limits: