discourse/app/assets/javascripts/admin/addon/components/themes-grid.gjs
Krzysztof Kotlarek 2536768a43
FEATURE: system themes (#32681)
Introduction of system themes.  System themes are local themes which:
- Cannot be deleted;
- Cannot have “custom code” added, components only;
- Cannot have uploads;
- Cannot edit color palettes;
- Are updated on deploy, like core plugins.

This PR added the Foundation system theme, which is an empty theme like
Default. The Foundation theme will be added in the next PR.

In a development environment, when system theme files are
changed/added/deleted, the theme is reuploaded and the page is reloaded
to make it a good experience for the engineer working on improvements.

System themes are not visible until
`SiteSetting.experimental_system_theme` is enabled.
2025-06-13 10:36:31 +08:00

50 lines
1.6 KiB
Text
Vendored

import Component from "@glimmer/component";
import { service } from "@ember/service";
import ThemesGridCard from "./themes-grid-card";
// NOTE (martin): Much of the JS code in this component is placeholder code. Much
// of the existing theme logic in /admin/customize/themes has old patterns
// and technical debt, so anything copied from there to here is subject
// to change as we improve this incrementally.
export default class ThemesGrid extends Component {
@service modal;
@service router;
sortedThemes;
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")) {
return 1;
}
if (a.id < 0) {
return a.id;
}
if (b.id < 0) {
return -b.id;
}
});
}
<template>
<div class="themes-cards-container">
{{#each @themes as |theme|}}
<ThemesGridCard @theme={{theme}} @allThemes={{@themes}} />
{{/each}}
{{#if (has-block "specialCard")}}
{{yield to="specialCard"}}
{{/if}}
</div>
</template>
}