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 { next } from "@ember/runloop"; export default Component.extend({ @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.indexOf("scss") > -1 ? "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() ? `