import { demoFunc } from './dees-simple-appdash.demo.js'; import * as colors from './00colors.js'; import { customElement, html, DeesElement, property, type TemplateResult, cssManager, css, unsafeCSS, type CSSResult, state, domtools, } from '@design.estate/dees-element'; import { DeesTerminal } from './dees-terminal.js'; declare global { interface HTMLElementTagNameMap { 'dees-simple-appdash': DeesSimpleAppDash; } } export interface IView { name: string; element: DeesElement['constructor']['prototype']; } @customElement('dees-simple-appdash') export class DeesSimpleAppDash extends DeesElement { // STATIC public static demo = demoFunc; // INSTANCE @property() public name = 'Dees Simple Login'; @property() public viewTabs: IView[] = []; public static styles = [ cssManager.defaultStyles, css` :host { color: ${cssManager.bdTheme('#333', '#ccc')}; user-select: none; display: block; position: relative; height: 100%; } .maincontainer { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow: hidden; } .appbar { position: fixed; top: 0; height: 32px; width: 100%; background: ${cssManager.bdTheme('#eeeeeb', '#222')}; border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')}; font-size: 14px; line-height: 32px; font-family: 'Roboto', 'Inter', sans-serif; padding: 0px 16px; z-index: 2; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.8); display: grid; grid-template-columns: min-content 1fr auto; } .appbar .viewTabs { padding: 0px 16px; display: flex; flex-direction: row; align-items: center; } .viewTab { padding: 0px 8px; } .viewTab:hover { background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)}; color: ${cssManager.bdTheme('#000', '#fff')}; } .viewTab:active { background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)}; color: ${cssManager.bdTheme('#000', '#fff')}; } .appName { white-space: nowrap; } .appActions { display: flex; } .appActions .action { } .appActions .action:hover { color: ${cssManager.bdTheme('#000', '#fff')}; } .appcontent { z-index: 1; position: fixed; top: 32px; height: calc(100vh - 32px - 24px); bottom: 24px; width: 100%; overflow: auto; background: ${cssManager.bdTheme('#eeeeeb', '#000')}; overscroll-behavior: contain; } .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; } `, ]; public render(): TemplateResult { return html`
${this.name}
${this.viewTabs.map( (view) => html`
{ this.loadView(view); }}>${view.name}
` )}
{ this.dispatchEvent(new CustomEvent('logout')); }}>Logout
`; } public async firstUpdated(_changedProperties): Promise { const domtools = await this.domtoolsPromise; super.firstUpdated(_changedProperties); await this.loadView(this.viewTabs[0]); } public async launchTerminal() { const maincontainer = this.shadowRoot.querySelector('.maincontainer'); const terminal = new DeesTerminal(); maincontainer.appendChild(terminal); terminal.style.position = 'absolute'; terminal.style.zIndex = '1'; terminal.style.top = '32px'; terminal.style.left = '0px'; terminal.style.right = '0px'; terminal.style.bottom = '24px'; terminal.style.opacity = '0'; terminal.style.transform = 'translateY(20px)'; terminal.style.transition = 'all 0.2s'; await domtools.plugins.smartdelay.delayFor(0); terminal.style.opacity = '1'; terminal.style.transform = 'translateY(0px)'; } private currentView: DeesElement; public async loadView(viewArg: IView) { const appcontent = this.shadowRoot.querySelector('.appcontent'); const view = new viewArg.element(); if (this.currentView) { this.currentView.remove(); } appcontent.appendChild(view); this.currentView = view; } }