From a662b5abc027b31744f9e9ea8883efd6c8af04b6 Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Sat, 12 Oct 2024 15:51:08 -0400 Subject: [PATCH 1/4] feat(notes): make basic hotkeys work works on delete, backspace, and export --- src/components/NoteCard.tsx | 43 ++++++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index ff18c7b..42922c8 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -1,4 +1,4 @@ -import { signal, useRef } from "kaioken" +import { signal, useCallback, useEffect, useRef } from "kaioken" import { NotesSigal, focusedItem } from "../signals" import { useDebounce } from "../utils/useDebounce" import notes, { NoteCardType } from "../signals/notes" @@ -111,10 +111,14 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { focusedItem.value = itemKey } - function _handleExportClick(_e: MouseEvent) { + function _exportFile() { createFileAndExport("Note", item.contents, "text/markdown") } + function _handleExportClick(_e: MouseEvent) { + _exportFile() + } + function _handleMouseClick(e: MouseEvent) { e.preventDefault() openContextMenu.value = !openContextMenu.value @@ -124,6 +128,39 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { openContextMenu.value = false } + const _handleKeyDown = useCallback((e: KeyboardEvent) => { + if (!e.ctrlKey) return + + // TODO: add support for other os + // TODO: add modal popup + + switch (e.key) { + case 'Delete': + e.preventDefault() + _handleClose(e) + break + case 'Backspace': + e.preventDefault() + _handleClose(e) + break + case 'e': + e.preventDefault() + _exportFile() + break + default: + break + } + }, [itemKey, item.position, NotesSigal.default]) + + useEffect(() => { + if (focusedItem.value !== itemKey) return + window.addEventListener('keydown', _handleKeyDown) + return () => { + window.removeEventListener('keydown', _handleKeyDown) + } + + }, [focusedItem.value, itemKey]) + const cardPositionStyle = { zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`, width: `${item.dimensions.w}px`, @@ -198,7 +235,6 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { - ) } @@ -228,3 +264,4 @@ function ExpandIcon({ cb }: { ) } + From ff7043a35dd0f729d36c99501525d71608c6767c Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Mon, 21 Oct 2024 05:14:46 -0400 Subject: [PATCH 2/4] 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 ( + + + + + ) +} From f7b392f909c4c6a00bd2eebe997a3abfcc767a1e Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Mon, 21 Oct 2024 05:32:18 -0400 Subject: [PATCH 3/4] feat(notes): add blue border to help paper --- src/components/NoteCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index 3b5d689..ad85141 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -249,9 +249,10 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
+ {/* HOTKEY PAPER */} {showHelp.value &&
Date: Tue, 22 Oct 2024 14:07:48 -0400 Subject: [PATCH 4/4] feat(notes): fix help icon and save icon positioning --- src/components/NoteCard.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index ad85141..776042e 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -196,8 +196,11 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
{/* Header Bar */}
- -
+
+ + {/* Save indicator*/} +
+