dees-catalog/ts_web/elements/dees-simple-appdash.ts

220 lines
5.5 KiB
TypeScript
Raw Normal View History

2023-09-09 11:34:46 +00:00
import { demoFunc } from './dees-simple-appdash.demo.js';
2024-01-22 16:12:58 +00:00
import * as colors from './00colors.js';
2023-09-09 11:34:46 +00:00
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
2024-01-22 16:12:58 +00:00
domtools,
2023-09-09 11:34:46 +00:00
} from '@design.estate/dees-element';
2024-01-22 16:12:58 +00:00
import { DeesTerminal } from './dees-terminal.js';
2023-09-09 11:34:46 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-simple-appdash': DeesSimpleAppDash;
}
}
2024-01-22 21:30:44 +00:00
export interface IView {
name: string;
element: DeesElement['constructor']['prototype'];
}
2023-09-09 11:34:46 +00:00
@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
// STATIC
public static demo = demoFunc;
// INSTANCE
@property()
2023-09-12 23:37:02 +00:00
public name = 'Dees Simple Login';
2023-09-09 11:34:46 +00:00
2024-01-22 21:30:44 +00:00
@property()
public viewTabs: IView[] = [];
2023-09-09 11:34:46 +00:00
public static styles = [
cssManager.defaultStyles,
css`
:host {
2024-01-22 00:26:13 +00:00
color: ${cssManager.bdTheme('#333', '#ccc')};
2023-09-09 11:34:46 +00:00
user-select: none;
2024-01-22 16:25:55 +00:00
display: block;
position: relative;
height: 100%;
2023-09-09 11:34:46 +00:00
}
2024-01-22 18:40:08 +00:00
.maincontainer {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
}
2023-09-09 11:34:46 +00:00
.appbar {
2024-01-21 23:59:25 +00:00
position: fixed;
2023-09-09 11:34:46 +00:00
top: 0;
2024-01-22 16:12:58 +00:00
height: 32px;
2023-09-09 11:34:46 +00:00
width: 100%;
2024-01-22 00:26:13 +00:00
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
2023-09-09 11:34:46 +00:00
font-size: 14px;
2024-01-22 16:12:58 +00:00
line-height: 32px;
2023-10-05 12:36:59 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-09-09 11:34:46 +00:00
padding: 0px 16px;
2024-01-22 00:11:28 +00:00
z-index: 2;
2024-01-22 00:29:27 +00:00
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.8);
2024-01-22 00:11:28 +00:00
display: grid;
2024-01-22 00:26:13 +00:00
grid-template-columns: min-content 1fr auto;
}
2024-01-22 21:30:44 +00:00
.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')};
}
2024-01-22 00:26:13 +00:00
.appName {
white-space: nowrap;
2023-09-09 11:34:46 +00:00
}
2024-01-22 00:11:28 +00:00
.appActions {
display: flex;
}
2024-01-22 16:12:58 +00:00
.appActions .action {
}
2024-01-22 00:26:13 +00:00
.appActions .action:hover {
color: ${cssManager.bdTheme('#000', '#fff')};
}
2023-09-09 11:34:46 +00:00
.appcontent {
2024-01-22 00:11:28 +00:00
z-index: 1;
2024-01-21 23:59:25 +00:00
position: fixed;
2024-01-22 16:12:58 +00:00
top: 32px;
height: calc(100vh - 32px - 24px);
bottom: 24px;
2023-09-09 11:34:46 +00:00
width: 100%;
2024-01-21 23:59:25 +00:00
overflow: auto;
2023-09-09 11:34:46 +00:00
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
2024-02-05 12:17:44 +00:00
overscroll-behavior: contain;
2023-09-09 11:34:46 +00:00
}
2024-01-22 16:12:58 +00:00
.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;
}
2023-09-09 11:34:46 +00:00
`,
];
public render(): TemplateResult {
return html`
2024-01-22 18:40:08 +00:00
<div class="maincontainer">
<div class="appbar">
<div class="appName">${this.name}</div>
2024-01-22 21:30:44 +00:00
<div class="viewTabs">
${this.viewTabs.map(
(view) => html`
<div class="viewTab" @click=${() => {
this.loadView(view);
}}>${view.name}</div>
`
)}
</div>
2024-01-22 18:40:08 +00:00
<div class="appActions">
2024-01-22 19:51:50 +00:00
<div class="action" @click=${() => {
this.dispatchEvent(new CustomEvent('logout'));
}}>Logout</div>
2024-01-22 18:40:08 +00:00
</div>
2024-01-22 00:11:28 +00:00
</div>
2024-01-22 18:40:08 +00:00
<div class="appcontent">
2024-01-22 21:30:44 +00:00
2024-01-22 18:27:30 +00:00
</div>
2024-01-22 18:40:08 +00:00
<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>
2024-01-22 16:12:58 +00:00
</div>
</div>
2023-09-09 11:34:46 +00:00
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
2024-02-03 11:44:12 +00:00
await this.loadView(this.viewTabs[0]);
2023-09-09 11:34:46 +00:00
}
2024-01-22 16:12:58 +00:00
public async launchTerminal() {
2024-01-22 18:40:08 +00:00
const maincontainer = this.shadowRoot.querySelector('.maincontainer');
2024-01-22 16:12:58 +00:00
const terminal = new DeesTerminal();
2024-01-22 18:40:08 +00:00
maincontainer.appendChild(terminal);
2024-01-22 16:12:58 +00:00
terminal.style.position = 'absolute';
2024-01-22 18:40:08 +00:00
terminal.style.zIndex = '1';
terminal.style.top = '32px';
2024-01-22 16:12:58 +00:00
terminal.style.left = '0px';
2024-01-22 17:39:31 +00:00
terminal.style.right = '0px';
2024-01-22 18:40:08 +00:00
terminal.style.bottom = '24px';
2024-01-22 16:12:58 +00:00
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)';
}
2024-01-22 21:30:44 +00:00
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;
}
2023-09-09 11:34:46 +00:00
}