discourse/app/assets/javascripts/admin/components/themes-list.js.es6
David Taylor a48731e359
FEATURE: Support additional metadata in theme about.json (#6944)
New `about.json` fields (all optional):
 - `authors`: An arbitrary string describing the theme authors
 - `theme_version`: An arbitrary string describing the theme version
 - `minimum_discourse_version`: Theme will be auto-disabled for lower versions. Must be a valid version descriptor.
 - `maximum_discourse_version`: Theme will be auto-disabled for lower versions. Must be a valid version descriptor.

A localized description for a theme can be provided in the language files under the `theme_metadata.description` key

The admin UI has been re-arranged to display this new information, and give more prominence to the remote theme options.
2019-01-25 14:19:01 +00:00

89 lines
2.3 KiB
JavaScript

import { THEMES, COMPONENTS } from "admin/models/theme";
import { default as computed } from "ember-addons/ember-computed-decorators";
export default Ember.Component.extend({
THEMES: THEMES,
COMPONENTS: COMPONENTS,
classNames: ["themes-list"],
hasThemes: Ember.computed.gt("themesList.length", 0),
hasActiveThemes: Ember.computed.gt("activeThemes.length", 0),
hasInactiveThemes: Ember.computed.gt("inactiveThemes.length", 0),
themesTabActive: Ember.computed.equal("currentTab", THEMES),
componentsTabActive: Ember.computed.equal("currentTab", COMPONENTS),
@computed("themes", "components", "currentTab")
themesList(themes, components) {
if (this.get("themesTabActive")) {
return themes;
} else {
return components;
}
},
@computed(
"themesList",
"currentTab",
"themesList.@each.user_selectable",
"themesList.@each.default"
)
inactiveThemes(themes) {
if (this.get("componentsTabActive")) {
return themes.filter(theme => theme.get("parent_themes.length") <= 0);
}
return themes.filter(
theme => !theme.get("user_selectable") && !theme.get("default")
);
},
@computed(
"themesList",
"currentTab",
"themesList.@each.user_selectable",
"themesList.@each.default"
)
activeThemes(themes) {
if (this.get("componentsTabActive")) {
return themes.filter(theme => theme.get("parent_themes.length") > 0);
} else {
themes = themes.filter(
theme => theme.get("user_selectable") || theme.get("default")
);
return _.sortBy(themes, t => {
return [
!t.get("default"),
!t.get("user_selectable"),
t.get("name").toLowerCase()
];
});
}
},
didRender() {
this._super(...arguments);
// hide scrollbar
const $container = this.$(".themes-list-container");
const containerNode = $container[0];
if (containerNode) {
const width = containerNode.offsetWidth - containerNode.clientWidth;
$container.css("width", `calc(100% + ${width}px)`);
}
},
actions: {
changeView(newTab) {
if (newTab !== this.get("currentTab")) {
this.set("currentTab", newTab);
}
},
navigateToTheme(theme) {
Ember.getOwner(this)
.lookup("router:main")
.transitionTo("adminCustomizeThemes.show", theme);
}
}
});