diff --git a/app/assets/javascripts/admin/addon/components/themes-grid.gjs b/app/assets/javascripts/admin/addon/components/themes-grid.gjs
index c810318ac72..8ea1a3a7eb7 100644
--- a/app/assets/javascripts/admin/addon/components/themes-grid.gjs
+++ b/app/assets/javascripts/admin/addon/components/themes-grid.gjs
@@ -1,11 +1,5 @@
import Component from "@glimmer/component";
-import { action } from "@ember/object";
import { service } from "@ember/service";
-import DButton from "discourse/components/d-button";
-import icon from "discourse-common/helpers/d-icon";
-import i18n from "discourse-common/helpers/i18n";
-import AdminConfigAreaCard from "admin/components/admin-config-area-card";
-import InstallThemeModal from "../components/modal/install-theme";
import ThemesGridCard from "./themes-grid-card";
// NOTE (martin): Much of the JS code in this component is placeholder code. Much
@@ -16,6 +10,8 @@ export default class ThemesGrid extends Component {
@service modal;
@service router;
+ sortedThemes;
+
externalResources = [
{
key: "admin.customize.theme.beginners_guide_title",
@@ -31,9 +27,17 @@ export default class ThemesGrid extends Component {
},
];
- // Always show the default theme first in the list
- get sortedThemes() {
- return this.args.themes.sort((a, b) => {
+ constructor() {
+ super(...arguments);
+
+ // Show default theme at the top of the list on page load,
+ // but don't move it around dynamically if the admin changes the default.
+ //
+ // TODO (martin) Figure out how to make it so we can sort default to the
+ // top but also allow the list of themes to change if an additional theme is
+ // installed. Basically don't want .get("default") to affect the sort after
+ // the first time, but if the whole array changes this needs to be recalculated.
+ this.sortedThemes = this.args.themes.sort((a, b) => {
if (a.get("default")) {
return -1;
} else if (b.get("default")) {
@@ -42,78 +46,11 @@ export default class ThemesGrid extends Component {
});
}
- // TODO (martin) These install methods may not belong here and they
- // are incomplete or have stubbed or omitted properties. We may want
- // to move this to the new config route or a dedicated component
- // that sits in the route.
- installThemeOptions() {
- return {
- selectedType: "theme",
- userId: null,
- content: null,
- installedThemes: this.args.themes,
- addTheme: this.addTheme,
- updateSelectedType: () => {},
- };
- }
-
- @action
- addTheme(theme) {
- this.refresh();
- theme.setProperties({ recentlyInstalled: true });
- this.router.transitionTo("adminCustomizeThemes.show", theme.get("id"), {
- queryParams: {
- repoName: null,
- repoUrl: null,
- },
- });
- }
-
- @action
- installModal() {
- this.modal.show(InstallThemeModal, {
- model: { ...this.installThemeOptions() },
- });
- }
-
-
- {{#each this.sortedThemes as |theme|}}
-
- {{/each}}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs b/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs
index ad5dfcda6e4..1dacd69dcea 100644
--- a/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs
+++ b/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs
@@ -1,6 +1,7 @@
<:breadcrumbs>