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

Updated window header style

Browse source
This commit is contained in:
Prozilla 2023-08-10 20:16:52 +02:00
parent 0c6854b1d0
commit 3e29a9a5c5
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
2 changed files with 36 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/windows/Window.jsx
View file

@ -124,17 +124,24 @@ export const Window = memo(function Window({ id, app, size, position, focused =
src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`} src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}
/> />
<p className={utilStyles["Text-semibold"]}>{title}</p> <p className={utilStyles["Text-semibold"]}>{title}</p>
<button title="Minimize" tabIndex={0} onClick={() => setMinimized(!minimized)}> <button aria-label="Minimize" className={styles["Header-button"]} tabIndex={0} id="minimize-window"
onClick={() => {
setMinimized(!minimized);
}}
>
<FontAwesomeIcon icon={faMinus}/> <FontAwesomeIcon icon={faMinus}/>
</button> </button>
<button title="Maximize" tabIndex={0} id="maximize-window" onClick={(event) => { <button aria-label="Maximize" className={styles["Header-button"]} tabIndex={0} id="maximize-window"
event.preventDefault(); onClick={(event) => {
setMaximized(!maximized); event.preventDefault();
focus(event, true); setMaximized(!maximized);
}}> focus(event, true);
}}
>
<FontAwesomeIcon icon={maximized ? fasWindowMaximize : faWindowMaximize}/> <FontAwesomeIcon icon={maximized ? fasWindowMaximize : faWindowMaximize}/>
</button> </button>
<button title="Close" tabIndex={0} id="close-window" onClick={close}> <button aria-label="Close" className={`${styles["Header-button"]} ${styles["Exit-button"]}`} tabIndex={0} id="close-window"
onClick={close}>
<FontAwesomeIcon icon={faXmark}/> <FontAwesomeIcon icon={faXmark}/>
</button> </button>
</div> </div>

34
src/components/windows/Window.module.css
View file

@ -1,5 +1,5 @@
:root { :root {
--header-height: 1.75rem; --header-height: 2.5rem;
--header-button-hover-color: rgba(255, 255, 255, 5%); --header-button-hover-color: rgba(255, 255, 255, 5%);
} }
@ -38,11 +38,14 @@
} }
.Header { .Header {
--window-icon-size: 1.5rem;
--window-icon-margin: 0.75rem;
display: flex; display: flex;
align-items: center; align-items: center;
height: var(--header-height); height: var(--header-height);
padding: 0.25rem; padding: 0.25rem;
padding-left: 0.5rem; padding-left: var(--window-icon-margin);
padding-right: 0; padding-right: 0;
background-color: var(--background-color-b); background-color: var(--background-color-b);
cursor: grab; cursor: grab;
@ -56,8 +59,8 @@
} }
.Window-icon { .Window-icon {
height: 1rem; height: var(--window-icon-size);
margin-right: 0.4rem; margin-right: calc(var(--window-icon-margin) - 0.1rem);
} }
.Window-icon > div { .Window-icon > div {
@ -75,23 +78,30 @@
overflow: hidden; overflow: hidden;
} }
.Header > button { .Header-button {
margin: 0;
padding: 0.5rem;
height: var(--header-height);
display: flex; display: flex;
align-items: center; align-items: center;
} justify-content: center;
height: var(--header-height);
.Header button { margin: 0;
padding: 0.75rem;
color: var(--foreground-color-a); color: var(--foreground-color-a);
background: none; background: none;
cursor: pointer; cursor: pointer;
border: none; border: none;
outline: none; outline: none;
aspect-ratio: 1;
} }
.Header button:hover, .Header button:focus-visible { .Header-button > svg {
height: 100%;
}
.Exit-button {
--header-button-hover-color: var(--red-b);
}
.Header-button:hover, .Header-button:focus-visible {
background-color: var(--header-button-hover-color); background-color: var(--header-button-hover-color);
} }