From ff7043a35dd0f729d36c99501525d71608c6767c Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Mon, 21 Oct 2024 05:14:46 -0400 Subject: [PATCH] feat(notes): add hint to notes so we can see available hotkeys --- src/components/NoteCard.tsx | 134 ++++++++++++++++++------------ src/components/icons/HelpIcon.tsx | 35 ++++++++ 2 files changed, 117 insertions(+), 52 deletions(-) create mode 100644 src/components/icons/HelpIcon.tsx diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index 42922c8..3b5d689 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -10,6 +10,7 @@ import { Divider } from "./Divider" import { ExportIcon } from "./icons/ExportIcon" import { createFileAndExport } from "../utils/createFileAndExport" import { ContextMenuPortal } from "./ContextMenuPortal" +import { HelpIcon } from "./icons/HelpIcon" namespace NoteCard { export interface NoteCardProps { @@ -28,6 +29,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { const initialResizeX = useRef(0) const initialResizeY = useRef(0) const openContextMenu = signal(false) + const showHelp = signal(false) const { debounce } = useDebounce() @@ -128,6 +130,16 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { openContextMenu.value = false } + function _handleHelpHover() { + if (showHelp.value) return + showHelp.value = true + } + + function _handleHelpOut() { + if (!showHelp.value) return + showHelp.value = false + } + const _handleKeyDown = useCallback((e: KeyboardEvent) => { if (!e.ctrlKey) return @@ -174,67 +186,85 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { } return ( -
-
- {/* Header Bar */} -
-
+ <> +
+
+ {/* Header Bar */} +
+ +
+
+
+ +
-
-
- -
+ - + - - -
-
- -
- - {/* Content Body */} - - -
- - -
-
-
- {item.title}
-
+
-
-
    -
  • - -
    • -
  • - -
    • -
+ {/* Content Body */} + + +
+ + +
+
+
+ {item.title} +
+
+ +
+ +
+
    +
  • + +
    • +
  • + +
    • +
+
+
+ +
+ + {showHelp.value && +
+
+ ctrl + del = delete + ctrl + back = delete + ctrl + e = export
- -
+ } + ) } diff --git a/src/components/icons/HelpIcon.tsx b/src/components/icons/HelpIcon.tsx new file mode 100644 index 0000000..17b18f7 --- /dev/null +++ b/src/components/icons/HelpIcon.tsx @@ -0,0 +1,35 @@ +namespace HelpIcon { + export interface Props { + onMouseOver?: () => void + onMouseOut?: () => void + } +} +export function HelpIcon({ onMouseOver, onMouseOut }: HelpIcon.Props) { + + return ( + + + + + ) +}