fix(appdash): use banner height CSS variable for terminal layout and expose terminal resize handling
This commit is contained in:
@@ -644,11 +644,6 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
|
||||
const height = bannerArea ? bannerArea.offsetHeight : 0;
|
||||
maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
|
||||
|
||||
// Keep terminal in sync with banner height
|
||||
if (this.currentTerminal) {
|
||||
this.currentTerminal.style.top = `${height}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -710,11 +705,9 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
terminal.setupCommand = this.terminalSetupCommand;
|
||||
this.currentTerminal = terminal;
|
||||
maincontainer.appendChild(terminal);
|
||||
const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
|
||||
const bannerHeight = bannerArea ? bannerArea.offsetHeight : 0;
|
||||
terminal.style.position = 'absolute';
|
||||
terminal.style.zIndex = '10';
|
||||
terminal.style.top = `${bannerHeight}px`;
|
||||
terminal.style.top = 'var(--banner-area-height, 0px)';
|
||||
terminal.style.left = '240px';
|
||||
terminal.style.right = '0px';
|
||||
terminal.style.bottom = '24px';
|
||||
@@ -722,8 +715,6 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
terminal.style.transform = 'translateY(8px) scale(0.99)';
|
||||
terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
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 - ${bannerHeight}px)`;
|
||||
|
||||
// Add close button to terminal
|
||||
terminal.addEventListener('close', () => this.closeTerminal());
|
||||
|
||||
Reference in New Issue
Block a user