Initial pass at new change theme screen

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

- added link to design sidebar
- dropped change-theme modal and associated route behaviour
- copied basic themes marketplace list into the change-theme controller/template

ghost/admin/app/components/gh-nav-menu/design.hbs

@@ -76,6 +76,7 @@
     </div>
 
     <div class="gh-nav-bottom">
+        <LinkTo @route="settings.design.change-theme" class="gh-btn gh-btn-icon gh-btn-text"><span>{{svg-jar "settings"}} Change theme</span></LinkTo>
         <LinkTo @route="settings.design.advanced" class="gh-btn gh-btn-icon gh-btn-text"><span>{{svg-jar "settings"}} Advanced theme settings</span></LinkTo>
     </div>
 </section>

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

@@ -1,14 +0,0 @@
-<div class="modal-content">
-    <header class="modal-header">
-        <h1>Change theme</h1>
-    </header>
-    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
-
-    <div class="modal-body">
-        <iframe src="https://ghost.org/themes/" frameborder="0"></iframe>
-    </div>
-
-    <div class="modal-footer">
-
-    </div>
-</div>

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

@@ -0,0 +1,37 @@
+import Controller from '@ember/controller';
+
+export default class ChangeThemeController extends Controller {
+    marketplaceThemes = [{
+        name: 'Edition',
+        category: 'Newsletter',
+        url: 'https://github.com/TryGhost/Edition',
+        previewUrl: 'https://ghost.org/themes/edition',
+        ref: 'TryGhost/Edition',
+        image: 'assets/img/themes/Edition.jpg',
+        shortImage: 'assets/img/themes/Edition-cut.jpg'
+    }, {
+        name: 'Alto',
+        category: 'Blog',
+        url: 'https://github.com/TryGhost/Alto',
+        previewUrl: 'https://ghost.org/themes/alto',
+        ref: 'TryGhost/Alto',
+        image: 'assets/img/themes/Alto.jpg',
+        shortImage: 'assets/img/themes/Alto-cut.jpg'
+    }, {
+        name: 'London',
+        category: 'Photography',
+        url: 'https://github.com/TryGhost/London',
+        previewUrl: 'https://ghost.org/themes/london',
+        ref: 'TryGhost/London',
+        image: 'assets/img/themes/London.jpg',
+        shortImage: 'assets/img/themes/London-cut.jpg'
+    }, {
+        name: 'Ease',
+        category: 'Documentation',
+        url: 'https://github.com/TryGhost/Ease',
+        previewUrl: 'https://ghost.org/themes/ease',
+        ref: 'TryGhost/Ease',
+        image: 'assets/img/themes/Ease.jpg',
+        shortImage: 'assets/img/themes/Ease-cut.jpg'
+    }]
+}

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

@@ -1,36 +1,4 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
-import {bind} from '@ember/runloop';
-import {inject as service} from '@ember/service';
 
-export default class SettingsDesignChangeThemeRoute extends AuthenticatedRoute {
-    @service feature;
-    @service modals;
-
-    beforeModel() {
-        super.beforeModel(...arguments);
-
-        if (!this.session.user.isAdmin) {
-            return this.transitionTo('site');
-        }
-
-        if (!this.feature.customThemeSettings) {
-            return this.transitionTo('settings');
-        }
-    }
-
-    activate() {
-        this.changeThemeModal = this.modals.open('modals/design/change-theme', {}, {
-            className: 'fullscreen-modal-full-overlay fullscreen-modal-action',
-            beforeClose: bind(this, this.beforeModalClose)
-        });
-    }
-
-    deactivate() {
-        this.changeThemeModal?.close();
-        this.changeThemeModal = null;
-    }
-
-    beforeModalClose() {
-        this.transitionTo('settings.design');
-    }
+export default class ChangeThemeRoute extends AuthenticatedRoute {
 }

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

@@ -0,0 +1,32 @@
+<section class="gh-canvas">
+    <GhCanvasHeader class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>All themes</h2>
+        <section class="view-actions">
+            <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-grey gh-btn-icon-right">
+                <span>Premium themes {{svg-jar "external"}}</span>
+            </a>
+        </section>
+    </GhCanvasHeader>
+
+    <section class="view-container">
+        <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">
+                        <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>
+                {{/each}}
+            </div>
+        </div>
+    </section>
+</section>