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

Update styling and code style of imagepicker prevalue editor

Browse Source
This commit is contained in:
BatJan
2021-10-18 13:52:11 +02:00
committed by Nathan Woulfe
parent 4dc1ee64e0
commit 5f97fca130
2 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js
View File

@@ -1,13 +1,18 @@
function imageFilePickerController($scope, editorService) {
var vm = this;
vm.model = $scope.model;
$scope.add = function() {
vm.add = add;
vm.remove = remove;
function add() {
var mediaPickerOptions = {
view: "mediapicker",
multiPicker: false,
disableFolderSelect: true,
onlyImages: true,
submit: function (model) {
$scope.model.value = model.selection[0].image;
vm.model.value = model.selection[0].image;
editorService.close();
},
@@ -18,8 +23,8 @@ function imageFilePickerController($scope, editorService) {
editorService.mediaPicker(mediaPickerOptions);
};
$scope.remove = function () {
$scope.model.value = null;
function remove() {
vm.model.value = null;
};
}

36
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html
View File

@@ -1,23 +1,21 @@
<div ng-controller="Umbraco.PrevalueEditors.ImageFilePickerController" class="umb-property-editor umb-mediapicker">
<div ng-controller="Umbraco.PrevalueEditors.ImageFilePickerController as vm" class="umb-property-editor umb-mediapicker umb-mediapicker-single">
<div class="flex flex-wrap error">
<ul class="umb-sortable-thumbnails">
<li ng-if="vm.model.value" class="umb-sortable-thumbnails__wrapper">
<img ng-src="{{vm.model.value}}" alt="">
<ul class="umb-sortable-thumbnails" ng-if="model.value">
<li class="umb-sortable-thumbnails__wrapper">
<img ng-src="{{model.value}}" alt="">
<div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
<button type="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" ng-click="vm.remove()">
<umb-icon icon="icon-delete" class="icon"></umb-icon>
</button>
</div>
</li>
<div class="umb-sortable-thumbnails__actions">
<button type="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" ng-click="remove()">
<umb-icon icon="icon-delete" class="icon"></umb-icon>
<li style="border: none;" class="add-wrapper unsortable" ng-hide="vm.model.value">
<button type="button" aria-label="Open media picker" class="add-link add-link-square btn-reset umb-outline umb-outline--surrounding" ng-click="vm.add()">
<umb-icon icon="icon-add" class="icon large"></umb-icon>
</button>
</div>
</li>
</ul>
<button type="button"
class="add-link umb-outline umb-outline--surrounding"
ng-class="{'add-link-square': !model.value }"
ng-click="add()"
ng-hide="model.value">
<umb-icon icon="icon-add" class="icon large"></umb-icon>
</button>
</li>
</ul>
</div>
</div>