From 42fd0b276ef5e33d7252797e486cc0bff84e21c6 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Fri, 3 Apr 2026 12:37:57 +0000 Subject: [PATCH] fix(ui): standardize tile-based layouts across input, product card, and terminal preview components --- changelog.md | 7 + ts_web/00_commitinfo_data.ts | 2 +- .../dees-input-code/dees-input-code.ts | 19 +- .../dees-input-richtext/component.ts | 1 + .../dees-input-richtext/styles.ts | 30 ++- .../dees-input-richtext/template.ts | 10 +- .../dees-shopping-productcard.ts | 180 +++++++++--------- .../dees-workspace-terminal-preview.ts | 21 +- 8 files changed, 132 insertions(+), 138 deletions(-) diff --git a/changelog.md b/changelog.md index 0e00e48..5bb12a2 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-03 - 3.51.2 - fix(ui) +standardize tile-based layouts across input, product card, and terminal preview components + +- Replace custom card containers with dees-tile in code input, richtext editor, shopping product card, and terminal preview components +- Move toolbars and footers into dees-tile header/footer slots for more consistent structure and spacing +- Update hover, focus, and selected state styling to target dees-tile parts while preserving existing component behavior + ## 2026-04-03 - 3.51.1 - fix(repo) no changes to commit diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index adb53c9..6022f99 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.51.1', + version: '3.51.2', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts index c5f88db..3fa177a 100644 --- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts +++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts @@ -12,6 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js'; import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js'; import '../../00group-utility/dees-icon/dees-icon.js'; import '../../00group-layout/dees-label/dees-label.js'; +import '../../00group-layout/dees-tile/dees-tile.js'; import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js'; import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js'; @@ -105,24 +106,16 @@ export class DeesInputCode extends DeesInputBase { min-height: 0; } - .code-container { - display: flex; - flex-direction: column; + dees-tile { flex: 1; min-height: 0; - border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; - border-radius: 6px; - overflow: hidden; - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; } .toolbar { display: flex; align-items: center; justify-content: space-between; - padding: 8px 12px; - background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')}; - border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + padding: 4px 12px; gap: 8px; } @@ -256,8 +249,8 @@ export class DeesInputCode extends DeesInputBase {
-
-
+ +
-
+
`; } diff --git a/ts_web/elements/00group-input/dees-input-richtext/component.ts b/ts_web/elements/00group-input/dees-input-richtext/component.ts index 3228dbf..321afe5 100644 --- a/ts_web/elements/00group-input/dees-input-richtext/component.ts +++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts @@ -16,6 +16,7 @@ import { import type { Editor } from '@tiptap/core'; import { DeesServiceLibLoader, type ITiptapBundle } from '../../../services/index.js'; +import '../../00group-layout/dees-tile/dees-tile.js'; declare global { interface HTMLElementTagNameMap { diff --git a/ts_web/elements/00group-input/dees-input-richtext/styles.ts b/ts_web/elements/00group-input/dees-input-richtext/styles.ts index c7e4fa1..9b5a8dc 100644 --- a/ts_web/elements/00group-input/dees-input-richtext/styles.ts +++ b/ts_web/elements/00group-input/dees-input-richtext/styles.ts @@ -23,22 +23,15 @@ export const richtextStyles = [ color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; } - .editor-container { - display: flex; - flex-direction: column; - min-height: ${cssManager.bdTheme('200px', '200px')}; - border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; - border-radius: 6px; - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; - overflow: hidden; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + dees-tile { + min-height: 200px; } - .editor-container:hover { + dees-tile:hover::part(outer) { border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; } - .editor-container.focused { + dees-tile.focused::part(outer) { border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')}; } @@ -47,9 +40,7 @@ export const richtextStyles = [ display: flex; flex-wrap: wrap; gap: 4px; - padding: 8px 12px; - background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')}; - border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + padding: 4px 12px; align-items: center; position: relative; } @@ -199,14 +190,15 @@ export const richtextStyles = [ } .editor-footer { - padding: 8px 12px; - background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')}; - border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; - font-size: 12px; - color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; + padding: 0 12px; + height: 28px; + font-size: 11px; + color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; display: flex; justify-content: space-between; align-items: center; + width: 100%; + box-sizing: border-box; } .word-count { diff --git a/ts_web/elements/00group-input/dees-input-richtext/template.ts b/ts_web/elements/00group-input/dees-input-richtext/template.ts index b15d9e9..28e1a0b 100644 --- a/ts_web/elements/00group-input/dees-input-richtext/template.ts +++ b/ts_web/elements/00group-input/dees-input-richtext/template.ts @@ -5,8 +5,8 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult => return html`
${component.label ? html`` : ''} -
-
+ +
${component.renderToolbar()}
@@ -20,14 +20,14 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
${component.showWordCount ? html` -
+
${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}
` : ''} -
+ ${component.description ? html`
${component.description}
` : ''}
`; - + }; diff --git a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts index e2e8845..579461c 100644 --- a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts +++ b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts @@ -9,6 +9,7 @@ import { } from '@design.estate/dees-element'; import { demoFunc } from './dees-shopping-productcard.demo.js'; import { themeDefaultStyles } from '../../00theme.js'; +import '../../00group-layout/dees-tile/dees-tile.js'; declare global { interface HTMLElementTagNameMap { @@ -61,28 +62,20 @@ export class DeesShoppingProductcard extends DeesElement { display: block; } - .product-card { - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')}; - border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; - border-radius: 8px; - overflow: hidden; - transition: all 0.2s ease; - display: flex; - flex-direction: column; + dees-tile { height: 100%; - position: relative; } - .product-card:hover { + dees-tile:hover::part(outer) { border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1); } - .product-card.selectable { + dees-tile.selectable { cursor: pointer; } - .product-card.selected { + dees-tile.selected::part(outer) { border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')}; box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.1)', 'hsl(213.1 93.9% 67.8% / 0.1)')}; } @@ -143,36 +136,48 @@ export class DeesShoppingProductcard extends DeesElement { transform: scale(1); } - .product-content { - padding: 16px; + .product-header-bar { display: flex; - flex-direction: column; - gap: 12px; - flex: 1; + align-items: center; + justify-content: space-between; + height: 32px; + padding: 0 16px; + gap: 8px; } - - .product-header { - display: flex; - flex-direction: column; - gap: 4px; + + .product-name { + font-size: 14px; + font-weight: 500; + color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')}; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .product-category { - font-size: 12px; + font-size: 11px; font-weight: 500; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')}; text-transform: uppercase; letter-spacing: 0.05em; - line-height: 1.3; - } - - .product-name { - font-size: 16px; - font-weight: 600; - color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; - line-height: 1.4; + white-space: nowrap; + flex-shrink: 0; } + .product-body { + display: flex; + flex-direction: column; + height: 100%; + } + + .product-content { + padding: 12px 16px; + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; + } + .product-description { font-size: 13px; color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; @@ -185,8 +190,9 @@ export class DeesShoppingProductcard extends DeesElement { align-items: center; justify-content: space-between; gap: 16px; - padding-top: 12px; - border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + padding: 12px 16px; + width: 100%; + box-sizing: border-box; } .product-price { @@ -248,66 +254,68 @@ export class DeesShoppingProductcard extends DeesElement { }; return html` -
-
- ${imageUrl ? html` - ${name} - ` : html` - - `} - ${this.selectable ? html` -
{ - e.stopPropagation(); - this.handleSelectionToggle(); - }} - > - -
- ` : ''} +
+ ${name} + ${category ? html`${category}` : ''}
-
-
- ${category ? html`
${category}
` : ''} -
${name}
-
- ${description ? html` -
${description}
- ` : ''} -
- - ${stockText} -
-
-
- ${formatPrice(price)} - ${originalPrice && originalPrice > price ? html` - ${formatPrice(originalPrice)} - ` : ''} -
- ${this.showQuantitySelector ? html` - { - this.quantity = e.detail.getValue(); - this.dispatchEvent(new CustomEvent('quantityChange', { - detail: { - quantity: this.quantity, - productData: this.productData - }, - bubbles: true, - composed: true - })); +
+
+ ${imageUrl ? html` + ${name} + ` : html` + + `} + ${this.selectable ? html` +
{ + e.stopPropagation(); + this.handleSelectionToggle(); }} - > + > + +
` : ''}
+
+ ${description ? html` +
${description}
+ ` : ''} +
+ + ${stockText} +
+
-
+
+
+ ${formatPrice(price)} + ${originalPrice && originalPrice > price ? html` + ${formatPrice(originalPrice)} + ` : ''} +
+ ${this.showQuantitySelector ? html` + { + this.quantity = e.detail.getValue(); + this.dispatchEvent(new CustomEvent('quantityChange', { + detail: { + quantity: this.quantity, + productData: this.productData + }, + bubbles: true, + composed: true + })); + }} + > + ` : ''} +
+ `; } diff --git a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts index 2a4a0bb..c09eca5 100644 --- a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts +++ b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts @@ -11,6 +11,7 @@ import type { Terminal } from 'xterm'; import type { FitAddon } from 'xterm-addon-fit'; import { themeDefaultStyles } from '../../00theme.js'; import { DeesServiceLibLoader } from '../../../services/index.js'; +import '../../00group-layout/dees-tile/dees-tile.js'; declare global { interface HTMLElementTagNameMap { @@ -68,27 +69,19 @@ export class DeesWorkspaceTerminalPreview extends DeesElement { height: 200px; } - .terminal-preview { + dees-tile { height: 100%; - border-radius: 8px; - overflow: hidden; - background: ${cssManager.bdTheme('#ffffff', '#000000')}; - border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')}; - display: flex; - flex-direction: column; } .terminal-header { display: flex; align-items: center; gap: 8px; - padding: 8px 12px; - background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')}; + padding: 0 12px; + height: 32px; font-size: 12px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; - border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')}; - flex-shrink: 0; } .terminal-header-icon { @@ -262,15 +255,15 @@ export class DeesWorkspaceTerminalPreview extends DeesElement { public render(): TemplateResult { return html` -
-
+ +
$ ${this.command || 'Waiting...'}
-
+ `; }