github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-02-02 23:28:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

tweak: use different icons for system directories in the sidebar

Browse Source
This commit is contained in:
jelveh 2024-10-19 12:59:24 -07:00
parent 74baab49f4
commit c29122c23f
8 changed files with 60 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/gui/src/UI/UIWindow.js
View File

@ -265,12 +265,12 @@ async function UIWindow(options) {
>`;
// favorites
h += `<h2 class="window-sidebar-title disable-user-select">${i18n('favorites')}</h2>`;
h += `<div draggable="false" title="${i18n('home')}" class="window-sidebar-item disable-user-select ${options.path === window.home_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.home_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-home.svg'])}">${i18n('home')}</div>`;
h += `<div draggable="false" title="${i18n('documents')}" class="window-sidebar-item disable-user-select ${options.path === window.docs_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.docs_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-documents.svg'])}">${i18n('documents')}</div>`;
h += `<div draggable="false" title="${i18n('public')}" class="window-sidebar-item disable-user-select ${options.path === window.public_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.public_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-public.svg'])}">${i18n('public')}</div>`;
h += `<div draggable="false" title="${i18n('pictures')}" class="window-sidebar-item disable-user-select ${options.path === window.pictures_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.pictures_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-pictures.svg'])}">${i18n('pictures')}</div>`;
h += `<div draggable="false" title="${i18n('desktop')}" class="window-sidebar-item disable-user-select ${options.path === window.desktop_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.desktop_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-desktop.svg'])}">${i18n('desktop')}</div>`;
h += `<div draggable="false" title="${i18n('videos')}" class="window-sidebar-item disable-user-select ${options.path === window.videos_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.videos_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-videos.svg'])}">${i18n('videos')}</div>`;
h += `<div draggable="false" title="${i18n('home')}" class="window-sidebar-item disable-user-select ${options.path === window.home_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.home_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-home.svg'])}">${i18n('home')}</div>`;
h += `<div draggable="false" title="${i18n('documents')}" class="window-sidebar-item disable-user-select ${options.path === window.docs_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.docs_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-documents.svg'])}">${i18n('documents')}</div>`;
h += `<div draggable="false" title="${i18n('public')}" class="window-sidebar-item disable-user-select ${options.path === window.public_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.public_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-public.svg'])}">${i18n('public')}</div>`;
h += `<div draggable="false" title="${i18n('pictures')}" class="window-sidebar-item disable-user-select ${options.path === window.pictures_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.pictures_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-pictures.svg'])}">${i18n('pictures')}</div>`;
h += `<div draggable="false" title="${i18n('desktop')}" class="window-sidebar-item disable-user-select ${options.path === window.desktop_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.desktop_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-desktop.svg'])}">${i18n('desktop')}</div>`;
h += `<div draggable="false" title="${i18n('videos')}" class="window-sidebar-item disable-user-select ${options.path === window.videos_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.videos_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-videos.svg'])}">${i18n('videos')}</div>`;
h += `</div>`;
}

3
src/gui/src/css/style.css
View File

@ -1222,7 +1222,7 @@ span.header-sort-icon img {
margin: 0;
font-weight: bold;
font-size: 13px;
color: #6d7787;
color: #8f96a3;
text-shadow: 1px 1px rgb(247 247 247 / 15%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -1233,6 +1233,7 @@ span.header-sort-icon img {
}
.window-sidebar-title:first-child {
padding-left: 1px;
margin-top: 0px;
}

7
src/gui/src/icons/sidebar-folder-desktop.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1.1">
<rect style="opacity:0.2" width="40" height="36" x="4" y="7" rx="2" ry="2"/>
<path style="fill:#f9bd30" d="M 4,9.9 4,40 c 0,1.108 0.892,2 2,2 l 36,0 c 1.108,0 2,-0.892 2,-2 L 44,9.9 Z"/>
<path style="fill:#594411" d="M 6,6 C 4.892,6 4,6.892 4,8 V 10 H 44 V 8 C 44,6.892 43.108,6 42,6 Z"/>
<path style="fill:#594411" d="M 16,38 C 14.892,38 14,38.892 14,40 V 42 H 34 V 40 C 34,38.892 33.108,38 32,38 Z"/>
<path style="opacity:.1;fill:#ffffff" d="m6 6c-1.108 0-2 0.892-2 2v1c0-1.108 0.892-2 2-2h36c1.108 0 2 0.892 2 2v-1c0-1.108-0.892-2-2-2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 632 B

9
src/gui/src/icons/sidebar-folder-documents.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
<rect style="opacity:0.2" width="40" height="26" x="4" y="17" rx="2" ry="2"/>
<path style="fill:#e19d00" d="M 4,34 C 4,35.108 4.892,36 6,36 H 42 C 43.108,36 44,35.108 44,34 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 H 6 C 4.892,6 4,6.892 4,8"/>
<rect style="opacity:0.2" width="40" height="26" x="4" y="15" rx="2" ry="2"/>
<rect style="fill:#e4e4e4" width="36" height="16" x="6" y="13" rx="2" ry="2"/>
<rect style="fill:#f9bd30" width="40" height="26" x="4" y="16" rx="2" ry="2"/>
<path style="opacity:0.1;fill:#ffffff" d="M 6,6 C 4.892,6 4,6.892 4,8 V 9 C 4,7.892 4.892,7 6,7 H 17 C 20,7 21,11 24,11 H 42 C 43.108,11 44,11.892 44,13 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 Z"/>
<path style="fill:#594411" d="M 19 22 C 18.446 22 18 22.446 18 23 L 18 35 C 18 35.554 18.446 36 19 36 L 29 36 C 29.554 36 30 35.554 30 35 L 30 26 L 26 22 L 19 22 z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 965 B

9
src/gui/src/icons/sidebar-folder-home.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
<rect style="opacity:0.2" width="40" height="26" x="4" y="17" rx="2" ry="2"/>
<path style="fill:#e19d00" d="M 4,34 C 4,35.108 4.892,36 6,36 H 42 C 43.108,36 44,35.108 44,34 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 H 6 C 4.892,6 4,6.892 4,8"/>
<rect style="opacity:0.2" width="40" height="26" x="4" y="15" rx="2" ry="2"/>
<rect style="fill:#e4e4e4" width="36" height="16" x="6" y="13" rx="2" ry="2"/>
<rect style="fill:#f9bd30" width="40" height="26" x="4" y="16" rx="2" ry="2"/>
<path style="opacity:0.1;fill:#ffffff" d="M 6,6 C 4.892,6 4,6.892 4,8 V 9 C 4,7.892 4.892,7 6,7 H 17 C 20,7 21,11 24,11 H 42 C 43.108,11 44,11.892 44,13 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 Z"/>
<path style="fill:#594411" d="M 20.545,25.452 C 20.499,25.463 20.453,25.481 20.41,25.504 19.98,25.731 19.87,26.44 20.164,27.096 20.401,27.624 20.821,27.95 21.203,27.94 21.49,29.693 22.633,31 23.993,31 H 24.005 C 25.366,31 26.509,29.693 26.796,27.94 27.177,27.95 27.598,27.624 27.835,27.096 28.129,26.44 28.019,25.731 27.589,25.504 27.545,25.481 27.5,25.463 27.454,25.452 27.399,23.535 25.876,22 24,22 22.125,22 20.6,23.535 20.545,25.452 Z M 26.394,31 C 26.105,31.701 25.12,32.227 23.945,32.227 22.775,32.227 21.799,31.708 21.505,31.012 19.037,31.27 17.238,31.902 17.022,32.649 17.019,32.656 17.024,32.665 17.022,32.672 17.015,32.699 17.015,32.723 17.012,32.75 17.011,32.763 17,32.771 17,32.784 V 32.793 34.643 C 17.001,34.84 17.157,35 17.351,35 H 30.65 C 30.844,35 31,34.84 31,34.643 V 32.793 32.771 C 30.998,32.728 30.979,32.691 30.967,32.648 30.746,31.892 28.908,31.252 26.395,31 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

9
src/gui/src/icons/sidebar-folder-pictures.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
<rect style="opacity:0.2" width="40" height="26" x="4" y="17" rx="2" ry="2"/>
<path style="fill:#e19d00" d="M 4,34 C 4,35.108 4.892,36 6,36 H 42 C 43.108,36 44,35.108 44,34 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 H 6 C 4.892,6 4,6.892 4,8"/>
<rect style="opacity:0.2" width="40" height="26" x="4" y="15" rx="2" ry="2"/>
<rect style="fill:#e4e4e4" width="36" height="16" x="6" y="13" rx="2" ry="2"/>
<rect style="fill:#f9bd30" width="40" height="26" x="4" y="16" rx="2" ry="2"/>
<path style="opacity:0.1;fill:#ffffff" d="M 6,6 C 4.892,6 4,6.892 4,8 V 9 C 4,7.892 4.892,7 6,7 H 17 C 20,7 21,11 24,11 H 42 C 43.108,11 44,11.892 44,13 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 Z"/>
<path style="fill:#594411" d="M 18,23 C 17,23 17,24 17,24 V 34 C 17,35 18,35 18,35 H 30 C 30,35 31,35 31,34 V 24 C 31,23 30,23 30,23 Z M 25,31 27,28.56 29,31 V 33 H 19 V 30 L 21.5,27.5 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 988 B

9
src/gui/src/icons/sidebar-folder-public.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1">
<rect style="opacity:0.2" width="56" height="36" x="4" y="22" rx="2.8" ry="2.8"/>
<path style="fill:#e19d00" d="M 4,46.2 C 4,47.751 5.2488,49 6.8,49 H 57.2 C 58.751,49 60,47.751 60,46.2 V 15.8 C 60,14.249 58.751,13 57.2,13 H 32 C 27.8,13 26.4,7 22.2,7 H 6.8 C 5.2488,7 4,8.2488 4,9.8"/>
<rect style="opacity:0.2" width="56" height="36" x="4" y="20" rx="2.8" ry="2.8"/>
<rect style="fill:#e4e4e4" width="48" height="22" x="8" y="16" rx="2.8" ry="2.8"/>
<rect style="fill:#f9bd30" width="56" height="36" x="4" y="21" rx="2.8" ry="2.8"/>
<path style="opacity:0.1;fill:#ffffff" d="M 6.8008,7 C 5.2496,7 4,8.2496 4,9.8008 V 10.801 C 4,9.2496 5.2496,8 6.8008,8 H 22.199 C 26.399,8 27.8,14 32,14 H 57.199 C 58.75,14 60,15.25 60,16.801 V 15.801 C 60,14.25 58.75,13 57.199,13 H 32 C 27.8,13 26.399,7 22.199,7 Z"/>
<path style="fill:#594411" d="M 32,29 C 26.477,29 22,33.477 22,39 22,44.523 26.477,49 32,49 37.523,49 42,44.523 42,39 42,33.477 37.523,29 32,29 Z M 31.286,31.768 C 31.381,31.758 31.502,31.774 31.598,31.768 31.61,31.814 31.529,31.976 31.42,32.214 30.726,33.731 30.686,35.506 31.33,36.455 31.447,36.627 31.554,36.791 31.554,36.812 31.554,36.834 31.428,36.857 31.286,36.857 30.952,36.857 30.636,36.654 29.991,36.143 29.705,35.916 29.332,35.725 29.188,35.696 28.961,35.651 28.9,35.671 28.607,35.964 28.334,36.237 28.25,36.384 28.25,36.634 28.25,37.581 29.374,38.334 31.464,38.777 34.302,39.378 35.002,39.918 35.08,41.411 35.179,43.282 34.182,44.693 32,45.786 31.74,45.916 31.574,45.967 31.464,46.009 31.416,46.005 31.379,46.013 31.33,46.009 31.312,45.951 31.286,45.817 31.286,45.563 31.286,44.569 30.894,43.545 30.304,42.973 30.145,42.82 29.702,42.494 29.322,42.259 28.942,42.024 28.559,41.751 28.473,41.634 28.332,41.44 28.32,41.322 28.429,40.964 28.627,40.312 28.863,39.948 29.322,39.536 29.562,39.32 29.804,39.138 29.857,39.134 29.911,39.13 29.55,39.021 29.009,38.911 28.468,38.8 27.677,38.568 27.268,38.42 26.52,38.149 25.51,37.581 25.125,37.17 25.109,37.152 25.095,37.14 25.081,37.125 25.632,34.928 27.18,33.127 29.232,32.259 29.662,32.077 30.104,31.953 30.572,31.857 30.804,31.81 31.046,31.792 31.286,31.768 Z M 37.982,35.116 C 38.15,35.22 38.783,36.59 38.964,37.259 39.198,38.122 39.181,39.616 38.964,40.473 38.882,40.8 38.776,41.105 38.741,41.143 38.706,41.181 38.578,40.962 38.429,40.697 38.279,40.431 37.8,39.866 37.402,39.447 36.253,38.234 36.072,37.601 36.554,36.634 36.796,36.146 37.852,35.036 37.982,35.116 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

9
src/gui/src/icons/sidebar-folder-videos.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
<rect style="opacity:0.2" width="40" height="26" x="4" y="17" rx="2" ry="2"/>
<path style="fill:#e19d00" d="M 4,34 C 4,35.108 4.892,36 6,36 H 42 C 43.108,36 44,35.108 44,34 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 H 6 C 4.892,6 4,6.892 4,8"/>
<rect style="opacity:0.2" width="40" height="26" x="4" y="15" rx="2" ry="2"/>
<rect style="fill:#e4e4e4" width="36" height="16" x="6" y="13" rx="2" ry="2"/>
<rect style="fill:#f9bd30" width="40" height="26" x="4" y="16" rx="2" ry="2"/>
<path style="opacity:0.1;fill:#ffffff" d="M 6,6 C 4.892,6 4,6.892 4,8 V 9 C 4,7.892 4.892,7 6,7 H 17 C 20,7 21,11 24,11 H 42 C 43.108,11 44,11.892 44,13 V 12 C 44,10.892 43.108,10 42,10 H 24 C 21,10 20,6 17,6 Z"/>
<path style="fill:#594411" d="M 18 24 C 17.446 24 17 24.446 17 25 L 17 33 C 17 33.554 17.446 34 18 34 L 27 34 C 27.554 34 28 33.554 28 33 L 28 29 L 28 25 C 28 24.446 27.554 24 27 24 L 18 24 z M 28 29 L 32 33 L 32 25.5 L 28 29 z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB