Added initial view-theme modal for installing from themes list

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

- added new route for viewing themes so back/forward buttons can be used
  - takes theme name as a parameter
  - opens a fullscreen modal with an iframe containing the theme demo
- changed installable themes list to link to new route
- swapped `previewUrl` in theme data to point at the real demo rather than the ghost.org demo page

ghost/admin/app/components/modals/design/view-theme.hbs

@@ -0,0 +1,15 @@
+<section class="gh-canvas flex flex-column h-100">
+    <GhCanvasHeader class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route="settings.design.change-theme" data-test-link="back">All themes</LinkTo>
+            <span>{{svg-jar "arrow-right"}}</span>
+            {{@data.theme.name}}
+        </h2>
+    </GhCanvasHeader>
+
+    <section class="view-container">
+        <GhBrowserPreview class="gh-branding-settings-previewcontainer">
+            <iframe src={{@data.theme.previewUrl}} class="site-frame gh-branding-settings-preview"></iframe>
+        </GhBrowserPreview>
+    </section>
+</section>

ghost/admin/app/controllers/settings/design/change-theme.js

@@ -14,7 +14,7 @@ export default class ChangeThemeController extends Controller {
         name: 'Edition',
         category: 'Newsletter',
         url: 'https://github.com/TryGhost/Edition',
-        previewUrl: 'https://ghost.org/themes/edition',
+        previewUrl: 'https://edition.ghost.io/',
         ref: 'TryGhost/Edition',
         image: 'assets/img/themes/Edition.jpg',
         shortImage: 'assets/img/themes/Edition-cut.jpg'
@@ -22,7 +22,7 @@ export default class ChangeThemeController extends Controller {
         name: 'Alto',
         category: 'Blog',
         url: 'https://github.com/TryGhost/Alto',
-        previewUrl: 'https://ghost.org/themes/alto',
+        previewUrl: 'https://alto.ghost.io',
         ref: 'TryGhost/Alto',
         image: 'assets/img/themes/Alto.jpg',
         shortImage: 'assets/img/themes/Alto-cut.jpg'
@@ -30,7 +30,7 @@ export default class ChangeThemeController extends Controller {
         name: 'London',
         category: 'Photography',
         url: 'https://github.com/TryGhost/London',
-        previewUrl: 'https://ghost.org/themes/london',
+        previewUrl: 'https://london.ghost.io',
         ref: 'TryGhost/London',
         image: 'assets/img/themes/London.jpg',
         shortImage: 'assets/img/themes/London-cut.jpg'
@@ -38,7 +38,7 @@ export default class ChangeThemeController extends Controller {
         name: 'Ease',
         category: 'Documentation',
         url: 'https://github.com/TryGhost/Ease',
-        previewUrl: 'https://ghost.org/themes/ease',
+        previewUrl: 'https://ease.ghost.io',
         ref: 'TryGhost/Ease',
         image: 'assets/img/themes/Ease.jpg',
         shortImage: 'assets/img/themes/Ease-cut.jpg'

ghost/admin/app/router.js

@@ -49,7 +49,9 @@ Router.map(function () {
     this.route('settings.code-injection', {path: '/settings/code-injection'});
 
     this.route('settings.design', {path: '/settings/design'}, function () {
-        this.route('change-theme');
+        this.route('change-theme', function () {
+            this.route('view', {path: ':theme_name'});
+        });
     });
 
     // this.route('settings.products', {path: '/settings/products'});

ghost/admin/app/routes/settings/design/change-theme/view.js

@@ -0,0 +1,34 @@
+import Route from '@ember/routing/route';
+import {inject as service} from '@ember/service';
+
+export default class ViewThemeRoute extends Route {
+    @service modals;
+
+    themeModal = null;
+
+    model(params, transition) {
+        const changeThemeController = this.controllerFor('settings.design.change-theme');
+        const knownThemes = changeThemeController.marketplaceThemes;
+
+        const foundTheme = knownThemes.find(theme => theme.name === params.theme_name);
+
+        if (foundTheme) {
+            return foundTheme;
+        }
+
+        const path = transition.intent.url.replace(/^\//, '');
+        return this.replaceWith('error404', {path, status: 404});
+    }
+
+    setupController(controller, model) {
+        this.themeModal?.close();
+
+        this.themeModal = this.modals.open('modals/design/view-theme', {
+            theme: model
+        });
+    }
+
+    deactivate() {
+        this.themeModal?.close();
+    }
+}

ghost/admin/app/services/modals.js

@@ -10,6 +10,12 @@ export default class ModalsService extends EPMModalsService {
         'modals/confirm-unsaved-changes': {
             className: 'fullscreen-modal-action fullscreen-modal-wide'
         },
+        'modals/design/confirm-delete-theme': {
+            className: 'fullscreen-modal-action fullscreen-modal-wide'
+        },
+        'modals/design/theme-errors': {
+            className: 'fullscreen-modal-action fullscreen-modal-wide'
+        },
         'modals/design/upload-theme': {
             className: 'fullscreen-modal-action fullscreen-modal-wide',
             beforeClose: () => {
@@ -18,11 +24,9 @@ export default class ModalsService extends EPMModalsService {
                 }
             }
         },
-        'modals/design/confirm-delete-theme': {
-            className: 'fullscreen-modal-action fullscreen-modal-wide'
-        },
-        'modals/design/theme-errors': {
-            className: 'fullscreen-modal-action fullscreen-modal-wide'
+        'modals/design/view-theme': {
+            className: 'fullscreen-modal-total-overlay',
+            omitBackdrop: true
         },
         'modals/limits/custom-theme': {
             className: 'fullscreen-modal-action fullscreen-modal-wide'

ghost/admin/app/templates/settings/design/change-theme.hbs

@@ -17,19 +17,15 @@
         <div class="gh-theme-directory-container">
             <div class="theme-directory">
                 {{#each this.marketplaceThemes as |theme|}}
-                    <a class="td-item" href={{theme.url}} target="_blank" rel="noopener noreferrer">
+                    <LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
                         <div class="td-item-screenshot relative">
                             <img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
-                            <div class="td-item-overlay">
-                                <LinkTo class="td-item-action gh-btn gh-btn-black mb4" @route="settings.theme.install" @query={{hash source="github" ref=theme.ref}}><span>Install</span></LinkTo>
-                                <a href={{theme.previewUrl}} class="td-item-action gh-btn" target="_blank" rel="noopener"><span>Preview</span></a>
-                            </div>
                         </div>
                         <div class="td-item-desc">
                             <div>{{theme.name}}</div>
                             <span>• {{theme.category}}</span>
                         </div>
-                    </a>
+                    </LinkTo>
                 {{/each}}
             </div>
         </div>