Fix: Polish projects menu
This commit is contained in:
MangoPig
@@ -0,0 +1,204 @@
|
||||
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 {
|
||||
getProjectContextMenuEyebrow,
|
||||
getProjectContextMenuSections,
|
||||
type ProjectContextMenuAction,
|
||||
type ProjectMenuTarget,
|
||||
type WorkspaceContextMenuShortcut,
|
||||
} from "../data/shell.data";
|
||||
import styles from "../WorkspaceContextMenu/WorkspaceContextMenu.module.scss";
|
||||
|
||||
type ShortcutPlatform = "mac" | "windows";
|
||||
|
||||
type NavigatorWithUserAgentData = Navigator & {
|
||||
userAgentData?: {
|
||||
platform?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type ProjectContextMenuPosition = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
type ProjectContextMenuProps = {
|
||||
target: ProjectMenuTarget | null;
|
||||
position: ProjectContextMenuPosition | null;
|
||||
onClose: VoidFunction;
|
||||
onSelect: (action: ProjectContextMenuAction, target: ProjectMenuTarget) => 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";
|
||||
}
|
||||
}) ?? [];
|
||||
|
||||
return platform === "mac" ? `${modifierLabels.join("")}${keyLabel}` : [...modifierLabels, keyLabel].join("+");
|
||||
};
|
||||
|
||||
export const ProjectContextMenu = (props: ProjectContextMenuProps): JSX.Element => {
|
||||
const [activeSubmenuActionId, setActiveSubmenuActionId] = createSignal<string | null>(null);
|
||||
const [shortcutPlatform, setShortcutPlatform] = createSignal<ShortcutPlatform>("mac");
|
||||
const sections = createMemo(() => (props.target ? getProjectContextMenuSections(props.target) : []));
|
||||
const isCreateAction = (action: ProjectContextMenuAction): boolean => action.id.startsWith("new-");
|
||||
const menuState = createMemo<{
|
||||
target: ProjectMenuTarget;
|
||||
position: ProjectContextMenuPosition;
|
||||
} | null>(() => (props.target && props.position ? { target: props.target, position: props.position } : null));
|
||||
|
||||
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} project context menu`}
|
||||
style={{ left: `${position.x}px`, top: `${position.y}px` }}
|
||||
>
|
||||
<Show when={target.kind !== "surface"}>
|
||||
<header class={styles.header}>
|
||||
<span class={styles.eyebrow}>{getProjectContextMenuEyebrow(target)}</span>
|
||||
<strong class={styles.title}>{target.label}</strong>
|
||||
</header>
|
||||
</Show>
|
||||
|
||||
<div class={styles.sectionList}>
|
||||
<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]: isCreateAction(action),
|
||||
[styles.actionDanger]: action.tone === "danger",
|
||||
[styles.actionSubmenuOpen]: isSubmenuOpen(),
|
||||
}}
|
||||
onClick={() => {
|
||||
if (action.children) {
|
||||
setActiveSubmenuActionId(isSubmenuOpen() ? null : action.id);
|
||||
return;
|
||||
}
|
||||
|
||||
props.onSelect(action, target);
|
||||
props.onClose();
|
||||
}}
|
||||
>
|
||||
<Show when={isCreateAction(action)}>
|
||||
<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={() => {
|
||||
props.onSelect(childAction, target);
|
||||
props.onClose();
|
||||
}}
|
||||
>
|
||||
<span class={styles.actionLabel}>{childAction.label}</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
}}
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
import { createEffect, createSignal, onCleanup } from "solid-js";
|
||||
import type { ProjectMenuTarget } from "../data/shell.data";
|
||||
|
||||
type ProjectContextMenuState = {
|
||||
target: ProjectMenuTarget;
|
||||
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 createProjectContextMenuController = () => {
|
||||
const [menuState, setMenuState] = createSignal<ProjectContextMenuState | 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: ProjectMenuTarget): void => {
|
||||
event.preventDefault();
|
||||
setMenuState({ target, x: event.clientX, y: event.clientY });
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (!menuState() || 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,
|
||||
closeMenu,
|
||||
setMenuRef: (element: HTMLDivElement): void => {
|
||||
menuRef = element;
|
||||
},
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user