Add TV and Mobile compatibility to the new metadata dialog

src/components/metadataeditor/metadataeditor.js

@@ -284,6 +284,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             }
         });
 
+        if (!layoutManager.desktop) {
+            context.querySelector('.btnBack').classList.remove('hide');
+            context.querySelector('.btnClose').classList.add('hide');
+        }
+
         bindAll(context.querySelectorAll('.btnCancel'), 'click', function (event) {
             event.preventDefault();
             closeDialog(false);

src/components/metadataeditor/metadataeditor.template.html

@@ -1,4 +1,5 @@
 <div class="formDialogHeader">
+    <button is="paper-icon-button-light" class="btnCancel btnBack autoSize hide" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -7,7 +8,7 @@
             <span class="material-icons check"></span>
             <span>${Save}</span>
         </button>
-        <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1">
             <span class="material-icons close"></span>
         </button>
     </div>