From 182f5c91b6af0ee197e2b82a1322711623b87179 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 23 Sep 2021 10:16:22 +0200
Subject: [PATCH] Updated design settings page

Refs https://github.com/TryGhost/Team/issues/1045
---
 ghost/admin/app/routes/design.js              | 17 ++++++++++
 ghost/admin/app/styles/layouts/settings.css   | 21 ++++++++++++
 ghost/admin/app/templates/settings.hbs        |  2 +-
 ghost/admin/app/templates/settings/design.hbs | 32 +++++++++++++++----
 4 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/routes/design.js b/ghost/admin/app/routes/design.js
index 7c98b63957..625d0f4055 100644
--- a/ghost/admin/app/routes/design.js
+++ b/ghost/admin/app/routes/design.js
@@ -1,10 +1,13 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
 export default class DashboardRoute extends AuthenticatedRoute {
     @service feature;
     @service settings;
 
+    previewIframe = null;
+
     beforeModel() {
         super.beforeModel(...arguments);
 
@@ -26,4 +29,18 @@ export default class DashboardRoute extends AuthenticatedRoute {
             mainClasses: ['gh-main-wide']
         };
     }
+
+    @action
+    registerPreviewIframe(element) {
+        this.previewIframe = element;
+    }
+
+    @action
+    replacePreviewContents(html) {
+        if (this.previewIframe) {
+            this.previewIframe.contentWindow.document.open();
+            this.previewIframe.contentWindow.document.write(html);
+            this.previewIframe.contentWindow.document.close();
+        }
+    }
 }
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 4e2539d61f..5eb67cd723 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1318,6 +1318,7 @@ p.theme-validation-details {
     margin: 32px 68px 68px;
 }
 
+.gh-design-settings-previewcontainer .site-frame,
 .gh-branding-settings-previewcontainer .site-frame,
 .gh-launch-wizard-preview {
     width: 133.33333%;
@@ -1390,6 +1391,26 @@ p.theme-validation-details {
 
 /* Design (Labs)
 /* ---------------------------------------------------- */
+.gh-design-settings-left {
+    flex-grow: 1;
+    background: none;
+}
+
+.gh-design-settings-right {
+    flex-grow: 3;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 50vh;
+    min-height: 480px;
+    margin-left: 80px;
+}
+
+.gh-expandable-block.gh-active-theme {
+    border: 1px solid var(--list-color-divider);
+    border-radius: var(--border-radius);
+}
+
 .gh-design-settings-tabs {
     width: 100%;
     margin-bottom: 48px;
diff --git a/ghost/admin/app/templates/settings.hbs b/ghost/admin/app/templates/settings.hbs
index 9300d9a31b..a9d09bc845 100644
--- a/ghost/admin/app/templates/settings.hbs
+++ b/ghost/admin/app/templates/settings.hbs
@@ -20,7 +20,7 @@
                     <span class="blue">{{svg-jar "paint-palette"}}</span>
                     <div>
                         <h4>Design</h4>
-                        <p>Customize the way your site looks</p>
+                        <p>Customize your site and manage themes</p>
                     </div>
                 </LinkTo>
             {{else}}
diff --git a/ghost/admin/app/templates/settings/design.hbs b/ghost/admin/app/templates/settings/design.hbs
index 0e229cda97..30a59455e3 100644
--- a/ghost/admin/app/templates/settings/design.hbs
+++ b/ghost/admin/app/templates/settings/design.hbs
@@ -5,15 +5,35 @@
             <span>{{svg-jar "arrow-right"}}</span>
             Design
         </h2>
+        <section class="view-actions">
+            <LinkTo class="gh-btn gh-btn-action-icon" @route="settings.design.advanced"><span>Advanced</span></LinkTo>
+            <LinkTo class="gh-btn gh-btn-primary" @route="settings.design.change-theme"><span>Change theme</span></LinkTo>
+        </section>
     </GhCanvasHeader>
 
-    <section class="view-container">
-        <ul>
-            <li><LinkTo @route="settings.design.customize">Customize</LinkTo></li>
-            <li><LinkTo @route="settings.design.change-theme">Change theme</LinkTo></li>
-            <li><LinkTo @route="settings.design.advanced">Advanced theme options</LinkTo></li>
-        </ul>
+    <section class="view-container flex">
+        <section class="gh-expandable gh-design-settings-left">
+            <h4 class="gh-main-section-header small bn">Active theme</h4>
+            <div class="gh-expandable-block gh-active-theme">
+                <div class="gh-expandable-header">
+                    <div>
+                        <h4 class="gh-expandable-title">Casper</h4>
+                        <p class="gh-expandable-description">
+                            Version 1.14.0
+                        </p>
+                    </div>
+                    <LinkTo class="gh-btn gh-btn-green" @route="settings.design.customize"><span>Customize design &rarr;</span></LinkTo>
+                </div>
+            </div>
+        </section>
+
+        <section class="gh-design-settings-right">
+            <GhBrowserPreview class="gh-design-settings-previewcontainer" @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
+                <GhSiteIframe @src={{this.previewSrc}} @guid={{this.previewGuid}} {{did-insert this.registerPreviewIframe}}></GhSiteIframe>
+            </GhBrowserPreview>
+        </section>
     </section>
+   
 </section>
 
 {{outlet}}
\ No newline at end of file