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

Author: BatJan

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;

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>
-

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>

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>