diff --git a/build-plugin.sh b/build-plugin.sh index 9b77775..b0b6fc3 100755 --- a/build-plugin.sh +++ b/build-plugin.sh @@ -2,7 +2,7 @@ set -eu PLUGIN="u-navigator" -VERSION="2026.06.23.r009" +VERSION="2026.06.23.r010" PKG_DIR="packages" WORK_DIR=".plugin-build" PKG_NAME="${PLUGIN}-${VERSION}.tgz" diff --git a/packages/u-navigator-2026.06.23.r009.tgz b/packages/u-navigator-2026.06.23.r009.tgz deleted file mode 100644 index 69dd1f3..0000000 Binary files a/packages/u-navigator-2026.06.23.r009.tgz and /dev/null differ diff --git a/packages/u-navigator-2026.06.23.r010.tgz b/packages/u-navigator-2026.06.23.r010.tgz new file mode 100644 index 0000000..cf37edc Binary files /dev/null and b/packages/u-navigator-2026.06.23.r010.tgz differ diff --git a/server/public/app.js b/server/public/app.js index 34a6b99..514a13e 100644 --- a/server/public/app.js +++ b/server/public/app.js @@ -73,6 +73,7 @@ function openExplorer(initialPath = state.config?.roots?.[0]?.path) { path: initialPath, entries: [], selectedPath: null, + view: 'list', loading: false, error: null } @@ -202,10 +203,14 @@ function renderExplorer(body, win) { +
+ + +
${data.error ? `

${escapeHtml(data.error)}

` : ''} - ${data.loading ? '

Lade...

' : renderFileTable(data.entries || [])} + ${data.loading ? '

Lade...

' : renderFileEntries(data.entries || [], data.view || 'list')}
`; @@ -213,6 +218,8 @@ function renderExplorer(body, win) { body.querySelector('[data-action="go"]').addEventListener('click', () => loadExplorer(win, input.value)); body.querySelector('[data-action="refresh"]').addEventListener('click', () => loadExplorer(win, data.path)); body.querySelector('[data-action="up"]').addEventListener('click', () => loadExplorer(win, parentPath(data.path))); + body.querySelector('[data-action="view-list"]').addEventListener('click', () => setExplorerView(win, 'list')); + body.querySelector('[data-action="view-icons"]').addEventListener('click', () => setExplorerView(win, 'icons')); const dropZone = body.querySelector('.drop-zone'); dropZone.addEventListener('dragenter', (event) => { @@ -273,11 +280,14 @@ function renderExplorer(body, win) { } } -function renderFileTable(entries) { +function renderFileEntries(entries, view) { if (!entries.length) { return '

Dieser Ordner ist leer. Dateien können hier abgelegt werden.

'; } + return view === 'icons' ? renderFileIcons(entries) : renderFileTable(entries); +} +function renderFileTable(entries) { const rows = entries.map((entry) => ` ${icons[entry.type] || 'Item'}${escapeHtml(entry.name)} @@ -295,6 +305,23 @@ function renderFileTable(entries) { `; } +function renderFileIcons(entries) { + const items = entries.map((entry) => ` + + `).join(''); + + return `
${items}
`; +} + +function setExplorerView(win, view) { + win.data.view = view; + render(); +} + function renderProperties(body) { const entry = state.selectedEntry; if (!entry) { diff --git a/server/public/styles.css b/server/public/styles.css index 2dc191d..eff0321 100644 --- a/server/public/styles.css +++ b/server/public/styles.css @@ -169,7 +169,7 @@ align-items: center; display: grid; gap: 8px; - grid-template-columns: auto 1fr auto auto; + grid-template-columns: auto 1fr auto auto auto; margin-bottom: 10px; } @@ -197,6 +197,30 @@ box-shadow: inset 0 0 0 2px var(--accent); } +.u-nav .view-toggle { + display: inline-flex; + gap: 0; +} + +.u-nav .view-toggle button { + border-radius: 0; + min-width: 72px; +} + +.u-nav .view-toggle button:first-child { + border-radius: 6px 0 0 6px; +} + +.u-nav .view-toggle button:last-child { + border-left: 0; + border-radius: 0 6px 6px 0; +} + +.u-nav .view-toggle button.active { + background: var(--surface-2); + border-color: var(--accent); +} + .u-nav .file-table { border-collapse: collapse; background: var(--surface); @@ -277,6 +301,80 @@ user-select: none; } +.u-nav .icon-grid { + display: grid; + gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); + padding: 4px; +} + +.u-nav .icon-item { + align-items: center; + background: var(--surface); + border: 1px solid transparent; + border-radius: 8px; + color: var(--text); + display: grid; + gap: 6px; + grid-template-rows: auto minmax(32px, auto) auto; + justify-items: center; + min-height: 126px; + padding: 10px 8px; + text-align: center; + width: 100%; +} + +.u-nav .icon-item:hover, +.u-nav .icon-item.selected, +.u-nav .icon-item.dragging, +.u-nav .icon-item.drop-target { + background: var(--surface-2); + border-color: var(--line); +} + +.u-nav .icon-item.selected, +.u-nav .icon-item.drop-target { + border-color: var(--accent); +} + +.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; +} + +.u-nav .file-icon.directory { + color: var(--accent); +} + +.u-nav .file-icon.file { + color: var(--accent-2); +} + +.u-nav .icon-name { + color: var(--text); + display: -webkit-box; + font-size: 13px; + line-height: 1.25; + max-width: 100%; + overflow: hidden; + overflow-wrap: anywhere; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.u-nav .icon-meta { + color: var(--muted); + font-size: 12px; +} + .u-nav .context-menu { background: var(--surface); border: 1px solid var(--line); diff --git a/u-navigator.plg b/u-navigator.plg index ad0c88a..392dc5d 100644 --- a/u-navigator.plg +++ b/u-navigator.plg @@ -1,7 +1,7 @@ - + ]> @@ -14,7 +14,7 @@ https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package; -1388b0f68a4cc0ddfaacc4e6f2402ea7 +0189ab9d23d2027dfc4c8dc6ebb2ee68