MatthiasQuintern/imgsort2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyle buttons

Browse Source
This commit is contained in:
matth@ultra 2024-09-02 14:28:06 +02:00
parent 8cfba22090
commit 275bcf8351
5 changed files with 75 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/config.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imgsort 2 - Config</title> <title>Imgsort 2 - Config</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head> </head>
<body> <body>

10
src/index.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imgsort 2</title> <title>Imgsort 2</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head> </head>
<body> <body>
<script src="index.js" async></script> <script src="index.js" async></script>
@ -21,11 +22,12 @@
</div> </div>
<div class="second-box"> <div class="second-box">
<div id="buttons"> <div class="buttons" id="buttons">
<input id="filename" placeholder="filename" type="text" class="filename-input">No file</input> <input id="filename" placeholder="filename" type="text" class="filename-input"></input>
<button onclick="undo()" id="undo-button">Undo</button> <button onclick="undo()" class="move-button" id="undo-button">Undo</button>
<button onclick="skip()" id="skip-button">Skip</button> <button onclick="skip()" class="move-button" id="skip-button">Skip</button>
<span class="move-buttons" id="move-buttons"></span> <span class="move-buttons" id="move-buttons"></span>
<br>
<button onclick="window.location.href='config.html';" id="configure-button">Configure</button> <button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
</div> </div>
<div class="file-list"> <div class="file-list">

41
src/index.js
View File

@ -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 videoExtensions =['mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'mp4'];
const audioExtensions =['mp3', 'ogg', 'wav', 'flac']; const audioExtensions =['mp3', 'ogg', 'wav', 'flac'];
const invalidFileNameCharsRe =/[^\\/\|:\*\?"<>]/; // dont allow \/|:*?<> const invalidFileNameCharsRe =/[\\/\|:\*\?"<>]/; // dont allow \/|:*?<>
const invalidFileNameChars = "\\/|:*?<>"; const invalidFileNameChars = "\\/|:*?<>";
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []); const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
@ -78,13 +78,13 @@ function renderMoveButtons() {
const buttons = document.getElementById('move-buttons'); const buttons = document.getElementById('move-buttons');
buttons.innerHTML = ''; buttons.innerHTML = '';
mappings.forEach((directory, key) => { mappings.forEach((directory, key) => {
const removeButton = document.createElement('button'); const moveButton = document.createElement('button');
removeButton.innerHTML = `<span class="key">${key}</span> <span class="directory">${directory}</span>`; moveButton.innerHTML = `<span class="key">${key}</span> <span class="directory">${directory}</span>`;
removeButton.onclick = function() { moveButton.onclick = function() {
moveFile(directory); moveFile(directory);
}; };
removeButton.class = "move-button"; moveButton.className = "move-button";
buttons.appendChild(removeButton); 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) { async function moveFile(directory) {
if (!currentFile) { if (!currentFile) {
@ -288,13 +311,15 @@ function skip() {
async function initialize() { async function initialize() {
// remove the value on reload
document.getElementById('filename').value = "";
await setStagingPath(); await setStagingPath();
await setFileList(); await setFileList();
renderMoveButtons(); renderMoveButtons();
renderFileList(); renderFileList();
// setCurrentFile(); // setCurrentFile();
preloadNextFile(); preloadNextFile();
statusLine.textContent = "Loaded"; statusLine.textContent = "Ready";
} }
// load existing mappings on page load // load existing mappings on page load

19
src/sass/main.sass
View File

@ -24,10 +24,13 @@ $file-height: 300px
$splash-font-size: 40px $splash-font-size: 40px
$button-font-size: $font-size $button-font-size: $font-size
$button-padding: 8px $button-padding: 8px
$move-button-font-size: $font-size - 2px
$move-button-padding: $button-padding - 2px
* *
font-family: "Ubuntu", Verdana, sans-serif font-family: "Ubuntu", Verdana, sans-serif
color: $fg color: $fg
// font-size: $font-size
html, body // fill entire screen so that footer is always on bottom 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 min-height: $footer-height // idk why but this is required
overflow-x: scroll overflow-x: scroll
overflow-y: hidden overflow-y: hidden
white-space: nowrap
* *
color: $bg color: $bg
.statusline .statusline
@ -117,6 +121,7 @@ a
border-width: 1px border-width: 1px
border-color: $fg0-hard border-color: $fg0-hard
border-radius: 4px border-radius: 4px
font-family: $monofont
// p // p
// text-align: justify // text-align: justify
@ -145,6 +150,11 @@ button, input
margin: 0.2rem margin: 0.2rem
.move-buttons .move-buttons
margin: 0 margin: 0
.move-button
font-size: $move-button-font-size
padding: $move-button-padding
button:hover button:hover
color: $button-fg-hl color: $button-fg-hl
background-color: $button-bg-hl background-color: $button-bg-hl
@ -206,13 +216,20 @@ button:hover
margin: 0 margin: 0
padding: 0.1rem padding: 0.1rem
text-align: left text-align: left
.file-list-item:hover
background: $dark-blue !important
color: $bg1
cursor: pointer
.file-list-item:nth-child(even) .file-list-item:nth-child(even)
background: $bg1 background: $bg1
.file-list-item:nth-child(odd) .file-list-item:nth-child(odd)
background: $bg2 background: $bg2
.selected-file-list-item .selected-file-list-item
background: $dark-blue !important background: $light-blue !important
color: $bg1 color: $bg1

17
src/style.css
View File

@ -102,6 +102,7 @@ a {
border-width: 1px; border-width: 1px;
border-color: #1d2021; border-color: #1d2021;
border-radius: 4px; border-radius: 4px;
font-family: "UbuntuMono", monospace;
} }
code { code {
@ -130,10 +131,16 @@ button, input {
font-family: "UbuntuMono", monospace; font-family: "UbuntuMono", monospace;
margin: 0.2rem; margin: 0.2rem;
} }
button .move-buttons, input .move-buttons {
.move-buttons {
margin: 0; margin: 0;
} }
.move-button {
font-size: 14px;
padding: 6px;
}
button:hover { button:hover {
color: #282828; color: #282828;
background-color: #ebdbb2; background-color: #ebdbb2;
@ -217,6 +224,12 @@ button:hover {
text-align: left; text-align: left;
} }
.file-list-item:hover {
background: #458588 !important;
color: #ebdbb2;
cursor: pointer;
}
.file-list-item:nth-child(even) { .file-list-item:nth-child(even) {
background: #ebdbb2; background: #ebdbb2;
} }
@ -226,7 +239,7 @@ button:hover {
} }
.selected-file-list-item { .selected-file-list-item {
background: #458588 !important; background: #076678 !important;
color: #ebdbb2; color: #ebdbb2;
} }