From f052fb9c9f5085f4cc0351255a3eacec68ab3212 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Fri, 3 Apr 2026 13:33:56 +0000 Subject: [PATCH] fix(chart-log, simple-appdash): align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation --- changelog.md | 7 +++ ts_web/00_commitinfo_data.ts | 2 +- .../dees-chart-log/dees-chart-log.ts | 5 +- .../dees-simple-appdash.demo.ts | 42 +++++++++++++++ .../dees-simple-appdash.ts | 51 ++++++++++++++++--- 5 files changed, 98 insertions(+), 9 deletions(-) diff --git a/changelog.md b/changelog.md index 5426e75..5ffb843 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-03 - 3.52.2 - fix(chart-log, simple-appdash) +align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation + +- Update dees-chart-log to refresh the terminal theme when goBright changes and derive dark mode directly from the brightness setting. +- Refine dees-simple-appdash control bar colors, borders, and shadow gradients for better light and dark theme consistency. +- Expand the app dashboard demo with recent activity content to showcase scrollable layout behavior. + ## 2026-04-03 - 3.52.1 - fix(dees-modal) refine modal styling, spacing, and animations for a cleaner overlay presentation diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 0101663..c63e93b 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -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.' } diff --git a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts index 3ab627e..9c89e12 100644 --- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts +++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts @@ -458,6 +458,9 @@ export class DeesChartLog extends DeesElement { public updated(changedProperties: Map) { 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', diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts index 51c7393..2cb7d2a 100644 --- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts +++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts @@ -110,6 +110,48 @@ class DemoViewDashboard extends DeesElement { console.log('Tile action:', e.detail); }} > + +

Recent Activity

+

Below is a log of recent system events and user activity to demonstrate scrollable content.

+ + ${[ + { 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` +
+ ${item.time} + ${item.event} +
+ `)} `; } } diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts index 5f5497a..7026f27 100644 --- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts +++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts @@ -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 {