From 6625c4d3d0b958b454889f5596499bccffb0071e Mon Sep 17 00:00:00 2001 From: sigoden Date: Tue, 21 Feb 2023 08:13:29 +0800 Subject: [PATCH] chore: optimize ui --- assets/index.css | 22 +++++++-------- assets/index.js | 71 ++++++++++++++++++++++++------------------------ 2 files changed, 46 insertions(+), 47 deletions(-) diff --git a/assets/index.css b/assets/index.css index 3b2174f..ae2efb4 100644 --- a/assets/index.css +++ b/assets/index.css @@ -1,5 +1,5 @@ html { - font-family: -apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; + font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #24292e; } @@ -29,28 +29,28 @@ body { padding-right: 0.6em; } -.breadcrumb > a { +.breadcrumb>a { color: #0366d6; text-decoration: none; } -.breadcrumb > a:hover { +.breadcrumb>a:hover { text-decoration: underline; } /* final breadcrumb */ -.breadcrumb > b { +.breadcrumb>b { color: #24292e; } -.breadcrumb > .separator { +.breadcrumb>.separator { color: #586069; padding: 0 0.25em; } .breadcrumb svg { height: 100%; - fill: rgba(3,47,98,0.5); + fill: rgba(3, 47, 98, 0.5); } .toolbox { @@ -58,7 +58,7 @@ body { margin-right: 10px; } -.toolbox > div { +.toolbox>div { /* vertically align with breadcrumb text */ height: 1.1rem; } @@ -138,7 +138,7 @@ body { text-decoration: none; } -.paths-table thead a > span { +.paths-table thead a>span { padding-left: 2px; } @@ -147,7 +147,7 @@ body { } .paths-table .cell-actions { - width: 75px; + width: 90px; display: flex; padding-left: 0.6em; } @@ -165,7 +165,7 @@ body { .path svg { height: 16px; - fill: rgba(3,47,98,0.5); + fill: rgba(3, 47, 98, 0.5); padding-right: 0.5em; vertical-align: text-top; } @@ -265,4 +265,4 @@ body { .paths-table tbody tr:hover { background-color: #1a1a1a; } -} +} \ No newline at end of file diff --git a/assets/index.js b/assets/index.js index 90d01c6..7c66b8b 100644 --- a/assets/index.js +++ b/assets/index.js @@ -7,27 +7,16 @@ */ /** - * @typedef {IndexDATA|EditDATA} DATA - */ - -/** - * @typedef {object} IndexDATA + * @typedef {object} DATA * @property {string} href * @property {string} uri_prefix - * @property {"Index"} kind + * @property {"Index" | "Edit"} kind * @property {PathItem[]} paths * @property {boolean} allow_upload * @property {boolean} allow_delete * @property {boolean} allow_search * @property {boolean} allow_archive * @property {boolean} dir_exists - */ - -/** - * @typedef {object} EditDATA - * @property {string} href - * @property {string} uri_prefix - * @property {"Edit"} kind * @property {string} editable */ @@ -47,6 +36,17 @@ const PARAMS = Object.fromEntries(new URLSearchParams(window.location.search).en const dirEmptyNote = PARAMS.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded'; +const ICONS = { + dir: ``, + symlinkFile: ``, + symlinkDir: ``, + file: ``, + download: ``, + move: ``, + edit: ``, + delete: ``, +} + /** * @type Element */ @@ -73,7 +73,6 @@ let $emptyFolder; let $editor; function ready() { - document.title = `Index of ${DATA.href} - Dufs`; $pathsTable = document.querySelector(".paths-table") $pathsTableHead = document.querySelector(".paths-table thead"); $pathsTableBody = document.querySelector(".paths-table tbody"); @@ -84,6 +83,7 @@ function ready() { addBreadcrumb(DATA.href, DATA.uri_prefix); if (DATA.kind == "Index") { + document.title = `Index of ${DATA.href} - Dufs`; document.querySelector(".index-page").classList.remove("hidden"); @@ -103,6 +103,8 @@ function ready() { setupUpload(); } } else if (DATA.kind == "Edit") { + document.title = `Edit of ${DATA.href} - Dufs`; + setupEditor(); } } @@ -321,41 +323,38 @@ function addPath(file, index) { let actionDelete = ""; let actionDownload = ""; let actionMove = ""; - if (file.path_type.endsWith("Dir")) { + let actionEdit = ""; + let isDir = file.path_type.endsWith("Dir"); + if (isDir) { url += "/"; if (DATA.allow_archive) { actionDownload = `
- - - + ${ICONS.download}
`; } } else { actionDownload = `
- - - + ${ICONS.download}
`; } if (DATA.allow_delete) { if (DATA.allow_upload) { - actionMove = ` -
- -
`; + actionMove = `
${ICONS.move}
`; + if (!isDir) { + actionEdit = `${ICONS.edit}`; + } } actionDelete = ` -
- -
`; +
${ICONS.delete}
`; } let actionCell = ` ${actionDownload} ${actionMove} ${actionDelete} + ${actionEdit} ` $pathsTableBody.insertAdjacentHTML("beforeend", ` @@ -364,7 +363,7 @@ function addPath(file, index) { ${getPathSvg(file.path_type)} - ${encodedName} + ${encodedName} ${formatMtime(file.mtime)} ${formatSize(file.size).join(" ")} @@ -508,7 +507,7 @@ async function setupEditor() { if (!DATA.editable) { const $notEditable = document.querySelector(".not-editable"); $notEditable.classList.remove("hidden"); - $notEditable.textContent = "File is binary or too large."; + $notEditable.textContent = "Cannot edit file because it is too large or binary."; return; } @@ -586,13 +585,13 @@ function baseUrl() { function getPathSvg(path_type) { switch (path_type) { case "Dir": - return ``; + return ICONS.dir; case "SymlinkFile": - return ``; + return ICONS.symlinkFile; case "SymlinkDir": - return ``; + return ICONS.symlinkDir; default: - return ``; + return ICONS.file; } } @@ -612,9 +611,9 @@ function padZero(value, size) { } function formatSize(size) { - if (!size) return [] + if (size == null) return [] const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; - if (size == 0) return [0, "Byte"]; + if (size == 0) return [0, "B"]; const i = parseInt(Math.floor(Math.log(size) / Math.log(1024))); return [Math.round(size / Math.pow(1024, i), 2), sizes[i]]; }