From 3f0dbb0e8ba9fdeec76d4312371668190362daee Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 18 Oct 2021 17:22:36 +0100
Subject: [PATCH] Added desktop/mobile toggle to view-theme screen

refs https://github.com/TryGhost/Team/issues/1149

- re-used same desktop/mobile toggle that the main design settings screen uses
---
 .../components/modals/design/view-theme.hbs   | 31 +++++++++++++++++--
 .../components/modals/design/view-theme.js    | 16 ++++++++++
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/modals/design/view-theme.hbs b/ghost/admin/app/components/modals/design/view-theme.hbs
index e73feabee0..eec37daabc 100644
--- a/ghost/admin/app/components/modals/design/view-theme.hbs
+++ b/ghost/admin/app/components/modals/design/view-theme.hbs
@@ -7,13 +7,38 @@
         </h2>
 
         <section class="view-actions">
+            <div class="gh-contentfilter gh-btn-group">
+                <button type="button" class="gh-btn gh-design-preview-mode {{if this.isDesktopPreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "desktop")}}><span>{{svg-jar "desktop"}}</span></button>
+                <button type="button" class="gh-btn gh-design-preview-mode {{if this.isMobilePreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
+            </div>
+
             <button type="button" class="gh-btn gh-btn-primary" {{on "click" this.installTheme}}><span>Use {{@data.theme.name}}</span></button>
         </section>
     </GhCanvasHeader>
 
     <section class="view-container">
-        <GhBrowserPreview class="gh-theme-previewcontainer" @title={{@data.theme.name}}>
-            <iframe src={{@data.theme.previewUrl}} class="site-frame gh-branding-settings-preview"></iframe>
-        </GhBrowserPreview>
+        {{!-- changes only classes between desktop/mobile to avoid re-rendering iframe contents --}}
+        <div class="{{if this.isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer gh-theme-previewcontainer"}}">
+            {{#if this.isDesktopPreview}}
+                <div class="gh-browserpreview-browser">
+                    <div class="tabs">
+                        <ul><li></li><li></li><li></li></ul>
+                        <div>
+                            {{#if this.settings.icon}}
+                                <span class="favicon"><img src={{this.settings.icon}} alt="icon"></span>
+                            {{else}}
+                                <span class="favicon default">{{svg-jar "default-favicon"}}</span>
+                            {{/if}}
+                            <span class="site-title">{{this.settings.title}}</span>
+                        </div>
+                    </div>
+                </div>
+            {{/if}}
+            <div class="{{if this.isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
+                <div class="{{if this.isMobilePreview "gh-pe-mobile-screen"}}">
+                    <iframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} src={{@data.theme.previewUrl}} />
+                </div>
+            </div>
+        </div>
     </section>
 </section>
\ No newline at end of file
diff --git a/ghost/admin/app/components/modals/design/view-theme.js b/ghost/admin/app/components/modals/design/view-theme.js
index 5a3e1b998a..5e5bb88e7e 100644
--- a/ghost/admin/app/components/modals/design/view-theme.js
+++ b/ghost/admin/app/components/modals/design/view-theme.js
@@ -1,11 +1,22 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
 
 export default class ViewThemeModalComponent extends Component {
     @service modals;
     @service router;
 
+    @tracked previewSize = 'desktop';
+
+    get isDesktopPreview() {
+        return this.previewSize === 'desktop';
+    }
+
+    get isMobilePreview() {
+        return this.previewSize === 'mobile';
+    }
+
     willDestroy() {
         super.willDestroy(...arguments);
 
@@ -27,4 +38,9 @@ export default class ViewThemeModalComponent extends Component {
             }
         });
     }
+
+    @action
+    setPreviewSize(size) {
+        this.previewSize = size;
+    }
 }