gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-16 20:34:25 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

feat(status_bar/language): display icon

Browse Source
This commit is contained in:
Elian Doran 2025-12-12 18:46:34 +02:00
parent 4dc773c1a3
commit 12be14e6cf
No known key found for this signature in database
2 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/src/widgets/layout/StatusBar.css
View File

@ -10,6 +10,26 @@
flex-grow: 1; flex-grow: 1;
} }
> .actions-row {
padding: 0.1em;
.status-bar-dropdown-button {
background: transparent;
padding: 0 0.5em !important;
display: flex;
align-items: center;
&:after {
content: unset;
}
&:focus,
&:hover {
background: var(--input-background-color);
}
}
}
.dropdown { .dropdown {
font-size: 0.85em; font-size: 0.85em;

25
apps/client/src/widgets/layout/StatusBar.tsx
View File

@ -10,8 +10,10 @@ import Breadcrumb from "./Breadcrumb";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { createPortal } from "preact/compat"; import { createPortal } from "preact/compat";
import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector"; import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
import Dropdown from "../react/Dropdown"; import Dropdown, { DropdownProps } from "../react/Dropdown";
import { Locale } from "@triliumnext/commons"; import { Locale } from "@triliumnext/commons";
import clsx from "clsx";
import Icon from "../react/Icon";
interface StatusBarContext { interface StatusBarContext {
note: FNote; note: FNote;
@ -36,6 +38,23 @@ export default function StatusBar() {
); );
} }
function StatusBarDropdown({ children, icon, text, buttonClassName, ...dropdownProps }: Omit<DropdownProps, "hideToggleArrow"> & {
icon?: string;
}) {
return (
<Dropdown
buttonClassName={clsx("status-bar-dropdown-button", buttonClassName)}
text={<>
{icon && (<><Icon icon={icon} />&nbsp;</>)}
{text}
</>}
{...dropdownProps}
>
{children}
</Dropdown>
);
}
function LanguageSwitcher({ note }: StatusBarContext) { function LanguageSwitcher({ note }: StatusBarContext) {
const [ modalShown, setModalShown ] = useState(false); const [ modalShown, setModalShown ] = useState(false);
const { locales, DEFAULT_LOCALE, currentNoteLanguage, setCurrentNoteLanguage } = useLanguageSwitcher(note); const { locales, DEFAULT_LOCALE, currentNoteLanguage, setCurrentNoteLanguage } = useLanguageSwitcher(note);
@ -43,7 +62,7 @@ function LanguageSwitcher({ note }: StatusBarContext) {
return ( return (
<> <>
<Dropdown text={getLocaleName(activeLocale)}> <StatusBarDropdown icon="bx bx-globe" text={getLocaleName(activeLocale)}>
{processedLocales.map(locale => { {processedLocales.map(locale => {
if (typeof locale === "object") { if (typeof locale === "object") {
return <FormListItem return <FormListItem
@ -64,7 +83,7 @@ function LanguageSwitcher({ note }: StatusBarContext) {
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>
</Dropdown> </StatusBarDropdown>
{createPortal( {createPortal(
<ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />, <ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,
document.body document.body