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">
<title>Imgsort 2 - Config</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>

10
src/index.html
View File

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

21
src/sass/main.sass
View File

@ -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
.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

17
src/style.css
View File

@ -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;
}