4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Center buttons and allow file picker

Browse Source
This commit is contained in:
NicolasCantu 2025-06-09 10:23:49 +02:00
parent 85fe8cc251
commit 73cee5d144
1 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/account/document-validation.ts
View File

@ -17,25 +17,36 @@ export function getDocumentValidation(container: HTMLElement) {
}
container.innerHTML = '';
container.style.display = 'flex';
container.style.justifyContent = 'center';
container.style.gap = '2rem';
container.style.padding = '2rem';
container.style.cssText = `
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 2rem;
`;
const createDropButton = (label: string, onDrop: (file: File, updateVisuals: (file: File) => void) => void): HTMLElement => {
const button = document.createElement('div');
button.style.cssText = `
function createDropButton(
label: string,
onDrop: (file: File, updateVisuals: (file: File) => void) => void,
accept: string = '*/*'
): HTMLElement {
const wrapper = document.createElement('div');
wrapper.style.cssText = `
width: 200px;
height: 100px;
border: 2px dashed #888;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: bold;
background: #f8f8f8;
text-align: center;
padding: 0.5rem;
box-sizing: border-box;
`;
const title = document.createElement('div');
@ -50,35 +61,57 @@ export function getDocumentValidation(container: HTMLElement) {
text-align: center;
`;
button.appendChild(title);
button.appendChild(filename);
wrapper.appendChild(title);
wrapper.appendChild(filename);
const updateVisuals = (file: File) => {
button.style.borderColor = 'green';
button.style.background = '#e6ffed';
wrapper.style.borderColor = 'green';
wrapper.style.background = '#e6ffed';
filename.textContent = file.name;
};
button.ondragover = e => {
e.preventDefault();
button.style.background = '#e0e0e0';
// === Hidden file input ===
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = accept;
fileInput.style.display = 'none';
document.body.appendChild(fileInput);
fileInput.onchange = () => {
const file = fileInput.files?.[0];
if (file) {
onDrop(file, updateVisuals);
fileInput.value = ''; // reset so same file can be re-selected
}
};
button.ondragleave = () => {
button.style.background = '#f8f8f8';
// === Handle drag-and-drop ===
wrapper.ondragover = e => {
e.preventDefault();
wrapper.style.background = '#e0e0e0';
};
button.ondrop = async e => {
wrapper.ondragleave = () => {
wrapper.style.background = '#f8f8f8';
};
wrapper.ondrop = e => {
e.preventDefault();
button.style.background = '#f8f8f8';
wrapper.style.background = '#f8f8f8';
const file = e.dataTransfer?.files?.[0];
if (!file) return;
onDrop(file, updateVisuals);
if (file) {
onDrop(file, updateVisuals);
}
};
return button;
};
// === Handle click to open file manager ===
wrapper.onclick = () => {
fileInput.click();
};
return wrapper;
}
const fileDropButton = createDropButton('Drop file', async (file, updateVisuals) => {
try {
@ -120,8 +153,13 @@ export function getDocumentValidation(container: HTMLElement) {
}
});
container.appendChild(fileDropButton);
container.appendChild(certDropButton);
const buttonRow = document.createElement('div');
buttonRow.style.display = 'flex';
buttonRow.style.gap = '2rem';
buttonRow.appendChild(fileDropButton);
buttonRow.appendChild(certDropButton);
container.appendChild(buttonRow);
async function checkReady() {
if (state.file && state.certificate && state.commitmentHashes.length > 0) {