462 lines
13 KiB
TypeScript
462 lines
13 KiB
TypeScript
import { demoFunc } from './dees-simple-appdash.demo.js';
|
|
|
|
import {
|
|
customElement,
|
|
html,
|
|
DeesElement,
|
|
property,
|
|
type TemplateResult,
|
|
cssManager,
|
|
css,
|
|
unsafeCSS,
|
|
type CSSResult,
|
|
state,
|
|
domtools,
|
|
} from '@design.estate/dees-element';
|
|
import '../../dees-icon/dees-icon.js';
|
|
import type { DeesTerminal } from '../../dees-terminal/dees-terminal.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-simple-appdash': DeesSimpleAppDash;
|
|
}
|
|
}
|
|
|
|
export interface IView {
|
|
name: string;
|
|
iconName?: string;
|
|
element: DeesElement['constructor']['prototype'];
|
|
}
|
|
|
|
@customElement('dees-simple-appdash')
|
|
export class DeesSimpleAppDash extends DeesElement {
|
|
// STATIC
|
|
public static demo = demoFunc;
|
|
// INSTANCE
|
|
|
|
@property()
|
|
accessor name: string = 'Application Dashboard';
|
|
|
|
@property({ type: Array })
|
|
accessor viewTabs: IView[] = [];
|
|
|
|
@property({ type: String })
|
|
accessor terminalSetupCommand: string = `echo "Terminal ready"`;
|
|
|
|
@state()
|
|
accessor selectedView: IView;
|
|
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
|
user-select: none;
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.maincontainer {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.appbar {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: calc(100% - 24px);
|
|
width: 240px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
|
|
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
|
font-size: 13px;
|
|
font-family: 'Geist Sans', sans-serif;
|
|
z-index: 2;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr min-content;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px 16px;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-icon-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: ${cssManager.bdTheme(
|
|
'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
|
|
'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
|
|
)};
|
|
box-shadow: ${cssManager.bdTheme(
|
|
'0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
|
|
'0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
|
|
)};
|
|
}
|
|
|
|
.header-icon-wrapper dees-icon {
|
|
font-size: 18px;
|
|
color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
|
|
}
|
|
|
|
.appName {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.viewTabs-container {
|
|
overflow-y: auto;
|
|
padding: 12px 8px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
|
|
}
|
|
|
|
.viewTabs-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.viewTabs-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.viewTabs-container::-webkit-scrollbar-thumb {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.viewTabs-container::-webkit-scrollbar-thumb:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
|
padding: 8px 12px 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.viewTabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.viewTab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
cursor: default;
|
|
transition: all 0.15s ease;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
|
user-select: none;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.viewTab:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
|
}
|
|
|
|
.viewTab:active {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
.viewTab.selected {
|
|
background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
|
|
color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
|
|
font-weight: 500;
|
|
}
|
|
|
|
.viewTab.selected::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 3px;
|
|
border-radius: 0 2px 2px 0;
|
|
background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
|
|
}
|
|
|
|
.viewTab dees-icon {
|
|
font-size: 16px;
|
|
opacity: 0.55;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.viewTab:hover dees-icon {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.viewTab.selected dees-icon {
|
|
opacity: 0.9;
|
|
color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
|
|
}
|
|
|
|
.viewTab span {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.appActions {
|
|
padding: 12px 8px;
|
|
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
|
}
|
|
|
|
.action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
cursor: default;
|
|
transition: all 0.15s ease;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
|
}
|
|
|
|
.action:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 84% 60% / 0.08)', 'hsl(0 84% 60% / 0.12)')};
|
|
color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
|
|
}
|
|
|
|
.action dees-icon {
|
|
font-size: 16px;
|
|
opacity: 0.6;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.action:hover dees-icon {
|
|
opacity: 0.9;
|
|
color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
|
|
}
|
|
|
|
.appcontent {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: calc(100% - 24px);
|
|
bottom: 24px;
|
|
width: calc(100% - 240px);
|
|
overflow: auto;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.controlbar {
|
|
color: #fff;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 24px;
|
|
background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 12px;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
color: hsl(0 0% 70%);
|
|
transition: all 0.15s ease;
|
|
border-left: 1px solid hsl(0 0% 100% / 0.08);
|
|
}
|
|
|
|
.control:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.control:hover {
|
|
background: hsl(0 0% 100% / 0.06);
|
|
color: hsl(0 0% 95%);
|
|
}
|
|
|
|
.control dees-icon {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.control.status-connected dees-icon {
|
|
color: hsl(142 70% 50%);
|
|
}
|
|
|
|
.control.status-terminal dees-icon {
|
|
color: hsl(45 90% 55%);
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="maincontainer">
|
|
<div class="appbar">
|
|
<div class="sidebar-header">
|
|
<div class="header-icon-wrapper">
|
|
<dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
|
|
</div>
|
|
<div class="appName">${this.name}</div>
|
|
</div>
|
|
<div class="viewTabs-container">
|
|
<div class="section-label">Navigation</div>
|
|
<div class="viewTabs">
|
|
${this.viewTabs.map(
|
|
(view) => html`
|
|
<div
|
|
class="viewTab ${this.selectedView === view ? 'selected' : ''}"
|
|
@click=${() => this.loadView(view)}
|
|
>
|
|
${view.iconName ? html`
|
|
<dees-icon .icon="${view.iconName.includes(':') ? view.iconName : `lucide:${view.iconName}`}"></dees-icon>
|
|
` : html`
|
|
<dees-icon .icon="${'lucide:file'}"></dees-icon>
|
|
`}
|
|
<span>${view.name}</span>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div class="appActions">
|
|
<div class="action" @click=${() => {
|
|
this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
|
|
}}>
|
|
<dees-icon .icon="${'lucide:logOut'}"></dees-icon>
|
|
<span>Sign out</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="appcontent">
|
|
<!-- Content goes here -->
|
|
</div>
|
|
<div class="controlbar">
|
|
<div class="control status-connected">
|
|
<dees-icon .icon="${'lucide:wifi'}"></dees-icon>
|
|
<span>Connected</span>
|
|
</div>
|
|
<div class="control status-terminal" @click=${this.launchTerminal}>
|
|
<dees-icon .icon="${'lucide:terminal'}"></dees-icon>
|
|
<span>Terminal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async firstUpdated(_changedProperties): Promise<void> {
|
|
const domtools = await this.domtoolsPromise;
|
|
super.firstUpdated(_changedProperties);
|
|
if (this.viewTabs && this.viewTabs.length > 0) {
|
|
await this.loadView(this.viewTabs[0]);
|
|
}
|
|
}
|
|
|
|
public currentTerminal: DeesTerminal;
|
|
public async launchTerminal() {
|
|
const domtools = await this.domtoolsPromise;
|
|
if (this.currentTerminal) {
|
|
// If terminal already exists, remove it
|
|
await this.closeTerminal();
|
|
return;
|
|
}
|
|
|
|
const maincontainer = this.shadowRoot.querySelector('.maincontainer');
|
|
const { DeesTerminal } = await import('../../dees-terminal/dees-terminal.js');
|
|
const terminal = new DeesTerminal();
|
|
terminal.setupCommand = this.terminalSetupCommand;
|
|
this.currentTerminal = terminal;
|
|
maincontainer.appendChild(terminal);
|
|
terminal.style.position = 'absolute';
|
|
terminal.style.zIndex = '10';
|
|
terminal.style.top = '0px';
|
|
terminal.style.left = '240px';
|
|
terminal.style.right = '0px';
|
|
terminal.style.bottom = '24px';
|
|
terminal.style.opacity = '0';
|
|
terminal.style.transform = 'translateY(8px) scale(0.99)';
|
|
terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
terminal.background = 'hsl(220 13% 8%)';
|
|
terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
|
|
terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
|
|
terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
|
|
|
|
// Add close button to terminal
|
|
terminal.addEventListener('close', () => this.closeTerminal());
|
|
|
|
await domtools.convenience.smartdelay.delayFor(0);
|
|
terminal.style.opacity = '1';
|
|
terminal.style.transform = 'translateY(0) scale(1)';
|
|
return terminal;
|
|
}
|
|
|
|
private async closeTerminal() {
|
|
const domtools = await this.domtoolsPromise;
|
|
if (this.currentTerminal) {
|
|
this.currentTerminal.style.opacity = '0';
|
|
this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
|
|
await domtools.convenience.smartdelay.delayFor(250);
|
|
this.currentTerminal.remove();
|
|
this.currentTerminal = null;
|
|
}
|
|
}
|
|
|
|
|
|
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;
|
|
this.selectedView = viewArg;
|
|
|
|
// Emit view-select event
|
|
this.dispatchEvent(new CustomEvent('view-select', {
|
|
detail: { view: viewArg },
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
}
|