Added "active" indicator and list themes in "active, default, ...rest" order

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

- built a secondary list of themes that's decorated and sorted for display purposes
This commit is contained in:
Kevin Ansfield 2021-10-18 13:02:28 +01:00
parent 8e648420e8
commit 9a0a98e64a
4 changed files with 47 additions and 4 deletions

View File

@ -10,7 +10,7 @@ export default class ChangeThemeController extends Controller {
@tracked showAdvanced = false;
@tracked themes = this.store.peekAll('theme');
marketplaceThemes = [{
officialThemes = [{
name: 'Casper',
category: 'Blog',
previewUrl: 'https://casper.ghost.io/',
@ -116,6 +116,44 @@ export default class ChangeThemeController extends Controller {
image: 'assets/img/themes/Massively.jpg'
}]
get themesList() {
const activeTheme = this.themes.findBy('active', true);
// decorate themes based on current usage
let themesList = this.officialThemes.map((theme) => {
const decoratedTheme = Object.assign({}, theme);
if (theme.ref === 'default') {
decoratedTheme.isDefault = true;
}
if (theme.name.toLowerCase() === activeTheme.name) {
decoratedTheme.isActive = true;
}
return decoratedTheme;
});
// move default themes to the beginning of the list
themesList.sort((a, b) => {
if (b.isDefault) {
return 1;
}
return 0;
});
// ensure active theme is always first
const activeThemeInList = themesList.find(theme => theme.isActive);
const activeThemeIndex = themesList.indexOf(activeThemeInList);
if (activeThemeIndex > 0) {
themesList.splice(activeThemeIndex, 1);
themesList.unshift(activeThemeInList);
}
return themesList;
}
@action
toggleAdvanced() {
this.showAdvanced = !this.showAdvanced;

View File

@ -5,6 +5,6 @@ export default class ChangeThemeRoute extends AuthenticatedRoute {
@service store;
model() {
this.store.findAll('theme');
return this.store.findAll('theme');
}
}

View File

@ -8,7 +8,7 @@ export default class ViewThemeRoute extends Route {
model(params, transition) {
const changeThemeController = this.controllerFor('settings.design.change-theme');
const knownThemes = changeThemeController.marketplaceThemes;
const knownThemes = changeThemeController.officialThemes;
const foundTheme = knownThemes.find(theme => theme.name === params.theme_name);

View File

@ -16,7 +16,7 @@
<div class="gh-theme-directory-container-labs">
<div class="theme-directory-labs">
{{#each this.marketplaceThemes as |theme|}}
{{#each this.themesList as |theme|}}
<LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
<div class="gh-theme-browser">
<span class="gh-theme-browser-button"></span>
@ -27,6 +27,11 @@
<div class="td-item-desc">
<div>{{theme.name}}</div>
<span>• {{theme.category}}</span>
{{#if theme.isActive}}
<span class="gh-badge">Active</span>
{{else if theme.isDefault}}
<span class="gh-badge">Default</span>
{{/if}}
</div>
</LinkTo>
{{/each}}