From 24a50a815f73500b71b97fa12714f8e0a880e683 Mon Sep 17 00:00:00 2001 From: Hatton Date: Wed, 19 Nov 2025 10:43:14 -0700 Subject: [PATCH] BL-15212 add language tags in edit --- .../bookEdit/StyleEditor/StyleEditor.less | 14 ++++++++ .../bookEdit/StyleEditor/StyleEditor.pug | 33 ++++++++++--------- .../bookEdit/StyleEditor/StyleEditor.ts | 18 ++++++++++ .../sourceBubbles/BloomSourceBubbles.tsx | 2 ++ 4 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less index 8752c8a10020..574761940212 100644 --- a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less +++ b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less @@ -7,6 +7,20 @@ h2 { font-size: 10pt; } + .bloomDialogTitleBar { + position: relative; + } + + // this is an unfortunate ui hack because we can't yet put the language code as a tooltip on the language + // tag itself because it is a psuedo-element. (BL-15212) + #format-toolbar-lang-code { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + font-size: 0.85em; + color: rgba(255, 255, 255, 0.75); + } // Styles specific to the Style Editor dialog .format-toolbar-description { font-size: small; diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.pug b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.pug index 2161a7cc5c77..bbfa55923b08 100644 --- a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.pug +++ b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.pug @@ -2,26 +2,29 @@ mixin img(filename) img(src='/bloom/bookEdit/img/' + filename) #format-toolbar.bloom-ui.bloomDialogContainer(style="visibility: hidden;") - .bloomDialogTitleBar(data-i18n="EditTab.FormatDialog.Format") Format + .bloomDialogTitleBar + span(data-i18n="EditTab.FormatDialog.Format") Format + span#format-toolbar-lang-code .hideWhenFormattingEnabled.bloomDialogMainPage p(data-i18n="BookEditor.FormattingDisabled") Sorry, Reader Templates do not allow changes to formatting. #tabRoot.hideWhenFormattingDisabled.tab-pane #style-page.tab-page h2.tab(data-i18n="EditTab.FormatDialog.StyleNameTab") Style Name - .bloomDialogMainPage(data-i18n="EditTab.FormatDialog.Style") Style - #style-group.state-initial - select#styleSelect - #dont-see - span(data-i18n="EditTab.FormatDialog.DontSeeNeed") Don't see what you need? - = ' ' - a#show-createStyle(href="" data-i18n="EditTab.FormatDialog.CreateStyle") Create a new style - #createStyle - div(data-i18n="EditTab.FormatDialog.NewStyle") New style - div - input#style-select-input(type="text") - button#create-button(data-i18n="EditTab.FormatDialog.Create" disabled) Create - #please-use-alpha(style="color: red;" data-i18n="EditTab.FormatDialog.PleaseUseAlpha") Please use only alphabetical characters. Numbers at the end are ok, as in "part2". - #already-exists(style="color: red;" data-i18n="EditTab.FormatDialog.AlreadyExists") That style already exists. Please choose another name. + .bloomDialogMainPage + div(data-i18n="EditTab.FormatDialog.Style") Style + #style-group.state-initial + select#styleSelect + #dont-see + span(data-i18n="EditTab.FormatDialog.DontSeeNeed") Don't see what you need? + = ' ' + a#show-createStyle(href="" data-i18n="EditTab.FormatDialog.CreateStyle") Create a new style + #createStyle + div(data-i18n="EditTab.FormatDialog.NewStyle") New style + div + input#style-select-input(type="text") + button#create-button(data-i18n="EditTab.FormatDialog.Create" disabled) Create + #please-use-alpha(style="color: red;" data-i18n="EditTab.FormatDialog.PleaseUseAlpha") Please use only alphabetical characters. Numbers at the end are ok, as in "part2". + #already-exists(style="color: red;" data-i18n="EditTab.FormatDialog.AlreadyExists") That style already exists. Please choose another name. .tab-page h2.tab(data-i18n="EditTab.FormatDialog.CharactersTab") Characters .bloomDialogMainPage diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts index 7f9327941eea..77f260cd9971 100644 --- a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts +++ b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts @@ -1529,6 +1529,23 @@ export default class StyleEditor { }); } + // this is an unfortunate ui hack because we can't yet put the language code as a tooltip on the language + // tag itself because it is a psuedo-element (BL-15212). + private updateTitleBarLanguageCode() { + const target = $("#format-toolbar-lang-code"); + if (target.length === 0) { + return; + } + const langCode = ($(this.boxBeingEdited).attr("lang") || "").trim(); + if (langCode) { + target.text(langCode); + target.removeAttr("aria-hidden"); + } else { + target.text(""); + target.attr("aria-hidden", "true"); + } + } + // The More tab settings are never language-dependent public getParagraphTabDescription() { const styleName = StyleEditor.GetBaseStyleNameForElement( @@ -2319,6 +2336,7 @@ export default class StyleEditor { $("#format-toolbar").remove(); // in case there's still one somewhere else $("body").append(html); + this.updateTitleBarLanguageCode(); if (noFormatChange) { $("#format-toolbar").addClass("formattingDisabled"); diff --git a/src/BloomBrowserUI/bookEdit/sourceBubbles/BloomSourceBubbles.tsx b/src/BloomBrowserUI/bookEdit/sourceBubbles/BloomSourceBubbles.tsx index f40db4437464..241a4f2132fd 100644 --- a/src/BloomBrowserUI/bookEdit/sourceBubbles/BloomSourceBubbles.tsx +++ b/src/BloomBrowserUI/bookEdit/sourceBubbles/BloomSourceBubbles.tsx @@ -183,6 +183,8 @@ export default class BloomSourceBubbles { // helpful. $(list).append( '