TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Added dyamic theme properties on onboarding finish screen

Browse Source
This commit is contained in:
Peter Zimon 2022-02-16 15:51:01 +01:00 committed by James Morris
parent f6f25fabe6
commit 648838c2f1
2 changed files with 71 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ghost/admin/app/controllers/setup/finishing-touches.js
View File

@ -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();

20
ghost/admin/app/templates/setup/finishing-touches.hbs
View File

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