Fix square image in imagepicker prevalue editor. Cleanup and consistency

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -281,6 +281,12 @@ ul.color-picker li a  {
     display: block;
 }
 
+.umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper {
+    width: 120px;
+    height: 100px;
+    overflow: hidden;
+}
+
 .umb-sortable-thumbnails .umb-sortable-thumbnails__actions {
     position: absolute;
     bottom: 10px;
@@ -308,6 +314,7 @@ ul.color-picker li a  {
     justify-content: center;
     align-items: center;
     margin-left: 5px;
+    text-decoration: none;
 }
 
 .umb-sortable-thumbnails .umb-sortable-thumbnails__action.-red {

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

@@ -1,20 +1,26 @@
 function imageFilePickerController($scope) {
 
-    $scope.pick = function() {
-        $scope.mediaPickerDialog = {};
-        $scope.mediaPickerDialog.view = "mediapicker";
-        $scope.mediaPickerDialog.show = true;
-
-        $scope.mediaPickerDialog.submit = function(model) {
-            $scope.model.value = model.selectedImages[0].image;
-            $scope.mediaPickerDialog.show = false;
-            $scope.mediaPickerDialog = null;
+    $scope.add = function() {
+        $scope.mediaPickerOverlay = {
+            view: "mediapicker",
+            disableFolderSelect: true,
+            disableFolderSelect: true,
+            onlyImages: true,
+            show: true,
+            submit: function (model) {
+                $scope.model.value = model.selectedImages[0].image;
+                $scope.mediaPickerOverlay.show = false;
+                $scope.mediaPickerOverlay = null;
+            },
+            close: function () {
+                $scope.mediaPickerOverlay.show = false;
+                $scope.mediaPickerOverlay = null;
+            }
         };
+    };
 
-        $scope.mediaPickerDialog.close = function(oldModel) {
-            $scope.mediaPickerDialog.show = false;
-            $scope.mediaPickerDialog = null;
-        };
+    $scope.remove = function () {
+        $scope.model.value = null;
     };
 
 }

src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html

@@ -1,19 +1,28 @@
 <div ng-controller="Umbraco.PrevalueEditors.ImageFilePickerController" class="umb-editor umb-mediapicker">
-    <ul class="umb-sortable-thumbnails">
-        <li>
-            <img ng-src="{{model.value}}" alt="" ng-show="model.value">
-            <a href class="picked-image" ng-click="model.value = null" ng-show="model.value"><i class="icon icon-delete"></i></a>
+
+    <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">
+                <!--<a class="umb-sortable-thumbnails__action" href="" ng-click="goToItem(image)">
+                    <i class="icon icon-edit"></i>
+                </a>-->
+                <a class="umb-sortable-thumbnails__action -red" href="" ng-click="remove()">
+                    <i class="icon icon-delete"></i>
+                </a>
+            </div>
         </li>
     </ul>
 
-    <a href ng-click="pick()" class="umb-mediapicker add-link" ng-hide="model.value">
+    <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': !model.value }" ng-hide="model.value" prevent-default>
         <i class="icon icon-add large"></i>
     </a>
 
     <umb-overlay
-      ng-if="mediaPickerDialog.show"
-      model="mediaPickerDialog"
-      view="mediaPickerDialog.view"
+      ng-if="mediaPickerOverlay.show"
+      model="mediaPickerOverlay"
+      view="mediaPickerOverlay.view"
       position="right">
     </umb-overlay>
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html

@@ -5,7 +5,7 @@
 
     <div class="flex error">
         <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
-            <li style="width: 120px; height: 100px; overflow: hidden;" ng-repeat="image in images">
+            <li class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images">
 
                 <!-- IMAGE -->
                 <img ng-class="{'trashed': image.trashed}" ng-src="{{image.thumbnail}}" alt="" ng-show="image.thumbnail" title="{{image.trashed ? 'Trashed: ' + image.name : image.name}}" />