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

ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -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>
     `;
   }
 

ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

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

ts_web/elements/00group-layout/dees-tile/dees-tile.ts

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