gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(react): add bootstrap tooltip to menu items

Browse Source
This commit is contained in:
Elian Doran 2025-08-29 11:54:16 +03:00
parent e166b97b8f
commit 83fd42aff2
No known key found for this signature in database
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/client/src/widgets/react/FormList.tsx
View File

@ -1,9 +1,10 @@
import { Dropdown as BootstrapDropdown } from "bootstrap"; import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import Icon from "./Icon"; import Icon from "./Icon";
import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat"; import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat";
import "./FormList.css"; import "./FormList.css";
import { CommandNames } from "../../components/app_context"; import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks";
interface FormListOpts { interface FormListOpts {
children: ComponentChildren; children: ComponentChildren;
@ -90,13 +91,23 @@ interface FormListItemOpts {
outsideChildren?: ComponentChildren; outsideChildren?: ComponentChildren;
} }
const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
placement: "right",
fallbackPlacements: [ "right" ]
}
export function FormListItem({ className, children, icon, value, title, active, badges, disabled, checked, onClick, description, selected, rtl, triggerCommand, outsideChildren }: FormListItemOpts) { export function FormListItem({ className, children, icon, value, title, active, badges, disabled, checked, onClick, description, selected, rtl, triggerCommand, outsideChildren }: FormListItemOpts) {
const itemRef = useRef<HTMLAnchorElement>(null);
if (checked) { if (checked) {
icon = "bx bx-check"; icon = "bx bx-check";
} }
useStaticTooltip(itemRef, TOOLTIP_CONFIG);
return ( return (
<a <a
ref={itemRef}
class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${className ?? ""}`} class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${className ?? ""}`}
data-value={value} title={title} data-value={value} title={title}
tabIndex={0} tabIndex={0}
@ -132,3 +143,18 @@ export function FormListHeader({ text }: FormListHeaderOpts) {
export function FormDropdownDivider() { export function FormDropdownDivider() {
return <div className="dropdown-divider" />; return <div className="dropdown-divider" />;
} }
export function FormDropdownSubmenu({ icon, title, children }: { icon: string, title: ComponentChildren, children: ComponentChildren }) {
return (
<li className="dropdown-item dropdown-submenu">
<span class="dropdown-toggle">
<Icon icon={icon} />
{title}
</span>
<ul className="dropdown-menu">
{children}
</ul>
</li>
)
}

3
apps/client/src/widgets/react/hooks.tsx
View File

@ -505,7 +505,8 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
*/ */
export function useStaticTooltip(elRef: RefObject<Element>, config?: Partial<Tooltip.Options>) { export function useStaticTooltip(elRef: RefObject<Element>, config?: Partial<Tooltip.Options>) {
useEffect(() => { useEffect(() => {
if (!elRef?.current) return; const hasTooltip = config?.title || elRef.current?.getAttribute("title");
if (!elRef?.current || !hasTooltip) return;
const $el = $(elRef.current); const $el = $(elRef.current);
$el.tooltip(config); $el.tooltip(config);