fix(dees-input-fileupload): enhance dropzone styles and improve file list rendering

ts_web/elements/dees-input-fileupload/component.ts

@@ -75,7 +75,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
           .required=${this.required}
         ></dees-label>
         <div
-          class="dropzone ${this.state === 'dragOver' ? 'dropzone--active' : ''} ${this.disabled ? 'dropzone--disabled' : ''}"
+          class="dropzone ${this.state === 'dragOver' ? 'dropzone--active' : ''} ${this.disabled ? 'dropzone--disabled' : ''} ${this.value.length > 0 ? 'dropzone--has-files' : ''}"
           role="button"
           tabindex=${this.disabled ? -1 : 0}
           aria-disabled=${this.disabled}
@@ -117,8 +117,8 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
           <div class="dropzone__meta">
             ${metaEntries.map((entry) => html`<span>${entry}</span>`)}
           </div>
+          ${this.renderFileList()}
         </div>
-        ${this.renderFileList()}
         ${this.validationMessage
           ? html`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`
           : html``}
@@ -128,14 +128,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
 
   private renderFileList(): TemplateResult {
     if (this.value.length === 0) {
-      return html`
+      return html``;
-        <div class="file-empty">
-          <div class="file-empty__title">No files selected</div>
-          <div class="file-empty__hint">
-            Selected files will be listed here
-          </div>
-        </div>
-      `;
     }
 
     return html`
@@ -199,8 +192,8 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
     if (this.disabled) {
       return;
     }
-    // Don't prevent default - let the click bubble
+    // Don't open file selector if clicking on the browse button or file list
-    if ((event.target as HTMLElement).closest('.dropzone__browse')) {
+    if ((event.target as HTMLElement).closest('.dropzone__browse, .file-list')) {
       return;
     }
     this.openFileSelector();

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;
+      gap: 12px;
-      padding: 16px 0 0 0;
+      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-size: 13px;
-      font-weight: 600;
+      font-weight: 500;
-      color: ${cssManager.bdTheme('hsl(215 16% 40%)', 'hsl(215 16% 70%)')};
+      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;
+      gap: 12px;
-      padding: 12px 14px;
+      padding: 10px 12px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 16%)')};
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.5)', 'hsl(215 20% 16% / 0.5)')};
-      border: 1px solid ${cssManager.bdTheme('hsl(213 27% 90%)', 'hsl(217 25% 28%)')};
+      border: 1px solid ${cssManager.bdTheme('hsl(213 27% 92%)', 'hsl(217 25% 26%)')};
-      border-radius: 10px;
+      border-radius: 8px;
-      box-shadow: ${cssManager.bdTheme('0 1px 2px rgba(15, 23, 42, 0.04)', '0 1px 2px rgba(0, 0, 0, 0.24)')};
+      transition: background 0.15s ease;
-      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
     }
 
     .file-row:hover {
-      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.8)', 'hsl(215 20% 16% / 0.8)')};
-      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);
     }
 
     .file-thumb {
-      width: 48px;
+      width: 36px;
-      height: 48px;
+      height: 36px;
-      border-radius: 12px;
+      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;
+      width: 18px;
-      height: 20px;
+      height: 18px;
       line-height: 1;
       flex-shrink: 0;
     }
@@ -287,9 +267,9 @@ export const fileuploadStyles = [
     }
 
     .remove-button {
-      width: 32px;
+      width: 28px;
-      height: 32px;
+      height: 28px;
-      border-radius: 8px;
+      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;
+      width: 14px;
-      height: 16px;
+      height: 14px;
-      font-size: 16px;
+      font-size: 14px;
       line-height: 1;
       flex-shrink: 0;
     }