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

add readonly mode for image cropper

Browse Source
This commit is contained in:
Mads Rasmussen
2022-05-03 16:14:58 +02:00
parent 5609142317
commit f2780d5478
3 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -773,6 +773,11 @@
opacity: .95;
}
.imagecropper .umb-sortable-thumbnails li[disabled],
.imagecropper .umb-sortable-thumbnails li[disabled]:hover {
cursor: not-allowed;
}
.imagecropper .umb-sortable-thumbnails li .crop-name,
.imagecropper .umb-sortable-thumbnails li .crop-size,
.imagecropper .umb-sortable-thumbnails li .crop-annotation {

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js
View File

@@ -140,6 +140,8 @@ angular.module('umbraco')
* @param {any} targetCrop
*/
function crop(targetCrop) {
if ($scope.readonly) return;
if (!$scope.currentCrop) {
// clone the crop so we can discard the changes
$scope.currentCrop = Utilities.copy(targetCrop);

61
src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
View File

@@ -5,16 +5,18 @@
<input type="hidden" name="modelValue" ng-model="model.value" />
<umb-property-file-upload culture="{{model.culture}}"
segment="{{model.segment}}"
property-alias="{{model.alias}}"
value="model.value.src"
required="model.validation.mandatory"
on-files-selected="filesSelected(value, files)"
on-files-changed="filesChanged(files)"
on-init="fileUploaderInit(value, files)"
hide-selection="true"
accept-file-ext="acceptFileExt">
<umb-property-file-upload
culture="{{model.culture}}"
segment="{{model.segment}}"
property-alias="{{model.alias}}"
value="model.value.src"
required="model.validation.mandatory"
on-files-selected="filesSelected(value, files)"
on-files-changed="filesChanged(files)"
on-init="fileUploaderInit(value, files)"
hide-selection="true"
accept-file-ext="acceptFileExt"
ng-attr-readonly="{{ readonly || undefined }}">
<div class="imagecropper clearfix">
@@ -22,11 +24,12 @@
<div class="umb-cropper__container">
<div ng-if="currentCrop">
<umb-image-crop height="{{currentCrop.height}}"
width="{{currentCrop.width}}"
crop="currentCrop.coordinates"
center="model.value.focalPoint"
src="imageSrc">
<umb-image-crop
height="{{currentCrop.height}}"
width="{{currentCrop.width}}"
crop="currentCrop.coordinates"
center="model.value.focalPoint"
src="imageSrc">
</umb-image-crop>
</div>
@@ -40,12 +43,15 @@
</div>
<div ng-if="!currentCrop && !pendingCrop" class="umb-cropper-imageholder clearfix">
<umb-image-gravity src="imageSrc"
center="model.value.focalPoint"
on-value-changed="focalPointChanged(left, top)"
on-image-loaded="imageLoaded(isCroppable, hasDimensions)">
<umb-image-gravity
src="imageSrc"
center="model.value.focalPoint"
on-value-changed="focalPointChanged(left, top)"
on-image-loaded="imageLoaded(isCroppable, hasDimensions)"
disable-focal-point="readonly">
</umb-image-gravity>
<div class="umb-cropper-imageholder-buttons">
<div ng-if="!readonly" class="umb-cropper-imageholder-buttons">
<button type="button" class="btn btn-link btn-crop-delete" ng-click="clear()"><umb-icon icon="icon-delete" class="red"></umb-icon> <localize key="content_uploadClear">Remove file</localize></button>
<button type="button" class="sr-only" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
<button type="button" ng-show="(model.value.focalPoint.left !== 0.5 && model.value.focalPoint.top !== 0.5)" class="btn btn-link btn-gravity-reset" ng-click="focalPointChanged(0.5,0.5)">
@@ -56,14 +62,15 @@
<ul ng-if="isCroppable" class="umb-sortable-thumbnails cropList clearfix">
<li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">
<li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)" ng-attr-disabled="{{ readonly || undefined }}">
<umb-image-thumbnail center="model.value.focalPoint"
crop="value.coordinates"
src="imageSrc"
height="{{value.height}}"
width="{{value.width}}"
max-size="75">
<umb-image-thumbnail
center="model.value.focalPoint"
crop="value.coordinates"
src="imageSrc"
height="{{value.height}}"
width="{{value.width}}"
max-size="75">
</umb-image-thumbnail>
<div class="crop-information">