discourse/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-edit.js
David Taylor 1bd61630ef
UX: Simplify admin theme editor (#31561)
- Hide seldom-used fields behind an 'advanced' checkbox. This replaces
the old 'only show edited' checkbox, since the number of fields shown by
default is now so small that 'only show edited' isn't useful.
Mobile/desktop targets are included in that list because we now
recommend people use CSS breakpoints for handling different device
sizes.

- Update names & descriptions of fields to be more descriptive

- Show the descriptions of fields at the top of the editor. Previously
they were only shown as tooltips.

Before:
<img width="1109" alt="SCR-20250228-lunn"
src="https://github.com/user-attachments/assets/8faebba1-39c1-491a-b236-411cfb6d9c74"
/>

After, default view:
<img width="1102" alt="SCR-20250303-kayr"
src="https://github.com/user-attachments/assets/1e483845-613f-44d6-83d6-ade628251fe5"
/>

After, advanced view:
<img width="1122" alt="SCR-20250303-kazn"
src="https://github.com/user-attachments/assets/45b8933d-2271-42ba-b5b4-81b326709adb"
/>
2025-03-03 12:20:11 +00:00

66 lines
1.6 KiB
JavaScript

import Controller from "@ember/controller";
import { action } from "@ember/object";
import { service } from "@ember/service";
import { url } from "discourse/lib/computed";
import discourseComputed from "discourse/lib/decorators";
import { i18n } from "discourse-i18n";
export default class AdminCustomizeThemesEditController extends Controller {
@service router;
section = null;
currentTarget = 0;
maximized = false;
@url("model.id", "/admin/themes/%@/preview") previewUrl;
showAdvanced = false;
editRouteName = "adminCustomizeThemes.edit";
showRouteName = "adminCustomizeThemes.show";
setTargetName(name) {
const target = this.get("model.targets").find((t) => t.name === name);
this.set("currentTarget", target && target.id);
}
@discourseComputed("currentTarget")
currentTargetName(id) {
const target = this.get("model.targets").find(
(t) => t.id === parseInt(id, 10)
);
return target && target.name;
}
@discourseComputed("model.isSaving")
saveButtonText(isSaving) {
return isSaving ? i18n("saving") : i18n("admin.customize.save");
}
@discourseComputed("model.changed", "model.isSaving")
saveDisabled(changed, isSaving) {
return !changed || isSaving;
}
@action
save() {
this.set("saving", true);
this.model.saveChanges("theme_fields").finally(() => {
this.set("saving", false);
});
}
@action
fieldAdded(target, name) {
this.router.replaceWith(
this.editRouteName,
this.get("model.id"),
target,
name
);
}
@action
goBack() {
this.router.replaceWith(this.showRouteName, this.model.id);
}
}