-
+
- { setShowHome(false); }}>
-
-
+
+ { updateShowSearch(false); }}>
+
+
+
+
+
+
{ApplicationsManager.APPLICATIONS.map((app) =>
)}
-
-
-
-
+
+
+
+
diff --git a/src/components/task-bar/TaskBar.module.css b/src/components/task-bar/TaskBar.module.css
index f41a0d6..0c47e76 100644
--- a/src/components/task-bar/TaskBar.module.css
+++ b/src/components/task-bar/TaskBar.module.css
@@ -7,7 +7,6 @@
.Task-bar {
position: fixed;
display: flex;
- justify-content: space-between;
bottom: 0;
left: 0;
width: 100%;
@@ -26,13 +25,15 @@
border: none;
outline: none;
transition: background-color 100ms ease-in-out;
+ z-index: -1;
}
.Task-bar button:hover {
background-color: var(--task-bar-button-hover-color);
}
-.Home-container {
+.Home-container,
+.Search-container {
position: relative;
padding: 0 !important;
}
@@ -42,27 +43,37 @@
filter: none;
}
-.Program-icons {
+.Menu-icons,
+.App-icons {
display: flex;
align-items: center;
height: 100%;
+ z-index: -1;
}
-.Program-icons > *, .Home-button {
+.App-icons {
+ overflow-x: auto;
+}
+
+.App-icons::-webkit-scrollbar {
+ display: none;
+}
+
+.App-icons > *,
+.Menu-button {
height: 100%;
padding: 0.75rem;
}
-.Program-icons > * > svg {
+.App-icons > * > svg,
+.Menu-button > svg {
height: 1.25rem;
}
-.Program-icons > * > div,
-.Program-icons > * > div > div,
-.Program-icons > * > div > div > svg,
-.Home-button > div,
-.Home-button > div > div,
-.Home-button > div > div > svg {
+.Menu-icons div,
+.Menu-icons div > svg,
+.App-icons div,
+.App-icons div > svg {
height: 100%;
width: auto;
}
@@ -97,6 +108,9 @@
justify-content: flex-end;
align-items: center;
height: 100%;
+ margin-left: auto;
+ padding-left: 0.5rem;
+ z-index: -1;
}
.Util-icons > * {
diff --git a/src/components/task-bar/Volume.jsx b/src/components/task-bar/Volume.jsx
new file mode 100644
index 0000000..6694b48
--- /dev/null
+++ b/src/components/task-bar/Volume.jsx
@@ -0,0 +1,10 @@
+import { faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export function Volume() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/hooks/utils/scrollWithShadows.js b/src/hooks/utils/scrollWithShadows.js
new file mode 100644
index 0000000..f33ae52
--- /dev/null
+++ b/src/hooks/utils/scrollWithShadows.js
@@ -0,0 +1,137 @@
+/**
+ * https://medium.com/dfind-consulting/react-scroll-hook-with-shadows-9ba2d47ae32
+ */
+
+// eslint-disable-next-line no-unused-vars
+import React, { useCallback, useEffect, useRef } from "react";
+import { useState } from "react";
+
+/**
+ * @param {Object} options
+ * @param {React.ElementRef} options.ref
+ * @param {Boolean=true} options.horizontal
+ * @param {Boolean=true} options.dynamicOffset
+ * @param {Number=1} options.dynamicOffsetFactor
+ * @param {Object} options.shadow
+ * @param {Number=8} options.shadow.offset
+ * @param {Number=5} options.shadow.blurRadius
+ * @param {Number=-5} options.shadow.spreadRadius
+ * @param {Object} options.shadow.color
+ * @param {Number=0} options.shadow.color.r
+ * @param {Number=0} options.shadow.color.g
+ * @param {Number=0} options.shadow.color.b
+ * @param {Number=50} options.shadow.color.a
+ */
+export function useScrollWithShadow(options) {
+ const [initiated, setInitiated] = useState(false);
+ const [scrollStart, setScrollStart] = useState(0);
+ const [scrollLength, setScrollLength] = useState(0);
+ const [clientLength, setClientLength] = useState(0);
+
+ if (options == null)
+ options = {};
+ if (options.shadow == null)
+ options.shadow = {};
+ if (options.shadow.color == null)
+ options.shadow.color = {};
+
+ const {
+ ref,
+ horizontal = true,
+ dynamicOffset = true,
+ dynamicOffsetFactor = 3,
+ shadow: {
+ offset = 8,
+ blurRadius = 5,
+ spreadRadius = -5,
+ color: {
+ r = 0,
+ g = 0,
+ b = 0,
+ a = 50
+ }
+ }
+ } = options;
+
+ const updateValues = useCallback((element) => {
+ if (!element)
+ return;
+
+ console.log(element);
+
+ setScrollStart(horizontal ? element.scrollLeft : element.scrollTop);
+ setScrollLength(horizontal ? element.scrollWidth : element.scrollHeight);
+ setClientLength(horizontal ? element.clientWidth : element.clientHeight);
+ }, [horizontal]);
+
+ const onUpdate = (event) => {
+ console.log(event);
+ updateValues(event.target);
+ };
+
+ useEffect(() => {
+ const onResize = () => {
+ updateValues(ref.current);
+ };
+
+ if (ref.current && !initiated) {
+ console.log(ref.current);
+ setInitiated(true);
+ updateValues(ref.current);
+ }
+
+ window.addEventListener("resize", onResize);
+
+ return () => {
+ window.removeEventListener("resize", onResize);
+ }
+ }, [ref, updateValues, initiated]);
+
+ const getBoxShadow = () => {
+ const startDistance = scrollStart;
+ const endDistance = scrollLength - scrollStart - clientLength;
+
+ const isStart = startDistance === 0;
+ const isEnd = endDistance === 0;
+ const isBetween = scrollStart > 0 && clientLength < scrollLength - scrollStart;
+
+ let startOffset = offset;
+ let endOffset = offset;
+
+ if (dynamicOffset) {
+ startOffset = startDistance * dynamicOffsetFactor - offset;
+ endOffset = endDistance * dynamicOffsetFactor - offset;
+
+ if (startOffset > offset) {
+ startOffset = offset;
+ } else if (startOffset < 0) {
+ startOffset = 0;
+ }
+ if (endOffset > offset) {
+ endOffset = offset;
+ } else if (endOffset < 0) {
+ endOffset = 0;
+ }
+ }
+
+ const shadowStartOffset = horizontal ? `${startOffset}px 0` : `0 ${startOffset}px`;
+ const shadowEndOffset = horizontal ? `-${endOffset}px 0` : `0 -${endOffset}px`;
+
+ const start = `inset ${shadowStartOffset} ${blurRadius}px ${spreadRadius}px rgba(${r}, ${g}, ${b}, ${a}%)`;
+ const end = `inset ${shadowEndOffset} ${blurRadius}px ${spreadRadius}px rgba(${r}, ${g}, ${b}, ${a}%)`;
+
+ let boxShadow = "none";
+
+ if (isStart) {
+ boxShadow = end;
+ } else if (isBetween) {
+ boxShadow = `${start}, ${end}`;
+ } else if (isEnd) {
+ boxShadow = start;
+ }
+
+ return boxShadow;
+ };
+
+ return { boxShadow: getBoxShadow(), onUpdate };
+}
\ No newline at end of file