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) }),