From 5f97fca1307e1a025bbb1fc14b92bb7780e0a2b9 Mon Sep 17 00:00:00 2001
From: BatJan <1932158+BatJan@users.noreply.github.com>
Date: Mon, 18 Oct 2021 13:52:11 +0200
Subject: [PATCH] Update styling and code style of imagepicker prevalue editor

---
 .../prevalueeditors/imagepicker.controller.js | 13 ++++---
 .../views/prevalueeditors/imagepicker.html    | 36 +++++++++----------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js
index e2331c27cd..3cb3596261 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js
@@ -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;
     };
 
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html
index fd9075f907..4affd5de42 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html
@@ -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>