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