diff --git a/src/components/applications/settings/Settings.jsx b/src/components/applications/settings/Settings.jsx index 164f1cd..97d5c0e 100644 --- a/src/components/applications/settings/Settings.jsx +++ b/src/components/applications/settings/Settings.jsx @@ -108,8 +108,11 @@ function AboutTab({ windowsManager, virtualRoot }) { ); } -export function Settings() { - const [tabIndex, setTabIndex] = useState(0); +/** + * @param {number} param0 + */ +export function Settings({ initialTabIndex }) { + const [tabIndex, setTabIndex] = useState(initialTabIndex ?? 0); const virtualRoot = useVirtualRoot(); const settingsManager = useSettings(); const windowsManager = useWindowsManager(); diff --git a/src/components/desktop/Desktop.jsx b/src/components/desktop/Desktop.jsx index 744e02f..9901108 100644 --- a/src/components/desktop/Desktop.jsx +++ b/src/components/desktop/Desktop.jsx @@ -8,11 +8,13 @@ import { ModalsView } from "../modals/ModalsView.jsx"; import Vector2 from "../../features/math/vector2.js"; import { ContextMenu } from "../modals/context-menu/ContextMenu.jsx"; import Modal from "../../features/modals/modal.js"; +import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"; export function Desktop() { const settingsManager = useSettings(); const [wallpaper, setWallpaper] = useState(null); const [modalsManager, modals] = useModals(); + const windowsManager = useWindowsManager(); useEffect(() => { (async () => { @@ -23,7 +25,14 @@ export function Desktop() { const onContextMenu = (event) => { event.preventDefault(); - modalsManager.open(new Modal(ContextMenu).setPosition(new Vector2(event.clientX, event.clientY))); + modalsManager.open(new Modal(ContextMenu) + .setPosition(new Vector2(event.clientX, event.clientY)) + .setProps({ + options: { + "Change appearance": () => { windowsManager.open("settings", { initialTabIndex: 0 }); }, + "Open in Files": () => { windowsManager.open("file-explorer", { startPath: "~/Desktop" }); } + } + })); }; return (<> diff --git a/src/components/modals/context-menu/ContextMenu.jsx b/src/components/modals/context-menu/ContextMenu.jsx index dff6eea..bf001d8 100644 --- a/src/components/modals/context-menu/ContextMenu.jsx +++ b/src/components/modals/context-menu/ContextMenu.jsx @@ -1,5 +1,26 @@ +import Modal from "../../../features/modals/modal.js"; +import { formatShortcut } from "../../../features/utils/string.js"; import styles from "./ContextMenu.module.css"; -export function ContextMenu() { - return

{ event.preventDefault(); }}>This is a context menu!

; +/** + * @param {object} props + * @param {Modal} props.modal + * @param {Object} props.options + * @param {Object} props.shortcuts + */ +export function ContextMenu({ modal, options, shortcuts }) { + return (
+ {Object.entries(options).map(([label, callback]) => + + )} +
); } \ No newline at end of file diff --git a/src/components/modals/context-menu/ContextMenu.module.css b/src/components/modals/context-menu/ContextMenu.module.css index ca3a344..6f91741 100644 --- a/src/components/modals/context-menu/ContextMenu.module.css +++ b/src/components/modals/context-menu/ContextMenu.module.css @@ -1,5 +1,32 @@ .Container { - margin: 0; padding: 0.5rem; border-top-left-radius: 0; +} + +.Button { + display: flex; + gap: 0.75rem; + justify-content: space-between; + width: 100%; + padding: 0.25rem 0.5rem; + background: none; + border: none; + border-radius: 0.5rem; + outline: none; + font-size: 0.875rem; + text-align: start; + white-space: nowrap; + cursor: pointer; +} + +.Button:hover, .Button:focus-visible { + background-color: rgba(255, 255, 255, 5%); +} + +.Label { + margin: 0; +} + +.Shortcut { + color: var(--foreground-color-b); } \ No newline at end of file diff --git a/src/features/modals/modals.js b/src/features/modals/modals.js index 777ba06..99cce7f 100644 --- a/src/features/modals/modals.js +++ b/src/features/modals/modals.js @@ -46,7 +46,7 @@ export default class ModalsManager { return; } - console.log(`Closing window ${modalId}`); + console.log(`Closing modal ${modalId}`); delete this.modals[modalId]; if (sendModalsUpdate)