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

157 lines
3.9 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;
}
}
@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 00:26:13 +00:00
@property()
2024-01-22 16:12:58 +00:00
public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
[];
2024-01-22 00:26:13 +00:00
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
}
.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;
}
.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-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`
<div class="appbar">
2024-01-22 00:11:28 +00:00
<div class="appName">${this.name}</div>
2024-01-22 00:26:13 +00:00
<div class="viewTabs"></div>
2024-01-22 00:11:28 +00:00
<div class="appActions">
2024-01-22 16:12:58 +00:00
<div class="action">Logout</div>
2024-01-22 00:11:28 +00:00
</div>
2023-09-09 11:34:46 +00:00
</div>
<div class="appcontent">
<slot></slot>
</div>
2024-01-22 16:12:58 +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>
</div>
2023-09-09 11:34:46 +00:00
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
}
2024-01-22 16:12:58 +00:00
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)';
}
2023-09-09 11:34:46 +00:00
}