|
|
|
@ -45,6 +45,16 @@ export class DeesSimpleAppDash extends DeesElement {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.maincontainer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appbar {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
@ -87,12 +97,6 @@ export class DeesSimpleAppDash extends DeesElement {
|
|
|
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slotted {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.controlbar {
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
@ -119,24 +123,24 @@ export class DeesSimpleAppDash extends DeesElement {
|
|
|
|
|
|
|
|
|
|
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 class="maincontainer">
|
|
|
|
|
<div class="appbar">
|
|
|
|
|
<div class="appName">${this.name}</div>
|
|
|
|
|
<div class="viewTabs"></div>
|
|
|
|
|
<div class="appActions">
|
|
|
|
|
<div class="action">Logout</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appcontent">
|
|
|
|
|
<div class="slotted">
|
|
|
|
|
<div class="appcontent">
|
|
|
|
|
<slot></slot>
|
|
|
|
|
</div>
|
|
|
|
|
</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 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>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
@ -148,17 +152,18 @@ export class DeesSimpleAppDash extends DeesElement {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public async launchTerminal() {
|
|
|
|
|
const appcontent = this.shadowRoot.querySelector('.appcontent');
|
|
|
|
|
const maincontainer = this.shadowRoot.querySelector('.maincontainer');
|
|
|
|
|
const terminal = new DeesTerminal();
|
|
|
|
|
maincontainer.appendChild(terminal);
|
|
|
|
|
terminal.style.position = 'absolute';
|
|
|
|
|
terminal.style.top = '0px';
|
|
|
|
|
terminal.style.zIndex = '1';
|
|
|
|
|
terminal.style.top = '32px';
|
|
|
|
|
terminal.style.left = '0px';
|
|
|
|
|
terminal.style.right = '0px';
|
|
|
|
|
terminal.style.bottom = '0px';
|
|
|
|
|
terminal.style.bottom = '24px';
|
|
|
|
|
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)';
|
|
|
|
|