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

feat(statuspage): refactor shared styles and modernize components for consistent theming, spacing and APIs

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 09:26:37 +00:00
parent 891eb04d11
commit ed9728dd4a
24 changed files with 4177 additions and 3542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
ts_web/elements/upl-statuspage-assetsselector.ts
View File

@@ -10,7 +10,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import type { IServiceStatus } from '../interfaces/index.js';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';
import * as sharedStyles from '../styles/shared.styles.js';
import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-assetsselector.demo.js';
@@ -26,22 +26,22 @@ export class UplStatuspageAssetsselector extends DeesElement {
public static demo = demoFunc;
@property({ type: Array })
public services: IServiceStatus[] = [];
accessor services: IServiceStatus[] = [];
@property({ type: String })
public filterText: string = '';
accessor filterText: string = '';
@property({ type: String })
public filterCategory: string = 'all';
accessor filterCategory: string = 'all';
@property({ type: Boolean })
public showOnlySelected: boolean = false;
accessor showOnlySelected: boolean = false;
@property({ type: Boolean })
public loading: boolean = false;
accessor loading: boolean = false;
@property({ type: Boolean })
public expanded: boolean = false;
accessor expanded: boolean = false;
constructor() {
super();
@@ -49,25 +49,25 @@ export class UplStatuspageAssetsselector extends DeesElement {
public static styles = [
cssManager.defaultStyles,
commonStyles,
sharedStyles.commonStyles,
css`
:host {
display: block;
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
color: ${colors.text.primary};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
color: ${sharedStyles.colors.text.primary};
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
}
.controls {
display: flex;
gap: ${unsafeCSS(spacing.sm)};
margin-bottom: ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
flex-wrap: wrap;
align-items: center;
}
@@ -75,13 +75,13 @@ export class UplStatuspageAssetsselector extends DeesElement {
.search-input {
flex: 1;
min-width: 200px;
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-size: 13px;
font-family: ${unsafeCSS(fonts.base)};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
transition: all 0.2s ease;
height: 32px;
}
@@ -99,15 +99,15 @@ export class UplStatuspageAssetsselector extends DeesElement {
display: inline-flex;
align-items: center;
justify-content: center;
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
background: transparent;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
cursor: pointer;
font-size: 13px;
font-weight: 400;
font-family: ${unsafeCSS(fonts.base)};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
transition: all 0.2s ease;
height: 32px;
}
@@ -126,83 +126,83 @@ export class UplStatuspageAssetsselector extends DeesElement {
.selected-services {
display: flex;
flex-wrap: wrap;
gap: ${unsafeCSS(spacing.sm)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
align-items: center;
}
.service-pill {
display: inline-flex;
align-items: center;
gap: ${unsafeCSS(spacing.xs)};
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.full)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
font-size: 13px;
transition: all 0.2s ease;
}
.service-pill:hover {
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
}
.service-pill .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.manage-button {
display: inline-flex;
align-items: center;
gap: ${unsafeCSS(spacing.xs)};
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
background: transparent;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
font-family: ${unsafeCSS(fonts.base)};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
}
.manage-button:hover {
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
}
.expandable-section {
margin-top: ${unsafeCSS(spacing.lg)};
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
overflow: hidden;
transition: all 0.3s ease;
}
.expandable-content {
padding: ${unsafeCSS(spacing.lg)};
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
}
.assets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: ${unsafeCSS(spacing.sm)};
margin-top: ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
}
.asset-card {
display: flex;
align-items: center;
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
padding: ${unsafeCSS(sharedStyles.spacing.sm)} ${unsafeCSS(sharedStyles.spacing.md)};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border-radius: ${unsafeCSS(borderRadius.base)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
gap: ${unsafeCSS(spacing.sm)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
}
.asset-card:hover {
@@ -218,7 +218,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: ${colors.text.primary};
accent-color: ${sharedStyles.colors.text.primary};
flex-shrink: 0;
}
@@ -230,7 +230,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
.asset-name {
font-weight: 600;
font-size: 14px;
margin-bottom: ${unsafeCSS(spacing.xs)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -238,7 +238,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
.asset-description {
font-size: 13px;
color: ${colors.text.secondary};
color: ${sharedStyles.colors.text.secondary};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -247,14 +247,14 @@ export class UplStatuspageAssetsselector extends DeesElement {
.asset-status {
display: flex;
align-items: center;
gap: ${unsafeCSS(spacing.xs)};
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
flex-shrink: 0;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: ${unsafeCSS(borderRadius.full)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
}
.status-indicator.operational, .status-dot.operational { background: #22c55e; }
@@ -266,14 +266,14 @@ export class UplStatuspageAssetsselector extends DeesElement {
.status-text {
font-size: 12px;
text-transform: capitalize;
color: ${colors.text.secondary};
color: ${sharedStyles.colors.text.secondary};
}
.loading-message,
.no-results {
grid-column: 1 / -1;
text-align: center;
padding: ${unsafeCSS(spacing.xl)};
padding: ${unsafeCSS(sharedStyles.spacing.xl)};
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
font-size: 13px;
}
@@ -281,12 +281,12 @@ export class UplStatuspageAssetsselector extends DeesElement {
.summary {
text-align: right;
font-size: 12px;
margin-top: ${unsafeCSS(spacing.md)};
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
}
.no-services {
padding: ${unsafeCSS(spacing.xl)};
padding: ${unsafeCSS(sharedStyles.spacing.xl)};
text-align: center;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
font-size: 13px;
@@ -294,7 +294,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
@media (max-width: 640px) {
.container {
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
}
.controls {
@@ -310,21 +310,21 @@ export class UplStatuspageAssetsselector extends DeesElement {
flex-direction: column;
align-items: stretch;
}
.service-pill {
width: auto;
}
.expandable-content {
padding: ${unsafeCSS(spacing.md)};
padding: ${unsafeCSS(sharedStyles.spacing.md)};
}
.assets-grid {
grid-template-columns: 1fr;
}
.asset-card {
padding: ${unsafeCSS(spacing.sm)};
padding: ${unsafeCSS(sharedStyles.spacing.sm)};
}
}
`,