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

feat(dees-tile): unify tile badge styling and markup; replace component-specific badge classes with shared tile-badge classes and update related imports/tests

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-27 11:36:24 +00:00
parent 825a74b810
commit bfda6b75e7
17 changed files with 71 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ts_web/elements/00group-media/dees-tile-audio/component.ts
View File

@@ -84,20 +84,6 @@ export class DeesTileAudio extends DeesTileBase {
display: block;
}
.duration-badge {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
z-index: 10;
}
.play-overlay {
position: absolute;
@@ -177,7 +163,7 @@ export class DeesTileAudio extends DeesTileBase {
</div>
${this.duration > 0 ? html`
<div class="duration-badge">${this.formatTime(this.duration)}</div>
<div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
` : ''}
<div class="play-overlay">

15
ts_web/elements/00group-media/dees-tile-folder/component.ts
View File

@@ -109,19 +109,6 @@ export class DeesTileFolder extends DeesTileBase {
background: ${cssManager.bdTheme('hsl(215 15% 96%)', 'hsl(215 20% 16%)')};
}
.item-count-badge {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 10px;
font-weight: 600;
backdrop-filter: blur(8px);
z-index: 10;
}
`,
] as any;
@@ -158,7 +145,7 @@ export class DeesTileFolder extends DeesTileBase {
</div>
</div>
<div class="item-count-badge">
<div class="tile-badge-corner">
${this.items.length} item${this.items.length !== 1 ? 's' : ''}
</div>

18
ts_web/elements/00group-media/dees-tile-image/component.ts
View File

@@ -55,24 +55,12 @@ export class DeesTileImage extends DeesTileBase {
opacity: 0;
}
.dimension-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 10px;
font-weight: 600;
backdrop-filter: blur(8px);
z-index: 15;
pointer-events: none;
.tile-badge-topright.dimension-badge {
opacity: 0;
transition: opacity 0.2s ease;
}
.tile-container.clickable:hover .dimension-badge {
.tile-container.clickable:hover .tile-badge-topright.dimension-badge {
opacity: 1;
}
`,
@@ -110,7 +98,7 @@ export class DeesTileImage extends DeesTileBase {
</div>
${this.imageWidth > 0 && this.imageHeight > 0 ? html`
<div class="dimension-badge">
<div class="tile-badge-topright dimension-badge">
${this.imageWidth} × ${this.imageHeight}
</div>
` : ''}

27
ts_web/elements/00group-media/dees-tile-note/component.ts
View File

@@ -81,16 +81,10 @@ export class DeesTileNote extends DeesTileBase {
pointer-events: none;
}
.note-language {
position: absolute;
top: 8px;
right: 8px;
padding: 2px 6px;
.tile-badge-topright.note-language {
background: ${cssManager.bdTheme('hsl(215 20% 92%)', 'hsl(215 20% 88%)')};
color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 40%)')};
border-radius: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
z-index: 5;
}
@@ -116,21 +110,6 @@ export class DeesTileNote extends DeesTileBase {
padding-right: 6px;
}
.note-line-indicator {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
z-index: 10;
pointer-events: none;
}
`,
] as any;
@@ -154,7 +133,7 @@ export class DeesTileNote extends DeesTileBase {
return html`
<div class="note-content">
${this.language ? html`
<div class="note-language">${this.language}</div>
<div class="tile-badge-topright note-language">${this.language}</div>
` : ''}
${this.title ? html`
@@ -169,7 +148,7 @@ export class DeesTileNote extends DeesTileBase {
</div>
${this.isHovering && lines.length > 12 ? html`
<div class="note-line-indicator">
<div class="tile-badge-corner">
Line ${this.getVisibleLineRange(lines.length)}
</div>
` : ''}

7
ts_web/elements/00group-media/dees-tile-pdf/component.ts
View File

@@ -55,15 +55,14 @@ export class DeesTilePdf extends DeesTileBase {
</div>
${this.pageCount > 1 && this.isHovering ? html`
<div class="preview-page-indicator">
<div class="tile-badge">
Page ${this.currentPreviewPage} of ${this.pageCount}
</div>
` : ''}
${this.pageCount > 0 && !this.isHovering ? html`
<div class="tile-info">
<dees-icon icon="lucide:FileText"></dees-icon>
<span class="tile-info-text">${this.pageCount} page${this.pageCount > 1 ? 's' : ''}</span>
<div class="tile-badge-corner">
${this.pageCount} page${this.pageCount > 1 ? 's' : ''}
</div>
` : ''}

18
ts_web/elements/00group-media/dees-tile-pdf/styles.ts
View File

@@ -35,24 +35,6 @@ export const tilePdfStyles = css`
border-radius: 4px;
}
.preview-page-indicator {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
padding: 5px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-align: center;
backdrop-filter: blur(12px);
z-index: 15;
pointer-events: none;
animation: fadeIn 0.2s ease;
}
/* Grid optimizations */
:host([grid-mode]) .preview-canvas {
image-rendering: -webkit-optimize-contrast;

40
ts_web/elements/00group-media/dees-tile-shared/styles.ts
View File

@@ -117,6 +117,46 @@ export const tileBaseStyles = [
animation: fadeIn 0.2s ease;
}
.tile-badge-corner {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
z-index: 10;
pointer-events: none;
}
.tile-badge-topright {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 10px;
font-weight: 600;
backdrop-filter: blur(8px);
z-index: 15;
pointer-events: none;
}
/* Shift bottom badges up when label is present */
.tile-container:has(.tile-label) .tile-badge-corner {
bottom: 33px;
}
.tile-container:has(.tile-label) .tile-info {
bottom: 33px;
}
.tile-loading,
.tile-error {
position: absolute;

16
ts_web/elements/00group-media/dees-tile-video/component.ts
View File

@@ -54,20 +54,6 @@ export class DeesTileVideo extends DeesTileBase {
display: block;
}
.duration-badge {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
z-index: 10;
}
.play-overlay {
position: absolute;
@@ -155,7 +141,7 @@ export class DeesTileVideo extends DeesTileBase {
</div>
${this.duration > 0 ? html`
<div class="duration-badge">${this.formatTime(this.duration)}</div>
<div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
` : ''}
${!this.isHovering ? html`