diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css index ca916e1d1..42f59ed75 100644 --- a/apps/client/src/widgets/layout/StatusBar.css +++ b/apps/client/src/widgets/layout/StatusBar.css @@ -10,6 +10,26 @@ 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 { font-size: 0.85em; diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index deb01da1c..001304798 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -10,8 +10,10 @@ import Breadcrumb from "./Breadcrumb"; import { useState } from "preact/hooks"; import { createPortal } from "preact/compat"; 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 clsx from "clsx"; +import Icon from "../react/Icon"; interface StatusBarContext { note: FNote; @@ -36,6 +38,23 @@ export default function StatusBar() { ); } +function StatusBarDropdown({ children, icon, text, buttonClassName, ...dropdownProps }: Omit & { + icon?: string; +}) { + return ( + + {icon && (<> )} + {text} + } + {...dropdownProps} + > + {children} + + ); +} + function LanguageSwitcher({ note }: StatusBarContext) { const [ modalShown, setModalShown ] = useState(false); const { locales, DEFAULT_LOCALE, currentNoteLanguage, setCurrentNoteLanguage } = useLanguageSwitcher(note); @@ -43,7 +62,7 @@ function LanguageSwitcher({ note }: StatusBarContext) { return ( <> - + {processedLocales.map(locale => { if (typeof locale === "object") { return setModalShown(true)} icon="bx bx-cog" >{t("note_language.configure-languages")} - + {createPortal( , document.body