mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-20 21:25:23 +08:00
ed6ed00fa7
I'd like to unify our admin filtering around a central component that achieves some simple styling. It looks like this: <img width="2190" height="328" alt="image" src="https://github.com/user-attachments/assets/ae223ab9-e12f-4e99-a2b8-968aa3a51805" /> This sort of filter has already been implemented in the AI plugin, for the plugin index, and for color palettes. These implementations haven't been all tied up into a single component yet. In this PR I've put some stand-alone filters through the new `AdminFilterControls` component. This includes: * Filtering by theme (when you have 8 or more themes). We didn't have a filter here yet, but it's useful in some extreme cases (including development!) * Filtering by color palette. This existed already, but now uses the shared component. * Filtering by component. We already had a filter here, but it wasn't using this new unified style. This was a little trickier because it's not unusual for sites to have many components, so we paginate and filter these server-side. I've added support for callbacks in `AdminFilterControls` so it can support either client or server based filtering. <img width="2206" height="1108" alt="image" src="https://github.com/user-attachments/assets/6ce6d2f1-1ed1-4168-a6fc-77760fd34384" /> <img width="2204" height="1182" alt="image" src="https://github.com/user-attachments/assets/b0409bc3-9da0-4ae1-b1a3-dd3dcde2a0b3" /> <img width="2224" height="1156" alt="image" src="https://github.com/user-attachments/assets/f82ef6dd-f5d4-46f0-9a57-00349522ef8f" />
94 lines
2.9 KiB
Text
Vendored
94 lines
2.9 KiB
Text
Vendored
import Component from "@glimmer/component";
|
|
import { service } from "@ember/service";
|
|
import PluginOutlet from "discourse/components/plugin-outlet";
|
|
import lazyHash from "discourse/helpers/lazy-hash";
|
|
import { i18n } from "discourse-i18n";
|
|
import AdminConfigAreaCard from "admin/components/admin-config-area-card";
|
|
import AdminFilterControls from "admin/components/admin-filter-controls";
|
|
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.
|
|
|
|
const FILTER_MINIMUM = 8;
|
|
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
|
|
get searchableProps() {
|
|
return ["name", "description"];
|
|
}
|
|
|
|
get inputPlaceholder() {
|
|
return i18n("admin.customize.theme.search_placeholder");
|
|
}
|
|
|
|
get dropdownOptions() {
|
|
return [
|
|
{
|
|
value: "all",
|
|
label: i18n("admin.customize.theme.filter_all"),
|
|
filterFn: () => true,
|
|
},
|
|
{
|
|
value: "user_selectable",
|
|
label: i18n("admin.customize.theme.filter_user_selectable"),
|
|
filterFn: (theme) => theme.user_selectable,
|
|
},
|
|
];
|
|
}
|
|
|
|
<template>
|
|
<AdminFilterControls
|
|
@array={{this.sortedThemes}}
|
|
@minItemsForFilter={{FILTER_MINIMUM}}
|
|
@searchableProps={{this.searchableProps}}
|
|
@dropdownOptions={{this.dropdownOptions}}
|
|
@inputPlaceholder={{this.inputPlaceholder}}
|
|
@noResultsMessage={{i18n "admin.customize.theme.no_themes_found"}}
|
|
as |themes|
|
|
>
|
|
<div class="themes-cards-container">
|
|
{{#each themes as |theme|}}
|
|
<ThemesGridCard @theme={{theme}} @allThemes={{@themes}} />
|
|
{{/each}}
|
|
<PluginOutlet
|
|
@name="admin-themes-grid-additional-cards"
|
|
@outletArgs={{lazyHash
|
|
AdminConfigAreaCardComponent=AdminConfigAreaCard
|
|
}}
|
|
/>
|
|
</div>
|
|
</AdminFilterControls>
|
|
</template>
|
|
}
|
