zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-09 15:08:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore(react/ribbon): add tooltip with keyboard shortcut

Browse source
This commit is contained in:
Elian Doran 2025-08-27 12:16:40 +03:00
parent ed320e4e24
commit 976c795ac6
No known key found for this signature in database
2 changed files with 17 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/client/src/widgets/containers/ribbon_container.ts
View file

@ -90,22 +90,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
} }
} }
keyboardActionsService.getActions().then((actions) => {
this.$tabContainer.find(".ribbon-tab-title-icon").tooltip({
title: () => {
const toggleCommandName = $(this).attr("data-toggle-command");
const action = actions.find((act) => act.actionName === toggleCommandName);
const title = $(this).attr("data-title");
if (action?.effectiveShortcuts && action.effectiveShortcuts.length > 0) {
return `${title} (${action.effectiveShortcuts.join(", ")})`;
} else {
return title ?? "";
}
}
});
});
if (!$ribbonTabToActivate) { if (!$ribbonTabToActivate) {
$ribbonTabToActivate = $lastActiveRibbon; $ribbonTabToActivate = $lastActiveRibbon;
} }

23
apps/client/src/widgets/ribbon/Ribbon.tsx
View file

@ -8,7 +8,7 @@ import FormattingToolbar from "./FormattingToolbar";
import { numberObjectsInPlace } from "../../services/utils"; import { numberObjectsInPlace } from "../../services/utils";
import { TabContext } from "./ribbon-interface"; import { TabContext } from "./ribbon-interface";
import options from "../../services/options"; import options from "../../services/options";
import { CommandNames, EventNames } from "../../components/app_context"; import { EventNames } from "../../components/app_context";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import ScriptTab from "./ScriptTab"; import ScriptTab from "./ScriptTab";
import EditedNotesTab from "./EditedNotesTab"; import EditedNotesTab from "./EditedNotesTab";
@ -24,6 +24,8 @@ import InheritedAttributesTab from "./InheritedAttributesTab";
import CollectionPropertiesTab from "./CollectionPropertiesTab"; import CollectionPropertiesTab from "./CollectionPropertiesTab";
import SearchDefinitionTab from "./SearchDefinitionTab"; import SearchDefinitionTab from "./SearchDefinitionTab";
import NoteActions from "./NoteActions"; import NoteActions from "./NoteActions";
import keyboard_actions from "../../services/keyboard_actions";
import { KeyboardActionNames } from "@triliumnext/commons";
interface TitleContext { interface TitleContext {
note: FNote | null | undefined; note: FNote | null | undefined;
@ -34,7 +36,7 @@ interface TabConfiguration {
icon: string; icon: string;
content: (context: TabContext) => VNode | false; content: (context: TabContext) => VNode | false;
show: boolean | ((context: TitleContext) => boolean | null | undefined); show: boolean | ((context: TitleContext) => boolean | null | undefined);
toggleCommand?: CommandNames; toggleCommand?: KeyboardActionNames;
activate?: boolean | ((context: TitleContext) => boolean); activate?: boolean | ((context: TitleContext) => boolean);
/** /**
* By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar). * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar).
@ -187,11 +189,12 @@ export default function Ribbon() {
<div className="ribbon-container" style={{ contain: "none" }}> <div className="ribbon-container" style={{ contain: "none" }}>
<div className="ribbon-top-row"> <div className="ribbon-top-row">
<div className="ribbon-tab-container"> <div className="ribbon-tab-container">
{filteredTabs.map(({ title, icon, index }) => ( {filteredTabs.map(({ title, icon, index, toggleCommand }) => (
<RibbonTab <RibbonTab
icon={icon} icon={icon}
title={typeof title === "string" ? title : title(titleContext)} title={typeof title === "string" ? title : title(titleContext)}
active={index === activeTabIndex} active={index === activeTabIndex}
toggleCommand={toggleCommand}
onClick={() => { onClick={() => {
if (activeTabIndex !== index) { if (activeTabIndex !== index) {
setActiveTabIndex(index); setActiveTabIndex(index);
@ -232,9 +235,18 @@ export default function Ribbon() {
) )
} }
function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) { function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: string; title: string; active: boolean, onClick: () => void, toggleCommand?: KeyboardActionNames }) {
const iconRef = useRef<HTMLDivElement>(null); const iconRef = useRef<HTMLDivElement>(null);
useStaticTooltip(iconRef, { }); const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
useStaticTooltip(iconRef, {
title: keyboardShortcut?.length ? `${title} (${keyboardShortcut?.join(",")})` : title
});
useEffect(() => {
if (toggleCommand) {
keyboard_actions.getAction(toggleCommand).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
}
}, [toggleCommand]);
return ( return (
<> <>
@ -245,7 +257,6 @@ function RibbonTab({ icon, title, active, onClick }: { icon: string; title: stri
<span <span
ref={iconRef} ref={iconRef}
className={`ribbon-tab-title-icon ${icon}`} className={`ribbon-tab-title-icon ${icon}`}
title={title}
/> />
&nbsp; &nbsp;
{ active && <span class="ribbon-tab-title-label">{title}</span> } { active && <span class="ribbon-tab-title-label">{title}</span> }