Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-03 11:56:01 +01:00
Code Issues Packages Projects Releases Activity

feat(react/floating_buttons): fancy title + keyboard shortcut

Browse Source
This commit is contained in:
Elian Doran
2025-08-27 23:20:19 +03:00
parent 2085d1bbba
commit 28605f2687
2 changed files with 21 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/client/src/widgets/react/ActionButton.tsx
View File

@@ -1,18 +1,36 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks";
import keyboard_actions from "../../services/keyboard_actions";
interface ActionButtonProps {
text: string;
titlePosition?: "bottom"; // TODO: Use it
titlePosition?: "bottom" | "left"; // TODO: Use it
icon: string;
className?: string;
onClick?: (e: MouseEvent) => void;
triggerCommand?: CommandNames;
}
export default function ActionButton({ text, icon, className, onClick, triggerCommand }: ActionButtonProps) {
export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition }: ActionButtonProps) {
const buttonRef = useRef<HTMLButtonElement>(null);
const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
useStaticTooltip(buttonRef, {
title: keyboardShortcut?.length ? `${text} (${keyboardShortcut?.join(",")})` : text,
placement: titlePosition ?? "bottom",
fallbackPlacements: [ titlePosition ?? "bottom" ]
});
useEffect(() => {
if (triggerCommand) {
keyboard_actions.getAction(triggerCommand).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
}
}, [triggerCommand]);
return <button
ref={buttonRef}
class={`icon-action ${icon} ${className ?? ""}`}
title={text}
onClick={onClick}
data-trigger-command={triggerCommand}
/>;