gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-06 23:44:25 +01:00
Code Issues Actions 30 Packages Projects Releases Wiki Activity

fix(launch_bar): bootstrap tooltip for dropdown

Browse Source
This commit is contained in:
Elian Doran 2025-12-05 12:06:53 +02:00
parent 237ffeff52
commit 3ad4ca3943
No known key found for this signature in database
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
View File

@ -27,12 +27,15 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
} }
export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions" | "dropdownRef"> & { icon: string }) { export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions" | "dropdownRef"> & { icon: string }) {
const { isHorizontalLayout } = useContext(LaunchBarContext);
return ( return (
<Dropdown <Dropdown
className="right-dropdown-widget" className="right-dropdown-widget"
buttonClassName="right-dropdown-button launcher-button" buttonClassName="right-dropdown-button launcher-button"
hideToggleArrow hideToggleArrow
text={<Icon icon={icon} />} text={<Icon icon={icon} />}
titlePosition={isHorizontalLayout ? "bottom" : "right"}
{...props} {...props}
>{children}</Dropdown> >{children}</Dropdown>
) )

9
apps/client/src/widgets/react/Dropdown.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren, HTMLAttributes } from "preact"; import { ComponentChildren, HTMLAttributes } from "preact";
import { CSSProperties, HTMLProps } from "preact/compat"; import { CSSProperties, HTMLProps } from "preact/compat";
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks"; import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useUniqueName } from "./hooks"; import { useStaticTooltip, useUniqueName } from "./hooks";
type DataAttributes = { type DataAttributes = {
[key: `data-${string}`]: string | number | boolean | undefined; [key: `data-${string}`]: string | number | boolean | undefined;
@ -28,11 +28,16 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
onHidden?: () => void; onHidden?: () => void;
dropdownOptions?: Partial<BootstrapDropdown.Options>; dropdownOptions?: Partial<BootstrapDropdown.Options>;
dropdownRef?: MutableRef<BootstrapDropdown | null>; dropdownRef?: MutableRef<BootstrapDropdown | null>;
titlePosition?: "top" | "right" | "bottom" | "left";
} }
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef }: DropdownProps) { export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef, titlePosition }: DropdownProps) {
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null); const triggerRef = useRef<HTMLButtonElement | null>(null);
useStaticTooltip(triggerRef, {
placement: titlePosition ?? "bottom",
fallbackPlacements: [ titlePosition ?? "bottom" ]
});
const [ shown, setShown ] = useState(false); const [ shown, setShown ] = useState(false);