diff --git a/src/components/applications/file-explorer/FileExplorer.jsx b/src/components/applications/file-explorer/FileExplorer.jsx index 8a339c0..4ae2ac2 100644 --- a/src/components/applications/file-explorer/FileExplorer.jsx +++ b/src/components/applications/file-explorer/FileExplorer.jsx @@ -29,9 +29,9 @@ function FilePreview({ file }) { return preview; } -export function FileExplorer() { +export function FileExplorer({ startPath }) { const virtualRoot = useVirtualRoot(); - const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate("~")); + const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate(startPath ?? "~")); const [path, setPath] = useState(currentDirectory.path); const windowsManager = useWindowsManager(); diff --git a/src/components/task-bar/HomeMenu.jsx b/src/components/task-bar/HomeMenu.jsx new file mode 100644 index 0000000..c5b24d3 --- /dev/null +++ b/src/components/task-bar/HomeMenu.jsx @@ -0,0 +1,62 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import styles from "./HomeMenu.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 { ReactSVG } from "react-svg"; + +export function HomeMenu({ active, setActive }) { + const windowsManager = useWindowsManager(); + + const classNames = [styles["Container-outer"]]; + if (active) + classNames.push(styles.Active); + + return ( +
+
+
+ + + + + +
+
+

Apps

+
+ {ApplicationsManager.APPLICATIONS.map(({ name, id}) => + + )} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/task-bar/HomeMenu.module.css b/src/components/task-bar/HomeMenu.module.css new file mode 100644 index 0000000..991cf8d --- /dev/null +++ b/src/components/task-bar/HomeMenu.module.css @@ -0,0 +1,85 @@ +.Container-outer { + position: absolute; + left: 0; + bottom: 100%; + min-width: 16rem; + height: auto !important; + z-index: -1; + overflow: hidden; + resize: horizontal; +} + +.Container-inner { + opacity: 1; + background-color: rgba(25, 25, 25, 75%); + backdrop-filter: blur(15px); + transform: none; + transition: 200ms ease-in-out; +} + +.Container-outer:not(.Active) .Container-inner { + opacity: 0; + transform: translateY(100px); +} + +.Container-inner { + display: flex; +} + +.Buttons { + display: flex; + flex-direction: column-reverse; + align-items: center; + padding: 0.25rem; +} + +.Buttons > button { + padding: 0.5rem; + border-radius: 0.5rem; +} + +.Buttons > button > svg { + height: 1.5rem; +} + +.Apps { + display: flex; + flex-direction: column; + width: 100%; + max-height: 20rem; + padding: 1rem; + padding-bottom: 0; +} + +.Apps h2 { + width: 100%; + text-align: left; + font-size: 1rem; + margin: 0; + margin-bottom: 1rem; +} + +.App-list { + overflow: auto; + max-height: 100%; +} + +.App-list > button { + display: flex; + gap: 1rem; + width: 100%; + padding: 0.25rem 0.5rem; + border-radius: 0.5rem; +} + +.App-list > button > div, +.App-list > button > div > div, +.App-list > button > div > div > svg { + width: 2rem; + height: 2rem; +} + +.App-list > button > p { + margin: 0; + white-space: nowrap; +} \ No newline at end of file diff --git a/src/components/task-bar/TaskBar.jsx b/src/components/task-bar/TaskBar.jsx index 39d1692..c521b0a 100644 --- a/src/components/task-bar/TaskBar.jsx +++ b/src/components/task-bar/TaskBar.jsx @@ -8,6 +8,8 @@ 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 OutsideClickListener from "../../hooks/utils/outsideClick.js"; /** * @param {Object} props @@ -33,13 +35,14 @@ function AppButton({ app }) { onClick={() => { windowsManager.open(app.id); }} title={app.name} > - + ); } export function Taskbar() { const [date, setDate] = useState(new Date()); + const [showHome, setShowHome] = useState(false); useEffect(() => { setInterval(() => { @@ -50,6 +53,14 @@ export function Taskbar() { return (
+
+ { setShowHome(false); }}> + + + +
diff --git a/src/components/task-bar/TaskBar.module.css b/src/components/task-bar/TaskBar.module.css index a830837..f41a0d6 100644 --- a/src/components/task-bar/TaskBar.module.css +++ b/src/components/task-bar/TaskBar.module.css @@ -32,14 +32,23 @@ background-color: var(--task-bar-button-hover-color); } +.Home-container { + position: relative; + padding: 0 !important; +} + +.Home-button * { + fill: var(--foreground-color-a); + filter: none; +} + .Program-icons { display: flex; align-items: center; height: 100%; - margin-left: 0.5rem; } -.Program-icons > * { +.Program-icons > *, .Home-button { height: 100%; padding: 0.75rem; } @@ -50,7 +59,10 @@ .Program-icons > * > div, .Program-icons > * > div > div, -.Program-icons > * > div > div > svg { +.Program-icons > * > div > div > svg, +.Home-button > div, +.Home-button > div > div, +.Home-button > div > div > svg { height: 100%; width: auto; }