feat(status_bar): add help item

This commit is contained in:
Elian Doran 2025-12-10 23:04:32 +02:00
parent cb382c9537
commit db42bb603b
No known key found for this signature in database
3 changed files with 17 additions and 6 deletions

View File

@ -1963,7 +1963,8 @@
}, },
"note_language": { "note_language": {
"not_set": "No language set", "not_set": "No language set",
"configure-languages": "Configure languages..." "configure-languages": "Configure languages...",
"help-on-languages": "Help on content languages..."
}, },
"content_language": { "content_language": {
"title": "Content languages", "title": "Content languages",

View File

@ -1,11 +1,19 @@
import { t } from "../services/i18n";
import { openInAppHelpFromUrl } from "../services/utils";
import "./NoteStatusBar.css"; import "./NoteStatusBar.css";
import { FormListItem } from "./react/FormList";
import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab"; import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab";
export default function NoteStatusBar() { export default function NoteStatusBar() {
return ( return (
<div className="note-status-bar"> <div className="note-status-bar">
<NoteLanguageSelector /> <NoteLanguageSelector extraChildren={(
<FormListItem
onClick={() => openInAppHelpFromUrl("veGu4faJErEM")}
icon="bx bx-help-circle"
>{t("note_language.help-on-languages")}</FormListItem>
)} />
</div> </div>
); );
} }

View File

@ -23,6 +23,7 @@ import { ContentLanguagesList } from "../type_widgets/options/i18n";
import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector"; import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features"; import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
import { createPortal } from "preact/compat"; import { createPortal } from "preact/compat";
import { ComponentChildren } from "preact";
const isNewLayout = isExperimentalFeatureEnabled("new-layout"); const isNewLayout = isExperimentalFeatureEnabled("new-layout");
@ -326,12 +327,12 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
&nbsp; &nbsp;
<NoteLanguageSelector note={note} /> <NoteLanguageSelector note={note} />
<HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} /> <HelpButton helpPage="veGu4faJErEM" style={{ marginInlineStart: "4px" }} />
</div> </div>
); );
} }
export function NoteLanguageSelector({ note }: { note?: FNote | null }) { export function NoteLanguageSelector({ note, extraChildren }: { note?: FNote | null, extraChildren?: ComponentChildren }) {
const [ modalShown, setModalShown ] = useState(false); const [ modalShown, setModalShown ] = useState(false);
const [ languages ] = useTriliumOption("languages"); const [ languages ] = useTriliumOption("languages");
const DEFAULT_LOCALE = { const DEFAULT_LOCALE = {
@ -351,12 +352,13 @@ export function NoteLanguageSelector({ note }: { note?: FNote | null }) {
locales={locales} locales={locales}
defaultLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE}
currentValue={currentNoteLanguage ?? ""} onChange={setCurrentNoteLanguage} currentValue={currentNoteLanguage ?? ""} onChange={setCurrentNoteLanguage}
extraChildren={( extraChildren={<>
{extraChildren}
<FormListItem <FormListItem
onClick={() => setModalShown(true)} onClick={() => setModalShown(true)}
icon="bx bx-cog" icon="bx bx-cog"
>{t("note_language.configure-languages")}</FormListItem> >{t("note_language.configure-languages")}</FormListItem>
)} </>}
/> />
{createPortal( {createPortal(
<ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />, <ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,