From 1a48b6fbecc936887e13a602cae5e4561d796149 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Mon, 4 Mar 2024 12:16:25 +0100 Subject: [PATCH] Added util menus --- src/components/taskbar/Taskbar.jsx | 29 ++++++---- src/components/taskbar/Taskbar.module.css | 12 +++- src/components/taskbar/indicators/Battery.jsx | 39 +++++++++++-- .../taskbar/indicators/Battery.module.css | 19 +++++++ .../taskbar/indicators/Calendar.jsx | 55 ++++++++++++++++--- .../taskbar/indicators/Calendar.module.css | 21 +++++++ src/components/taskbar/indicators/Network.jsx | 36 ++++++++++-- .../taskbar/indicators/Network.module.css | 17 ++++++ src/components/taskbar/indicators/Volume.jsx | 36 ++++++++++-- .../taskbar/indicators/Volume.module.css | 17 ++++++ src/components/taskbar/menus/UtilMenu.jsx | 22 ++++++++ .../taskbar/menus/UtilMenu.module.css | 30 ++++++++++ 12 files changed, 301 insertions(+), 32 deletions(-) create mode 100644 src/components/taskbar/indicators/Network.module.css create mode 100644 src/components/taskbar/indicators/Volume.module.css create mode 100644 src/components/taskbar/menus/UtilMenu.jsx create mode 100644 src/components/taskbar/menus/UtilMenu.module.css diff --git a/src/components/taskbar/Taskbar.jsx b/src/components/taskbar/Taskbar.jsx index 46eafa3..efe4f7d 100644 --- a/src/components/taskbar/Taskbar.jsx +++ b/src/components/taskbar/Taskbar.jsx @@ -32,6 +32,7 @@ export const Taskbar = memo(() => { const settingsManager = useSettingsManager(); const [showHome, setShowHome] = useState(false); const [showSearch, setShowSearch] = useState(false); + const [hideUtilMenus, setHideUtilMenus] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const { boxShadow, onUpdate } = useScrollWithShadow({ ref, shadow: { offset: 20, @@ -87,23 +88,25 @@ export const Taskbar = memo(() => { }); }, [settingsManager]); - const updateShowHome = (value) => { - setShowHome(value); + const updateShowHome = (show) => { + setShowHome(show); - if (value) { + if (show) { setShowSearch(false); + setHideUtilMenus(true); } }; - const updateShowSearch = (value) => { - setShowSearch(value); + const updateShowSearch = (show) => { + setShowSearch(show); - if (value) { + if (show) { if (searchQuery !== "") { setSearchQuery(""); } setShowHome(false); + setHideUtilMenus(true); if (inputRef.current) { inputRef.current.focus(); @@ -118,6 +121,12 @@ export const Taskbar = memo(() => { } }; + const showUtilMenu = () => { + setShowHome(false); + setShowSearch(false); + setHideUtilMenus(false); + }; + const search = (query) => { updateShowSearch(true); }; @@ -179,10 +188,10 @@ export const Taskbar = memo(() => {
- - - - + + + +
diff --git a/src/components/taskbar/Taskbar.module.css b/src/components/taskbar/Taskbar.module.css index 0fb49f3..1fda140 100644 --- a/src/components/taskbar/Taskbar.module.css +++ b/src/components/taskbar/Taskbar.module.css @@ -105,14 +105,22 @@ z-index: -1; } -.Util-icons > * { +.Util-icons > div { + height: 100%; + width: min-content; + z-index: -1; +} + +.Util-icons > button, +.Util-icons > div > button { height: 100%; width: min-content; margin: 0; padding: 0.4rem; } -.Util-icons > * > svg { +.Util-icons > button > svg, +.Util-icons > div > button > svg { height: 1rem; width: 1rem; aspect-ratio: 1; diff --git a/src/components/taskbar/indicators/Battery.jsx b/src/components/taskbar/indicators/Battery.jsx index 8925cbb..bfa58bf 100644 --- a/src/components/taskbar/indicators/Battery.jsx +++ b/src/components/taskbar/indicators/Battery.jsx @@ -2,10 +2,18 @@ import { faBatteryEmpty, faBatteryFull, faBatteryHalf, faBatteryQuarter, faBatte import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useEffect, useState } from "react"; import styles from "./Battery.module.css"; +import { UtilMenu } from "../menus/UtilMenu.jsx"; +import OutsideClickListener from "../../../hooks/_utils/outsideClick.js"; -export function Battery() { +/** + * @param {object} props + * @param {boolean} props.hideUtilMenus + * @param {Function} props.showUtilMenu + */ +export function Battery({ hideUtilMenus, showUtilMenu }) { const [isCharging, setIsCharging] = useState(true); const [percentage, setPercentage] = useState(100); + const [showMenu, setShowMenu] = useState(false); // const [chargingTime, setChargingTime] = useState(0); // const [dischargingTime, setDischargingTime] = useState(0); @@ -46,6 +54,19 @@ export function Battery() { }); }, []); + useEffect(() => { + if (hideUtilMenus && showMenu) { + setShowMenu(false); + } + }, [hideUtilMenus, showMenu]); + + const updateShowMenu = (show) => { + if (show) + showUtilMenu(); + + setShowMenu(show); + }; + let icon = faBatteryFull; if (percentage < 10) { icon = faBatteryEmpty; @@ -57,13 +78,23 @@ export function Battery() { icon = faBatteryThreeQuarters; } - return ( - - ); + +
+ {!isCharging + ? + : null + } + +
+

{Math.round(percentage)}%

+ + ); } \ No newline at end of file diff --git a/src/components/taskbar/indicators/Battery.module.css b/src/components/taskbar/indicators/Battery.module.css index cb39076..0125806 100644 --- a/src/components/taskbar/indicators/Battery.module.css +++ b/src/components/taskbar/indicators/Battery.module.css @@ -10,4 +10,23 @@ top: 0.55rem; right: 0.15rem; height: 0.7rem !important; +} + +.Menu > div { + display: flex; + gap: 0.5rem; + justify-content: center; + align-items: center; + padding: 0.5rem 1rem; +} + +.Menu > div > div, +.Menu > div > div > svg { + width: auto; + height: 1.25rem; +} + +.Menu > div > p { + margin: 0; + font-size: 1.25rem; } \ No newline at end of file diff --git a/src/components/taskbar/indicators/Calendar.jsx b/src/components/taskbar/indicators/Calendar.jsx index 686bcb9..ca5d97b 100644 --- a/src/components/taskbar/indicators/Calendar.jsx +++ b/src/components/taskbar/indicators/Calendar.jsx @@ -1,18 +1,43 @@ import { useEffect, useState } from "react"; import styles from "./Calendar.module.css"; +import OutsideClickListener from "../../../hooks/_utils/outsideClick.js"; +import { UtilMenu } from "../menus/UtilMenu.jsx"; -export function Calendar() { +/** + * @param {object} props + * @param {boolean} props.hideUtilMenus + * @param {Function} props.showUtilMenu + */ +export function Calendar({ hideUtilMenus, showUtilMenu }) { const [date, setDate] = useState(new Date()); + const [showMenu, setShowMenu] = useState(false); useEffect(() => { - setInterval(() => { + const interval = setInterval(() => { setDate(new Date()); - }, 30000); - }, []); + }, showMenu ? 500 : 30000); - return ( - - ); + +

{date.toLocaleString("en-GB", { + hour: "numeric", + minute: "numeric", + second: "numeric", + hour12: false, + })}

+

{date.toLocaleString("en-GB", { + weekday: "long", + day: "numeric", + month: "long", + year: "numeric", + })}

+ + ); } \ No newline at end of file diff --git a/src/components/taskbar/indicators/Calendar.module.css b/src/components/taskbar/indicators/Calendar.module.css index a9012e9..fd4ec36 100644 --- a/src/components/taskbar/indicators/Calendar.module.css +++ b/src/components/taskbar/indicators/Calendar.module.css @@ -1,3 +1,24 @@ .Button { white-space: nowrap; + user-select: none; +} + +.Menu > div { + display: flex; + gap: 0.5rem; + flex-direction: column; + align-items: flex-start; + padding: 0.5rem 1rem; +} + +.Time, .Date { + margin: 0; +} + +.Time { + font-size: 1.5rem; +} + +.Date { + color: var(--foreground-color-b); } \ No newline at end of file diff --git a/src/components/taskbar/indicators/Network.jsx b/src/components/taskbar/indicators/Network.jsx index 6de5488..d8f18d5 100644 --- a/src/components/taskbar/indicators/Network.jsx +++ b/src/components/taskbar/indicators/Network.jsx @@ -1,10 +1,38 @@ import { faWifi } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useEffect, useState } from "react"; +import OutsideClickListener from "../../../hooks/_utils/outsideClick.js"; +import { UtilMenu } from "../menus/UtilMenu.jsx"; +import styles from "./Network.module.css"; -export function Network() { - return ( - - ); + + +

Connected

+ + ); } \ No newline at end of file diff --git a/src/components/taskbar/indicators/Network.module.css b/src/components/taskbar/indicators/Network.module.css new file mode 100644 index 0000000..96ca584 --- /dev/null +++ b/src/components/taskbar/indicators/Network.module.css @@ -0,0 +1,17 @@ +.Menu > div { + display: flex; + gap: 0.5rem; + justify-content: center; + align-items: center; + padding: 0.5rem 1rem; +} + +.Menu > div > svg { + width: auto; + height: 1rem; +} + +.Menu > div > p { + margin: 0; + font-size: 1rem; +} \ No newline at end of file diff --git a/src/components/taskbar/indicators/Volume.jsx b/src/components/taskbar/indicators/Volume.jsx index c061b31..8489c41 100644 --- a/src/components/taskbar/indicators/Volume.jsx +++ b/src/components/taskbar/indicators/Volume.jsx @@ -1,10 +1,38 @@ import { faVolumeHigh } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useEffect, useState } from "react"; +import OutsideClickListener from "../../../hooks/_utils/outsideClick.js"; +import { UtilMenu } from "../menus/UtilMenu.jsx"; +import styles from "./Volume.module.css"; -export function Volume() { - return ( - - ); + + +

100%

+ + ); } \ No newline at end of file diff --git a/src/components/taskbar/indicators/Volume.module.css b/src/components/taskbar/indicators/Volume.module.css new file mode 100644 index 0000000..96ca584 --- /dev/null +++ b/src/components/taskbar/indicators/Volume.module.css @@ -0,0 +1,17 @@ +.Menu > div { + display: flex; + gap: 0.5rem; + justify-content: center; + align-items: center; + padding: 0.5rem 1rem; +} + +.Menu > div > svg { + width: auto; + height: 1rem; +} + +.Menu > div > p { + margin: 0; + font-size: 1rem; +} \ No newline at end of file diff --git a/src/components/taskbar/menus/UtilMenu.jsx b/src/components/taskbar/menus/UtilMenu.jsx new file mode 100644 index 0000000..b87ad27 --- /dev/null +++ b/src/components/taskbar/menus/UtilMenu.jsx @@ -0,0 +1,22 @@ +import styles from "./UtilMenu.module.css"; + +/** + * @param {object} props + * @param {boolean} props.active + * @param {Function} props.setActive + * @param {*} props.className + * @param {*} props.children + */ +export function UtilMenu({ active, setActive, className, children }) { + const classNames = [styles["Container-outer"]]; + if (active) + classNames.push(styles.Active); + if (className != null) + classNames.push(className); + + return (
+
+ {children} +
+
); +} \ No newline at end of file diff --git a/src/components/taskbar/menus/UtilMenu.module.css b/src/components/taskbar/menus/UtilMenu.module.css new file mode 100644 index 0000000..1a9af39 --- /dev/null +++ b/src/components/taskbar/menus/UtilMenu.module.css @@ -0,0 +1,30 @@ +.Container-outer { + position: absolute; + right: 0; + bottom: 100%; + height: auto !important; + overflow: hidden; +} + +.Container-inner { + opacity: 1; + display: flex; + background-color: rgba(25, 25, 25, 75%); + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + backdrop-filter: var(--taskbar-filter); + transform: none; + transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; + overflow: hidden; + resize: horizontal; +} + +.Container-outer:not(.Active) { + pointer-events: none; +} + +.Container-outer:not(.Active) .Container-inner { + opacity: 0; + transform: translateY(100px); +} \ No newline at end of file