From 275bcf835152b5a93e8692203ac1fec93db2fae0 Mon Sep 17 00:00:00 2001 From: "matth@ultra" Date: Mon, 2 Sep 2024 14:28:06 +0200 Subject: [PATCH] restyle buttons --- src/config.html | 1 + src/index.html | 10 ++++++---- src/index.js | 41 +++++++++++++++++++++++++++++++++-------- src/sass/main.sass | 23 ++++++++++++++++++++--- src/style.css | 17 +++++++++++++++-- 5 files changed, 75 insertions(+), 17 deletions(-) diff --git a/src/config.html b/src/config.html index 4100c1d..8a91e39 100644 --- a/src/config.html +++ b/src/config.html @@ -5,6 +5,7 @@ Imgsort 2 - Config + diff --git a/src/index.html b/src/index.html index 0ec6e23..910160b 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,7 @@ Imgsort 2 + @@ -21,11 +22,12 @@
-
- No file - - +
+ + + +
diff --git a/src/index.js b/src/index.js index 345edd1..f18fa1b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ -const imageExtensions = ['gif','jpg','jpeg','png', 'webp']; +const imageExtensions = ['gif','jpg','jpeg','png', 'webp', 'svg', 'pdf']; const videoExtensions =['mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'mp4']; const audioExtensions =['mp3', 'ogg', 'wav', 'flac']; -const invalidFileNameCharsRe =/[^\\/\|:\*\?"<>]/; // dont allow \/|:*?<> +const invalidFileNameCharsRe =/[\\/\|:\*\?"<>]/; // dont allow \/|:*?<> const invalidFileNameChars = "\\/|:*?<>"; const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []); @@ -78,13 +78,13 @@ function renderMoveButtons() { const buttons = document.getElementById('move-buttons'); buttons.innerHTML = ''; mappings.forEach((directory, key) => { - const removeButton = document.createElement('button'); - removeButton.innerHTML = `${key} ${directory}`; - removeButton.onclick = function() { + const moveButton = document.createElement('button'); + moveButton.innerHTML = `${key} ${directory}`; + moveButton.onclick = function() { moveFile(directory); }; - removeButton.class = "move-button"; - buttons.appendChild(removeButton); + moveButton.className = "move-button"; + buttons.appendChild(moveButton); }); } @@ -216,6 +216,29 @@ function setCurrentFile() { } +function setCurrentFileFromName(filename) { + let idx = fileList.indexOf(filename); + if (idx < 0) { + message = `Can not set file from name '${filename}': Not found in list`; + statusLine.textContent = message; + console.error(message); + return; + } + currentFileIdx = idx; + setCurrentFile(); +} + +// Event delegation +document.getElementById('file-list').addEventListener('click', function(event) { + if (event.target && event.target.tagName === 'P') { + // Call the function with the content of the clicked paragraph + if (event.target.textContent != "No files") { + setCurrentFileFromName(event.target.textContent); + } + } +}); + + async function moveFile(directory) { if (!currentFile) { @@ -288,13 +311,15 @@ function skip() { async function initialize() { + // remove the value on reload + document.getElementById('filename').value = ""; await setStagingPath(); await setFileList(); renderMoveButtons(); renderFileList(); // setCurrentFile(); preloadNextFile(); - statusLine.textContent = "Loaded"; + statusLine.textContent = "Ready"; } // load existing mappings on page load diff --git a/src/sass/main.sass b/src/sass/main.sass index f65ab80..392f4cb 100644 --- a/src/sass/main.sass +++ b/src/sass/main.sass @@ -24,10 +24,13 @@ $file-height: 300px $splash-font-size: 40px $button-font-size: $font-size $button-padding: 8px +$move-button-font-size: $font-size - 2px +$move-button-padding: $button-padding - 2px * font-family: "Ubuntu", Verdana, sans-serif color: $fg + // font-size: $font-size html, body // fill entire screen so that footer is always on bottom @@ -94,6 +97,7 @@ footer min-height: $footer-height // idk why but this is required overflow-x: scroll overflow-y: hidden + white-space: nowrap * color: $bg .statusline @@ -117,6 +121,7 @@ a border-width: 1px border-color: $fg0-hard border-radius: 4px + font-family: $monofont // p // text-align: justify @@ -143,8 +148,13 @@ button, input filter: drop-shadow(0.1rem 0.1rem 0 $accent) font-family: $monofont margin: 0.2rem - .move-buttons - margin: 0 +.move-buttons + margin: 0 + +.move-button + font-size: $move-button-font-size + padding: $move-button-padding + button:hover color: $button-fg-hl background-color: $button-bg-hl @@ -206,13 +216,20 @@ button:hover margin: 0 padding: 0.1rem text-align: left +.file-list-item:hover + background: $dark-blue !important + color: $bg1 + cursor: pointer + + + .file-list-item:nth-child(even) background: $bg1 .file-list-item:nth-child(odd) background: $bg2 .selected-file-list-item - background: $dark-blue !important + background: $light-blue !important color: $bg1 diff --git a/src/style.css b/src/style.css index 59c7b66..61a8557 100644 --- a/src/style.css +++ b/src/style.css @@ -102,6 +102,7 @@ a { border-width: 1px; border-color: #1d2021; border-radius: 4px; + font-family: "UbuntuMono", monospace; } code { @@ -130,10 +131,16 @@ button, input { font-family: "UbuntuMono", monospace; margin: 0.2rem; } -button .move-buttons, input .move-buttons { + +.move-buttons { margin: 0; } +.move-button { + font-size: 14px; + padding: 6px; +} + button:hover { color: #282828; background-color: #ebdbb2; @@ -217,6 +224,12 @@ button:hover { text-align: left; } +.file-list-item:hover { + background: #458588 !important; + color: #ebdbb2; + cursor: pointer; +} + .file-list-item:nth-child(even) { background: #ebdbb2; } @@ -226,7 +239,7 @@ button:hover { } .selected-file-list-item { - background: #458588 !important; + background: #076678 !important; color: #ebdbb2; }