mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-27 21:03:29 +03:00
cb13b7de1e
no issue When no custom theme settings exist it's nice to have the brand settings form automatically visible when opening the design settings menu to avoid an extra click and let users make actions immediately. We don't want that behaviour when custom theme settings exist because it would hide useful context and result in extra scroll+clicks to get to the section you're interested in. - when first rendering the menu, set the open section to `brand` if we're on the design settings index screen - add an event handler to the router that re-sets the open section to `brand` each time we navigate back to the design settings index screen (leaving the index screen closes all open sections)
85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import {action} from '@ember/object';
|
|
import {bind} from '@ember/runloop';
|
|
import {isEmpty} from '@ember/utils';
|
|
import {inject as service} from '@ember/service';
|
|
import {tracked} from '@glimmer/tracking';
|
|
|
|
export default class DesignMenuComponent extends Component {
|
|
@service config;
|
|
@service customThemeSettings;
|
|
@service router;
|
|
@service settings;
|
|
@service store;
|
|
@service themeManagement;
|
|
|
|
@tracked openSection = null;
|
|
|
|
themes = this.store.peekAll('theme');
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
|
|
// fetch all themes in the background so we can show the active theme
|
|
this.store.findAll('theme');
|
|
|
|
if (this.router.currentRouteName === 'settings.design.index') {
|
|
this.openDefaultSection();
|
|
}
|
|
|
|
this.routeDidChangeHandler = bind(this, this.handleRouteDidChange);
|
|
this.router.on('routeDidChange', this.routeDidChangeHandler);
|
|
}
|
|
|
|
willDestroy() {
|
|
super.willDestroy(...arguments);
|
|
this.router.off('routeDidChange', this.routeDidChangeHandler);
|
|
}
|
|
|
|
get activeTheme() {
|
|
return this.themes.findBy('active', true);
|
|
}
|
|
|
|
@action
|
|
toggleSection(section) {
|
|
if (this.openSection === section) {
|
|
this.openSection = null;
|
|
} else {
|
|
this.openSection = section;
|
|
|
|
const group = this.customThemeSettings.KNOWN_GROUPS.findBy('key', section);
|
|
if (group && group.previewType) {
|
|
this.themeManagement.setPreviewType(group.previewType);
|
|
} else {
|
|
this.themeManagement.setPreviewType('homepage');
|
|
}
|
|
}
|
|
}
|
|
|
|
@action
|
|
transitionBackToIndex() {
|
|
if (this.router.currentRouteName !== 'settings.design.index') {
|
|
this.router.transitionTo('settings.design.index');
|
|
}
|
|
}
|
|
|
|
@action
|
|
closeAllSections() {
|
|
this.openSection = null;
|
|
}
|
|
|
|
openDefaultSection() {
|
|
const noCustomSettings = isEmpty(this.customThemeSettings.settings);
|
|
|
|
if (noCustomSettings) {
|
|
this.openSection = 'brand';
|
|
}
|
|
}
|
|
|
|
handleRouteDidChange(transition) {
|
|
if (!transition.isAborted && transition.to?.name === 'settings.design.index') {
|
|
this.openDefaultSection();
|
|
}
|
|
}
|
|
}
|