From 648838c2f1e5652bc8df364ab02dfb2e5b3f60fc Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 16 Feb 2022 15:51:01 +0100
Subject: [PATCH] Added dyamic theme properties on onboarding finish screen

---
 .../controllers/setup/finishing-touches.js    | 55 +++++++++++++++++++
 .../app/templates/setup/finishing-touches.hbs | 20 +++++--
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/controllers/setup/finishing-touches.js b/ghost/admin/app/controllers/setup/finishing-touches.js
index ca9c9c285f..1b14e85ca3 100644
--- a/ghost/admin/app/controllers/setup/finishing-touches.js
+++ b/ghost/admin/app/controllers/setup/finishing-touches.js
@@ -1,13 +1,68 @@
 import Controller from '@ember/controller';
+import {isEmpty} from '@ember/utils';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
+
+const THEME_PROPERTIES = {
+    casper: ['description', 'color', 'coverImage'],
+    edition: ['description', 'color', 'coverImage'],
+    dawn: ['description', 'color', 'icon'],
+    dope: ['description', 'color', 'logo'],
+    bulletin: ['description', 'color', 'logo'],
+    alto: ['description', 'color', 'logo'],
+    journal: ['description', 'color', 'logo'],
+    wave: ['description', 'color', 'logo', 'coverImage'],
+    edge: ['description', 'color', 'logo'],
+    ease: ['description', 'color', 'logo', 'coverImage'],
+    ruby: ['description', 'color', 'logo', 'coverImage'],
+    london: ['description', 'color', 'logo'],
+    digest: ['description', 'color', 'logo']
+};
 
 export default class SetupFinishingTouchesController extends Controller {
     @service modals;
     @service router;
     @service settings;
+    @service store;
     @service themeManagement;
 
+    @tracked descriptionVisible;
+    @tracked colorVisible;
+    @tracked logoVisible;
+    @tracked iconVisible;
+    @tracked coverImageVisible;
+
+    themes = null;
+
+    // Default properties to display
+    themeProperties = ['description', 'color', 'coverImage'];
+
+    constructor() {
+        super(...arguments);
+        this.initThemeProperties.perform();
+    }
+
+    @task({drop: true})
+    *initThemeProperties() {
+        this.themes = yield this.store.peekAll('theme');
+        if (isEmpty(this.themes)) {
+            this.themes = yield this.store.findAll('theme');
+        }
+
+        const activeTheme = this.themes.findBy('active', true);
+
+        if (activeTheme && THEME_PROPERTIES[activeTheme.name]) {
+            this.themeProperties = THEME_PROPERTIES[activeTheme.name];
+        }
+
+        this.descriptionVisible = this.themeProperties.includes('description');
+        this.logoVisible = this.themeProperties.includes('logo');
+        this.iconVisible = this.themeProperties.includes('icon');
+        this.colorVisible = this.themeProperties.includes('color');
+        this.coverImageVisible = this.themeProperties.includes('coverImage');
+    }
+
     @task
     *saveAndContinueTask() {
         yield this.settings.save();
diff --git a/ghost/admin/app/templates/setup/finishing-touches.hbs b/ghost/admin/app/templates/setup/finishing-touches.hbs
index 122c802995..2595691c41 100644
--- a/ghost/admin/app/templates/setup/finishing-touches.hbs
+++ b/ghost/admin/app/templates/setup/finishing-touches.hbs
@@ -4,15 +4,27 @@
         <p>You chose a theme, now it's time to make it your own.</p>
     </header>
     <main class="flex flex-row h-100">
+        {{!-- {{this.activeTheme.name}} --}}
         <div class="gh-nav gh-nav-contextual gh-nav-design">
             <div class="flex flex-column h-100">
                 <div class="gh-nav-body">
                     <div class="gh-nav-design-settings">
                         <div class="gh-stack">
-                            <Settings::FormFields::SiteDescription class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
-                            <Settings::FormFields::AccentColor class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
-                            <Settings::FormFields::PublicationLogo class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
-                            <Settings::FormFields::PublicationCover class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            {{#if this.descriptionVisible}}
+                                <Settings::FormFields::SiteDescription class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            {{/if}}
+                            
+                            {{#if this.colorVisible}}
+                                <Settings::FormFields::AccentColor class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            {{/if}}
+
+                            {{#if this.logoVisible}}
+                                <Settings::FormFields::PublicationLogo class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            {{/if}}
+
+                            {{#if this.coverImageVisible}}
+                                <Settings::FormFields::PublicationCover class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            {{/if}}
                         </div>
                     </div>
                 </div>