IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Makes the theme editor display placeholder correctly for RTL languages (#11800)

Browse Source 
This fixes https://discourse.crowdin.com/translate/f3230e7607a36bb0a2f97fd90605a44e/246/en-he#53834
This commit is contained in:
Gerhard Schlager
2021-01-22 16:03:43 +01:00
committed by GitHub
parent 436c8e9bcd
commit 71656d2c37
6 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/admin/addon/components/admin-theme-editor.js
View File

@@ -2,6 +2,7 @@ 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({
@@ -43,9 +44,17 @@ export default Component.extend({
@discourseComputed("currentTargetName", "fieldName")
placeholder(targetName, fieldName) {
return fieldName && fieldName === "color_definitions"
? I18n.t("admin.customize.theme.color_definitions.placeholder")
: "";
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 "";
},
@discourseComputed("fieldName", "currentTargetName", "theme")