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

fix(ui): standardize tile-based layouts across input, product card, and terminal preview components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 12:37:57 +00:00
parent 23d672040c
commit 42fd0b276e
8 changed files with 132 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
View File

@@ -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<string> {
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<string> {
</style>
<div class="input-wrapper">
<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
<div class="code-container">
<div class="toolbar">
<dees-tile>
<div slot="header" class="toolbar">
<div class="toolbar-left">
<div class="language-selector">
<button
@@ -322,7 +315,7 @@ export class DeesInputCode extends DeesInputBase<string> {
@content-change=${this.handleContentChange}
></dees-workspace-monaco>
</div>
</div>
</dees-tile>
</div>
`;
}

1
ts_web/elements/00group-input/dees-input-richtext/component.ts
View File

@@ -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 {

30
ts_web/elements/00group-input/dees-input-richtext/styles.ts
View File

@@ -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 {

10
ts_web/elements/00group-input/dees-input-richtext/template.ts
View File

@@ -5,8 +5,8 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
return html`
<div class="input-wrapper">
${component.label ? html`<label class="label">${component.label}</label>` : ''}
<div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
<div class="editor-toolbar">
<dees-tile class="${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
<div slot="header" class="editor-toolbar">
${component.renderToolbar()}
<div class="link-input ${component.showLinkInput ? 'show' : ''}">
<input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
@@ -20,14 +20,14 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
<div class="editor-content"></div>
${component.showWordCount
? html`
<div class="editor-footer">
<div slot="footer" class="editor-footer">
<span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
</div>
`
: ''}
</div>
</dees-tile>
${component.description ? html`<div class="description">${component.description}</div>` : ''}
</div>
`;
};