From 5ab6ef97650d4e89e2c80aeec954a632f611356f Mon Sep 17 00:00:00 2001
From: Joe <johani@discourse.org>
Date: Tue, 8 Dec 2020 07:54:44 +0800
Subject: [PATCH] FEATURE: Adds back button to theme editor (#11416)

---
 .../admin-customize-themes-edit.js            |  4 +++
 .../addon/templates/customize-themes-edit.hbs | 31 +++++++++++++++++--
 .../stylesheets/common/admin/customize.scss   | 19 ++++++++++++
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-edit.js b/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-edit.js
index b69b57510c..2e1536d181 100644
--- a/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-edit.js
+++ b/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);
+    },
   },
 });
diff --git a/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs b/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
index a4e7fa583f..32e3521f65 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
+++ b/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>
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 0cc24a534b..6845dea807 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/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;