134 lines
3.5 KiB
JavaScript
134 lines
3.5 KiB
JavaScript
import Component from "@ember/component";
|
|
import I18n from "I18n";
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
|
import { fmt } from "discourse/lib/computed";
|
|
import { isDocumentRTL } from "discourse/lib/text-direction";
|
|
import { action, computed } from "@ember/object";
|
|
import { next } from "@ember/runloop";
|
|
|
|
export default class AdminThemeEditor extends Component {
|
|
warning = null;
|
|
|
|
@fmt("fieldName", "currentTargetName", "%@|%@") editorId;
|
|
|
|
@discourseComputed("theme.targets", "onlyOverridden", "showAdvanced")
|
|
visibleTargets(targets, onlyOverridden, showAdvanced) {
|
|
return targets.filter((target) => {
|
|
if (target.advanced && !showAdvanced) {
|
|
return false;
|
|
}
|
|
if (!onlyOverridden) {
|
|
return true;
|
|
}
|
|
return target.edited;
|
|
});
|
|
}
|
|
|
|
@discourseComputed("currentTargetName", "onlyOverridden", "theme.fields")
|
|
visibleFields(targetName, onlyOverridden, fields) {
|
|
fields = fields[targetName];
|
|
if (onlyOverridden) {
|
|
fields = fields.filter((field) => field.edited);
|
|
}
|
|
return fields;
|
|
}
|
|
|
|
@discourseComputed("currentTargetName", "fieldName")
|
|
activeSectionMode(targetName, fieldName) {
|
|
if (["settings", "translations"].includes(targetName)) {
|
|
return "yaml";
|
|
}
|
|
if (["extra_scss"].includes(targetName)) {
|
|
return "scss";
|
|
}
|
|
if (["color_definitions"].includes(fieldName)) {
|
|
return "scss";
|
|
}
|
|
return fieldName && fieldName.includes("scss") ? "scss" : "html";
|
|
}
|
|
|
|
@discourseComputed("currentTargetName", "fieldName")
|
|
placeholder(targetName, fieldName) {
|
|
if (fieldName && fieldName === "color_definitions") {
|
|
const example =
|
|
":root {\n" +
|
|
" --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};\n" +
|
|
"}";
|
|
|
|
return I18n.t("admin.customize.theme.color_definitions.placeholder", {
|
|
example: isDocumentRTL() ? `<div dir="ltr">${example}</div>` : example,
|
|
});
|
|
}
|
|
return "";
|
|
}
|
|
|
|
@computed("fieldName", "currentTargetName", "theme")
|
|
get activeSection() {
|
|
return this.theme.getField(this.currentTargetName, this.fieldName);
|
|
}
|
|
|
|
set activeSection(value) {
|
|
this.theme.setField(this.currentTargetName, this.fieldName, value);
|
|
return value;
|
|
}
|
|
|
|
@discourseComputed("maximized")
|
|
maximizeIcon(maximized) {
|
|
return maximized ? "discourse-compress" : "discourse-expand";
|
|
}
|
|
|
|
@discourseComputed("currentTargetName", "theme.targets")
|
|
showAddField(currentTargetName, targets) {
|
|
return targets.find((t) => t.name === currentTargetName).customNames;
|
|
}
|
|
|
|
@discourseComputed(
|
|
"currentTargetName",
|
|
"fieldName",
|
|
"theme.theme_fields.@each.error"
|
|
)
|
|
error(target, fieldName) {
|
|
return this.theme.getError(target, fieldName);
|
|
}
|
|
|
|
@action
|
|
toggleShowAdvanced(event) {
|
|
event?.preventDefault();
|
|
this.toggleProperty("showAdvanced");
|
|
}
|
|
|
|
@action
|
|
toggleAddField(event) {
|
|
event?.preventDefault();
|
|
this.toggleProperty("addingField");
|
|
}
|
|
|
|
@action
|
|
toggleMaximize(event) {
|
|
event?.preventDefault();
|
|
this.toggleProperty("maximized");
|
|
next(() => this.appEvents.trigger("ace:resize"));
|
|
}
|
|
|
|
@action
|
|
cancelAddField() {
|
|
this.set("addingField", false);
|
|
}
|
|
|
|
@action
|
|
addField(name) {
|
|
if (!name) {
|
|
return;
|
|
}
|
|
name = name.replace(/[^a-zA-Z0-9-_/]/g, "");
|
|
this.theme.setField(this.currentTargetName, name, "");
|
|
this.setProperties({ newFieldName: "", addingField: false });
|
|
this.fieldAdded(this.currentTargetName, name);
|
|
}
|
|
|
|
@action
|
|
setWarning(message) {
|
|
this.set("warning", message);
|
|
}
|
|
}
|