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(collections/calendar): use own UI for header

Browse Source
This commit is contained in:
Elian Doran
2025-09-06 12:26:42 +03:00
parent 49c80f0e0b
commit afc17f41f6
6 changed files with 116 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,18 +11,19 @@ export interface ActionButtonProps {
onClick?: (e: MouseEvent) => void;
triggerCommand?: CommandNames;
noIconActionClass?: boolean;
frame?: boolean;
}
export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass }: ActionButtonProps) {
export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame }: 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, true).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
@@ -31,8 +32,8 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
return <button
ref={buttonRef}
class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon}`}
onClick={onClick}
class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""}`}
onClick={onClick}
data-trigger-command={triggerCommand}
/>;
}
}

12
apps/client/src/widgets/react/Button.tsx
View File

@@ -1,4 +1,4 @@
import type { RefObject } from "preact";
import type { ComponentChildren, RefObject } from "preact";
import type { CSSProperties } from "preact/compat";
import { useMemo } from "preact/hooks";
import { memo } from "preact/compat";
@@ -72,4 +72,12 @@ const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortc
);
});
export default Button;
export function ButtonGroup({ children }: { children: ComponentChildren }) {
return (
<div className="btn-group" role="group">
{children}
</div>
)
}
export default Button;