69 lines
3.2 KiB
HTML
69 lines
3.2 KiB
HTML
<div class="umb-property-editor umb-mediapicker"
|
|
ng-controller="Umbraco.PropertyEditors.ImageCropperController">
|
|
|
|
<ng-form name="imageCropperForm">
|
|
|
|
<umb-property-file-upload culture="{{model.culture}}"
|
|
property-alias="{{model.alias}}"
|
|
value="model.value.src"
|
|
on-value-changed="fileChanged(value, files)"
|
|
on-init="fileUploaderInit(value, files)"
|
|
hide-selection="true">
|
|
|
|
<div class="imagecropper clearfix">
|
|
|
|
<div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
|
|
<div class="umb-cropper__container">
|
|
|
|
<i ng-click="done()" class="icon icon-delete btn-round umb-close-cropper"></i>
|
|
|
|
<div>
|
|
<umb-image-crop height="{{currentCrop.height}}"
|
|
width="{{currentCrop.width}}"
|
|
crop="currentCrop.coordinates"
|
|
center="model.value.focalPoint"
|
|
max-size="450"
|
|
src="imageSrc">
|
|
</umb-image-crop>
|
|
</div>
|
|
|
|
<a href style="margin:auto; text-align: center; font-size: 11px;" class="btn btn-link red"
|
|
ng-click="currentCrop.coordinates = undefined; done()">
|
|
<localize key="imagecropper_reset">Reset</localize>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
|
|
<umb-image-gravity src="imageSrc"
|
|
center="model.value.focalPoint">
|
|
</umb-image-gravity>
|
|
<a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
|
|
</div>
|
|
|
|
<ul 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)">
|
|
|
|
<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">
|
|
<span class="crop-name crop-text">{{value.alias}}</span>
|
|
<span class="crop-size crop-text">{{value.width}}px x {{value.height}}px</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</umb-property-file-upload>
|
|
|
|
</ng-form>
|
|
|
|
</div>
|