serve.zone/dcrouter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update styles in various components to use dynamic theming and improve layout consistency

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-19 12:14:52 +00:00
parent 2ab2e30336
commit 3ba47f9a71
9 changed files with 333 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
ts_web/elements/ops-view-emails.ts
View File

@ -64,21 +64,20 @@ export class OpsViewEmails extends DeesElement {
height: 100%;
}
.emailContainer {
display: grid;
grid-template-columns: 280px 1fr;
.emailLayout {
display: flex;
gap: 16px;
height: 100%;
min-height: 600px;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 16px;
flex-shrink: 0;
width: 280px;
}
.mainContent {
.mainArea {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
@ -107,22 +106,22 @@ export class OpsViewEmails extends DeesElement {
flex: 1;
display: flex;
flex-direction: column;
background: white;
border: 1px solid #e9ecef;
background: ${cssManager.bdTheme('#fff', '#222')};
border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
border-radius: 8px;
overflow: hidden;
}
.emailHeader {
padding: 24px;
border-bottom: 1px solid #e9ecef;
border-bottom: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
}
.emailSubject {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: #333;
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.emailMeta {
@ -130,7 +129,7 @@ export class OpsViewEmails extends DeesElement {
flex-direction: column;
gap: 8px;
font-size: 14px;
color: #666;
color: ${cssManager.bdTheme('#666', '#999')};
}
.emailMetaRow {
@ -155,8 +154,8 @@ export class OpsViewEmails extends DeesElement {
display: flex;
gap: 8px;
padding: 16px 24px;
border-top: 1px solid #e9ecef;
background: #fafafa;
border-top: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
}
.emptyState {
@ -165,7 +164,7 @@ export class OpsViewEmails extends DeesElement {
align-items: center;
justify-content: center;
height: 100%;
color: #999;
color: ${cssManager.bdTheme('#999', '#666')};
}
.emptyIcon {
@ -177,65 +176,81 @@ export class OpsViewEmails extends DeesElement {
.emptyText {
font-size: 18px;
}
.email-read {
color: ${cssManager.bdTheme('#999', '#666')};
}
.email-unread {
color: ${cssManager.bdTheme('#1976d2', '#4a90e2')};
}
.attachment-icon {
color: ${cssManager.bdTheme('#666', '#999')};
}
`,
];
public render() {
if (this.selectedEmail) {
return html`
<ops-sectionheading>Emails</ops-sectionheading>
<div class="emailLayout">
<div class="sidebar">
<dees-windowbox>
<dees-button @click=${() => this.selectedEmail = null} type="secondary" style="width: 100%;">
<dees-icon name="arrowLeft" slot="iconSlot"></dees-icon>
Back to List
</dees-button>
<dees-menu style="margin-top: 16px;">
<dees-menu-item
.active=${this.selectedFolder === 'inbox'}
@click=${() => { this.selectFolder('inbox'); this.selectedEmail = null; }}
.iconName=${'inbox'}
.label=${'Inbox'}
.badgeText=${this.getEmailCount('inbox') > 0 ? String(this.getEmailCount('inbox')) : ''}
></dees-menu-item>
<dees-menu-item
.active=${this.selectedFolder === 'sent'}
@click=${() => { this.selectFolder('sent'); this.selectedEmail = null; }}
.iconName=${'paperPlane'}
.label=${'Sent'}
.badgeText=${this.getEmailCount('sent') > 0 ? String(this.getEmailCount('sent')) : ''}
></dees-menu-item>
<dees-menu-item
.active=${this.selectedFolder === 'draft'}
@click=${() => { this.selectFolder('draft'); this.selectedEmail = null; }}
.iconName=${'file'}
.label=${'Drafts'}
.badgeText=${this.getEmailCount('draft') > 0 ? String(this.getEmailCount('draft')) : ''}
></dees-menu-item>
<dees-menu-item
.active=${this.selectedFolder === 'trash'}
@click=${() => { this.selectFolder('trash'); this.selectedEmail = null; }}
.iconName=${'trash'}
.label=${'Trash'}
.badgeText=${this.getEmailCount('trash') > 0 ? String(this.getEmailCount('trash')) : ''}
></dees-menu-item>
</dees-menu>
</dees-windowbox>
</div>
<div class="mainArea">
${this.renderEmailPreview()}
</div>
</div>
`;
}
return html`
<ops-sectionheading>Emails</ops-sectionheading>
<div class="emailContainer">
<!-- Sidebar -->
<dees-windowbox>
<dees-button @click=${() => this.openComposeModal()} type="highlighted" style="width: 100%;">
<dees-icon name="penToSquare" slot="iconSlot"></dees-icon>
Compose
</dees-button>
<dees-menu style="margin-top: 16px;">
<dees-menu-item
.active=${this.selectedFolder === 'inbox'}
@click=${() => this.selectFolder('inbox')}
.iconName=${'inbox'}
.label=${'Inbox'}
.badgeText=${this.getEmailCount('inbox') > 0 ? String(this.getEmailCount('inbox')) : ''}
></dees-menu-item>
<dees-menu-item
.active=${this.selectedFolder === 'sent'}
@click=${() => this.selectFolder('sent')}
.iconName=${'paperPlane'}
.label=${'Sent'}
.badgeText=${this.getEmailCount('sent') > 0 ? String(this.getEmailCount('sent')) : ''}
></dees-menu-item>
<dees-menu-item
.active=${this.selectedFolder === 'draft'}
@click=${() => this.selectFolder('draft')}
.iconName=${'file'}
.label=${'Drafts'}
.badgeText=${this.getEmailCount('draft') > 0 ? String(this.getEmailCount('draft')) : ''}
></dees-menu-item>
<dees-menu-item
.active=${this.selectedFolder === 'trash'}
@click=${() => this.selectFolder('trash')}
.iconName=${'trash'}
.label=${'Trash'}
.badgeText=${this.getEmailCount('trash') > 0 ? String(this.getEmailCount('trash')) : ''}
></dees-menu-item>
</dees-menu>
</dees-windowbox>
<!-- Main Content -->
<div class="mainContent">
${this.selectedEmail ? this.renderEmailPreview() : this.renderEmailListView()}
</div>
</div>
`;
}
private renderEmailListView() {
return html`
<!-- Toolbar -->
<div class="emailToolbar">
<div class="emailToolbar" style="margin-bottom: 16px;">
<dees-button @click=${() => this.openComposeModal()} type="highlighted">
<dees-icon name="penToSquare" slot="iconSlot"></dees-icon>
Compose
</dees-button>
<dees-input-text
class="searchBox"
placeholder="Search emails..."
@ -246,20 +261,50 @@ export class OpsViewEmails extends DeesElement {
</dees-input-text>
<dees-button @click=${() => this.refreshEmails()}>
${this.isLoading ? html`<dees-spinner size="small"></dees-spinner>` : html`<dees-icon name="arrowsRotate"></dees-icon>`}
${this.isLoading ? html`<dees-spinner slot="iconSlot" size="small"></dees-spinner>` : html`<dees-icon slot="iconSlot" name="arrowsRotate"></dees-icon>`}
Refresh
</dees-button>
<dees-button @click=${() => this.markAllAsRead()}>
<dees-icon name="envelopeOpen"></dees-icon>
<dees-icon name="envelopeOpen" slot="iconSlot"></dees-icon>
Mark all read
</dees-button>
<div style="margin-left: auto; display: flex; gap: 8px;">
<dees-button-group>
<dees-button
@click=${() => this.selectFolder('inbox')}
.type=${this.selectedFolder === 'inbox' ? 'highlighted' : 'normal'}
>
Inbox ${this.getEmailCount('inbox') > 0 ? `(${this.getEmailCount('inbox')})` : ''}
</dees-button>
<dees-button
@click=${() => this.selectFolder('sent')}
.type=${this.selectedFolder === 'sent' ? 'highlighted' : 'normal'}
>
Sent
</dees-button>
<dees-button
@click=${() => this.selectFolder('draft')}
.type=${this.selectedFolder === 'draft' ? 'highlighted' : 'normal'}
>
Drafts ${this.getEmailCount('draft') > 0 ? `(${this.getEmailCount('draft')})` : ''}
</dees-button>
<dees-button
@click=${() => this.selectFolder('trash')}
.type=${this.selectedFolder === 'trash' ? 'highlighted' : 'normal'}
>
Trash
</dees-button>
</dees-button-group>
</div>
</div>
<!-- Email List -->
${this.renderEmailList()}
`;
}
private renderEmailList() {
const filteredEmails = this.getFilteredEmails();
@ -276,12 +321,12 @@ export class OpsViewEmails extends DeesElement {
<dees-table
.data=${filteredEmails}
.displayFunction=${(email: IEmail) => ({
'Status': html`<dees-icon name="${email.read ? 'envelopeOpen' : 'envelope'}" style="color: ${email.read ? '#999' : '#1976d2'}"></dees-icon>`,
'Status': html`<dees-icon name="${email.read ? 'envelopeOpen' : 'envelope'}" class="${email.read ? 'email-read' : 'email-unread'}"></dees-icon>`,
From: email.from,
Subject: html`<strong style="${!email.read ? 'font-weight: 600' : ''}">${email.subject}</strong>`,
Date: this.formatDate(email.date),
'Attach': html`
${email.attachments?.length ? html`<dees-icon name="paperclip" style="color: #666"></dees-icon>` : ''}
${email.attachments?.length ? html`<dees-icon name="paperclip" class="attachment-icon"></dees-icon>` : ''}
`,
})}
.dataActions=${[
@ -365,11 +410,7 @@ export class OpsViewEmails extends DeesElement {
</div>
<div class="emailActions">
<dees-button @click=${() => this.selectedEmail = null} type="secondary">
<dees-icon name="arrowLeft" slot="iconSlot"></dees-icon>
Back to List
</dees-button>
<div style="margin-left: auto; display: flex; gap: 8px;">
<div style="display: flex; gap: 8px;">
<dees-button @click=${() => this.replyToEmail(this.selectedEmail!)}>
<dees-icon name="reply" slot="iconSlot"></dees-icon>
Reply