From 41a31af99342c6f0c8ae8a8728f3da6812d0d108 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 22 Jul 2020 19:48:55 +0200
Subject: [PATCH] Media picker folder icon (#8305)

---
 .../prevalueeditors/mediafolderpicker.html     | 18 ++++++++----------
 .../mediapicker/mediapicker.html               |  1 +
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
index 5d93c59f5e..fc6af3a3e8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
@@ -10,24 +10,22 @@
                 </p>
 
                 <!-- FILE -->
-                <div ng-class="{'trashed': media.trashed}" class="umb-icon-holder" ng-hide="media.thumbnail">
-                    <span class="file-icon">
-                        <i class="icon {{media.icon}}"></i>
-                        <span ng-if="media.extension">.{{media.extension}}</span>
-                    </span>
-                    <small>{{media.name}}</small>
-                </div>
+                <umb-file-icon ng-hide="media.thumbnail" ng-class="{'trashed': media.trashed}"
+                               extension="{{media.extension}}"
+                               icon="{{media.icon}}"
+                               size="s"
+                               text="{{media.name}}">
+                </umb-file-icon>
 
                 <div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
-
-                    <button aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" data-element="action-remove" ng-click="remove()">
+                    <button type="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" data-element="action-remove" ng-click="remove()">
                         <i class="icon icon-delete" aria-hidden="true"></i>
                     </button>
                 </div>
             </li>
 
             <li style="border: none;" class="add-wrapper unsortable" ng-hide="model.value">
-                <button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset umb-outline umb-outline--surrounding" ng-click="add()" prevent-default>
+                <button type="button" aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset umb-outline umb-outline--surrounding" ng-click="add()">
                     <i class="icon icon-add large" aria-hidden="true"></i>
                 </button>
             </li>
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 c4dba4d373..c82a3c6204 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
@@ -31,6 +31,7 @@
                 <!-- FILE -->
                 <umb-file-icon ng-hide="media.thumbnail" ng-class="{'trashed': media.trashed}"
                                extension="{{media.extension}}"
+                               icon="{{media.icon}}"
                                size="s"
                                text="{{media.name}}">
                 </umb-file-icon>