feat(dees-simple-appdash): Enhance responsive styling and terminal setup command
This commit is contained in:
parent
d2771dfc31
commit
1ae1703133
@ -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
10165
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -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'
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user