Updated design settings page

Refs https://github.com/TryGhost/Team/issues/1045

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();
+        }
+    }
 }

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;

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}}

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">
+    <section class="view-container flex">
-        <ul>
+        <section class="gh-expandable gh-design-settings-left">
-            <li><LinkTo @route="settings.design.customize">Customize</LinkTo></li>
+            <h4 class="gh-main-section-header small bn">Active theme</h4>
-            <li><LinkTo @route="settings.design.change-theme">Change theme</LinkTo></li>
+            <div class="gh-expandable-block gh-active-theme">
-            <li><LinkTo @route="settings.design.advanced">Advanced theme options</LinkTo></li>
+                <div class="gh-expandable-header">
-        </ul>
+                    <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}}