feat(status_bar/language): compact locale name

This commit is contained in:
Elian Doran
2025-12-12 18:05:10 +02:00
parent 74b6e7bf63
commit 31c5323fd9
3 changed files with 19 additions and 5 deletions

View File

@@ -41,6 +41,7 @@ function LanguageSwitcher({ note }: StatusBarContext) {
icon="bx bx-help-circle"
>{t("note_language.help-on-languages")}</FormListItem>
)}
compact
/>
);
}

View File

@@ -330,7 +330,11 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
);
}
export function NoteLanguageSelector({ note, extraChildren }: { note: FNote | null | undefined, extraChildren?: ComponentChildren }) {
export function NoteLanguageSelector({ note, extraChildren, ...restProps }: {
note: FNote | null | undefined,
extraChildren?: ComponentChildren,
compact?: boolean;
}) {
const [ modalShown, setModalShown ] = useState(false);
const [ languages ] = useTriliumOption("languages");
const DEFAULT_LOCALE = {
@@ -357,6 +361,7 @@ export function NoteLanguageSelector({ note, extraChildren }: { note: FNote | nu
icon="bx bx-cog"
>{t("note_language.configure-languages")}</FormListItem>
</>}
{...restProps}
/>
{createPortal(
<ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,

View File

@@ -5,13 +5,14 @@ import { useMemo } from "preact/hooks";
import Dropdown from "../../../react/Dropdown";
import { FormDropdownDivider, FormListItem } from "../../../react/FormList";
export function LocaleSelector({ id, locales, currentValue, onChange, defaultLocale, extraChildren }: {
export function LocaleSelector({ id, locales, currentValue, onChange, defaultLocale, extraChildren, compact }: {
id?: string;
locales: Locale[],
currentValue: string,
onChange: (newLocale: string) => void,
defaultLocale?: Locale,
extraChildren?: ComponentChildren
extraChildren?: ComponentChildren,
compact?: boolean;
}) {
const activeLocale = defaultLocale?.id === currentValue ? defaultLocale : locales.find(l => l.id === currentValue);
@@ -42,7 +43,7 @@ export function LocaleSelector({ id, locales, currentValue, onChange, defaultLoc
}, [ locales ]);
return (
<Dropdown id={id} text={activeLocale?.name}>
<Dropdown id={id} text={getLocaleName(activeLocale, compact)}>
{processedLocales.map(locale => {
if (typeof locale === "object") {
return <FormListItem
@@ -58,5 +59,12 @@ export function LocaleSelector({ id, locales, currentValue, onChange, defaultLoc
})}
{extraChildren}
</Dropdown>
)
);
}
function getLocaleName(locale: Locale | null | undefined, compact: boolean | undefined) {
if (!locale) return "";
if (!compact) return locale.name;
if (!locale.id) return "-";
return locale.id.toLocaleUpperCase();
}