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

feat(dataview): integrate dees-tile component for improved layout and styling

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 12:08:06 +00:00
parent 24f96788d5
commit 23d672040c
3 changed files with 78 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
View File

@@ -17,6 +17,7 @@ import * as smartstring from '@push.rocks/smartstring';
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js'; import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
import { DeesServiceLibLoader } from '../../../services/index.js'; import { DeesServiceLibLoader } from '../../../services/index.js';
import '../../00group-layout/dees-tile/dees-tile.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@@ -55,32 +56,20 @@ export class DeesDataviewCodebox extends DeesElement {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.mainbox { dees-tile {
position: relative;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%; height: 100%;
box-sizing: border-box; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.appbar { .appbar {
position: relative;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
height: 32px; height: 32px;
display: flex; display: flex;
font-size: 13px; font-size: 13px;
line-height: 32px; line-height: 32px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-shrink: 0; padding: 0 16px;
} }
.appbar .fileName { .appbar .fileName {
@@ -91,18 +80,16 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.bottomBar { .bottomBar {
position: relative;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
height: 28px; height: 28px;
font-size: 12px; font-size: 11px;
line-height: 28px; line-height: 28px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: stretch; align-items: center;
overflow: hidden; padding: 0 16px;
flex-shrink: 0; width: 100%;
box-sizing: border-box;
} }
.spacesLabel { .spacesLabel {
@@ -201,8 +188,7 @@ export class DeesDataviewCodebox extends DeesElement {
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
</style> </style>
<div <dees-tile
class="mainbox"
@contextmenu="${(eventArg: MouseEvent) => { @contextmenu="${(eventArg: MouseEvent) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [ DeesContextmenu.openContextMenuWithOptions(eventArg, [
{ {
@@ -215,7 +201,7 @@ export class DeesDataviewCodebox extends DeesElement {
]); ]);
}}" }}"
> >
<div class="appbar"> <div slot="header" class="appbar">
<div class="fileName">index.ts</div> <div class="fileName">index.ts</div>
</div> </div>
<div class="codegrid"> <div class="codegrid">
@@ -230,11 +216,11 @@ export class DeesDataviewCodebox extends DeesElement {
</div> </div>
<pre><code></code></pre> <pre><code></code></pre>
</div> </div>
<div class="bottomBar"> <div slot="footer" class="bottomBar">
<div class="spacesLabel">Spaces: 2</div> <div class="spacesLabel">Spaces: 2</div>
<div class="languageLabel">${this.progLang}</div> <div class="languageLabel">${this.progLang}</div>
</div> </div>
</div> </dees-tile>
`; `;
} }

123
ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
View File

@@ -17,6 +17,7 @@ import {
import * as tsclass from '@tsclass/tsclass'; import * as tsclass from '@tsclass/tsclass';
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js'; import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js'; import { themeDefaultStyles } from '../../00theme.js';
import '../../00group-layout/dees-tile/dees-tile.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@@ -40,35 +41,28 @@ export class DeesDataviewStatusobject extends DeesElement {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
} }
.mainbox { dees-tile {
border-radius: 8px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
min-height: 48px;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
cursor: default; cursor: default;
overflow: hidden;
} }
.heading { .heading {
display: grid; display: flex;
align-items: center; align-items: center;
grid-template-columns: 48px auto 100px; gap: 8px;
height: 56px; height: 32px;
padding: 0 16px; padding: 0 16px;
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%)')};
} }
h1 { h1 {
display: block; display: block;
margin: 0px; margin: 0;
padding: 0px 12px; padding: 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
flex: 1;
} }
.statusdot { .statusdot {
@@ -82,13 +76,13 @@ export class DeesDataviewStatusobject extends DeesElement {
} }
.copyMain { .copyMain {
font-size: 12px; font-size: 11px;
font-weight: 500; font-weight: 500;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
text-align: center; text-align: center;
padding: 6px 12px; padding: 4px 10px;
border-radius: 6px; border-radius: 4px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
@@ -122,63 +116,70 @@ export class DeesDataviewStatusobject extends DeesElement {
} }
.detail { .detail {
min-height: 60px; display: flex;
align-items: center; align-items: center;
display: grid; gap: 10px;
grid-template-columns: 48px auto; height: 36px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
transition: background-color 0.15s ease;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
transition: background-color 0.15s ease;
cursor: context-menu; cursor: context-menu;
} }
.detail:hover { .detail:last-child {
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')}; border-bottom: none;
} }
.detail:active { .detail:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')}; background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.06)')};
}
.detail .statusdot {
margin: 0;
flex-shrink: 0;
} }
.detail .detailsText { .detail .detailsText {
padding: 12px; display: flex;
word-break: break-all; align-items: baseline;
flex: 1;
min-width: 0;
} }
.detail .detailsText .label { .detail .detailsText .label {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
margin-bottom: 2px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} white-space: nowrap;
.detail .detailsText .value {
font-size: 14px;
font-family: 'Intel One Mono', 'Geist Mono', monospace;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
line-height: 1.5;
}
.bottomBar {
position: relative;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
height: 28px;
font-size: 12px;
line-height: 28px;
display: flex;
justify-content: flex-end;
align-items: stretch;
overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
} }
.bottomBar .statusLabel { .detail .detailsText .value {
padding: 0 16px; font-size: 13px;
font-family: 'Intel One Mono', 'Geist Mono', monospace;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
margin-left: auto;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottomBar {
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
height: 28px;
font-size: 11px;
line-height: 28px;
display: flex; display: flex;
justify-content: flex-end;
align-items: center; align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.bottomBar .statusLabel {
font-weight: 500; font-weight: 500;
} }
`, `,
@@ -186,8 +187,8 @@ export class DeesDataviewStatusobject extends DeesElement {
render(): TemplateResult { render(): TemplateResult {
return html` return html`
<div class="mainbox"> <dees-tile>
<div class="heading"> <div slot="header" class="heading">
<div class="statusdot ${this.statusObject?.combinedStatus}"></div> <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
<h1>${this.statusObject?.name || 'No status object assigned'}</h1> <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
<div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div> <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
@@ -224,19 +225,19 @@ export class DeesDataviewStatusobject extends DeesElement {
}} }}
> >
<div class="statusdot ${detailArg.status}"></div> <div class="statusdot ${detailArg.status}"></div>
<div class="detailsText"> <span class="detailsText">
<div class="label">${detailArg.name}</div> <span class="label">${detailArg.name}</span>
<div class="value">${detailArg.value}</div> <span class="value">${detailArg.value}</span>
</div> </span>
</div> </div>
`; `;
})} })}
<div class="bottomBar"> <div slot="footer" class="bottomBar">
<div class="statusLabel">${this.statusObject?.lastUpdated <div class="statusLabel">${this.statusObject?.lastUpdated
? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}` ? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
: ''}</div> : ''}</div>
</div> </div>
</div> </dees-tile>
`; `;
} }

4
ts_web/elements/00group-layout/dees-tile/dees-tile.ts
View File

@@ -92,8 +92,8 @@ export class DeesTile extends DeesElement {
flex: 1; flex: 1;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
overflow: hidden; overflow: hidden;
} }