mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
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:
parent
8e648420e8
commit
9a0a98e64a
@ -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;
|
||||
|
@ -5,6 +5,6 @@ export default class ChangeThemeRoute extends AuthenticatedRoute {
|
||||
@service store;
|
||||
|
||||
model() {
|
||||
this.store.findAll('theme');
|
||||
return this.store.findAll('theme');
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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}}
|
||||
|
Loading…
Reference in New Issue
Block a user