FEATURE: Adds back button to theme editor (#11416)

app/assets/javascripts/admin/addon/controllers/admin-customize-themes-edit.js

@@ -64,5 +64,9 @@ export default Controller.extend({
         }
       }
     },
+
+    goBack() {
+      this.replaceRoute(this.showRouteName, this.model.id);
+    },
   },
 });

app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs

@@ -1,6 +1,21 @@
 <div class="current-style {{if maximized "maximized"}}">
   <div class="wrapper">
-    <h2>{{i18n "admin.customize.theme.edit_css_html"}} {{#link-to showRouteName model.id replace=true}}{{model.name}}{{/link-to}}</h2>
+    <div class="editor-information">
+      {{d-button
+        title="go_back"
+        action=(action "goBack")
+        icon="chevron-left"
+        class="btn-small editor-back-button"
+      }}
+
+      <span class="editor-theme-name-wrapper">
+        {{i18n "admin.customize.theme.edit_css_html"}}
+        {{#link-to showRouteName model.id replace=true class="editor-theme-name"
+        }}
+          {{model.name}}
+        {{/link-to}}
+      </span>
+    </div>
 
     {{admin-theme-editor
       theme=model
@@ -15,14 +30,24 @@
     <div class="admin-footer">
       <div class="status-actions">
         {{#unless model.changed}}
-          <a href={{previewUrl}} rel="noopener noreferrer" title={{i18n "admin.customize.explain_preview"}} class="preview-link" target="_blank">
+          <a
+            href={{previewUrl}}
+            rel="noopener noreferrer"
+            title={{i18n "admin.customize.explain_preview"}}
+            class="preview-link"
+            target="_blank"
+          >
             {{i18n "admin.customize.preview"}}
           </a>
         {{/unless}}
       </div>
 
       <div class="buttons">
-        {{#d-button action=(action "save") disabled=saveDisabled class="btn-primary"}}
+        {{#d-button
+          action=(action "save")
+          disabled=saveDisabled
+          class="btn-primary"
+        }}
           {{saveButtonText}}
         {{/d-button}}
       </div>

app/assets/stylesheets/common/admin/customize.scss

@@ -348,6 +348,25 @@
     }
   }
 
+  .editor-information {
+    display: flex;
+    align-items: center;
+    font-size: $font-up-1;
+    margin-bottom: 0.5em;
+
+    .editor-back-button {
+      margin-right: 0.25em;
+    }
+
+    .editor-theme-name-wrapper {
+      margin-left: 0.25em;
+    }
+
+    .editor-theme-name {
+      font-weight: bold;
+    }
+  }
+
   .current-style.maximized {
     position: fixed;
     top: 0;