OSSForks/daedalOS
1
0
Fork 0
mirror of https://github.com/DustinBrett/daedalOS.git synced 2025-12-06 00:20:05 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Peek visual improvements

Browse Source
This commit is contained in:
Dustin Brett 2025-06-13 22:36:26 -07:00
parent a112236b08
commit 61d287cf12
3 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/system/Taskbar/StyledTaskbar.ts
View File

@ -1,8 +1,9 @@
import styled from "styled-components";
import { TASKBAR_HEIGHT } from "utils/constants";
const TASKBAR_Z_INDEX = 100000;
const StyledTaskbar = styled.nav`
backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.blur})`};
background-color: ${({ theme }) => theme.colors.taskbar.background};
bottom: 0;
contain: size layout;
@ -11,7 +12,17 @@ const StyledTaskbar = styled.nav`
position: absolute;
right: 0;
width: 100vw;
z-index: 100000;
z-index: ${TASKBAR_Z_INDEX};
&::after {
backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.blur})`};
content: "";
display: block;
height: 100%;
position: relative;
width: 100%;
z-index: -${TASKBAR_Z_INDEX};
}
`;
export default StyledTaskbar;

2
components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts
View File

@ -22,7 +22,7 @@ const StyledPeekWindow = styled(motion.div)<StyledPeekWindowProps>`
$offsetX ? `translateX(${$offsetX}px)` : undefined};
${StyledTaskbarEntry}:hover & {
background-color: hsl(0 0% 25% / 85%);
background-color: hsl(0 0% 25% / 70%);
&:active {
background-color: ${({ theme }) => theme.colors.taskbar.activeForeground};

18
components/system/Taskbar/TaskbarEntry/index.tsx
View File

@ -1,4 +1,4 @@
import { memo, useCallback, useMemo, useState } from "react";
import { memo, useCallback, useMemo, useRef, useState } from "react";
import dynamic from "next/dynamic";
import { AnimatePresence } from "motion/react";
import StyledTaskbarEntry from "components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry";
@ -40,8 +40,20 @@ const TaskbarEntry: FC<TaskbarEntryProps> = ({ icon, id, title }) => {
[id, linkElement]
);
const [isPeekVisible, setIsPeekVisible] = useState(false);
const hidePeek = useCallback((): void => setIsPeekVisible(false), []);
const showPeek = useCallback((): void => setIsPeekVisible(true), []);
const hidePeekTimerRef = useRef(0);
const hidePeek = useCallback((): void => {
hidePeekTimerRef.current = window.setTimeout(
() => setIsPeekVisible(false),
200
);
}, []);
const showPeek = useCallback((): void => {
if (hidePeekTimerRef.current) {
window.clearTimeout(hidePeekTimerRef.current);
hidePeekTimerRef.current = 0;
}
setIsPeekVisible(true);
}, []);
const onClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
(event): void => {
if (event.shiftKey && !singleton) {