uptime.link/catalog_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elements): add upladmin-option-card component and migrate option/status UIs to use it; refactor monitor form multitoggle subscriptions and event handling; improve theme color handling and dark-mode styles; add demos, Playwright snapshots, and migration plan

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-26 18:04:55 +00:00
parent e667370079
commit 6a7c69bad1
16 changed files with 869 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
ts_web/elements/upladmin-incident-form/upladmin-incident-form.ts
View File

@@ -168,51 +168,6 @@ export class UpladminIncidentForm extends DeesElement {
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
}
.option-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 18px 14px;
background: ${sharedStyles.colors.background.primary};
border: 2px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
cursor: pointer;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
text-align: center;
}
.option-card:hover {
border-color: ${sharedStyles.colors.border.strong};
background: ${sharedStyles.colors.background.muted};
}
.option-card.selected {
border-color: ${sharedStyles.colors.accent.primary};
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(96, 165, 250, 0.1)')};
}
.option-card input {
display: none;
}
.option-label {
font-size: 13px;
font-weight: 600;
color: ${sharedStyles.colors.text.primary};
}
.option-desc {
font-size: 11px;
color: ${sharedStyles.colors.text.muted};
line-height: 1.3;
}
.severity-critical dees-icon { --icon-color: ${sharedStyles.colors.status.majorOutage}; }
.severity-major dees-icon { --icon-color: ${sharedStyles.colors.status.partialOutage}; }
.severity-minor dees-icon { --icon-color: ${sharedStyles.colors.status.degraded}; }
.severity-maintenance dees-icon { --icon-color: ${sharedStyles.colors.status.maintenance}; }
.field-label {
display: block;
font-size: 13px;
@@ -363,20 +318,14 @@ export class UpladminIncidentForm extends DeesElement {
<label class="field-label required">Severity</label>
<div class="option-grid">
${severityOptions.map(opt => html`
<label
class="option-card severity-${opt.value} ${this.formData.severity === opt.value ? 'selected' : ''}"
@click="${() => this.handleSeverityChange(opt.value)}"
>
<input
type="radio"
name="severity"
value="${opt.value}"
?checked="${this.formData.severity === opt.value}"
/>
<dees-icon .icon=${this.severityIcons[opt.value]} .iconSize=${24}></dees-icon>
<span class="option-label">${opt.label}</span>
<span class="option-desc">${opt.desc}</span>
</label>
<upladmin-option-card
.variant=${opt.value}
.icon=${this.severityIcons[opt.value]}
.label=${opt.label}
.description=${opt.desc}
?selected=${this.formData.severity === opt.value}
@click=${() => this.handleSeverityChange(opt.value)}
></upladmin-option-card>
`)}
</div>
</div>
@@ -385,19 +334,13 @@ export class UpladminIncidentForm extends DeesElement {
<label class="field-label required">Status</label>
<div class="option-grid">
${statusOptions.map(opt => html`
<label
class="option-card ${this.formData.status === opt.value ? 'selected' : ''}"
@click="${() => this.handleStatusChange(opt.value)}"
>
<input
type="radio"
name="status"
value="${opt.value}"
?checked="${this.formData.status === opt.value}"
/>
<dees-icon .icon=${this.statusIcons[opt.value]} .iconSize=${24}></dees-icon>
<span class="option-label">${opt.label}</span>
</label>
<upladmin-option-card
.variant=${opt.value}
.icon=${this.statusIcons[opt.value]}
.label=${opt.label}
?selected=${this.formData.status === opt.value}
@click=${() => this.handleStatusChange(opt.value)}
></upladmin-option-card>
`)}
</div>
</div>