Feat: Add workspace context actions
This commit is contained in:
MangoPig
@@ -0,0 +1,194 @@
|
||||
.menu {
|
||||
--context-menu-width: 13.5rem;
|
||||
position: fixed;
|
||||
width: min(var(--context-menu-width), calc(100vw - (var(--space-4) * 2)));
|
||||
display: grid;
|
||||
gap: 0;
|
||||
padding: var(--space-1);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 56%, transparent);
|
||||
border-radius: calc(var(--radius-md) + (var(--space-1) / 2));
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
z-index: 2147483647;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
gap: calc(var(--space-1) / 2);
|
||||
padding: var(--space-2) calc(var(--space-2) + (var(--space-1) / 2));
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include text-label;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-title);
|
||||
}
|
||||
|
||||
.sectionList {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sectionListCompact {
|
||||
gap: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.section:first-child {
|
||||
padding-top: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.section + .section {
|
||||
margin-top: calc(var(--space-1) / 2);
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
@include text-caption;
|
||||
color: var(--color-text-subtle);
|
||||
padding: 0 var(--space-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.actionList {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.actionItem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.action {
|
||||
width: 100%;
|
||||
min-height: calc(var(--control-size-md) - var(--space-2));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) calc(var(--space-2) + (var(--space-1) / 2));
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
font-size: var(--font-size-label);
|
||||
line-height: var(--line-height-label);
|
||||
font-weight: var(--font-weight-label);
|
||||
transition:
|
||||
background var(--motion-duration-fast) var(--motion-ease-standard),
|
||||
border-color var(--motion-duration-fast) var(--motion-ease-standard),
|
||||
color var(--motion-duration-fast) var(--motion-ease-standard);
|
||||
}
|
||||
|
||||
.actionCreate {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
font-weight: var(--font-weight-title);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.actionCreate:hover,
|
||||
.actionCreate:focus-visible,
|
||||
.actionCreate.actionSubmenuOpen {
|
||||
background: color-mix(in srgb, var(--color-surface-hover) 82%, var(--color-surface));
|
||||
border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
|
||||
}
|
||||
|
||||
.actionCreateIcon {
|
||||
width: calc(var(--control-size-md) - var(--space-3));
|
||||
height: calc(var(--control-size-md) - var(--space-3));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--color-surface-hover) 72%, var(--color-surface));
|
||||
color: var(--color-text);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 74%, transparent);
|
||||
}
|
||||
|
||||
.actionLabel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.actionMeta {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.actionShortcut {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-caption);
|
||||
line-height: var(--line-height-caption);
|
||||
font-weight: var(--font-weight-caption);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actionChevron {
|
||||
color: var(--color-text-subtle);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.actionSubmenuOpen {
|
||||
background: color-mix(in srgb, var(--color-surface-hover) 82%, var(--color-surface));
|
||||
border-color: color-mix(in srgb, var(--color-border-strong) 72%, transparent);
|
||||
}
|
||||
|
||||
.action:hover,
|
||||
.action:focus-visible {
|
||||
background: color-mix(in srgb, var(--color-surface-hover) 78%, var(--color-surface));
|
||||
border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
|
||||
}
|
||||
|
||||
.actionDanger {
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
}
|
||||
|
||||
.actionDanger:hover,
|
||||
.actionDanger:focus-visible {
|
||||
background: color-mix(in srgb, var(--color-danger-soft, var(--color-surface-hover)) 72%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 72%, transparent);
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
top: calc(var(--space-1) * -1);
|
||||
left: calc(100% + var(--space-2));
|
||||
width: min(var(--context-menu-width), calc(100vw - (var(--space-4) * 2)));
|
||||
padding: var(--space-1);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 56%, transparent);
|
||||
border-radius: calc(var(--radius-md) + (var(--space-1) / 2));
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
||||
.submenuList {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
import { For, Show, createEffect, createMemo, createSignal, onMount, type JSX } from "solid-js";
|
||||
import { Portal } from "solid-js/web";
|
||||
import { ChevronRight, Plus } from "../../../lib/icons";
|
||||
import {
|
||||
getWorkspaceContextMenuEyebrow,
|
||||
getWorkspaceContextMenuSections,
|
||||
type WorkspaceContextMenuAction,
|
||||
type WorkspaceContextMenuShortcut,
|
||||
type WorkspaceContextMenuTarget,
|
||||
} from "../data/shell.data";
|
||||
import styles from "./WorkspaceContextMenu.module.scss";
|
||||
|
||||
type ShortcutPlatform = "mac" | "windows";
|
||||
|
||||
type NavigatorWithUserAgentData = Navigator & {
|
||||
userAgentData?: {
|
||||
platform?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type WorkspaceContextMenuPosition = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
type WorkspaceContextMenuProps = {
|
||||
target: WorkspaceContextMenuTarget | null;
|
||||
position: WorkspaceContextMenuPosition | null;
|
||||
onClose: VoidFunction;
|
||||
onSelect: (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget) => void;
|
||||
menuRef: (element: HTMLDivElement) => void;
|
||||
};
|
||||
|
||||
const getShortcutPlatform = (): ShortcutPlatform => {
|
||||
if (typeof navigator === "undefined") {
|
||||
return "mac";
|
||||
}
|
||||
|
||||
const navigatorWithUserAgentData = navigator as NavigatorWithUserAgentData;
|
||||
|
||||
const platform =
|
||||
typeof navigatorWithUserAgentData.userAgentData?.platform === "string"
|
||||
? navigatorWithUserAgentData.userAgentData.platform
|
||||
: navigator.platform;
|
||||
|
||||
return /mac|iphone|ipad|ipod/i.test(platform) ? "mac" : "windows";
|
||||
};
|
||||
|
||||
const formatShortcut = (shortcut: WorkspaceContextMenuShortcut, platform: ShortcutPlatform): string => {
|
||||
const keyLabel = (() => {
|
||||
switch (shortcut.key) {
|
||||
case "enter":
|
||||
return platform === "mac" ? "↩" : "Enter";
|
||||
case "delete":
|
||||
return platform === "mac" ? "⌫" : "Del";
|
||||
default:
|
||||
return shortcut.key.toUpperCase();
|
||||
}
|
||||
})();
|
||||
|
||||
const modifierLabels =
|
||||
shortcut.modifiers?.map((modifier) => {
|
||||
switch (modifier) {
|
||||
case "meta":
|
||||
return platform === "mac" ? "⌘" : "Ctrl";
|
||||
case "alt":
|
||||
return platform === "mac" ? "⌥" : "Alt";
|
||||
case "shift":
|
||||
return platform === "mac" ? "⇧" : "Shift";
|
||||
}
|
||||
}) ?? [];
|
||||
|
||||
if (platform === "mac") {
|
||||
return `${modifierLabels.join("")}${keyLabel}`;
|
||||
}
|
||||
|
||||
return [...modifierLabels, keyLabel].join("+");
|
||||
};
|
||||
|
||||
export const WorkspaceContextMenu = (props: WorkspaceContextMenuProps): JSX.Element => {
|
||||
const [activeSubmenuActionId, setActiveSubmenuActionId] = createSignal<string | null>(null);
|
||||
const [shortcutPlatform, setShortcutPlatform] = createSignal<ShortcutPlatform>("mac");
|
||||
const sections = createMemo(() => (props.target ? getWorkspaceContextMenuSections(props.target) : []));
|
||||
const handleActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
|
||||
props.onSelect(action, target);
|
||||
props.onClose();
|
||||
};
|
||||
const menuState = createMemo<{
|
||||
target: WorkspaceContextMenuTarget;
|
||||
position: WorkspaceContextMenuPosition;
|
||||
} | null>(() =>
|
||||
props.target && props.position
|
||||
? {
|
||||
target: props.target,
|
||||
position: props.position,
|
||||
}
|
||||
: null,
|
||||
);
|
||||
const showHeader = (): boolean => props.target?.kind !== "workspace";
|
||||
const sectionHasLabel = createMemo(() => sections().some((section) => Boolean(section.label)));
|
||||
|
||||
onMount(() => {
|
||||
setShortcutPlatform(getShortcutPlatform());
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
void props.target;
|
||||
setActiveSubmenuActionId(null);
|
||||
});
|
||||
|
||||
return (
|
||||
<Show when={menuState()}>
|
||||
{(resolvedMenuState): JSX.Element => {
|
||||
const target = resolvedMenuState().target;
|
||||
const position = resolvedMenuState().position;
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<div
|
||||
ref={props.menuRef}
|
||||
class={styles.menu}
|
||||
role="menu"
|
||||
aria-label={`${target.label} context menu`}
|
||||
style={{
|
||||
left: `${position.x}px`,
|
||||
top: `${position.y}px`,
|
||||
}}
|
||||
>
|
||||
<Show when={target.kind !== "workspace"}>
|
||||
<header class={styles.header}>
|
||||
<span class={styles.eyebrow}>{getWorkspaceContextMenuEyebrow(target)}</span>
|
||||
<strong class={styles.title}>{target.label}</strong>
|
||||
</header>
|
||||
</Show>
|
||||
|
||||
<div classList={{ [styles.sectionList]: true, [styles.sectionListCompact]: !sectionHasLabel() }}>
|
||||
<For each={sections()}>
|
||||
{(section): JSX.Element => (
|
||||
<section class={styles.section}>
|
||||
<Show when={section.label}>
|
||||
<span class={styles.sectionLabel}>{section.label}</span>
|
||||
</Show>
|
||||
|
||||
<div class={styles.actionList}>
|
||||
<For each={section.items}>
|
||||
{(action): JSX.Element => {
|
||||
const isSubmenuOpen = () => activeSubmenuActionId() === action.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
class={styles.actionItem}
|
||||
onMouseEnter={() => {
|
||||
setActiveSubmenuActionId(action.children ? action.id : null);
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
classList={{
|
||||
[styles.action]: true,
|
||||
[styles.actionCreate]: action.id === "create",
|
||||
[styles.actionDanger]: action.tone === "danger",
|
||||
[styles.actionSubmenuOpen]: isSubmenuOpen(),
|
||||
}}
|
||||
onClick={() => {
|
||||
if (action.children) {
|
||||
setActiveSubmenuActionId(isSubmenuOpen() ? null : action.id);
|
||||
return;
|
||||
}
|
||||
|
||||
handleActionSelect(action, target);
|
||||
}}
|
||||
>
|
||||
<Show when={action.id === "create"}>
|
||||
<span class={styles.actionCreateIcon} aria-hidden="true">
|
||||
<Plus size={14} strokeWidth={2.25} />
|
||||
</span>
|
||||
</Show>
|
||||
<span class={styles.actionLabel}>{action.label}</span>
|
||||
<div class={styles.actionMeta}>
|
||||
<Show when={action.shortcut}>
|
||||
<span class={styles.actionShortcut}>{formatShortcut(action.shortcut!, shortcutPlatform())}</span>
|
||||
</Show>
|
||||
<Show when={action.children}>
|
||||
<ChevronRight class={styles.actionChevron} size={16} strokeWidth={2} />
|
||||
</Show>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Show when={action.children && isSubmenuOpen()}>
|
||||
<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`}>
|
||||
<div class={styles.submenuList}>
|
||||
<For each={action.children ?? []}>
|
||||
{(childAction): JSX.Element => (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
classList={{
|
||||
[styles.action]: true,
|
||||
[styles.actionDanger]: childAction.tone === "danger",
|
||||
}}
|
||||
onClick={() => handleActionSelect(childAction, target)}
|
||||
>
|
||||
<span class={styles.actionLabel}>{childAction.label}</span>
|
||||
<div class={styles.actionMeta}>
|
||||
<Show when={childAction.shortcut}>
|
||||
<span class={styles.actionShortcut}>{formatShortcut(childAction.shortcut!, shortcutPlatform())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
}}
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
import { createEffect, createSignal, onCleanup } from "solid-js";
|
||||
import type { WorkspaceContextMenuTarget } from "../data/shell.data";
|
||||
|
||||
type WorkspaceContextMenuState = {
|
||||
target: WorkspaceContextMenuTarget;
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
const readRootPixelToken = (name: string, fallback: number): number => {
|
||||
if (typeof window === "undefined") {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
const parsed = Number.parseFloat(value);
|
||||
|
||||
if (!Number.isFinite(parsed)) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
if (value.endsWith("px")) {
|
||||
return parsed;
|
||||
}
|
||||
|
||||
return parsed * 16;
|
||||
};
|
||||
|
||||
const clampMenuPosition = (value: number, min: number, max: number): number => {
|
||||
if (max <= min) {
|
||||
return min;
|
||||
}
|
||||
|
||||
return Math.min(Math.max(value, min), max);
|
||||
};
|
||||
|
||||
export const createWorkspaceContextMenuController = () => {
|
||||
const [menuState, setMenuState] = createSignal<WorkspaceContextMenuState | null>(null);
|
||||
let menuRef: HTMLDivElement | undefined;
|
||||
|
||||
const closeMenu = (): void => {
|
||||
setMenuState(null);
|
||||
};
|
||||
|
||||
const repositionMenu = (): void => {
|
||||
if (typeof window === "undefined" || !menuRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
const current = menuState();
|
||||
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const viewportPadding = readRootPixelToken("--space-4", 16);
|
||||
const rect = menuRef.getBoundingClientRect();
|
||||
const nextX = clampMenuPosition(current.x, viewportPadding, window.innerWidth - rect.width - viewportPadding);
|
||||
const nextY = clampMenuPosition(current.y, viewportPadding, window.innerHeight - rect.height - viewportPadding);
|
||||
|
||||
if (nextX === current.x && nextY === current.y) {
|
||||
return;
|
||||
}
|
||||
|
||||
setMenuState({ ...current, x: nextX, y: nextY });
|
||||
};
|
||||
|
||||
const openMenu = (event: MouseEvent, target: WorkspaceContextMenuTarget): void => {
|
||||
event.preventDefault();
|
||||
setMenuState({ target, x: event.clientX, y: event.clientY });
|
||||
};
|
||||
|
||||
const openMenuFromElement = (element: HTMLElement, target: WorkspaceContextMenuTarget): void => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
setMenuState({
|
||||
target,
|
||||
x: rect.left + rect.width / 2,
|
||||
y: rect.top + rect.height / 2,
|
||||
});
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (!menuState()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof window === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
const frame = window.requestAnimationFrame(() => {
|
||||
repositionMenu();
|
||||
});
|
||||
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!menuRef?.contains(event.target as Node)) {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key === "Escape") {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewportChange = (): void => {
|
||||
closeMenu();
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
window.addEventListener("resize", handleViewportChange);
|
||||
window.addEventListener("scroll", handleViewportChange, true);
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
onCleanup(() => {
|
||||
window.cancelAnimationFrame(frame);
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
window.removeEventListener("resize", handleViewportChange);
|
||||
window.removeEventListener("scroll", handleViewportChange, true);
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
menuState,
|
||||
openMenu,
|
||||
openMenuFromElement,
|
||||
closeMenu,
|
||||
setMenuRef: (element: HTMLDivElement): void => {
|
||||
menuRef = element;
|
||||
},
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user