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

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

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