yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add readonly mode to media picker property editor

Browse Source
This commit is contained in:
Mads Rasmussen
2022-05-03 13:40:01 +02:00
parent 11ba194049
commit 44a3a7dd97
4 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card-grid.less
View File

@@ -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;
}

5
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html
View File

@@ -1 +1,4 @@
<umb-media-picker3-property-editor model="model"></umb-media-picker3-property-editor>
<umb-media-picker3-property-editor
model="model"
ng-attr-readonly="{{ readonly || undefined }}">
</umb-media-picker3-property-editor>

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
View File

@@ -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">
<div class="__plus" ng-style="{'top':inlineCreateButtonCtrl.plusPosY}">
<umb-icon icon="icon-add" class="icon"></umb-icon>
</div>
@@ -29,7 +30,7 @@
<button ng-if="vm.supportCopy" type="button" class="btn-reset __action umb-outline" localize="title" title="actions_copy" ng-click="vm.copyMedia(media); $event.stopPropagation();">
<umb-icon icon="icon-documents" class="icon"></umb-icon>
</button>
<button type="button" class="btn-reset __action umb-outline" localize="title" title="general_remove" ng-click="vm.removeMedia(media); $event.stopPropagation();">
<button ng-if="vm.allowRemoveMedia" type="button" class="btn-reset __action umb-outline" localize="title" title="general_remove" ng-click="vm.removeMedia(media); $event.stopPropagation();">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
</button>
</div>
@@ -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)">
<div>
<umb-icon icon="icon-add" class="icon large"></umb-icon>

31
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
View File

@@ -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: