72 lines
3.2 KiB
HTML
72 lines
3.2 KiB
HTML
<div class="umb-editor umb-mediapicker"
|
|
ng-controller="Umbraco.PropertyEditors.ImageCropperController">
|
|
|
|
<span class="fileinput-button umb-upload-button-big"
|
|
style="margin-bottom: 5px;"
|
|
ng-hide="imageSrc">
|
|
<i class="icon icon-page-up"></i>
|
|
<p><localize key="media_clickToUpload">Click to upload</localize></p>
|
|
<umb-single-file-upload></umb-single-file-upload>
|
|
</span>
|
|
|
|
|
|
<div ng-if="imageSrc">
|
|
|
|
|
|
<div class="imagecropper clearfix">
|
|
|
|
<div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
|
|
<div class="umb-cropper__container">
|
|
|
|
<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>
|
|
|
|
<div class="button-drawer">
|
|
<button class="btn btn-link" ng-click="reset()"><localize key="imagecropper_reset">Reset this crop</localize></button>
|
|
<button class="btn" ng-click="close()"><localize key="imagecropper_undoEditCrop">Undo edits</localize></button>
|
|
<button class="btn btn-success" ng-click="done()"><localize key="imagecropper_updateEditCrop">Done</localize></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
|
|
<umb-image-gravity
|
|
src="imageSrc"
|
|
center="model.value.focalPoint"
|
|
on-image-loaded="imageLoaded(isCroppable, hasDimensions)"
|
|
on-gravity-changed="focalPointChanged()">
|
|
</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 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)">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
</div>
|