feat(dees-simple-appdash): Enhance responsive styling and terminal setup command

This commit is contained in:
Philipp Kunz 2024-11-07 01:14:36 +01:00
parent d2771dfc31
commit 1ae1703133
4 changed files with 5851 additions and 4483 deletions

View File

@ -1,5 +1,12 @@
# Changelog # Changelog
## 2024-11-07 - 1.3.0 - feat(dees-simple-appdash)
Enhance responsive styling and terminal setup command
- Added a new property `terminalSetupCommand` for configuring terminal setup commands.
- Improved responsive styling and positioning for components to achieve a fluid layout.
- Fixed layout shifts by switching positions to `absolute` for `appbar` and `appcontent`.
## 2024-10-07 - 1.2.0 - feat(index.ts) ## 2024-10-07 - 1.2.0 - feat(index.ts)
Add export for colors module in index.ts Add export for colors module in index.ts

10165
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.2.0', version: '1.3.0',
description: 'A library for building components and other projects' description: 'A library for building components and other projects'
} }

View File

@ -39,6 +39,9 @@ export class DeesSimpleAppDash extends DeesElement {
@property() @property()
public viewTabs: IView[] = []; public viewTabs: IView[] = [];
@property()
public terminalSetupCommand: string = `pnpm install @serve.zone/cli && clear && servezone info`;
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
@ -46,22 +49,25 @@ export class DeesSimpleAppDash extends DeesElement {
color: ${cssManager.bdTheme('#333', '#ccc')}; color: ${cssManager.bdTheme('#333', '#ccc')};
user-select: none; user-select: none;
display: block; display: block;
overflow: hidden;
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%;
} }
.maincontainer { .maincontainer {
position: absolute; position: absolute;
width: 100%;
height: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden; overflow: hidden;
} }
.appbar { .appbar {
position: fixed; position: absolute;
top: 0; top: 0px;
left: 0px;
height: calc(100% - 24px); height: calc(100% - 24px);
width: 200px; width: 200px;
background: ${cssManager.bdTheme('#eeeeeb', '#000')}; background: ${cssManager.bdTheme('#eeeeeb', '#000')};
@ -115,7 +121,7 @@ export class DeesSimpleAppDash extends DeesElement {
.appcontent { .appcontent {
z-index: 1; z-index: 1;
position: fixed; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
height: calc(100vh - 24px); height: calc(100vh - 24px);
@ -192,9 +198,12 @@ export class DeesSimpleAppDash extends DeesElement {
await this.loadView(this.viewTabs[0]); await this.loadView(this.viewTabs[0]);
} }
public currentTerminal: DeesTerminal;
public async launchTerminal() { public async launchTerminal() {
const maincontainer = this.shadowRoot.querySelector('.maincontainer'); const maincontainer = this.shadowRoot.querySelector('.maincontainer');
const terminal = new DeesTerminal(); const terminal = new DeesTerminal();
terminal.setupCommand = this.terminalSetupCommand;
this.currentTerminal = terminal;
maincontainer.appendChild(terminal); maincontainer.appendChild(terminal);
terminal.style.position = 'absolute'; terminal.style.position = 'absolute';
terminal.style.zIndex = '1'; terminal.style.zIndex = '1';
@ -208,6 +217,7 @@ export class DeesSimpleAppDash extends DeesElement {
await domtools.plugins.smartdelay.delayFor(0); await domtools.plugins.smartdelay.delayFor(0);
terminal.style.opacity = '1'; terminal.style.opacity = '1';
terminal.style.transform = 'translateY(0px)'; terminal.style.transform = 'translateY(0px)';
return terminal;
} }
private currentView: DeesElement; private currentView: DeesElement;