danvics/ProzillaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed taskbar blur

Browse source
This commit is contained in:
Prozilla 2024-06-05 15:16:08 +02:00
parent 6db8eb608e
commit 0fdd7ad632
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
7 changed files with 87 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/apps/file-explorer/directory-list/DirectoryList.module.css
View file

@ -65,6 +65,6 @@
opacity: 25%;
position: absolute;
border-radius: var(--border-radius-0);
background-color: var(--blue-b);
background-color: var(--blue-1);
border: 0.25rem solid var(--blue-0);
}

74
src/components/taskbar/Taskbar.module.css
View file

@ -7,21 +7,30 @@
left: 0;
width: 100%;
height: var(--taskbar-height);
backdrop-filter: var(--taskbar-filter);
}
.Taskbar::after {
opacity: var(--taskbar-opacity);
.Taskbar::after,
.Taskbar::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.Taskbar::after {
opacity: var(--taskbar-opacity);
background-color: var(--taskbar-color);
z-index: -2;
}
.Taskbar::before {
backdrop-filter: var(--taskbar-filter);
z-index: -3;
}
.Taskbar button {
display: flex;
align-items: center;
@ -138,4 +147,63 @@
width: 0.5rem;
padding: 0;
margin-left: 1rem;
}
.Menu-outer {
position: absolute;
right: 0;
bottom: 100%;
height: auto !important;
overflow: hidden;
}
.Menu-outer:not(.Active) {
pointer-events: none;
}
.Menu-inner {
opacity: 1;
display: flex;
border-top-left-radius: var(--border-radius-1);
border-top-right-radius: var(--border-radius-1);
border-bottom-left-radius: var(--border-radius-1);
transform: none;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
overflow: hidden;
resize: horizontal;
}
.Menu-outer:not(.Active) .Menu-inner {
opacity: 0;
transform: translateY(100px);
}
.Menu-inner::after,
.Menu-outer::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: inherit;
pointer-events: none;
}
.Menu-inner::after {
opacity: var(--taskbar-menu-opacity);
background-color: var(--taskbar-menu-color);
z-index: -2;
}
.Menu-outer::after {
opacity: 1;
transition: opacity 200ms ease-in-out, top 200ms ease-in-out;
backdrop-filter: var(--taskbar-filter);
z-index: -3;
}
.Menu-outer:not(.Active)::after {
opacity: 0;
top: 100px;
}

38
src/components/taskbar/menus/HomeMenu.module.css
View file

@ -1,45 +1,13 @@
.Container-outer {
position: absolute;
right: unset;
left: 0;
bottom: 100%;
height: auto !important;
overflow: hidden;
}
.Container-inner {
opacity: 1;
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;
backdrop-filter: var(--taskbar-filter);
transform: none;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
overflow: hidden;
resize: horizontal;
}
.Container-inner::after {
opacity: var(--taskbar-menu-opacity);
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--taskbar-menu-color);
z-index: -2;
}
.Container-outer:not(.Active) {
pointer-events: none;
}
.Container-outer:not(.Active) .Container-inner {
opacity: 0;
transform: translateY(100px);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--border-radius-1);
}
.Buttons {

7
src/components/taskbar/menus/HomeMenu.tsx
View file

@ -1,6 +1,7 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styles from "./HomeMenu.module.css";
import appStyles from "./AppList.module.css";
import taskbarStyles from "../Taskbar.module.css";
import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
import AppsManager from "../../../features/apps/appsManager";
@ -29,9 +30,9 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
setTabIndex(active ? 0 : -1);
}, [active]);
const classNames = [styles["Container-outer"]];
const classNames = [styles["Container-outer"], taskbarStyles["Menu-outer"]];
if (active)
classNames.push(styles.Active);
classNames.push(taskbarStyles.Active);
let onlyAltKey = false;
const onKeyDown = (event: KeyboardEvent) => {
@ -61,7 +62,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
return (
<div className={classNames.join(" ")}>
<div className={styles["Container-inner"]}>
<div className={`${styles["Container-inner"]} ${taskbarStyles["Menu-inner"]}`}>
<div className={styles.Buttons}>
<button title="Shut Down" tabIndex={tabIndex} onClick={() => { closeViewport(true); }}>
<FontAwesomeIcon icon={faPowerOff}/>

6
src/components/taskbar/menus/SearchMenu.module.css
View file

@ -17,9 +17,9 @@
min-width: 13rem;
max-width: 19rem;
padding: 0.5rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border-top-left-radius: var(--border-radius-1);
border-top-right-radius: var(--border-radius-1);
border-bottom-right-radius: var(--border-radius-1);
backdrop-filter: var(--taskbar-filter);
transform: none;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

6
src/components/taskbar/menus/UtilMenu.module.css
View file

@ -9,9 +9,9 @@
.Container-inner {
opacity: 1;
display: flex;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-top-left-radius: var(--border-radius-1);
border-top-right-radius: var(--border-radius-1);
border-bottom-left-radius: var(--border-radius-1);
backdrop-filter: var(--taskbar-filter);
transform: none;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

4
src/hooks/themes/themes.tsx
View file

@ -13,10 +13,10 @@ export function ThemeProvider({ children }: ThemeProviderProps): ReactElement {
const themeSettings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.theme);
useEffect(() => {
void themeSettings.get("theme", (value: string) => { setTheme(parseInt(value)); });
void themeSettings.get("theme", (value: string) => { setTheme(parseInt(value) || 0); });
}, [themeSettings]);
return <div className={`${THEMES[theme]}-theme`}>
return <div className={`${THEMES[theme ?? 0]}-theme`}>
{children}
</div>;
}