michael/Unraid-Navigator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw folder and file icons

Browse Source
This commit is contained in:
Mikei386
2026-06-23 08:57:55 +02:00
parent dde4236a91
commit 16a195befa
6 changed files with 78 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/app.js
+1 -1
View File
@@ -308,7 +308,7 @@ function renderFileTable(entries) {
function renderFileIcons(entries) {
const items = entries.map((entry) => `
<button type="button" class="file-row icon-item ${entry.path === state.selectedEntry?.path ? 'selected' : ''}" data-path="${escapeAttr(entry.path)}" data-type="${escapeAttr(entry.type)}">
<span class="file-icon ${escapeAttr(entry.type)}">${icons[entry.type] || 'Item'}</span>
<span class="file-icon ${escapeAttr(entry.type)}" aria-label="${escapeAttr(icons[entry.type] || 'Item')}"></span>
<span class="icon-name">${escapeHtml(entry.name)}</span>
<span class="icon-meta">${entry.type === 'file' ? formatBytes(entry.size) : entry.type}</span>
</button>
server/public/styles.css
+74 -13
View File
@@ -338,24 +338,85 @@
}
.u-nav .file-icon {
align-items: center;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--muted);
display: inline-flex;
font-size: 12px;
height: 48px;
justify-content: center;
width: 58px;
display: block;
height: 52px;
position: relative;
width: 64px;
}
.u-nav .file-icon.directory {
color: var(--accent);
background: linear-gradient(180deg, #ff9b4f 0%, var(--accent) 100%);
border: 1px solid color-mix(in srgb, var(--accent) 78%, #5b2b12);
border-radius: 7px 7px 6px 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 5px 12px rgba(24, 34, 45, 0.14);
height: 40px;
margin-top: 10px;
}
.u-nav .file-icon.file {
color: var(--accent-2);
.u-nav .file-icon.directory::before {
background: linear-gradient(180deg, #ffb16e 0%, #f58a3a 100%);
border: 1px solid color-mix(in srgb, var(--accent) 72%, #5b2b12);
border-bottom: 0;
border-radius: 6px 6px 0 0;
content: "";
height: 12px;
left: 5px;
position: absolute;
top: -9px;
width: 27px;
}
.u-nav .file-icon.directory::after {
background: rgba(255, 255, 255, 0.18);
border-radius: 999px;
content: "";
height: 3px;
left: 8px;
position: absolute;
right: 8px;
top: 8px;
}
.u-nav .file-icon.file,
.u-nav .file-icon.symlink,
.u-nav .file-icon.other {
background: linear-gradient(180deg, #ffffff 0%, #eef3f7 100%);
border: 1px solid var(--line);
border-radius: 6px;
box-shadow: 0 5px 12px rgba(24, 34, 45, 0.12);
height: 50px;
width: 42px;
}
.u-nav .file-icon.file::before,
.u-nav .file-icon.symlink::before,
.u-nav .file-icon.other::before {
background: linear-gradient(135deg, #dce5ee 0%, #ffffff 48%, #cfd8e1 49%, #cfd8e1 100%);
border-left: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 0 5px 0 4px;
content: "";
height: 13px;
position: absolute;
right: -1px;
top: -1px;
width: 13px;
}
.u-nav .file-icon.file::after,
.u-nav .file-icon.symlink::after,
.u-nav .file-icon.other::after {
background:
linear-gradient(var(--muted), var(--muted)) 0 0 / 22px 2px no-repeat,
linear-gradient(var(--muted), var(--muted)) 0 9px / 26px 2px no-repeat,
linear-gradient(var(--muted), var(--muted)) 0 18px / 18px 2px no-repeat;
content: "";
height: 22px;
left: 8px;
opacity: 0.58;
position: absolute;
top: 18px;
width: 26px;
}
.u-nav .icon-name {