Klectr/KDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update some ui elements

Browse Source
This commit is contained in:
Triston Armstrong 2024-06-20 20:10:37 -05:00
parent 91be4dcc63
commit 0fa8c3ec56
21 changed files with 206 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/apps.svg
View File

@ -1,9 +1,8 @@
<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="30" height="30" rx="8" ry="8" fill="#2db0ff"/> <defs>
<g fill="#ffffff" stroke-width="1.0001"> <style id="current-color-scheme" type="text/css">
<rect x="5" y="5" width="10" height="10" rx="4" ry="4"/> .ColorScheme-Text { color:#fff; } .ColorScheme-Highlight { color:#4285f4; }
<path d="m9 17c-2.216 0-4 1.784-4 4v2c0 2.216 1.784 4 4 4h2c2.216 0 4-1.784 4-4v-2c0-2.216-1.784-4-4-4h-2zm0 1h2c1.662 0 3 1.338 3 3v2c0 1.662-1.338 3-3 3h-2c-1.662 0-3-1.338-3-3v-2c0-1.662 1.338-3 3-3z" opacity=".45"/> </style>
<path d="m21 17c-2.216 0-4 1.784-4 4v2c0 2.216 1.784 4 4 4h2c2.216 0 4-1.784 4-4v-2c0-2.216-1.784-4-4-4zm0 1h2c1.662 0 3 1.338 3 3v2c0 1.662-1.338 3-3 3h-2c-1.662 0-3-1.338-3-3v-2c0-1.662 1.338-3 3-3z" opacity=".45"/> </defs>
<path d="m21 5c-2.216 0-4 1.784-4 4v2c0 2.216 1.784 4 4 4h2c2.216 0 4-1.784 4-4v-2c0-2.216-1.784-4-4-4zm0 1h2c1.662 0 3 1.338 3 3v2c0 1.662-1.338 3-3 3h-2c-1.662 0-3-1.338-3-3v-2c0-1.662 1.338-3 3-3z" opacity=".45"/> <path d="m6 4c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm14 0c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm-14 1h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm14 0h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm-14 13c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm14 0c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm-14 1h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm14 0h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1z" class="ColorScheme-Text" fill="currentColor"/>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 923 B

After

Width:  |  Height:  |  Size: 1.1 KiB

23
assets/documents.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
color:#333333;
}
.ColorScheme-Highlight {
color:#60c0f0;
}</style>
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
<path d="m24.666 23.169a3.6587 3.6587 0 0 0-3.6662 3.6662v18.331c0 2.0296 1.6366 3.6662 3.6662 3.6662h14.665c2.0334 0 3.67-1.6328 3.67-3.6662v-12.832l-9.1655-9.1693zm0 1.8293h7.3324v5.5031c0 2.0296 1.6366 3.6662 3.6662 3.6662h5.5031v10.999a1.8293 1.8293 0 0 1-1.8331 1.8331h-14.665a1.8293 1.8293 0 0 1-1.8369-1.8331v-18.331c0-1.0205 0.81639-1.8331 1.8331-1.8331zm9.1693 0.7597 6.5727 6.5765h-4.7396a1.8293 1.8293 0 0 1-1.8331-1.8331z" opacity=".15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

1
assets/file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

22
assets/folder.svg Normal file
View File

@ -0,0 +1,22 @@
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
color:#333333;
}
.ColorScheme-Highlight {
color:#60c0f0;
}</style>
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

6
assets/go-home.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style id="current-color-scheme" type="text/css">.ColorScheme-Text { color:#bfbfbf; }</style>
</defs>
<path class="ColorScheme-Text" d="m8 1.0059c-0.12781 0-0.25558 0.04855-0.35352 0.14648l-7.0703 7.0723c-0.19587 0.19587-0.19587 0.51116 0 0.70703s0.51116 0.19587 0.70703 0l0.7168-0.7168v5.7852c0 1.108 0.892 2 2 2h8c1.108 0 2-0.892 2-2v-5.7852l0.7168 0.7168c0.19587 0.19587 0.51116 0.19587 0.70703 0s0.19587-0.51116 0-0.70703l-7.0703-7.0723c-0.097934-0.097934-0.22571-0.14648-0.35352-0.14648zm0 1.209 5 5v6.7852c0 0.554-0.446 1-1 1h-2v-3c0-1.108-0.892-2-2-2s-2 0.892-2 2v3h-2c-0.554 0-1-0.446-1-1v-6.7852z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 726 B

23
assets/home.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
color:#333333;
}
.ColorScheme-Highlight {
color:#60c0f0;
}</style>
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
<path d="m32.002 22.062a0.79372 0.79372 0 0 0-0.56694 0.23434l-11.316 11.32a0.80177 0.80177 0 1 0 1.1339 1.1339l1.1452-1.149v9.26c0 1.7764 1.4287 3.2013 3.2013 3.2013h12.805c1.7726 0 3.2013-1.4287 3.2013-3.2013v-9.26l1.1452 1.149a0.80177 0.80177 0 1 0 1.1339-1.1339l-11.316-11.316a0.79372 0.79372 0 0 0-0.56694-0.23434zm0 1.9352 8.0014 8.0014v10.863a1.5988 1.5988 0 0 1-1.5988 1.5988h-3.2013v-4.8001c0-1.7764-1.4287-3.2013-3.2013-3.2013s-3.2013 1.4287-3.2013 3.2013v4.8001h-3.2013a1.5988 1.5988 0 0 1-1.6026-1.5988v-10.859z" opacity=".15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

1
assets/homebank.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 KiB

1
assets/image_outline.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 349 B

23
assets/images.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
color:#333333;
}
.ColorScheme-Highlight {
color:#60c0f0;
}</style>
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
<path d="m21.846 24.998c-1.8747 0-3.3827 1.5118-3.3827 3.3865v15.232c0 1.8747 1.5081 3.3827 3.3827 3.3827h20.308c1.8747 0 3.3865-1.5118 3.3865-3.3827v-15.232c0-1.8747-1.5118-3.3865-3.3865-3.3865zm0 1.6933h20.308c0.93734 0 1.6933 0.75592 1.6933 1.6933v15.232l-8.4625-8.4663-5.8886 6.7693-4.2634-3.3827-5.0798 5.076v-15.228c0-0.93734 0.75592-1.6933 1.6933-1.6933zm4.2332 3.3865a2.5399 2.5399 0 1 0 0 5.076 2.5399 2.5399 0 0 0 0-5.076z" opacity=".15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
assets/wallpaper.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 MiB

BIN
assets/wallpaper2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

18
index.css
View File

@ -13,13 +13,23 @@ html {
} }
body { body {
background-image: url("./assets/wallpaper3.png");
background-size: cover;
background-repeat: no-repeat;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-position: center;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#wallpaper {
position: fixed;
top: -1;
left: -1;
width: 101vw;
height: 101vh;
background-image: url("./assets/wallpaper7.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: -1;
filter: blur(2px);
}

1
index.html
View File

@ -8,6 +8,7 @@
<title>KlectrDesktop</title> <title>KlectrDesktop</title>
</head> </head>
<body> <body>
<div id="wallpaper"></div>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

13
src/os/applications.ts
View File

@ -4,9 +4,11 @@ import FileManager from "./applications/fileManager";
export default class Applications { export default class Applications {
/** currently openedd applications */ /** currently openedd applications */
applications: Application[]; applications: Application[];
os: OS;
constructor() { constructor(os: OS) {
this.applications = []; this.applications = [new FileManager("File Manager", this)];
this.os = os;
} }
addApplication(application: Application) { addApplication(application: Application) {
@ -22,8 +24,13 @@ export default class Applications {
console.log("skipping file manager"); console.log("skipping file manager");
return return
} }
const app = new FileManager() const app = new FileManager("File Manager", this)
this.applications.push(app); this.applications.push(app);
return app return app
} }
end_application(application: Application) {
this.applications = this.applications.filter(app => app !== application);
this.os.ui.updateDesktop();
}
} }

19
src/os/applications/application.ts
View File

@ -1,7 +1,16 @@
import Window from "../../ui/window";
import Applications from "../applications";
export default class Application { export default class Application {
name: string; name: string;
constructor(name: string) { parent: Applications;
ui_element: Window;
constructor(name: string, parent: Applications) {
this.name = name; this.name = name;
this.parent = parent
this.ui_element = new Window(this);
this.init()
} }
getName() { getName() {
@ -19,4 +28,12 @@ export default class Application {
run() { run() {
console.log(`Running ${this.getName()}`); console.log(`Running ${this.getName()}`);
} }
remove_window() {
this.parent.end_application(this);
}
init(){
console.log(`Initializing ${this.getName()}`);
}
} }

41
src/os/applications/fileManager.ts
View File

@ -4,21 +4,50 @@
export default class FileManager extends Application { export default class FileManager extends Application {
/** the ui element for this application */ /** the ui element for this application */
ui_element: Window;
icon: string = "📁"; icon: string = "📁";
constructor() {
super("File Manager");
this.ui_element = new Window(this);
}
getDescription() { getDescription() {
return "This is a file manager"; return "This is a file manager";
} }
init_window_ui() {
this.ui_element.add_content(`
<div class="flex text-white h-full">
<div class="flex-05 flex flex-col p-2 bg-[#555] gap-2 h-full rounded-bl-xl text-xs">
<ul class="flex flex-col gap-2">
<li class="flex items-center gap-1">
<image width="14px" src="../../../assets/go-home.svg"/>
Home
</li>
<li class="flex items-center gap-1">
<image width="14px" src="../../../assets/image_outline.svg"/>
Pictures
</li>
<li class="flex items-center gap-1">
<image width="14px" src="../../../assets/file.svg"/>
Documents
</li>
</ul>
</div>
<!-- folder list here -->
<div style="grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(60px, 1fr))" class="w-full h-full grid gap-2 p-2 flex-1">
<div class="flex flex-col justify-center items-center">
<image width="60px" src="../../../assets/folder.svg"/>
<small>Folder 1</small>
</div>
</div>
</div>
`);
}
/** returns the ui for this application */ /** returns the ui for this application */
run(){ run(){
const el = this.ui_element.start() const el = this.ui_element.start()
return el return el
} }
init(){
this.init_window_ui()
}
} }

7
src/os/index.ts
View File

@ -10,9 +10,9 @@ export default class OS {
applications: Applications; applications: Applications;
constructor() { constructor() {
this.cursor = new Cursor(); this.cursor = new Cursor(this);
this.filesystem = new Filesystem(); this.filesystem = new Filesystem(this);
this.applications = new Applications(); this.applications = new Applications(this);
} }
addUi(ui: UI) { addUi(ui: UI) {
@ -20,7 +20,6 @@ export default class OS {
} }
start() { start() {
console.log("start os");
return this; return this;
} }

4
src/ui/desktop.ts
View File

@ -29,7 +29,7 @@ export default class Desktop extends Component {
const windows = this.os.applications.getApplications() const windows = this.os.applications.getApplications()
console.log(windows) console.log(windows)
this.shortcuts_container.element.replaceChildren(...this.shortcuts.map(s => s.start())); this.shortcuts_container.element.replaceChildren(...this.shortcuts.map(s => s.start()));
this.windows_container.element.replaceChildren(...windows.map(w => w.ui_element.start())); this.windows_container.element.replaceChildren(...windows.map(w => w.run()));
} }
addApplicationShortcut(shortcut: DesktopShortcut) { addApplicationShortcut(shortcut: DesktopShortcut) {
@ -44,7 +44,7 @@ export default class Desktop extends Component {
initDesktopShortcuts() { initDesktopShortcuts() {
this.addApplicationShortcut( this.addApplicationShortcut(
new DesktopShortcut("../../assets/homebank.svg", "Home", this.os, 'file_manager'), new DesktopShortcut("../../assets/home.svg", "Home", this.os, 'file_manager'),
); );
this.addApplicationShortcut( this.addApplicationShortcut(
new DesktopShortcut("../../assets/image.svg", "fun.png", this.os, 'image_viewer'), new DesktopShortcut("../../assets/image.svg", "fun.png", this.os, 'image_viewer'),

4
src/ui/nav.ts
View File

@ -5,7 +5,7 @@ export default class NavBar extends Component {
constructor() { constructor() {
super() super()
this.element.classList.add('flex', 'flex-column', 'w-20', 'h-full', 'bg-[#000a]', 'justify-center','py-2', 'z-[12]') this.element.classList.add('flex', 'flex-column', 'w-14', 'h-full', 'bg-[#444]', 'justify-center','py-2', 'z-[12]')
} }
init(){ init(){
@ -40,7 +40,7 @@ class Application extends Component {
start() { start() {
this.setup_click_handler() this.setup_click_handler()
this.element.innerHTML = ` this.element.innerHTML = `
<img src="${this.icon}" style="width: 60px;"> <img src="${this.icon}" style="width: 40px;">
` `
return this.element return this.element
} }

2
src/ui/topbar.ts
View File

@ -12,7 +12,7 @@ export default class TopBar extends Component {
add_time(){ add_time(){
const date = new Date() const date = new Date()
this.time = new Component() this.time = new Component()
this.time.element.classList.add( "text-white", "text-center", "cursor-default") this.time.element.classList.add( "text-white", "text-center", "cursor-default", "text-xs")
this.time.element.innerText = format(date, "MMM dd H:mm aa") this.time.element.innerText = format(date, "MMM dd H:mm aa")
this.element.appendChild(this.time.start()) this.element.appendChild(this.time.start())

23
src/ui/window.ts
View File

@ -10,13 +10,12 @@ export default class Window {
resize_start_pos: { x: number, y: number } = { x: 0, y: 0 }; resize_start_pos: { x: number, y: number } = { x: 0, y: 0 };
constructor(application: Application) { constructor(application: Application) {
this.element.classList.add("bg-[#ccc]", "absolute", "rounded-lg", "shadow-xl"); this.element.classList.add("bg-[#333]", "absolute", "rounded-xl", "shadow-sm");
this.element.style.width = `${this.initial_size.w}px`; this.element.style.width = `${this.initial_size.w}px`;
this.element.style.height = `${this.initial_size.h}px`; this.element.style.height = `${this.initial_size.h}px`;
this.application = application; this.application = application;
this._add_header(); this._add_header();
this._add_content("This is a test");
this._add_resize_handles(); this._add_resize_handles();
this._handle_drag() this._handle_drag()
} }
@ -25,9 +24,10 @@ export default class Window {
this.header = new Component() this.header = new Component()
this.header.element.id = "header"; this.header.element.id = "header";
this.header.element.classList.add( this.header.element.classList.add(
"bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move", "flex", "justify-between", "bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t-xl", "text-center", "cursor-move", "flex", "justify-between",
"items-center" "items-center", "border-b", "border-[#444]",
); );
this.header.element.style.height = "2rem"
this.element.appendChild(this.header.start()); this.element.appendChild(this.header.start());
const window_title = new Component('window-title') const window_title = new Component('window-title')
@ -38,8 +38,9 @@ export default class Window {
close_btn_container.element.classList.add("flex-1", "justify-end", "flex") close_btn_container.element.classList.add("flex-1", "justify-end", "flex")
const closeButton= document.createElement('button') const closeButton= document.createElement('button')
closeButton.textContent = "X" closeButton.onclick = this._handle_close.bind(this);
closeButton.classList.add("hover:rounded-full", "hover:bg-[#f554]", "w-6", "h-6", "hover", "font-red") closeButton.textContent = "x"
closeButton.classList.add("hover:rounded-full", "hover:bg-[#111]", "w-6", "h-6", "hover", "font-red", "flex", "justify-center", "transition-all")
const dummy = document.createElement('div') const dummy = document.createElement('div')
dummy.classList.add("flex-1") dummy.classList.add("flex-1")
@ -86,10 +87,14 @@ export default class Window {
} }
} }
private _add_content(content: string): HTMLDivElement { private _handle_close(): void {
this.application.remove_window(this);
}
add_content(content: string): HTMLDivElement {
const content_element = document.createElement("div"); const content_element = document.createElement("div");
content_element.classList.add("bg-[#eee]", "p-2", "text-sm", "text-[#333]"); content_element.style.height = "calc(100% - 2rem)"
content_element.innerText = content; content_element.innerHTML = content;
this.element.appendChild(content_element); this.element.appendChild(content_element);
return content_element; return content_element;
} }