feat(media): rename media tile components to thumbnail components and add shared thumbnail base exports

2026-04-04 08:13:56 +00:00
parent 10cd1e2755
commit 42b40da67c
27 changed files with 151 additions and 147 deletions
--- a/ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
@@ -0,0 +1,174 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const thumbnailBaseStyles = [
+  cssManager.defaultStyles,
+  css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .tile-container {
+      position: relative;
+      width: 200px;
+      height: 260px;
+      background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
+      border-radius: 4px;
+      overflow: hidden;
+      transition: box-shadow 0.2s ease;
+      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
+
+    }
+
+    .tile-container.clickable {
+      cursor: pointer;
+    }
+
+    .tile-container.clickable:hover {
+      box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
+    }
+
+    .tile-container.clickable:hover .tile-overlay {
+      opacity: 1;
+    }
+
+    .tile-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .tile-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      z-index: 20;
+    }
+
+    .tile-overlay dees-icon {
+      font-size: 24px;
+      color: white;
+    }
+
+    .tile-overlay span {
+      font-size: 14px;
+      font-weight: 500;
+      color: white;
+    }
+
+    .tile-info-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 4px 8px;
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.95)', 'hsl(215 20% 12% / 0.95)')};
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 10px;
+      font-weight: 500;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+      backdrop-filter: blur(12px);
+      z-index: 25;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .info-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .info-spacer {
+      flex: 1;
+    }
+
+    .info-detail {
+      white-space: nowrap;
+      opacity: 0.7;
+      flex-shrink: 0;
+    }
+
+    .tile-loading,
+    .tile-error {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+    }
+
+    .tile-loading {
+      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 14%)')};
+    }
+
+    .tile-error {
+      background: ${cssManager.bdTheme('hsl(0 72% 98%)', 'hsl(0 62% 20%)')};
+      color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
+    }
+
+    .tile-error dees-icon {
+      font-size: 32px;
+    }
+
+    .tile-spinner {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      border: 2px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
+      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      animation: spin 0.8s linear infinite;
+    }
+
+    .tile-loading-text,
+    .tile-error-text {
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* Size variants */
+    :host([size="small"]) .tile-container {
+      width: 150px;
+      height: 195px;
+    }
+
+    :host([size="large"]) .tile-container {
+      width: 250px;
+      height: 325px;
+    }
+
+    /* Grid optimizations */
+    :host([grid-mode]) .tile-container {
+      will-change: auto;
+    }
+  `,
+];