fix(core): update

ts_web/elements/dees-simple-appdash.ts

@@ -1,4 +1,6 @@
 import { demoFunc } from './dees-simple-appdash.demo.js';
+import * as colors from './00colors.js';
+
 import {
   customElement,
   html,
@@ -10,7 +12,9 @@ import {
   unsafeCSS,
   type CSSResult,
   state,
+  domtools,
 } from '@design.estate/dees-element';
+import { DeesTerminal } from './dees-terminal.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +32,8 @@ export class DeesSimpleAppDash extends DeesElement {
   public name = 'Dees Simple Login';
 
   @property()
-  public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> = [];
+  public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
+    [];
 
   public static styles = [
     cssManager.defaultStyles,
@@ -40,12 +45,12 @@ export class DeesSimpleAppDash extends DeesElement {
       .appbar {
         position: fixed;
         top: 0;
-        height: 40px;
+        height: 32px;
         width: 100%;
         background: ${cssManager.bdTheme('#eeeeeb', '#222')};
         border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
         font-size: 14px;
-        line-height: 40px;
+        line-height: 32px;
         font-family: 'Roboto', 'Inter', sans-serif;
         padding: 0px 16px;
         z-index: 2;
@@ -62,7 +67,8 @@ export class DeesSimpleAppDash extends DeesElement {
         display: flex;
       }
 
-      .appActions .action {}
+      .appActions .action {
+      }
       .appActions .action:hover {
         color: ${cssManager.bdTheme('#000', '#fff')};
       }
@@ -70,13 +76,35 @@ export class DeesSimpleAppDash extends DeesElement {
       .appcontent {
         z-index: 1;
         position: fixed;
-        top: 40px;
-        height: calc(100vh - 40px);
-        bottom: 0px;
+        top: 32px;
+        height: calc(100vh - 32px - 24px);
+        bottom: 24px;
         width: 100%;
         overflow: auto;
         background: ${cssManager.bdTheme('#eeeeeb', '#000')};
       }
+
+      .controlbar {
+        color: #fff;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        width: 100%;
+        height: 24px;
+        background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
+        z-index: 2;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex-direction: row;
+      }
+
+      .control {
+        width: min-content;
+        margin-right: 16px;
+        font-size: 12px;
+        white-space: nowrap;
+      }
     `,
   ];
 
@@ -86,14 +114,20 @@ export class DeesSimpleAppDash extends DeesElement {
         <div class="appName">${this.name}</div>
         <div class="viewTabs"></div>
         <div class="appActions">
-          <div class="action">
-            Logout
-          </div>
+          <div class="action">Logout</div>
         </div>
       </div>
       <div class="appcontent">
         <slot></slot>
       </div>
+      <div class="controlbar">
+        <div class="control">
+          <dees-icon .iconFA=${'networkWired'}></dees-icon>
+        </div>
+        <div class="control" @click=${this.launchTerminal}>
+          <dees-icon .iconFA=${'terminal'}></dees-icon>
+        </div>
+      </div>
     `;
   }
 
@@ -101,4 +135,19 @@ export class DeesSimpleAppDash extends DeesElement {
     const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
   }
+
+  public async launchTerminal() {
+    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const terminal = new DeesTerminal();
+    terminal.style.position = 'absolute';
+    terminal.style.top = '0px';
+    terminal.style.left = '0px';
+    terminal.style.opacity = '0';
+    terminal.style.transform = 'translateY(20px)';
+    terminal.style.transition = 'all 0.2s';
+    appcontent.appendChild(terminal);
+    await domtools.plugins.smartdelay.delayFor(0);
+    terminal.style.opacity = '1';
+    terminal.style.transform = 'translateY(0px)';
+  }
 }