design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-19 17:35:58 +00:00
parent 12b0aa0aad
commit 0b2675c7e5
2 changed files with 36 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ts_web/elements/dees-input-fileupload/component.ts
View File

@@ -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>
</div>
${this.renderFileList()}
</div>
${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`
<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``;
}
return html`
@@ -199,8 +192,8 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
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();

82
ts_web/elements/dees-input-fileupload/styles.ts
View File

@@ -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;
}