Michel2/image2cpp
1
0
Fork 0
mirror of https://github.com/javl/image2cpp.git synced 2026-09-11 09:03:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add previews to uploaded images

Browse Source
This commit is contained in:
javl
2026-08-15 15:03:23 +02:00
parent 4b90b66b4e
commit 872ed764f5
2 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+29 -3
View File
@@ -663,8 +663,8 @@ input[type="file"]::file-selector-button {
.remove-button {
margin: 0 0 0 10px;
padding: 2px 8px;
background: var(--surface-container-high);
color: var(--on-surface-variant);
/* background: var(--surface-container-high); */
/* color: var(--on-surface-variant); */
}
#no-images-error {
@@ -674,10 +674,16 @@ input[type="file"]::file-selector-button {
.file-input-entry {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin: 10px 0;
}
.file-input-entry span {
flex: 1;
min-width: 0;
}
.file-info {
color: var(--text-muted);
font-size: 12px;
@@ -704,12 +710,32 @@ input[type="file"]::file-selector-button {
}
#image-size-settings li {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 6px 0;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 8px 12px;
}
.image-size-thumb {
width: auto;
height: auto;
max-width: 100px;
max-height: 100px;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md, 4px);
background: var(--surface-variant, #fff);
flex-shrink: 0;
vertical-align: middle;
}
.image-size-details {
flex: 1;
min-width: 0;
}
/* ---- Preview canvases ---- */
#images-canvas-container {
js/script.js
+22 -6
View File
@@ -783,6 +783,11 @@ function handleImageSelection(evt) {
const fileInputColumnEntry = document.createElement('div');
fileInputColumnEntry.className = 'file-input-entry';
const fileInputColumnEntryThumb = document.createElement('img');
fileInputColumnEntryThumb.className = 'image-size-thumb';
fileInputColumnEntryThumb.src = img.src;
fileInputColumnEntryThumb.alt = file.name;
const fileInputColumnEntryLabel = document.createElement('span');
fileInputColumnEntryLabel.textContent = file.name;
@@ -795,6 +800,11 @@ function handleImageSelection(evt) {
const imageEntry = document.createElement('li');
imageEntry.setAttribute('data-img', file.name);
const thumb = document.createElement('img');
thumb.className = 'image-size-thumb';
thumb.src = img.src;
thumb.alt = file.name;
const w = document.createElement('input');
w.type = 'number';
w.name = 'width';
@@ -874,16 +884,22 @@ function handleImageSelection(evt) {
fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;
fileInputColumnEntry.appendChild(fileInputColumnEntryThumb);
fileInputColumnEntry.appendChild(fileInputColumnEntryLabel);
fileInputColumnEntry.appendChild(fileInputColumnEntryRemoveButton);
fileInputColumn.appendChild(fileInputColumnEntry);
imageEntry.appendChild(fn);
imageEntry.appendChild(w);
imageEntry.appendChild(document.createTextNode(' x '));
imageEntry.appendChild(h);
imageEntry.appendChild(gil);
imageEntry.appendChild(gi);
const imageEntryDetails = document.createElement('div');
imageEntryDetails.className = 'image-size-details';
imageEntryDetails.appendChild(fn);
imageEntryDetails.appendChild(w);
imageEntryDetails.appendChild(document.createTextNode(' x '));
imageEntryDetails.appendChild(h);
imageEntryDetails.appendChild(gil);
imageEntryDetails.appendChild(gi);
imageEntry.appendChild(thumb);
imageEntry.appendChild(imageEntryDetails);
imageSizeSettings.appendChild(imageEntry);