feat/hotkeys #11

Merged
tristonarmstrong merged 4 commits from feat/hotkeys into main 2024-10-22 18:31:52 +00:00
2 changed files with 117 additions and 52 deletions
Showing only changes of commit ff7043a35d - Show all commits

View File

@ -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,6 +186,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
}
return (
<>
<div
oncontextmenu={_handleMouseClick}
onmousedown={_handleFocusCard}
@ -183,8 +196,8 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
<div className="overflow-hidden flex-1 flex flex-col gap-1">
{/* Header Bar */}
<div className="px-2 flex justify-between items-center cursor-move" onmousedown={_handleMouseDown}>
<HelpIcon onMouseOver={_handleHelpHover} onMouseOut={_handleHelpOut} />
<div style={saveIndicatorStyle} className="rounded-full w-1 h-1 dark:bg-white bg-green-500"></div>
<div className="flex gap-2">
<div
onclick={_handleExportClick}
@ -235,6 +248,23 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
</div>
</ContextMenuPortal>
</div >
{showHelp.value &&
<div
className={"text-white absolute bg-[#1c1c1c] rounded-md p-1"}
style={{
top: `${item.position.y}px`,
left: `${item.position.x - 120}px`
}}
>
<div className="flex flex-col text-sm dark:text-[#999] text-black">
<small>ctrl + del = delete</small>
<small>ctrl + back = delete</small>
<small>ctrl + e = export</small>
</div>
</div>
}
</>
)
}

View File

@ -0,0 +1,35 @@
namespace HelpIcon {
export interface Props {
onMouseOver?: () => void
onMouseOut?: () => void
}
}
export function HelpIcon({ onMouseOver, onMouseOut }: HelpIcon.Props) {
return (
<svg
onmouseout={onMouseOut}
onmouseover={onMouseOver}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="w-4 h-4 hover:text-blue-500 cursor-pointer"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
<path
d="M12 17h.01"
/>
</svg>)
}