Update styling and code style of imagepicker prevalue editor

Author: BatJan

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;
     };
 
 }

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>