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

Style improvements for taskbar and standalone mode

Browse source
This commit is contained in:
Prozilla 2024-06-19 17:22:14 +02:00
parent be7e239242
commit e90e032909
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
12 changed files with 149 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/assets/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

26
public/assets/logo.svg
View file

@ -1,21 +1,21 @@
<svg width="290" height="206" viewBox="0 0 290 206" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_355_229)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.256 8.002C110.982 8.0516 112.551 9.01841 113.371 10.5382L129.637 40.6794C130.457 42.1992 130.404 44.0412 129.498 45.5114C128.592 46.9816 126.97 47.8568 125.244 47.8072L91.0081 46.8235C89.2818 46.7739 87.7131 45.8071 86.8929 44.2873C86.0727 42.7674 86.1256 40.9255 87.0317 39.4553L105.002 10.2978C105.908 8.82754 107.529 7.9524 109.256 8.002Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.7275 32.1412C44.9768 31.2384 46.6129 31.0707 48.0194 31.7012L75.9132 44.2055C77.3197 44.836 78.283 46.169 78.4402 47.7023C78.5975 49.2356 77.9247 50.7363 76.6754 51.6391L51.8995 69.5438C50.6502 70.4466 49.0141 70.6143 47.6076 69.9838C46.2011 69.3533 45.2378 68.0204 45.0806 66.487L41.9627 36.0781C41.8055 34.5448 42.4782 33.0441 43.7275 32.1412Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.24484 83.6071C9.71864 82.3156 10.8454 81.3749 12.2008 81.1395L39.0806 76.4704C40.4359 76.2349 41.8139 76.7405 42.6955 77.7965C43.5771 78.8526 43.8283 80.2988 43.3545 81.5903L33.9582 107.203C33.4844 108.495 32.3576 109.436 31.0023 109.671C29.6469 109.906 28.2689 109.401 27.3873 108.345L9.90383 87.4008C9.02226 86.3447 8.77105 84.8986 9.24484 83.6071Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.06734 138.697C7.82562 137.493 8.24446 136.252 9.16608 135.441L27.4437 119.353C28.3653 118.541 29.6497 118.283 30.813 118.676C31.9764 119.069 32.8419 120.052 33.0837 121.256L37.8774 145.129C38.1191 146.332 37.7003 147.574 36.7787 148.385C35.8571 149.196 34.5727 149.454 33.4093 149.061L10.3379 141.276C9.17461 140.884 8.30906 139.901 8.06734 138.697Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.5164 177.42C32.9321 176.695 32.7791 175.713 33.1151 174.844L39.7788 157.616C40.1148 156.747 40.8887 156.124 41.8091 155.981C42.7294 155.837 43.6563 156.196 44.2406 156.921L55.8289 171.306C56.4132 172.031 56.5662 173.013 56.2302 173.882C55.8942 174.751 55.1202 175.374 54.1999 175.518L35.948 178.361C35.0277 178.504 34.1007 178.146 33.5164 177.42Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.875 181.851C140.608 181.851 168.765 153.694 168.765 118.96C168.765 84.2267 140.608 56.0696 105.875 56.0696C71.1412 56.0696 42.9841 84.2267 42.9841 118.96C42.9841 153.694 71.1412 181.851 105.875 181.851ZM139.31 119.554C139.31 137.959 124.39 152.88 105.984 152.88C87.5787 152.88 72.6581 137.959 72.6581 119.554C72.6581 101.148 87.5787 86.2279 105.984 86.2279C124.39 86.2279 139.31 101.148 139.31 119.554Z" fill="#4DFFE1"/>
<path d="M215.317 181.594C205.004 181.594 195.994 180.121 188.287 177.174C180.694 174.114 173.667 169.297 167.207 162.724L188.457 141.474C192.877 145.667 197.524 148.897 202.397 151.164C207.271 153.317 212.484 154.394 218.037 154.394C222.684 154.394 226.197 153.714 228.577 152.354C230.957 150.881 232.147 148.897 232.147 146.404C232.147 143.911 231.127 141.871 229.087 140.284C227.047 138.584 224.327 137.111 220.927 135.864C217.641 134.504 213.957 133.144 209.877 131.784C205.911 130.424 201.944 128.781 197.977 126.854C194.011 124.927 190.327 122.604 186.927 119.884C183.641 117.051 180.977 113.594 178.937 109.514C176.897 105.321 175.877 100.221 175.877 94.2139C175.877 86.3939 177.747 79.6506 181.487 73.9839C185.227 68.3173 190.497 64.0106 197.297 61.064C204.097 58.0039 212.087 56.4739 221.267 56.4739C230.334 56.4739 238.721 57.9473 246.427 60.894C254.247 63.7273 260.707 67.8073 265.807 73.1339L244.387 94.3839C240.647 90.7573 236.907 88.0939 233.167 86.3939C229.427 84.5806 225.347 83.674 220.927 83.674C217.414 83.674 214.581 84.2406 212.427 85.374C210.387 86.5073 209.367 88.2073 209.367 90.4739C209.367 92.8539 210.387 94.8373 212.427 96.424C214.467 97.8973 217.131 99.2573 220.417 100.504C223.817 101.751 227.501 103.054 231.467 104.414C235.547 105.774 239.571 107.417 243.537 109.344C247.504 111.157 251.131 113.537 254.417 116.484C257.817 119.317 260.537 122.887 262.577 127.194C264.617 131.501 265.637 136.714 265.637 142.834C265.637 155.187 261.217 164.764 252.377 171.564C243.651 178.251 231.297 181.594 215.317 181.594Z" fill="#4DFFE1"/>
<svg width="1740" height="1236" viewBox="0 0 1740 1236" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_366_104)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M655.534 48.012C665.892 48.3096 675.304 54.1104 680.225 63.2294L777.822 244.076C782.744 253.195 782.426 264.247 776.989 273.068C771.553 281.89 761.823 287.141 751.465 286.843L546.048 280.941C535.691 280.643 526.278 274.843 521.357 265.724C516.436 256.605 516.754 245.553 522.19 236.732L630.01 61.7866C635.446 52.9653 645.176 47.7144 655.534 48.012Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M262.365 192.847C269.861 187.431 279.677 186.424 288.116 190.207L455.479 265.233C463.918 269.016 469.698 277.014 470.641 286.214C471.585 295.414 467.548 304.418 460.053 309.835L311.397 417.263C303.901 422.68 294.085 423.686 285.646 419.903C277.207 416.12 271.427 408.122 270.484 398.922L251.776 216.469C250.833 207.269 254.869 198.264 262.365 192.847Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.4691 501.642C58.3118 493.893 65.0727 488.25 73.2049 486.837L234.483 458.822C242.616 457.41 250.884 460.443 256.173 466.779C261.463 473.116 262.97 481.793 260.127 489.542L203.749 643.22C200.907 650.969 194.146 656.613 186.014 658.026C177.881 659.438 169.613 656.405 164.324 650.069L59.423 524.405C54.1335 518.068 52.6263 509.391 55.4691 501.642Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.404 832.181C46.9537 824.958 49.4667 817.51 54.9965 812.643L164.662 716.116C170.192 711.248 177.898 709.701 184.878 712.056C191.858 714.411 197.052 720.311 198.502 727.534L227.265 870.771C228.715 877.994 226.202 885.441 220.672 890.309C215.142 895.176 207.436 896.723 200.456 894.368L62.0277 847.659C55.0477 845.303 49.8543 839.403 48.404 832.181Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M201.099 1064.52C197.593 1060.17 196.675 1054.28 198.691 1049.07L238.673 945.697C240.689 940.485 245.332 936.744 250.854 935.884C256.376 935.024 261.938 937.175 265.444 941.527L334.973 1027.84C338.479 1032.19 339.397 1038.08 337.381 1043.29C335.365 1048.51 330.721 1052.25 325.2 1053.11L215.688 1070.17C210.166 1071.03 204.604 1068.87 201.099 1064.52Z" fill="#36B39E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M635.249 1091.1C843.65 1091.1 1012.59 922.162 1012.59 713.761C1012.59 505.36 843.65 336.417 635.249 336.417C426.847 336.417 257.905 505.36 257.905 713.761C257.905 922.162 426.847 1091.1 635.249 1091.1ZM835.861 717.324C835.861 827.757 746.338 917.28 635.905 917.28C525.472 917.28 435.948 827.757 435.948 717.324C435.948 606.891 525.472 517.367 635.905 517.367C746.338 517.367 835.861 606.891 835.861 717.324Z" fill="#4DFFE1"/>
<path d="M1291.9 1089.56C1230.02 1089.56 1175.96 1080.72 1129.72 1063.04C1084.16 1044.68 1042 1015.78 1003.24 976.344L1130.74 848.844C1157.26 874.004 1185.14 893.384 1214.38 906.984C1243.62 919.904 1274.9 926.364 1308.22 926.364C1336.1 926.364 1357.18 922.284 1371.46 914.124C1385.74 905.284 1392.88 893.384 1392.88 878.424C1392.88 863.464 1386.76 851.224 1374.52 841.704C1362.28 831.504 1345.96 822.664 1325.56 815.184C1305.84 807.024 1283.74 798.864 1259.26 790.704C1235.46 782.544 1211.66 772.684 1187.86 761.124C1164.06 749.564 1141.96 735.624 1121.56 719.304C1101.84 702.304 1085.86 681.564 1073.62 657.084C1061.38 631.924 1055.26 601.324 1055.26 565.284C1055.26 518.364 1066.48 477.904 1088.92 443.904C1111.36 409.904 1142.98 384.064 1183.78 366.384C1224.58 348.024 1272.52 338.844 1327.6 338.844C1382 338.844 1432.32 347.684 1478.56 365.364C1525.48 382.364 1564.24 406.844 1594.84 438.804L1466.32 566.304C1443.88 544.544 1421.44 528.564 1399 518.364C1376.56 507.484 1352.08 502.044 1325.56 502.044C1304.48 502.044 1287.48 505.444 1274.56 512.244C1262.32 519.044 1256.2 529.244 1256.2 542.844C1256.2 557.124 1262.32 569.024 1274.56 578.544C1286.8 587.384 1302.78 595.544 1322.5 603.024C1342.9 610.504 1365 618.324 1388.8 626.484C1413.28 634.644 1437.42 644.504 1461.22 656.064C1485.02 666.944 1506.78 681.224 1526.5 698.904C1546.9 715.904 1563.22 737.324 1575.46 763.164C1587.7 789.004 1593.82 820.284 1593.82 857.004C1593.82 931.124 1567.3 988.584 1514.26 1029.38C1461.9 1069.5 1387.78 1089.56 1291.9 1089.56Z" fill="#4DFFE1"/>
</g>
<defs>
<filter id="filter0_d_355_229" x="8" y="8" width="258" height="178" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_d_366_104" x="48" y="48" width="1548" height="1068" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feOffset dy="24"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.117 0 0 0 0 0.1485 0 0 0 0 0.18 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_355_229"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_355_229" result="shape"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_366_104"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_366_104" result="shape"/>
</filter>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

18
src/components/apps/text-editor/TextEditor.tsx
View file

@ -60,19 +60,11 @@ export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app,
useEffect(() => {
void (async () => {
let newContent = "";
let newContent: string | null = "";
// Load file
if (currentFile) {
if (currentFile.content) {
newContent = currentFile.content;
} else if (currentFile.source) {
await fetch(currentFile.source).then((response) =>
response.text()
).then((response) => {
newContent = response;
});
}
newContent = await currentFile.read() as string | null;
const iconUrl = currentFile.getIconUrl();
if (iconUrl)
@ -84,11 +76,11 @@ export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app,
setIconUrl?.(AppsManager.getAppIconUrl(app.id));
}
setContent(newContent);
if (newContent != null)
setContent(newContent);
if (ref.current) {
if (ref.current)
(ref.current as HTMLElement).scrollTo(0, 0);
}
})();
}, [app?.id, currentFile, setIconUrl]);

2
src/components/router/routes/StandaloneRoute.module.css
View file

@ -1,5 +1,5 @@
.StandaloneView {
--header-height: 2.5rem;
--header-height: 2.75rem;
display: flex;
flex-direction: column;

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

@ -63,6 +63,10 @@
width: auto;
}
button.HomeButton {
padding: 0.625rem;
}
.HomeButton * {
fill: var(--foreground-color-0);
filter: none;

8
src/components/taskbar/app-icon/AppIcon.module.css
View file

@ -9,6 +9,14 @@
.App-icon svg {
filter: var(--svg-drop-shadow-0);
transform: scale(100%);
transform-origin: center;
transition: transform 300ms ease-out 150ms;
}
.App-icon:not(.Active):hover svg,
.App-icon:not(.Active):focus-visible svg {
transform: scale(115%);
}
.App-icon.Hidden {

9
src/components/taskbar/menus/AppList.module.css
View file

@ -9,18 +9,21 @@
}
.AppButton {
--size: 2rem;
display: flex;
gap: 1rem;
gap: 0.75rem;
width: 100%;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: var(--border-radius-1);
}
.AppButton > div,
.AppButton > div > div,
.AppButton > div > div > svg {
width: 2rem;
height: 2rem;
width: var(--size);
height: var(--size);
}
.AppButton svg {

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

@ -4,28 +4,84 @@
}
.HomeMenu {
--default-buttons-width: 3rem;
--buttons-count: 5;
min-width: 16rem;
max-width: 32rem;
min-height: calc(var(--default-buttons-width) * var(--buttons-count));
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--border-radius-1);
}
.Buttons {
--buttons-width: var(--default-buttons-width);
--padding: 0.25rem;
--filter: blur(0px);
position: absolute;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: center;
padding: 0.25rem;
bottom: 0;
left: 0;
padding: var(--padding);
margin-top: auto;
width: var(--buttons-width);
height: 100%;
border-radius: var(--border-radius-1);
overflow: hidden;
transition: width 200ms ease-out 200ms;
z-index: 1;
}
.Buttons::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: inherit;
pointer-events: none;
backdrop-filter: var(--filter);
transition: backdrop-filter 200ms ease-out 200ms;
}
.Buttons:hover,
.Buttons:focus-visible {
--buttons-width: 10rem;
--filter: var(--taskbar-filter);
}
.Buttons > button {
--button-width: calc(var(--buttons-width) - var(--padding) * 2);
--button-height: calc(var(--default-buttons-width) - var(--padding) * 2);
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.5rem;
width: var(--button-width);
height: var(--button-height);
border-radius: var(--border-radius-1);
overflow: hidden;
transition: inherit;
z-index: 1;
}
.Buttons > button > svg {
height: 1.5rem;
width: 1.5rem;
}
.Buttons > button > p {
position: absolute;
left: calc(var(--default-buttons-width) - var(--padding) * 2);
margin: 0;
white-space: nowrap;
}
.Apps {
@ -33,15 +89,44 @@
flex-direction: column;
width: 100% !important;
max-height: 20rem;
padding: 1rem;
padding: 0.5rem;
padding-right: 0.25rem;
padding-bottom: 0;
margin-left: var(--default-buttons-width);
}
.Apps > h1 {
.Logo {
display: flex;
gap: 0.5rem;
width: auto;
margin-bottom: 0.5rem;
justify-content: flex-start;
align-items: center;
user-select: none;
}
.Logo div,
.Logo svg {
width: auto;
height: 2.25rem;
color: inherit;
aspect-ratio: 1;
}
.Logo svg {
object-fit: contain;
}
.Logo svg * {
color: inherit;
fill: currentColor;
}
.Logo > h1 {
width: 100%;
text-align: left;
font-size: 1rem;
margin: 0;
margin-bottom: 0.5rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: normal;
}

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

@ -64,16 +64,18 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
<div className={classNames.join(" ")}>
<div className={`${styles.HomeMenu} ${taskbarStyles.Menu}`}>
<div className={styles.Buttons}>
<button title="Shut Down" tabIndex={tabIndex} onClick={() => { closeViewport(true); }}>
<button tabIndex={tabIndex} onClick={() => { closeViewport(true); }}>
<FontAwesomeIcon icon={faPowerOff}/>
<p className={utilStyles.TextRegular}>Shut down</p>
</button>
<button title="Settings" tabIndex={tabIndex} onClick={() => {
<button tabIndex={tabIndex} onClick={() => {
setActive(false);
windowsManager?.open("settings");
}}>
<FontAwesomeIcon icon={faGear}/>
<p className={utilStyles.TextRegular}>Settings</p>
</button>
<button title="Info" tabIndex={tabIndex} onClick={() => {
<button tabIndex={tabIndex} onClick={() => {
setActive(false);
windowsManager?.open("text-editor", {
mode: "view",
@ -82,22 +84,28 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
});
}}>
<FontAwesomeIcon icon={faCircleInfo}/>
<p className={utilStyles.TextRegular}>Info</p>
</button>
<button title="Images" tabIndex={tabIndex} onClick={() => {
<button tabIndex={tabIndex} onClick={() => {
setActive(false);
windowsManager?.open(APPS.FILE_EXPLORER, { path: "~/Pictures" });
}}>
<FontAwesomeIcon icon={faImage}/>
<p className={utilStyles.TextRegular}>Images</p>
</button>
<button title="Documents" tabIndex={tabIndex} onClick={() => {
<button tabIndex={tabIndex} onClick={() => {
setActive(false);
windowsManager?.open(APPS.FILE_EXPLORER, { path: "~/Documents" }); }
}>
<FontAwesomeIcon icon={faFileLines}/>
<p className={utilStyles.TextRegular}>Documents</p>
</button>
</div>
<div className={styles.Apps}>
<h1 className={utilStyles.TextBold}>{NAME}</h1>
<span className={styles.Logo}>
<ReactSVG src={"/assets/logo.svg"}/>
<h1 className={utilStyles.TextBold}>{NAME}</h1>
</span>
<div className={appStyles.AppList}>
{AppsManager.APPS.sort((a, b) => a.name.localeCompare(b.name)).map(({ name, id }) =>
<button

5
src/components/windows/StandaloneHeader.module.css
View file

@ -16,6 +16,7 @@
color: var(--foreground-color-1);
text-decoration: none;
transition: color 300ms ease-in-out;
user-select: none;
}
.Logo:hover {
@ -25,7 +26,7 @@
.Logo div,
.Logo svg {
width: auto;
height: 1.5rem;
height: 2.5rem;
color: inherit;
aspect-ratio: 1;
}
@ -43,6 +44,8 @@
margin: 0;
color: inherit;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: normal;
}
.ExitButton {

2
src/components/windows/StandaloneHeader.tsx
View file

@ -11,7 +11,7 @@ interface StandaloneHeaderProps {
export function StandaloneHeader({ exit }: StandaloneHeaderProps) {
return <header className={styles.Header}>
<a className={styles.Logo} href="/" tabIndex={0}>
<ReactSVG src={"/assets/icon-mask.svg"}/>
<ReactSVG src={"/assets/logo.svg"}/>
<h1>{NAME}</h1>
</a>
<Button className={styles.ExitButton} onClick={exit} icon={faTimes}>

6
src/features/virtual-drive/file/virtualFile.ts
View file

@ -104,9 +104,9 @@ export class VirtualFile extends VirtualBase {
if (!isText) return this.source;
return await fetch(this.source).then((response) =>
response.text()
).catch((error) => {
return await fetch(this.source).then((response) => {
return response.text();
}).catch((error) => {
console.error(`Error while reading file with id "${this.id}":`, error);
return null;
}) as string;