diff --git a/src/components/task-bar/TaskBar.jsx b/src/components/task-bar/TaskBar.jsx index c76161f..508c585 100644 --- a/src/components/task-bar/TaskBar.jsx +++ b/src/components/task-bar/TaskBar.jsx @@ -8,13 +8,13 @@ import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js" import { ReactSVG } from "react-svg"; // eslint-disable-next-line no-unused-vars import Application from "../../features/applications/application.js"; -import { HomeMenu } from "./HomeMenu.jsx"; +import { HomeMenu } from "./menus/HomeMenu.jsx"; import OutsideClickListener from "../../hooks/utils/outsideClick.js"; -import { Battery } from "./Battery.jsx"; -import { Network } from "./Network.jsx"; -import { Volume } from "./Volume.jsx"; -import { SearchMenu } from "./SearchMenu.jsx"; -import { Calendar } from "./Calendar.jsx"; +import { Battery } from "./indicators/Battery.jsx"; +import { Network } from "./indicators/Network.jsx"; +import { Volume } from "./indicators/Volume.jsx"; +import { SearchMenu } from "./menus/SearchMenu.jsx"; +import { Calendar } from "./indicators/Calendar.jsx"; import { useScrollWithShadow } from "../../hooks/utils/scrollWithShadows.js"; /** diff --git a/src/components/task-bar/Battery.jsx b/src/components/task-bar/indicators/Battery.jsx similarity index 97% rename from src/components/task-bar/Battery.jsx rename to src/components/task-bar/indicators/Battery.jsx index ce6d822..491ebcd 100644 --- a/src/components/task-bar/Battery.jsx +++ b/src/components/task-bar/indicators/Battery.jsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import styles from "./Battery.module.css"; export function Battery() { - const [isCharging, setIsCharging] = useState(false); + const [isCharging, setIsCharging] = useState(true); const [percentage, setPercentage] = useState(100); // const [chargingTime, setChargingTime] = useState(0); // const [dischargingTime, setDischargingTime] = useState(0); diff --git a/src/components/task-bar/Battery.module.css b/src/components/task-bar/indicators/Battery.module.css similarity index 100% rename from src/components/task-bar/Battery.module.css rename to src/components/task-bar/indicators/Battery.module.css diff --git a/src/components/task-bar/Calendar.jsx b/src/components/task-bar/indicators/Calendar.jsx similarity index 100% rename from src/components/task-bar/Calendar.jsx rename to src/components/task-bar/indicators/Calendar.jsx diff --git a/src/components/task-bar/Calendar.module.css b/src/components/task-bar/indicators/Calendar.module.css similarity index 100% rename from src/components/task-bar/Calendar.module.css rename to src/components/task-bar/indicators/Calendar.module.css diff --git a/src/components/task-bar/Network.jsx b/src/components/task-bar/indicators/Network.jsx similarity index 100% rename from src/components/task-bar/Network.jsx rename to src/components/task-bar/indicators/Network.jsx diff --git a/src/components/task-bar/Volume.jsx b/src/components/task-bar/indicators/Volume.jsx similarity index 100% rename from src/components/task-bar/Volume.jsx rename to src/components/task-bar/indicators/Volume.jsx diff --git a/src/components/task-bar/AppList.module.css b/src/components/task-bar/menus/AppList.module.css similarity index 87% rename from src/components/task-bar/AppList.module.css rename to src/components/task-bar/menus/AppList.module.css index 84ba1c6..c7ce48f 100644 --- a/src/components/task-bar/AppList.module.css +++ b/src/components/task-bar/menus/AppList.module.css @@ -1,7 +1,10 @@ .App-list { --scrollbar-color: rgba(0, 0, 0, 25%); + display: flex; + flex-direction: column; overflow-y: auto; max-height: 100%; + z-index: 0; } .App-button { diff --git a/src/components/task-bar/HomeMenu.jsx b/src/components/task-bar/menus/HomeMenu.jsx similarity index 87% rename from src/components/task-bar/HomeMenu.jsx rename to src/components/task-bar/menus/HomeMenu.jsx index 1d7cadf..0c56f8d 100644 --- a/src/components/task-bar/HomeMenu.jsx +++ b/src/components/task-bar/menus/HomeMenu.jsx @@ -2,12 +2,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styles from "./HomeMenu.module.css"; import appStyles from "./AppList.module.css"; import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons"; -import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"; -import ApplicationsManager from "../../features/applications/applications.js"; +import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js"; +import ApplicationsManager from "../../../features/applications/applications.js"; import { ReactSVG } from "react-svg"; -import { closeTab } from "../../features/utils/browser.js"; -import { useKeyboardListener } from "../../hooks/utils/keyboard.js"; -import { useVirtualRoot } from "../../hooks/virtual-drive/VirtualRootContext.js"; +import { closeTab } from "../../../features/utils/browser.js"; +import { useKeyboardListener } from "../../../hooks/utils/keyboard.js"; +import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js"; export function HomeMenu({ active, setActive, search }) { const windowsManager = useWindowsManager(); diff --git a/src/components/task-bar/HomeMenu.module.css b/src/components/task-bar/menus/HomeMenu.module.css similarity index 98% rename from src/components/task-bar/HomeMenu.module.css rename to src/components/task-bar/menus/HomeMenu.module.css index 49c748a..1539e5d 100644 --- a/src/components/task-bar/HomeMenu.module.css +++ b/src/components/task-bar/menus/HomeMenu.module.css @@ -8,13 +8,20 @@ .Container-inner { opacity: 1; + display: flex; + min-width: 16rem; + max-width: 32rem; background-color: rgba(25, 25, 25, 75%); + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; backdrop-filter: blur(15px); transform: none; transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; + overflow: hidden; + resize: horizontal; } - .Container-outer:not(.Active) { pointer-events: none; } @@ -24,17 +31,6 @@ transform: translateY(100px); } -.Container-inner { - display: flex; - min-width: 16rem; - max-width: 32rem; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; - overflow: hidden; - resize: horizontal; -} - .Buttons { display: flex; flex-direction: column-reverse; diff --git a/src/components/task-bar/SearchMenu.jsx b/src/components/task-bar/menus/SearchMenu.jsx similarity index 72% rename from src/components/task-bar/SearchMenu.jsx rename to src/components/task-bar/menus/SearchMenu.jsx index 011c8c8..9ec50c7 100644 --- a/src/components/task-bar/SearchMenu.jsx +++ b/src/components/task-bar/menus/SearchMenu.jsx @@ -1,34 +1,48 @@ import styles from "./SearchMenu.module.css"; import appStyles from "./AppList.module.css"; -import ApplicationsManager from "../../features/applications/applications.js"; -import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"; +import ApplicationsManager from "../../../features/applications/applications.js"; +import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js"; import { ReactSVG } from "react-svg"; import { useEffect } from "react"; +import { useState } from "react"; export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inputRef }) { const windowsManager = useWindowsManager(); + const [apps, setApps] = useState(null); useEffect(() => { if (inputRef.current) inputRef.current.focus(); }, [inputRef]); + useEffect(() => { + setApps(ApplicationsManager.APPLICATIONS.filter(({ name }) => + name.toLowerCase().includes(searchQuery.toLowerCase().trim()) + )); + }, [searchQuery]); + const onChange = (event) => { const value = event.target.value; setSearchQuery(value); } const classNames = [styles["Container-outer"]]; - if (active) + if (active && apps) classNames.push(styles.Active); return (
+
- {ApplicationsManager.APPLICATIONS.filter(({ name }) => - name.toLowerCase().includes(searchQuery.toLowerCase().trim()) - ).map(({ name, id }) => + {apps?.map(({ name, id }) =>
-
); diff --git a/src/components/task-bar/SearchMenu.module.css b/src/components/task-bar/menus/SearchMenu.module.css similarity index 88% rename from src/components/task-bar/SearchMenu.module.css rename to src/components/task-bar/menus/SearchMenu.module.css index b8523b3..7ae61c3 100644 --- a/src/components/task-bar/SearchMenu.module.css +++ b/src/components/task-bar/menus/SearchMenu.module.css @@ -1,17 +1,31 @@ .Container-outer { position: absolute; + display: flex; + flex-direction: column; left: 0; bottom: 100%; height: auto !important; + max-height: 20rem; overflow: hidden; } .Container-inner { opacity: 1; + display: flex; + gap: 0.5rem; + flex-direction: column-reverse; + min-width: 13rem; + max-width: 19rem; + padding: 0.5rem; background-color: rgba(25, 25, 25, 75%); + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; backdrop-filter: blur(15px); transform: none; transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; + overflow: hidden; + resize: horizontal; } .Container-outer:not(.Active) { @@ -23,18 +37,8 @@ transform: translateY(100px); } -.Container-inner { - display: flex; - flex-direction: column; - min-width: 13rem; - max-width: 29rem; - max-height: 20rem; - padding: 0.5rem; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; - overflow: hidden; - resize: horizontal; +.Container-inner > div { + margin-top: auto; } .Input { diff --git a/src/features/utils/browser.js b/src/features/utils/browser.js index 12dce81..76ad561 100644 --- a/src/features/utils/browser.js +++ b/src/features/utils/browser.js @@ -1,4 +1,5 @@ export function closeTab() { - // The following method only works in some browsers - window.close(); + if (window.confirm("Are you sure you want to shut down ProzillaOS?")) { + window.open("about:blank", "_self"); + } } \ No newline at end of file