From 0b2675c7e5a1287ce08186ff4a0804326bbf3487 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Fri, 19 Sep 2025 17:35:58 +0000 Subject: [PATCH] fix(dees-input-fileupload): enhance dropzone styles and improve file list rendering --- .../dees-input-fileupload/component.ts | 17 ++-- .../elements/dees-input-fileupload/styles.ts | 82 +++++++------------ 2 files changed, 36 insertions(+), 63 deletions(-) diff --git a/ts_web/elements/dees-input-fileupload/component.ts b/ts_web/elements/dees-input-fileupload/component.ts index c3e6db3..fab5c17 100644 --- a/ts_web/elements/dees-input-fileupload/component.ts +++ b/ts_web/elements/dees-input-fileupload/component.ts @@ -75,7 +75,7 @@ export class DeesInputFileupload extends DeesInputBase { .required=${this.required} >
{
${metaEntries.map((entry) => html`${entry}`)}
+ ${this.renderFileList()}
- ${this.renderFileList()} ${this.validationMessage ? html`
${this.validationMessage}
` : html``} @@ -128,14 +128,7 @@ export class DeesInputFileupload extends DeesInputBase { private renderFileList(): TemplateResult { if (this.value.length === 0) { - return html` -
-
No files selected
-
- Selected files will be listed here -
-
- `; + return html``; } return html` @@ -199,8 +192,8 @@ export class DeesInputFileupload extends DeesInputBase { if (this.disabled) { return; } - // Don't prevent default - let the click bubble - if ((event.target as HTMLElement).closest('.dropzone__browse')) { + // Don't open file selector if clicking on the browse button or file list + if ((event.target as HTMLElement).closest('.dropzone__browse, .file-list')) { return; } this.openFileSelector(); diff --git a/ts_web/elements/dees-input-fileupload/styles.ts b/ts_web/elements/dees-input-fileupload/styles.ts index f9c6a1f..84970c2 100644 --- a/ts_web/elements/dees-input-fileupload/styles.ts +++ b/ts_web/elements/dees-input-fileupload/styles.ts @@ -40,6 +40,10 @@ export const fileuploadStyles = [ background: ${cssManager.bdTheme('hsl(217 91% 60% / 0.06)', 'hsl(213 93% 68% / 0.12)')}; } + .dropzone--has-files { + background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 11%)')}; + } + .dropzone--disabled { opacity: 0.6; pointer-events: none; @@ -133,43 +137,22 @@ export const fileuploadStyles = [ border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(213 93% 24%)')}; } - .file-empty { - display: flex; - flex-direction: column; - gap: 12px; - padding: 16px 0; - } - - .file-empty__title { - font-size: 14px; - font-weight: 600; - color: ${cssManager.bdTheme('hsl(215 16% 40%)', 'hsl(215 16% 70%)')}; - } - - .file-empty__hint { - font-size: 12px; - color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 65%)')}; - line-height: 1.5; - padding: 12px 16px; - border-radius: 8px; - background: ${cssManager.bdTheme('hsl(210 20% 97%)', 'hsl(215 20% 15%)')}; - border: 1px solid ${cssManager.bdTheme('hsl(213 27% 92%)', 'hsl(217 20% 22%)')}; - } - .file-list { display: flex; flex-direction: column; - gap: 16px; - padding: 16px 0 0 0; + gap: 12px; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(213 93% 24%)')}; } .file-list__header { display: flex; align-items: center; justify-content: space-between; - font-size: 14px; - font-weight: 600; - color: ${cssManager.bdTheme('hsl(215 16% 40%)', 'hsl(215 16% 70%)')}; + font-size: 13px; + font-weight: 500; + color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 68%)')}; } .file-list__clear { @@ -196,25 +179,22 @@ export const fileuploadStyles = [ .file-row { display: flex; align-items: center; - gap: 16px; - padding: 12px 14px; - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 16%)')}; - border: 1px solid ${cssManager.bdTheme('hsl(213 27% 90%)', 'hsl(217 25% 28%)')}; - border-radius: 10px; - box-shadow: ${cssManager.bdTheme('0 1px 2px rgba(15, 23, 42, 0.04)', '0 1px 2px rgba(0, 0, 0, 0.24)')}; - transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; + gap: 12px; + padding: 10px 12px; + background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.5)', 'hsl(215 20% 16% / 0.5)')}; + border: 1px solid ${cssManager.bdTheme('hsl(213 27% 92%)', 'hsl(217 25% 26%)')}; + border-radius: 8px; + transition: background 0.15s ease; } .file-row:hover { - border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')}; - box-shadow: ${cssManager.bdTheme('0 10px 24px rgba(15, 23, 42, 0.08)', '0 12px 30px rgba(0, 0, 0, 0.35)')}; - transform: translateY(-1px); + background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.8)', 'hsl(215 20% 16% / 0.8)')}; } .file-thumb { - width: 48px; - height: 48px; - border-radius: 12px; + width: 36px; + height: 36px; + border-radius: 8px; background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 32% 18%)')}; display: flex; align-items: center; @@ -224,11 +204,11 @@ export const fileuploadStyles = [ } .file-thumb dees-icon { - font-size: 20px; + font-size: 18px; color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 70%)')}; display: block; - width: 20px; - height: 20px; + width: 18px; + height: 18px; line-height: 1; flex-shrink: 0; } @@ -287,9 +267,9 @@ export const fileuploadStyles = [ } .remove-button { - width: 32px; - height: 32px; - border-radius: 8px; + width: 28px; + height: 28px; + border-radius: 6px; background: transparent; border: none; cursor: pointer; @@ -301,7 +281,7 @@ export const fileuploadStyles = [ } .remove-button:hover { - background: ${cssManager.bdTheme('hsl(0 72% 50% / 0.12)', 'hsl(0 62% 32% / 0.2)')}; + background: ${cssManager.bdTheme('hsl(0 72% 50% / 0.08)', 'hsl(0 62% 32% / 0.15)')}; color: ${cssManager.bdTheme('hsl(0 72% 46%)', 'hsl(0 70% 70%)')}; } @@ -311,9 +291,9 @@ export const fileuploadStyles = [ .remove-button dees-icon { display: block; - width: 16px; - height: 16px; - font-size: 16px; + width: 14px; + height: 14px; + font-size: 14px; line-height: 1; flex-shrink: 0; }