fix(chart-log, simple-appdash): align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation
This commit is contained in:
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.52.1',
|
||||
version: '3.52.2',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -458,6 +458,9 @@ export class DeesChartLog extends DeesElement {
|
||||
|
||||
public updated(changedProperties: Map<string, any>) {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has('goBright') && this.terminal) {
|
||||
this.terminal.options.theme = this.getTerminalTheme();
|
||||
}
|
||||
if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
|
||||
const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
|
||||
const newEntries = this.logEntries;
|
||||
@@ -504,7 +507,7 @@ export class DeesChartLog extends DeesElement {
|
||||
}
|
||||
|
||||
private getTerminalTheme() {
|
||||
const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
|
||||
const isDark = !this.goBright;
|
||||
return isDark
|
||||
? {
|
||||
background: '#0a0a0a',
|
||||
|
||||
@@ -110,6 +110,48 @@ class DemoViewDashboard extends DeesElement {
|
||||
console.log('Tile action:', e.detail);
|
||||
}}
|
||||
></dees-statsgrid>
|
||||
|
||||
<h2 style="margin-top: 40px;">Recent Activity</h2>
|
||||
<p>Below is a log of recent system events and user activity to demonstrate scrollable content.</p>
|
||||
|
||||
${[
|
||||
{ time: '2 min ago', event: 'User john@example.com logged in from 192.168.1.42', type: 'info' },
|
||||
{ time: '5 min ago', event: 'Deployment v3.52.1 completed successfully on production', type: 'success' },
|
||||
{ time: '12 min ago', event: 'Database backup finished — 2.4 GB compressed', type: 'info' },
|
||||
{ time: '18 min ago', event: 'SSL certificate renewed for api.example.com (expires 2027-04-03)', type: 'success' },
|
||||
{ time: '25 min ago', event: 'Memory usage spike on worker-03 (92%) — auto-scaled to 4 instances', type: 'warning' },
|
||||
{ time: '31 min ago', event: 'New user registration: sarah@company.io', type: 'info' },
|
||||
{ time: '45 min ago', event: 'Scheduled job "cleanup-temp-files" completed — removed 1,247 files', type: 'info' },
|
||||
{ time: '1 hour ago', event: 'API rate limit reached for client app-mobile-ios (429 responses)', type: 'warning' },
|
||||
{ time: '1.5 hours ago', event: 'CDN cache purged for /assets/* — 340 objects invalidated', type: 'info' },
|
||||
{ time: '2 hours ago', event: 'Failed login attempt for admin@example.com from 203.0.113.50 (blocked)', type: 'error' },
|
||||
{ time: '2.5 hours ago', event: 'Webhook delivery to https://hooks.slack.com succeeded (200 OK)', type: 'info' },
|
||||
{ time: '3 hours ago', event: 'Cron job "generate-reports" started — processing Q1 2026 data', type: 'info' },
|
||||
{ time: '3.5 hours ago', event: 'Load balancer health check: all 8 nodes healthy', type: 'success' },
|
||||
{ time: '4 hours ago', event: 'DNS propagation complete for new subdomain staging.example.com', type: 'success' },
|
||||
].map(item => html`
|
||||
<div style="
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
|
||||
font-size: 13px;
|
||||
">
|
||||
<span style="
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
font-size: 11px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
|
||||
">${item.time}</span>
|
||||
<span style="
|
||||
color: ${item.type === 'error' ? cssManager.bdTheme('hsl(0 72% 50%)', 'hsl(0 72% 65%)') :
|
||||
item.type === 'warning' ? cssManager.bdTheme('hsl(25 95% 50%)', 'hsl(25 95% 63%)') :
|
||||
item.type === 'success' ? cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)') :
|
||||
cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
|
||||
">${item.event}</span>
|
||||
</div>
|
||||
`)}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -299,15 +299,51 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.appcontent::before {
|
||||
content: '';
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
height: 8px;
|
||||
margin-bottom: -8px;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
|
||||
${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.controlbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 240px;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
|
||||
${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.controlbar {
|
||||
color: #fff;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
|
||||
z-index: 2;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
@@ -325,9 +361,10 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
color: hsl(0 0% 70%);
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
|
||||
transition: all 0.15s ease;
|
||||
border-left: 1px solid hsl(0 0% 100% / 0.08);
|
||||
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
|
||||
}
|
||||
|
||||
.control:first-child {
|
||||
@@ -335,8 +372,8 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: hsl(0 0% 100% / 0.06);
|
||||
color: hsl(0 0% 95%);
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
.control dees-icon {
|
||||
|
||||
Reference in New Issue
Block a user