From c95cc14703cf519283096416087263a8c09a5ffc Mon Sep 17 00:00:00 2001
From: Marc Goodson <marc@snowmoon.co.uk>
Date: Sat, 1 Sep 2018 11:57:05 +0100
Subject: [PATCH 1/2] Make the file extension for files visible when picking a
 file using the media picker

---
 .../src/less/components/umb-media-grid.less   | 13 +++++++++++++
 .../src/less/property-editors.less            | 19 ++++++++++++++++++-
 .../src/views/components/umb-media-grid.html  |  6 ++++--
 .../mediapicker/mediapicker.html              |  5 ++++-
 4 files changed, 39 insertions(+), 4 deletions(-)

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 79e859b69a..3a9d612c4d 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
@@ -33,6 +33,19 @@
     background-color: @gray-10;
 }
 
+.umb-media-grid__item-file-icon > span {
+    color: @white;
+    background: @gray-4;
+    padding: 1px 3px;
+    font-size: 10px;
+    line-height: 130%;
+    display: block;
+    margin-top: -30px;
+    margin-left: -10px;
+    /*Need to reset the opacity?*/
+    opacity: 0.99;
+}
+
 .umb-media-grid__item.-selected {
     box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
 }
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 1855a3a6b0..fabe7c2291 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -363,13 +363,30 @@ ul.color-picker li {
     text-align: center;
 }
 
-.umb-sortable-thumbnails .umb-icon-holder .icon{
+.umb-sortable-thumbnails .umb-icon-holder .icon {
     font-size: 40px;
     line-height: 50px;
     color: @gray-3;
     display: block;
 }
 
+.umb-sortable-thumbnails .umb-icon-holder .file-icon > span {
+    color: @white;
+    background: @gray-4;
+    padding: 1px 3px;
+    font-size: 10px;
+    line-height: 130%;
+    display: block;
+    margin-top: -30px;
+    width: 2em;
+}
+
+.umb-sortable-thumbnails .umb-icon-holder .file-icon + small {
+    display: block;
+    margin-top: 1em;
+}
+
+
 .umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper {
     width: 124px;
     height: 124px;
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 9df33e7e0e..bad1ccc1ce 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
@@ -21,8 +21,10 @@
             <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail && item.extension != 'svg'" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false" />
 
             <!-- Icon for files -->
-            <i class="umb-media-grid__item-icon {{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg'"></i>
-
+            <span class="umb-media-grid__item-file-icon" ng-if="!item.thumbnail && item.extension != 'svg'">
+                <i class="umb-media-grid__item-icon {{item.icon}}"></i>
+                <span>.{{item.extension}}</span>
+            </span>
         </div>
     </div>
 </div>
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 fd28929616..2efed8b3e8 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
@@ -17,7 +17,10 @@
 
                 <!-- FILE -->
                 <span class="umb-icon-holder" ng-hide="image.thumbnail || image.metaData.umbracoExtension.Value === 'svg' || image.extension === 'svg'">
-                    <i class="icon {{image.icon}} large"></i>
+                    <span class="file-icon">
+                        <i class="icon {{image.icon}} large"></i>
+                        <span>.{{image.extension}}</span>
+                    </span>
                     <small>{{image.name}}</small>
                 </span>
 

From c6a31b30f155da2355e5eb49b6c8d249ad1f5cc5 Mon Sep 17 00:00:00 2001
From: Marc Goodson <marc@snowmoon.co.uk>
Date: Sat, 1 Sep 2018 19:27:55 +0100
Subject: [PATCH 2/2] position relative to stack the item above to avoid
 opacity issue

---
 .../src/less/components/umb-media-grid.less                    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 3a9d612c4d..21684c624b 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
@@ -42,8 +42,7 @@
     display: block;
     margin-top: -30px;
     margin-left: -10px;
-    /*Need to reset the opacity?*/
-    opacity: 0.99;
+    position: relative;
 }
 
 .umb-media-grid__item.-selected {