From 0b2af6b48f548752a5cb2a3754ee66e1b0ac03d9 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov.dk>
Date: Mon, 6 Nov 2017 19:12:27 +0100
Subject: [PATCH 1/5] Fix square image in imagepicker prevalue editor. Cleanup
 and consistency

---
 .../src/less/property-editors.less            |  7 ++++
 .../prevalueeditors/imagepicker.controller.js | 32 +++++++++++--------
 .../views/prevalueeditors/imagepicker.html    | 25 ++++++++++-----
 .../mediapicker/mediapicker.html              |  2 +-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index ffaa1a6a92..954c6d4ae1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/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 {
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 48bb1e81ec..15a54140dc 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,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;
     };
 
 }
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 d9d988d7e5..1a37a624d5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html
+++ b/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>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index 3ef1430cd3..df03add04d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/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}}" />

From 856e123ec205ca3355fba769b978a9395999931d Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov.dk>
Date: Mon, 6 Nov 2017 19:23:41 +0100
Subject: [PATCH 2/5] Oops - remove duplicated disableFolderSelect

---
 .../src/views/prevalueeditors/imagepicker.controller.js          | 1 -
 1 file changed, 1 deletion(-)

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 15a54140dc..6e7071a7e4 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
@@ -4,7 +4,6 @@ function imageFilePickerController($scope) {
         $scope.mediaPickerOverlay = {
             view: "mediapicker",
             disableFolderSelect: true,
-            disableFolderSelect: true,
             onlyImages: true,
             show: true,
             submit: function (model) {

From 9d373c194d8ece15073230a8a3e9e6b65ba138e7 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov.dk>
Date: Mon, 6 Nov 2017 21:42:01 +0100
Subject: [PATCH 3/5] Show thumbnails if any images/files has been selected

---
 .../src/views/propertyeditors/mediapicker/mediapicker.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index df03add04d..ac96ba4674 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -4,7 +4,7 @@
     <p ng-if="(images|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>
 
     <div class="flex error">
-        <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
+        <ul ui-sortable="sortableOptions" ng-model="images" ng-if="images.length > 0" class="umb-sortable-thumbnails">
             <li class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images">
 
                 <!-- IMAGE -->
@@ -30,8 +30,8 @@
                 </div>
 
             </li>
-
         </ul>
+
         <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': images.length === 0}" ng-if="showAdd()" prevent-default>
             <i class="icon icon-add large"></i>
         </a>

From e72758e04a0485a2b46c4f49e43101948a030c7a Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov.dk>
Date: Mon, 6 Nov 2017 22:01:35 +0100
Subject: [PATCH 4/5] Ensure box is square when picker is multiple picker

---
 src/Umbraco.Web.UI.Client/src/less/property-editors.less      | 2 +-
 .../propertyeditors/mediapicker/mediapicker.controller.js     | 2 ++
 .../src/views/propertyeditors/mediapicker/mediapicker.html    | 4 ++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 954c6d4ae1..7082c15a14 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -283,7 +283,7 @@ ul.color-picker li a  {
 
 .umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper {
     width: 120px;
-    height: 100px;
+    height: 114px;
     overflow: hidden;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
index 91777bfc3e..1874a0623e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
@@ -19,6 +19,8 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
             $scope.images = [];
             $scope.ids = [];
 
+            $scope.isMultiPicker = multiPicker;
+
             if ($scope.model.value) {
                 var ids = $scope.model.value.split(',');
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index ac96ba4674..030849436e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -2,7 +2,7 @@
 
     <p ng-if="(images|filter:{trashed:true}).length == 1"><localize key="mediaPicker_pickedTrashedItem"></localize></p>
     <p ng-if="(images|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>
-
+    
     <div class="flex error">
         <ul ui-sortable="sortableOptions" ng-model="images" ng-if="images.length > 0" class="umb-sortable-thumbnails">
             <li class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images">
@@ -32,7 +32,7 @@
             </li>
         </ul>
 
-        <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': images.length === 0}" ng-if="showAdd()" prevent-default>
+        <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': (images.length === 0 || isMultiPicker)}" ng-if="showAdd()" prevent-default>
             <i class="icon icon-add large"></i>
         </a>
     </div>

From e320840a29f3f2a0188127b80832dbfb87f9a74d Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 19 Dec 2017 10:39:52 +0100
Subject: [PATCH 5/5] fix position of add button in media picker

---
 .../propertyeditors/mediapicker/mediapicker.html      | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index 030849436e..8109d1ce68 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -4,7 +4,7 @@
     <p ng-if="(images|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>
     
     <div class="flex error">
-        <ul ui-sortable="sortableOptions" ng-model="images" ng-if="images.length > 0" class="umb-sortable-thumbnails">
+        <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
             <li class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images">
 
                 <!-- IMAGE -->
@@ -30,11 +30,12 @@
                 </div>
 
             </li>
+            <li style="border: none;">
+                <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': (images.length === 0 || isMultiPicker)}" ng-if="showAdd()" prevent-default>
+                    <i class="icon icon-add large"></i>
+                </a>
+            </li>
         </ul>
-
-        <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': (images.length === 0 || isMultiPicker)}" ng-if="showAdd()" prevent-default>
-            <i class="icon icon-add large"></i>
-        </a>
     </div>
 
     <umb-overlay