From 211f3d732b0e3ab438c399d7f02c64a306cf0313 Mon Sep 17 00:00:00 2001 From: KOWX712 Date: Thu, 27 Feb 2025 22:03:47 +0800 Subject: [PATCH] misc: move out file selector styling code from js --- module/webui/index.html | 15 ++++ module/webui/scripts/menu_option.js | 48 ++-------- module/webui/styles/file_selector.css | 121 ++++++++++++++++++++++++++ module/webui/styles/global.css | 114 ------------------------ 4 files changed, 142 insertions(+), 156 deletions(-) create mode 100644 module/webui/styles/file_selector.css diff --git a/module/webui/index.html b/module/webui/index.html index 70f06c0..1a2e117 100644 --- a/module/webui/index.html +++ b/module/webui/index.html @@ -10,6 +10,7 @@ + @@ -285,6 +286,20 @@ + +
+
+
+ +
/storage/emulated/0/Download
+ +
+
+
+
+
diff --git a/module/webui/scripts/menu_option.js b/module/webui/scripts/menu_option.js index 9055f8c..3dbc3d1 100644 --- a/module/webui/scripts/menu_option.js +++ b/module/webui/scripts/menu_option.js @@ -234,43 +234,7 @@ document.getElementById("validkb").addEventListener("click", async () => { }); }); -// Add file selector dialog elements dynamically -const fileSelector = document.createElement('div'); -fileSelector.className = 'file-selector-overlay'; -fileSelector.innerHTML = ` -
-
- -
/storage/emulated/0/Download
- -
-
-
-`; -document.body.appendChild(fileSelector); - -// Add styles for animations -const style = document.createElement('style'); -style.textContent = ` - .file-selector-overlay { - transition: opacity 0.3s ease; - opacity: 0; - } - .file-selector-overlay.visible { - opacity: 1; - } - .file-list { - transition: transform 0.3s ease, opacity 0.3s ease; - } - .file-list.switching { - transform: scale(0.95); - opacity: 0; - } -`; -document.head.appendChild(style); - +const fileSelector = document.querySelector('.file-selector-overlay'); let currentPath = '/storage/emulated/0/Download'; function updateCurrentPath() { @@ -309,7 +273,7 @@ async function listFiles(path, skipAnimation = false) { // Add back button item if not in root directory if (currentPath !== '/storage/emulated/0') { const backItem = document.createElement('div'); - backItem.className = 'file-item'; + backItem.className = 'file-item ripple-element'; backItem.innerHTML = ` @@ -333,7 +297,7 @@ async function listFiles(path, skipAnimation = false) { items.forEach(item => { if (item.path === path) return; const itemElement = document.createElement('div'); - itemElement.className = 'file-item'; + itemElement.className = 'file-item ripple-element'; itemElement.innerHTML = ` ${item.isDirectory ? @@ -420,7 +384,7 @@ document.querySelector('.back-button').addEventListener('click', async () => { // Close custom keybox selector document.querySelector('.close-selector').addEventListener('click', () => { - fileSelector.classList.remove('visible'); + fileSelector.style.opacity = '0'; document.body.classList.remove("no-scroll"); setTimeout(() => { fileSelector.style.display = 'none'; @@ -428,7 +392,7 @@ document.querySelector('.close-selector').addEventListener('click', () => { }); fileSelector.addEventListener('click', (event) => { if (event.target === fileSelector) { - fileSelector.classList.remove('visible'); + fileSelector.style.opacity = '0'; document.body.classList.remove("no-scroll"); setTimeout(() => { fileSelector.style.display = 'none'; @@ -441,7 +405,7 @@ document.getElementById('customkb').addEventListener('click', async () => { fileSelector.style.display = 'flex'; document.body.classList.add("no-scroll"); fileSelector.offsetHeight; - fileSelector.classList.add('visible'); + fileSelector.style.opacity = '1'; currentPath = '/storage/emulated/0/Download'; const currentPathElement = document.querySelector('.current-path'); currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('›'); diff --git a/module/webui/styles/file_selector.css b/module/webui/styles/file_selector.css new file mode 100644 index 0000000..a86c03a --- /dev/null +++ b/module/webui/styles/file_selector.css @@ -0,0 +1,121 @@ +.file-selector-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + transition: opacity 0.3s ease; + opacity: 0; + z-index: 2000; + justify-content: center; + align-items: center; +} + +.file-selector { + width: 90%; + max-width: 600px; + height: 80vh; + background-color: #fff; + border-radius: 15px; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.file-selector-header { + display: flex; + align-items: center; + padding: 10px; + border-bottom: 2px solid #ccc; +} + +.current-path .separator { + color: #6E6E6E; + padding: 0 4px; +} + +.back-button { + background: none; + border: none; + fill: #6E6E6E; + user-select: none; +} + +.current-path { + flex-grow: 1; + font-size: 16px; + overflow: scroll; + white-space: nowrap; +} + +.close-selector { + background: none; + border: none; + font-size: 20px; + color: #ccc; + padding: 5px; +} + +.file-list { + flex-grow: 1; + overflow-y: auto; + padding: 10px; + transition: transform 0.3s ease, opacity 0.3s ease; +} + +.file-list.switching { + transform: scale(0.95); + opacity: 0; +} + +.file-item { + display: flex; + align-items: center; + padding: 10px; + border-radius: 8px; + background-color: #fff; + position: relative; + overflow: hidden; + user-select: none; +} + +.file-item svg { + margin-right: 10px; + fill: #6E6E6E; +} + +.file-item span { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (prefers-color-scheme: dark) { + .file-selector { + background-color: #343434; + color: #fff; + } + + .file-selector-header { + border-bottom: 2px solid #232323; + } + + .file-item { + background-color: #343434; + } + + .current-path .separator { + color: #C2C2C2; + } + + .back-button { + fill: #C2C2C2; + } + + .file-item svg { + fill: #C2C2C2; + } +} \ No newline at end of file diff --git a/module/webui/styles/global.css b/module/webui/styles/global.css index 7293fb0..0a0b039 100644 --- a/module/webui/styles/global.css +++ b/module/webui/styles/global.css @@ -105,95 +105,6 @@ body { display: none; } -.file-selector-overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2000; - justify-content: center; - align-items: center; -} - -.file-selector { - width: 90%; - max-width: 600px; - height: 80vh; - background-color: #fff; - border-radius: 15px; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.file-selector-header { - display: flex; - align-items: center; - padding: 10px; - border-bottom: 1px solid #ccc; -} - -.current-path .separator { - color: #6E6E6E; - padding: 0 4px; -} - -.back-button { - background: none; - border: none; - padding: 5px; - margin-right: 10px; - fill: #6E6E6E; - user-select: none; -} - -.current-path { - flex-grow: 1; - font-size: 16px; - overflow: scroll; - white-space: nowrap; -} - -.close-selector { - background: none; - border: none; - font-size: 20px; - color: #ccc; - padding: 5px; -} - -.file-list { - flex-grow: 1; - overflow-y: auto; - padding: 10px; -} - -.file-item { - display: flex; - align-items: center; - padding: 10px; - border-radius: 8px; - background-color: #fff; - position: relative; - overflow: hidden; - user-select: none; -} - -.file-item svg { - margin-right: 10px; - fill: #6E6E6E; -} - -.file-item span { - flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - .permission-popup { position: fixed; top: 0; @@ -272,31 +183,6 @@ body { background-color: #121212; } - .file-selector { - background-color: #343434; - color: #fff; - } - - .file-selector-header { - border-bottom: 1px solid #6E6E6E; - } - - .file-item { - background-color: #343434; - } - - .current-path .separator { - color: #C2C2C2; - } - - .back-button { - fill: #C2C2C2; - } - - .file-item svg { - fill: #C2C2C2; - } - .permission-content { background-color: #343434; }