V8: Add in Recycle Bin context message (#7341)

* Add a message bar to give context that this node/content item is in the trash/recycle bin

* Update umb-variant-content.html

* Update en.xml

* Update en_us.xml

src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less

@@ -1,6 +1,6 @@
 .umb-editors {
     .absolute();
-    overflow: hidden;    
+    overflow: hidden;
 
     .umb-editor {
         box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
@@ -16,7 +16,7 @@
         transform: none;
         will-change: transform;
         transition: transform 400ms ease-in-out;
-        
+
         &.umb-editor--moveRight {
             transform: translateX(110%);
         }
@@ -28,7 +28,7 @@
         will-change: auto;
         transition: display 0s 320ms;
     }
-    
+
     &--level0 {
         transform: none;
     }
@@ -43,11 +43,11 @@
     .umb-editor--level@{i} {
         transform: translateX(@x);
     }
-    
+
     .umb-editor--n@{i} {
         right:@x;
     }
-    
+
     .level-loop(@i - 1);
 }
 
@@ -62,18 +62,18 @@
     .umb-editor {
         @size: extract(extract(@editorSizes, @iterator), 1);
         @value: extract(extract(@editorSizes, @iterator), 2);
-        
+
         &--@{size} {
             width: @value;
             will-change: transform;
             left: auto;
-            
+
             .umb-editor--container {
                 max-width: @value;
             }
         }
     }
-    
+
     .create-editor-sizes(@iterator + 1);
 }
 
@@ -94,3 +94,14 @@
     opacity: 1;
     transition: opacity 320ms 20ms, visibility 0s;
 }
+
+.umb-editor--trashed-message {
+    background:@errorBackground;
+    color:@errorText;
+    padding:10px;
+    margin-bottom:20px;
+
+    i {
+        margin-right:5px;
+     }
+}

src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html

@@ -27,6 +27,12 @@
         </ng-form>
 
         <umb-editor-container ng-if="vm.editor.content.apps.length > 0">
+
+            <!-- Deleted Context Message Bar (Displayed when viewing node in recycle bin) -->
+            <div ng-show="vm.content.trashed" class="umb-editor--trashed-message">
+                <i class="icon icon-trash"></i> <localize key="content_nodeIsInTrash">This item is in the Recycle Bin</localize>
+            </div>
+
             <div class="umb-editor-sub-views">
                 <div ng-repeat="app in vm.editor.content.apps track by app.alias">
                     <umb-editor-sub-view model="app" content="vm.content" />

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -305,6 +305,7 @@
     <key alias="schedulePublishHelp">Select the date and time to publish and/or unpublish the content item.</key>
     <key alias="createEmpty">Create new</key>
     <key alias="createFromClipboard">Paste from clipboard</key>
+    <key alias="nodeIsInTrash">This item is in the Recycle Bin</key>
   </area>
   <area alias="blueprints">
     <key alias="createBlueprintFrom">Create a new Content Template from '%0%'</key>