From e6a69ccb0d9287a53836fa694b0a64962c1cfddf Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 17 Apr 2018 09:55:31 +0200
Subject: [PATCH] add feature toggle for media grid edit button

---
 .../directives/components/umbmediagrid.directive.js   |  3 ++-
 .../src/less/components/umb-media-grid.less           | 11 ++++++++---
 .../src/views/components/umb-media-grid.html          |  2 +-
 .../src/views/pickers/mediapicker/mediapicker.html    |  1 +
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
index 7f3f1bc16b..af562e04e3 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -309,7 +309,8 @@ Use this directive to generate a thumbnail grid of media items.
                 onDetailsHover: "=",
                 onClick: '=',
                 onClickName: "=",
-                onClickEdit: "&",
+                onClickEdit: "&?",
+                allowOnClickEdit: "@?",
                 filterBy: "=",
                 itemMaxWidth: "@",
                 itemMaxHeight: "@",
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 0f79df854e..8d3a880105 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -127,7 +127,7 @@
     position: absolute;
     z-index: 2;
     top: 10px;
-    right: 10px;
+    left: 10px;
     width: 26px;
     height: 26px;
     border: 2px solid @white;
@@ -138,15 +138,15 @@
     justify-content: center;
     align-items: center;
     color: @white;
-    margin-left: 7px;
     transition: background 100ms;
 }
 
 .umb-media-grid__edit {
     position: absolute;
+    opacity: 0;
     z-index: 2;
     top: 10px;
-    left: 10px;
+    right: 10px;
     width: 26px;
     height: 26px;
     background: @white;
@@ -156,4 +156,9 @@
     justify-content: center;
     align-items: center;
     color: @black;
+    transition: opacity 150ms;
 }
+
+.umb-media-grid__item:hover .umb-media-grid__edit {
+    opacity: 1;
+ }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index c2f71982c9..c55d1e9212 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -2,7 +2,7 @@
     <div data-element="media-grid-item-{{$index}}" class="umb-media-grid__item" title="{{item.name}}" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
         <div>
             <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
-            <a ng-click="clickEdit(item, $event)" ng-href="" class="icon-edit umb-media-grid__edit"></a>
+            <a ng-if="allowOnClickEdit" ng-click="clickEdit(item, $event)" ng-href="" class="icon-edit umb-media-grid__edit"></a>
 
             <div data-element="media-grid-item-edit" class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
                 <i ng-if="onDetailsHover" class="icon-info umb-media-grid__info" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
diff --git a/src/Umbraco.Web.UI.Client/src/views/pickers/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/pickers/mediapicker/mediapicker.html
index 1e129f8d34..b87451cce1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/pickers/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/pickers/mediapicker/mediapicker.html
@@ -84,6 +84,7 @@
                     on-click="clickHandler"
                     on-click-name="clickItemName"
                     on-click-edit="editMediaItem(item)"
+                    allow-on-click-edit="true"
                     item-max-width="150"
                     item-max-height="150" 
                     item-min-width="100"