diff --git a/src/components/applications/media-viewer/MediaViewer.jsx b/src/components/applications/media-viewer/MediaViewer.jsx index 3874c2e..be1bde4 100644 --- a/src/components/applications/media-viewer/MediaViewer.jsx +++ b/src/components/applications/media-viewer/MediaViewer.jsx @@ -1,4 +1,5 @@ +import { useEffect } from "react"; import { VirtualFile } from "../../../features/virtual-drive/virtual-file.js"; import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js"; import styles from "./MediaViewer.module.css"; @@ -7,10 +8,16 @@ import styles from "./MediaViewer.module.css"; * @param {object} props * @param {VirtualFile} props.file * @param {Function} props.close + * @param {Function} props.setTitle */ -export function MediaViewer({ file, close }) { +export function MediaViewer({ file, close, setTitle }) { const windowsManager = useWindowsManager(); + useEffect(() => { + if (file != null) + setTitle(file.id); + }, [file, setTitle]); + if (file == null) { setTimeout(() => { windowsManager.open("file-explorer", { startPath: "~/Images" }); diff --git a/src/components/applications/settings/Settings.jsx b/src/components/applications/settings/Settings.jsx index 3d0d8e8..164f1cd 100644 --- a/src/components/applications/settings/Settings.jsx +++ b/src/components/applications/settings/Settings.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import styles from "./Settings.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faHardDrive, faPalette } from "@fortawesome/free-solid-svg-icons"; +import { faCircleInfo, faHardDrive, faPalette } from "@fortawesome/free-solid-svg-icons"; import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js"; import { useSettings } from "../../../hooks/settings/SettingsContext.js"; import { SettingsManager } from "../../../features/settings/settings.js"; @@ -11,6 +11,8 @@ import { round } from "../../../features/math/round.js"; import { Button } from "../../utils/Button.jsx"; import { ProgressBar } from "../../utils/ProgressBar.jsx"; import utilStyles from "../../../styles/utils.module.css"; +import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js"; +import Vector2 from "../../../features/math/vector2.js"; /** * @param {object} props @@ -75,21 +77,57 @@ function StorageTab({ virtualRoot }) { ); } +function AboutTab({ windowsManager, virtualRoot }) { + return (<> +
+

About ProzillaOS

+

ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla.

+ + +
+ ); +} + export function Settings() { const [tabIndex, setTabIndex] = useState(0); const virtualRoot = useVirtualRoot(); const settingsManager = useSettings(); + const windowsManager = useWindowsManager(); return (
- - +
@@ -97,7 +135,9 @@ export function Settings() { ? : tabIndex === 1 ? - : null + : tabIndex === 2 + ? + : null }
diff --git a/src/components/applications/settings/Settings.module.css b/src/components/applications/settings/Settings.module.css index 153b613..bccac5b 100644 --- a/src/components/applications/settings/Settings.module.css +++ b/src/components/applications/settings/Settings.module.css @@ -40,11 +40,15 @@ background-color: rgba(255, 255, 255, 10%); } -.Tab-button svg { +.Tab-button > svg { height: 1.35rem; aspect-ratio: 1; } +.Tab-button > p { + margin: 0; +} + .Tab-panel { flex: 1; display: flex; @@ -57,6 +61,10 @@ } .Option { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; text-align: start; max-width: 100%; } @@ -102,6 +110,7 @@ .Button { --hover-color: var(--background-color-b); + margin-bottom: 0.75rem; padding: 0.5rem 1rem; color: var(--foreground-color-a); background-color: var(--background-color-a); diff --git a/src/components/task-bar/TaskBar.jsx b/src/components/task-bar/TaskBar.jsx index 0d2b493..fd1792a 100644 --- a/src/components/task-bar/TaskBar.jsx +++ b/src/components/task-bar/TaskBar.jsx @@ -27,8 +27,7 @@ function AppButton({ app }) { useEffect(() => { setActive(windowsManager.isAppActive(app.id)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [windows]); + }, [app.id, windows, windowsManager]); const classNames = [styles["App-icon"]]; if (active) diff --git a/src/components/task-bar/menus/HomeMenu.module.css b/src/components/task-bar/menus/HomeMenu.module.css index 8434f08..ec54a2b 100644 --- a/src/components/task-bar/menus/HomeMenu.module.css +++ b/src/components/task-bar/menus/HomeMenu.module.css @@ -64,5 +64,5 @@ text-align: left; font-size: 1rem; margin: 0; - margin-bottom: 1rem; + margin-bottom: 0.5rem; } \ No newline at end of file diff --git a/src/components/task-bar/menus/SearchMenu.jsx b/src/components/task-bar/menus/SearchMenu.jsx index c8a41f0..7faedfb 100644 --- a/src/components/task-bar/menus/SearchMenu.jsx +++ b/src/components/task-bar/menus/SearchMenu.jsx @@ -5,6 +5,7 @@ import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext. import { ReactSVG } from "react-svg"; import { useEffect } from "react"; import { useState } from "react"; +import { useKeyboardListener } from "../../../hooks/utils/keyboard.js"; /** * @param {object} props @@ -43,6 +44,15 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp if (active && apps) classNames.push(styles.Active); + const onKeyDown = (event) => { + if (event.key === "f" && event.ctrlKey) { + event.preventDefault(); + setActive(true); + } + }; + + useKeyboardListener({ onKeyDown }); + return (
diff --git a/src/features/applications/applications.js b/src/features/applications/applications.js index 80cb550..93a40ce 100644 --- a/src/features/applications/applications.js +++ b/src/features/applications/applications.js @@ -10,7 +10,7 @@ import Vector2 from "../math/vector2.js"; export default class ApplicationsManager { static APPLICATIONS = [ - new Application("Terminal", "terminal", Terminal), + new Application("Commands", "terminal", Terminal), new Application("Settings", "settings", Settings), // new Application("Browser", "browser"), // new Application("Calculator", "calculator", Calculator, { size: new Vector2(400, 600) }),