From 0de50f40eb826c2a127bb4b12b4d3c11f0c90f15 Mon Sep 17 00:00:00 2001 From: Nikhil M Warrier Date: Sat, 5 Sep 2026 21:22:09 +0530 Subject: Reskin file manager UI with Linear-style polish - Refresh design tokens and dark/light palette (accent #5e6ad2, #0a0a0a dark) - Glass sticky header, targeted hover/transition, focus rings, reduced-motion support - Swap all icons to Lucide stroke icons (CSS drives color via vars) - Animate menu/more popovers closed; enforce only one open at a time - Right-align desktop header toolbar; even icon spacing - Single shared subgrid for table header + rows so columns align exactly --- assets/index.js | 44 +++++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 17 deletions(-) (limited to 'assets/index.js') diff --git a/assets/index.js b/assets/index.js index f95bd6e..f15ce9c 100644 --- a/assets/index.js +++ b/assets/index.js @@ -53,15 +53,15 @@ const IFRAME_FORMATS = [ const MAX_SUBPATHS_COUNT = 1000; const ICONS = { - dir: ``, - symlinkFile: ``, - symlinkDir: ``, - file: ``, - download: ``, - move: ``, - edit: ``, - delete: ``, - view: ``, + dir: ``, + symlinkFile: ``, + symlinkDir: ``, + file: ``, + download: ``, + move: ``, + edit: ``, + delete: ``, + view: ``, } /** @@ -147,6 +147,15 @@ async function ready() { document.querySelectorAll('.menu-toggle, .more-toggle').forEach(cb => cb.checked = false); }); + document.addEventListener('change', e => { + const t = e.target; + if (t.matches('.menu-toggle, .more-toggle') && t.checked) { + document.querySelectorAll('.menu-toggle, .more-toggle').forEach(cb => { + if (cb !== t) cb.checked = false; + }); + } + }); + addBreadcrumb(DATA.href, DATA.uri_prefix); if (DATA.kind === "Index") { @@ -279,7 +288,7 @@ class Uploader { complete() { const $uploadStatusNew = this.$uploadStatus.cloneNode(true); - $uploadStatusNew.innerHTML = `✓`; + $uploadStatusNew.innerHTML = `✓`; this.$uploadStatus.parentNode.replaceChild($uploadStatusNew, this.$uploadStatus); this.$uploadStatus = null; failUploaders.delete(this.idx); @@ -288,7 +297,7 @@ class Uploader { } fail(reason = "") { - this.$uploadStatus.innerHTML = `✗↻`; + this.$uploadStatus.innerHTML = `✗↻`; failUploaders.set(this.idx, this); Uploader.runnings--; Uploader.runQueue(); @@ -348,9 +357,9 @@ function addBreadcrumb(href, uri_prefix) { } const encodedName = encodedStr(name); if (i === 0) { - $breadcrumb.insertAdjacentHTML("beforeend", ``); + $breadcrumb.insertAdjacentHTML("beforeend", ``); } else if (i === len - 1) { - $breadcrumb.insertAdjacentHTML("beforeend", `${encodedName}`); + $breadcrumb.insertAdjacentHTML("beforeend", `${encodedName}`); } else { $breadcrumb.insertAdjacentHTML("beforeend", `${encodedName}`); } @@ -417,19 +426,20 @@ function renderPathsTableHead() {
${headerItems.map(item => { - let svg = ``; + let svg = ``; let order = "desc"; if (PARAMS.sort === item.name) { if (PARAMS.order === "desc") { order = "asc"; - svg = `` + svg = `` } else { - svg = `` + svg = `` } } const qs = new URLSearchParams({ ...PARAMS, order, sort: item.name }).toString(); const icon = `${svg}` - return `${item.text}${icon}` + const active = PARAMS.sort === item.name ? " active" : ""; + return `${item.text}${icon}` }).join("\n")} Actions
-- cgit v1.2.3