From b9dbdb5aa9f6e8b161a64e435be68c33190043a8 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Wed, 8 Jan 2025 14:27:45 +0100 Subject: [PATCH] some improvements to context menu --- src/features/command/context.tsx | 39 +++++++++++++---- src/features/command/contextMenu.module.css | 5 ++- src/features/command/contextMenu.tsx | 13 ++++-- src/i18n/en-GB.json | 2 +- src/routes/(editor)/experimental.tsx | 1 + .../experimental/context-menu.module.css | 43 +++++++++++++++++++ .../(editor)/experimental/context-menu.tsx | 37 ++++++++++++++++ src/routes/(editor)/experimental/index.tsx | 5 +++ src/routes/(editor)/experimental/table.tsx | 1 - 9 files changed, 131 insertions(+), 15 deletions(-) create mode 100644 src/routes/(editor)/experimental/context-menu.module.css create mode 100644 src/routes/(editor)/experimental/context-menu.tsx create mode 100644 src/routes/(editor)/experimental/index.tsx diff --git a/src/features/command/context.tsx b/src/features/command/context.tsx index 8d0f997..6c39a3b 100644 --- a/src/features/command/context.tsx +++ b/src/features/command/context.tsx @@ -1,7 +1,8 @@ -import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js'; +import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, Match, ParentComponent, ParentProps, Show, Switch, useContext } from 'solid-js'; import { useI18n } from '../i18n'; import { createStore } from 'solid-js/store'; import { CommandType, Modifier } from './command'; +import { BsCommand, BsOption, BsShift, BsWindows } from 'solid-icons/bs'; interface CommandContextType { readonly commands: Accessor; @@ -127,24 +128,46 @@ const Context = any = (...args: any[]) => any>(pr const Handle: Component<{ command: CommandType }> = (props) => { const { t } = useI18n(); + const isMac = false; + const isWindows = false; + return <> {String(t(props.command.label) ?? props.command.label)} { shortcut => { const modifier = shortcut().modifier; - const modifierMap: Record = { - [Modifier.Shift]: 'Shft', - [Modifier.Control]: 'Ctrl', - [Modifier.Meta]: 'Meta', - [Modifier.Alt]: 'Alt', + + const title: Record = { + [Modifier.Shift]: 'shift', + [Modifier.Control]: 'control', + [Modifier.Meta]: 'meta', + [Modifier.Alt]: 'alt', }; return typeof m === 'number').filter(m => modifier & m)}>{ - (m) => <>{modifierMap[m]}+ + (m) => <> + + + + + + + + + + + + + + + + + + + } - {shortcut().key} + {shortcut().key.toUpperCase()} ; } } diff --git a/src/features/command/contextMenu.module.css b/src/features/command/contextMenu.module.css index eeac2c3..ff3665e 100644 --- a/src/features/command/contextMenu.module.css +++ b/src/features/command/contextMenu.module.css @@ -5,11 +5,11 @@ place-content: start; inset-inline-start: anchor(start); - inset-block-start: anchor(end); + inset-block-start: anchor(start); margin: 0; gap: var(--padding-m); - padding: var(--padding-m) 0; + padding: var(--padding-m); font-size: var(--text-s); background-color: var(--surface-700); @@ -24,6 +24,7 @@ align-items: center; padding: var(--padding-s) var(--padding-m); + border-radius: var(--radii-m); & > sub { color: var(--text-2); diff --git a/src/features/command/contextMenu.tsx b/src/features/command/contextMenu.tsx index c2ea84f..e677658 100644 --- a/src/features/command/contextMenu.tsx +++ b/src/features/command/contextMenu.tsx @@ -35,6 +35,7 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr const context = useContext(ContextMenu)!; const commandContext = useCommands(); const [root, setRoot] = createSignal(); + const [pos, setPos] = createSignal([0, 0]); createEffect(() => { const event = context.event(); @@ -52,6 +53,12 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr } }); + createEffect(() => { + const { offsetX = 0, offsetY = 0 } = (context.event() ?? {}) as MouseEvent; + + setPos([offsetX, offsetY]); + }); + const onToggle = (e: ToggleEvent) => { if (e.newState === 'closed') { context.hide(); @@ -63,7 +70,7 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr context.hide(); }; - return + return { command =>
  • {props.children(command)}
    • }     @@ -75,7 +82,7 @@ const Handle: ParentComponent> = (props) => { const context = useContext(ContextMenu)!; - return { + return { e.preventDefault(); context.show(e); @@ -85,6 +92,6 @@ const Handle: ParentComponent> = (props) => { }; let handleCounter = 0; -const createUniqueId = () => `handle-${handleCounter++}` +const createUniqueId = () => `${handleCounter++}`; export const Context = { Root, Menu, Handle }; \ No newline at end of file diff --git a/src/i18n/en-GB.json b/src/i18n/en-GB.json index a76a19d..76902ae 100644 --- a/src/i18n/en-GB.json +++ b/src/i18n/en-GB.json @@ -51,4 +51,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/routes/(editor)/experimental.tsx b/src/routes/(editor)/experimental.tsx index 6c34fd9..eba77ff 100644 --- a/src/routes/(editor)/experimental.tsx +++ b/src/routes/(editor)/experimental.tsx @@ -15,6 +15,7 @@ export default function Experimental(props: ParentProps) { + {props.children} diff --git a/src/routes/(editor)/experimental/context-menu.module.css b/src/routes/(editor)/experimental/context-menu.module.css new file mode 100644 index 0000000..e6fd61d --- /dev/null +++ b/src/routes/(editor)/experimental/context-menu.module.css @@ -0,0 +1,43 @@ +.root { + display: grid; + grid: 100% / auto minmax(0, 1fr); + inline-size: 100%; + block-size: 100%; + + & .sidebar { + z-index: 1; + padding: var(--padding-xl); + background-color: var(--surface-300); + max-inline-size: 25vw; + overflow: auto; + + & > ul { + padding: 0; + margin: 0; + } + + & fieldset { + display: flex; + flex-flow: column; + gap: var(--padding-m); + } + + ol { + margin-block: 0; + } + } + + & .content { + display: block grid; + place-content: start; + background-color: var(--surface-500); + border-top-left-radius: var(--radii-xl); + padding: var(--padding-m); + + & > fieldset { + border-radius: var(--radii-l); + overflow: auto; + background-color: inherit; + } + } +} \ No newline at end of file diff --git a/src/routes/(editor)/experimental/context-menu.tsx b/src/routes/(editor)/experimental/context-menu.tsx new file mode 100644 index 0000000..0210677 --- /dev/null +++ b/src/routes/(editor)/experimental/context-menu.tsx @@ -0,0 +1,37 @@ +import { Sidebar } from "~/components/sidebar"; +import { Command, Context, createCommand, Modifier } from "~/features/command"; +import { createSignal } from "solid-js"; +import css from './context-menu.module.css'; + +export default function ContextMenu(props: {}) { + const [message, setMessage] = createSignal(''); + + const commands = { + back: createCommand('Back', () => setMessage('Back command is triggered'), { key: '[', modifier: Modifier.Control }), + forward: createCommand('Forward', () => setMessage('forward command is triggered'), { key: ']', modifier: Modifier.Control }), + reload: createCommand('Reload', () => setMessage('reload command is triggered'), { key: 'r', modifier: Modifier.Control }), + showBookmarks: createCommand('Show bookmarks', () => setMessage('showBookmarks command is triggered'), { key: 'b', modifier: Modifier.Control }), + showFullUrls: createCommand('Show full URL\'s', () => setMessage('showFullUrls command is triggered')), + allModifiers: createCommand('shell.command.openCommandPalette', () => setMessage('allModifiers command is triggered'), { key: 'a', modifier: Modifier.Alt | Modifier.Control | Modifier.Meta | Modifier.Shift }), + }; + + return
    + +
    + Message + +

    {message()}

    +
    +     + +
    + + { + command => + } + + Right click on me + +
    +
    ; +} \ No newline at end of file diff --git a/src/routes/(editor)/experimental/index.tsx b/src/routes/(editor)/experimental/index.tsx new file mode 100644 index 0000000..87768a0 --- /dev/null +++ b/src/routes/(editor)/experimental/index.tsx @@ -0,0 +1,5 @@ + + +export default function Index(props: {}) { + return <>; +} \ No newline at end of file diff --git a/src/routes/(editor)/experimental/table.tsx b/src/routes/(editor)/experimental/table.tsx index e626c38..232617e 100644 --- a/src/routes/(editor)/experimental/table.tsx +++ b/src/routes/(editor)/experimental/table.tsx @@ -3,7 +3,6 @@ import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, G import { createStore } from 'solid-js/store'; import { Person, people } from './experimental.data'; import { createEffect, createMemo, For } from 'solid-js'; -import { Command, createCommand, Modifier } from '~/features/command'; import css from './table.module.css'; export default function TableExperiment() {