dees-catalog/ts_web/elements/dees-simple-appdash.ts
2024-01-22 17:25:55 +01:00

157 lines
3.9 KiB
TypeScript

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;
}
}
@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
// STATIC
public static demo = demoFunc;
// INSTANCE
@property()
public name = 'Dees Simple Login';
@property()
public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
[];
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#ccc')};
user-select: none;
display: block;
position: relative;
height: 100%;
}
.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;
}
.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')};
}
.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`
<div class="appbar">
<div class="appName">${this.name}</div>
<div class="viewTabs"></div>
<div class="appActions">
<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>
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
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)';
}
}