U4-11152 Add visual indicator to trashed media items in the media pic… (#2542)

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -242,6 +242,15 @@ ul.color-picker li a  {
   text-decoration: none;
 }
 
+.umb-mediapicker .label.trashed {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    color: #fff;
+    background-color: #fe6561;
+    background-image: linear-gradient(180deg,#fe6561,#fe6561);
+}
+
 .umb-mediapicker .add-link-square {
   height: 120px;
 }

src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html

@@ -7,6 +7,7 @@
         <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
             <li data-element="sortable-thumbnail-{{$index}}" class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images track by $index">
 
+                <span class="label trashed" ng-if="image.trashed"><localize key="mediaPicker_trashed"></localize></span>
                 <!-- IMAGE -->
                 <img ng-class="{'trashed': image.trashed}" ng-src="{{image.thumbnail}}" alt="" ng-show="image.thumbnail" title="{{image.trashed ? 'Trashed: ' + image.name : image.name}}" />