zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-05 21:15:01 +08:00
Code Issues Projects Releases Packages Wiki 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
No known key found for this signature in database
2 changed files with 21 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
apps/client/src/widgets/floating_buttons/code_buttons.ts
View file

@ -1,49 +0,0 @@
import { t } from "../../services/i18n.js";
import server from "../../services/server.js";
import ws from "../../services/ws.js";
import appContext, { type EventData } from "../../components/app_context.js";
import toastService from "../../services/toast.js";
import treeService from "../../services/tree.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import keyboardActionService from "../../services/keyboard_actions.js";
import type FNote from "../../entities/fnote.js";
const TPL = /*html*/`
<div class="code-buttons-widget">
<style>
.code-buttons-widget {
display: flex;
gap: 10px;
}
</style>
<button class="save-to-note-button floating-button btn" title="${}">
</button>
</div>`;
export default class CodeButtonsWidget extends NoteContextAwareWidget {
private $openTriliumApiDocsButton!: JQuery<HTMLElement>;
private $saveToNoteButton!: JQuery<HTMLElement>;
isEnabled() {
return super.isEnabled() && this.note && (this.note.mime.startsWith("application/javascript") || this.note.mime === "text/x-sqlite;schema=trilium");
}
doRender() {
this.$widget = $(TPL);
this.$executeButton = this.$widget.find(".execute-button");
this.$saveToNoteButton = this.$widget.find(".save-to-note-button");
this.$saveToNoteButton.on("click", async () => {
});
keyboardActionService.updateDisplayedShortcuts(this.$widget);
this.contentSized();
super.doRender();
}
}

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}
/>;