Merge pull request #2895 from marcemarc/temp-u4-11561

Make the file extension visible when picking a file using the media picker

src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less

@@ -33,6 +33,18 @@
     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;
+    position: relative;
+}
+
 .umb-media-grid__item.-selected {
     box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
 }

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;

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>

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>