From d70583f23871d0677bf3539ba17c5de9b392f0c7 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 19:44:05 +0200
Subject: [PATCH] Media Grid View improvements (#11518)

* Add last Updated text under general

* Map missing fallback text values and refactor <i> to <umb-icon> directive

* fix icon styling
---
 .../src/less/components/umb-table.less            | 15 ++++++++++-----
 .../src/views/components/umb-media-grid.html      | 11 +++++------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml     |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml  |  1 +
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
index d0427cad0a3d..6c1e5058d267 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
@@ -55,6 +55,11 @@ input.umb-table__input {
     color: @ui-disabled-type;
 }
 
+.umb-table-head__icon {
+    position: relative;
+    top: 2px;
+}
+
 .umb-table-head__link {
     background: transparent;
     border: 0 none;
@@ -111,7 +116,7 @@ input.umb-table__input {
 .umb-table-body .umb-table-row.-selectable {
     cursor: pointer;
 }
-.umb-table-row.-selected, 
+.umb-table-row.-selected,
 .umb-table-body .umb-table-row.-selectable:hover {
     &::before {
         content: "";
@@ -226,7 +231,7 @@ input.umb-table__input {
         &.umb-table-body__checkicon {
             display: inline-block;
         }
-    }    
+    }
 }
 
 // Table Row Styles
@@ -309,8 +314,8 @@ input.umb-table__input {
 
 .umb-table__loading-overlay {
     position: absolute;
-    width: 100%; 
-    height: 100%; 
+    width: 100%;
+    height: 100%;
     background-color: rgba(255, 255, 255, 0.7);
     z-index: 1;
 }
@@ -330,7 +335,7 @@ input.umb-table__input {
 }
 
 .umb-table--condensed {
-    
+
     .umb-table-cell:first-of-type:not(.not-fixed) {
         padding-top: 10px;
         padding-bottom: 10px;
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 e8f174516c13..77ace4af7004 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
@@ -60,20 +60,20 @@
                                    ng-click="vm.selectAll($event)"
                                    ng-checked="vm.isSelectedAll()">
                         </div>
-                        <div class="umb-table-cell  umb-table__name">
+                        <div class="umb-table-cell umb-table__name">
                             <button type="button"
                                     class="umb-table-head__link sortable"
                                     ng-click="setSort('name')">
                                 <localize key="general_name">Name</localize>
-                                <i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': isSortDirection('name', 'asc'), 'icon-navigation-down': isSortDirection('name', 'desc')}"></i>
+                                <umb-icon ng-attr-icon="{{isSortDirection('name', 'asc') && 'icon-navigation-up' || isSortDirection('name', 'desc') && 'icon-navigation-down'}}" class="umb-table-head__icon"></umb-icon>
                             </button>
                         </div>
                         <div class="umb-table-cell">
                             <button type="button"
                                     class="umb-table-head__link sortable"
                                     ng-click="setSort('updateDate')">
-                                Last Updated
-                                <i class="umb-table-head__icon icon"  aria-hidden="true" ng-class="{'icon-navigation-up': isSortDirection('updateDate', 'asc'), 'icon-navigation-down': isSortDirection('updateDate', 'desc')}"></i>
+                                <localize key="general_lastUpdated">Last Updated</localize>
+                                <umb-icon ng-attr-icon="{{isSortDirection('updateDate', 'asc') && 'icon-navigation-up' || isSortDirection('updateDate', 'desc') && 'icon-navigation-down'}}" class="umb-table-head__icon"></umb-icon>
                             </button>
                         </div>
 
@@ -90,7 +90,7 @@
                                       ng-show="item.isFolder"
                                       ng-class="{'-locked': item.selected || !item.file || !item.thumbnail}"
                                       ng-click="clickItemName(item, $event, $index)">
-                            </umb-icon> 
+                            </umb-icon>
                             <span data-src="{{item.value.src}}" class="item-name">{{item.name}}</span>
                         </div>
                         <div class="umb-table-cell">
@@ -101,4 +101,3 @@
             </div>
         </div>
     </div>
-
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 35d7b8862c08..0a2edb727311 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -806,6 +806,7 @@
     <key alias="avatar">Avatar for</key>
     <key alias="header">Header</key>
     <key alias="systemField">system field</key>
+    <key alias="lastUpdated">Last Updated</key>
   </area>
   <area alias="colors">
     <key alias="blue">Blue</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 2003536def7a..16002c80f596 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -815,6 +815,7 @@
     <key alias="avatar">Avatar for</key>
     <key alias="header">Header</key>
     <key alias="systemField">system field</key>
+    <key alias="lastUpdated">Last Updated</key>
   </area>
   <area alias="colors">
     <key alias="blue">Blue</key>