design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-simple-appdash,dees-simple-login,dees-terminal): Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 20:23:03 +00:00
parent ac1ef4e497
commit 27c071f7dc
8 changed files with 306 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
View File

@@ -51,7 +51,7 @@ export class DeesSimpleAppDash extends DeesElement {
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#ccc')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
user-select: none;
display: block;
overflow: hidden;
@@ -75,109 +75,188 @@ export class DeesSimpleAppDash extends DeesElement {
left: 0px;
height: calc(100% - 24px);
width: 240px;
background: ${cssManager.bdTheme('#fafafa', '#000')};
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
font-size: 12px;
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 min-content;
grid-template-rows: auto 1fr min-content;
overflow: hidden;
}
.sidebar-header {
padding: 16px 12px;
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
padding: 20px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
display: flex;
align-items: center;
gap: 8px;
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: 14px;
font-size: 15px;
font-weight: 600;
color: ${cssManager.bdTheme('#000', '#fff')};
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 {
flex: 1;
overflow-y: auto;
padding: 4px 0;
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: 8px;
padding: 8px 12px;
gap: 10px;
padding: 10px 12px;
cursor: default;
transition: background 0.1s;
color: ${cssManager.bdTheme('#333', '#ccc')};
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('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
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('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
transform: scale(0.99);
}
.viewTab.selected {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
color: ${cssManager.bdTheme('#000', '#fff')};
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: 0;
bottom: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
}
.viewTab dees-icon {
font-size: 14px;
opacity: 0.7;
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;
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
padding: 12px 8px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
}
.action {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 4px;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
cursor: default;
transition: background 0.1s;
color: ${cssManager.bdTheme('#333', '#ccc')};
transition: all 0.15s ease;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
}
.action:hover {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
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: 14px;
opacity: 0.7;
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 {
@@ -189,46 +268,61 @@ export class DeesSimpleAppDash extends DeesElement {
bottom: 24px;
width: calc(100% - 240px);
overflow: auto;
background: ${cssManager.bdTheme('#f5f5f5', '#000')};
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%;
border-top: 1px solid ${cssManager.bdTheme('#00000020', '#ffffff20')};
height: 24px;
background: ${cssManager.bdTheme('#2196f3', '#1565c0')};
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: 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
}
.control {
display: flex;
align-items: center;
gap: 4px;
margin-right: 16px;
gap: 6px;
padding: 0 12px;
height: 100%;
white-space: nowrap;
cursor: default;
opacity: 0.8;
transition: opacity 0.2s;
}
.control:hover {
opacity: 1;
}
.control dees-icon {
font-size: 14px;
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%);
}
`,
];
@@ -236,27 +330,30 @@ export class DeesSimpleAppDash extends DeesElement {
return html`
<div class="maincontainer">
<div class="appbar">
<div>
<div class="sidebar-header">
<dees-icon .icon="${'lucide:grid3x3'}" style="font-size: 18px;"></dees-icon>
<div class="appName">${this.name}</div>
<div class="sidebar-header">
<div class="header-icon-wrapper">
<dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
</div>
<div class="viewTabs-container">
<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}`}"></dees-icon>
` : ''}
<span style="flex: 1;">${view.name}</span>
</div>
`
)}
</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">
@@ -264,7 +361,7 @@ export class DeesSimpleAppDash extends DeesElement {
this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
}}>
<dees-icon .icon="${'lucide:logOut'}"></dees-icon>
<span>Logout</span>
<span>Sign out</span>
</div>
</div>
</div>
@@ -272,11 +369,11 @@ export class DeesSimpleAppDash extends DeesElement {
<!-- Content goes here -->
</div>
<div class="controlbar">
<div class="control">
<div class="control status-connected">
<dees-icon .icon="${'lucide:wifi'}"></dees-icon>
<span>Connected</span>
</div>
<div class="control" @click=${this.launchTerminal}>
<div class="control status-terminal" @click=${this.launchTerminal}>
<dees-icon .icon="${'lucide:terminal'}"></dees-icon>
<span>Terminal</span>
</div>
@@ -315,10 +412,10 @@ export class DeesSimpleAppDash extends DeesElement {
terminal.style.right = '0px';
terminal.style.bottom = '24px';
terminal.style.opacity = '0';
terminal.style.transform = 'translateY(20px)';
terminal.style.transition = 'all 0.2s';
terminal.style.background = '#000';
terminal.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
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)`;
@@ -327,7 +424,7 @@ export class DeesSimpleAppDash extends DeesElement {
await domtools.convenience.smartdelay.delayFor(0);
terminal.style.opacity = '1';
terminal.style.transform = 'translateY(0px)';
terminal.style.transform = 'translateY(0) scale(1)';
return terminal;
}
@@ -335,8 +432,8 @@ export class DeesSimpleAppDash extends DeesElement {
const domtools = await this.domtoolsPromise;
if (this.currentTerminal) {
this.currentTerminal.style.opacity = '0';
this.currentTerminal.style.transform = 'translateY(20px)';
await domtools.convenience.smartdelay.delayFor(200);
this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
await domtools.convenience.smartdelay.delayFor(250);
this.currentTerminal.remove();
this.currentTerminal = null;
}