feat(elements): standardize dashboard and detail views on dees tile and stats grid components
This commit is contained in:
@@ -72,28 +72,98 @@ export class SzSettingsView extends DeesElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
dees-tile {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 16px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -224,161 +294,151 @@ export class SzSettingsView extends DeesElement {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
border: none;
|
||||
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
}
|
||||
|
||||
.button.primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Appearance</div>
|
||||
<div class="section-subtitle">Customize the look and feel</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Dark Mode</span>
|
||||
<span class="form-hint">Toggle dark mode on or off</span>
|
||||
</div>
|
||||
<div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Cloudflare Integration</div>
|
||||
<div class="section-subtitle">Configure Cloudflare API for DNS management</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="form-group">
|
||||
<div class="field-label">API Token</div>
|
||||
<input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e: Event) => this.updateSetting('cloudflareToken', (e.target as HTMLInputElement).value)}>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">Zone ID (Optional)</div>
|
||||
<input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e: Event) => this.updateSetting('cloudflareZoneId', (e.target as HTMLInputElement).value)}>
|
||||
</div>
|
||||
<div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">SSL/TLS Settings</div>
|
||||
<div class="section-subtitle">Configure certificate management</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Auto-Renew Certificates</span>
|
||||
<span class="form-hint">Automatically renew certificates before expiry</span>
|
||||
</div>
|
||||
<div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 16px;">
|
||||
<div class="field-label">Renewal Threshold (days)</div>
|
||||
<input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e: Event) => this.updateSetting('renewalThreshold', parseInt((e.target as HTMLInputElement).value))}>
|
||||
<div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">ACME Email</div>
|
||||
<input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e: Event) => this.updateSetting('acmeEmail', (e.target as HTMLInputElement).value)}>
|
||||
<div class="form-hint">Email address for Let's Encrypt notifications.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Network Settings</div>
|
||||
<div class="section-subtitle">Configure network and proxy settings</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<div class="form-group">
|
||||
<div class="field-label">HTTP Port</div>
|
||||
<input type="number" .value=${String(this.settings.httpPort)} @input=${(e: Event) => this.updateSetting('httpPort', parseInt((e.target as HTMLInputElement).value))}>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">HTTPS Port</div>
|
||||
<input type="number" .value=${String(this.settings.httpsPort)} @input=${(e: Event) => this.updateSetting('httpsPort', parseInt((e.target as HTMLInputElement).value))}>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Appearance</span>
|
||||
<span class="section-subtitle">Customize the look and feel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Force HTTPS</span>
|
||||
<span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
|
||||
</div>
|
||||
<div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Account</div>
|
||||
<div class="section-subtitle">Manage your account settings</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">Current User</div>
|
||||
<div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
|
||||
</div>
|
||||
<div class="password-section">
|
||||
<div class="password-title">Change Password</div>
|
||||
<div class="password-fields">
|
||||
<div>
|
||||
<div class="field-label">Current Password</div>
|
||||
<input type="password" id="currentPassword">
|
||||
<div class="section-content">
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Dark Mode</span>
|
||||
<span class="form-hint">Toggle dark mode on or off</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field-label">New Password</div>
|
||||
<input type="password" id="newPassword">
|
||||
</div>
|
||||
<div>
|
||||
<div class="field-label">Confirm Password</div>
|
||||
<input type="password" id="confirmPassword">
|
||||
</div>
|
||||
<button class="button secondary" style="width: fit-content;" @click=${() => this.handleChangePassword()}>Update Password</button>
|
||||
<div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="actions">
|
||||
<button class="button secondary" @click=${() => this.handleReset()}>Reset</button>
|
||||
<button class="button primary" @click=${() => this.handleSave()}>Save Settings</button>
|
||||
</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Cloudflare Integration</span>
|
||||
<span class="section-subtitle">Configure Cloudflare API for DNS management</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="input-group">
|
||||
<div class="form-group">
|
||||
<div class="field-label">API Token</div>
|
||||
<input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e: Event) => this.updateSetting('cloudflareToken', (e.target as HTMLInputElement).value)}>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">Zone ID (Optional)</div>
|
||||
<input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e: Event) => this.updateSetting('cloudflareZoneId', (e.target as HTMLInputElement).value)}>
|
||||
</div>
|
||||
<div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">SSL/TLS Settings</span>
|
||||
<span class="section-subtitle">Configure certificate management</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Auto-Renew Certificates</span>
|
||||
<span class="form-hint">Automatically renew certificates before expiry</span>
|
||||
</div>
|
||||
<div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 16px;">
|
||||
<div class="field-label">Renewal Threshold (days)</div>
|
||||
<input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e: Event) => this.updateSetting('renewalThreshold', parseInt((e.target as HTMLInputElement).value))}>
|
||||
<div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">ACME Email</div>
|
||||
<input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e: Event) => this.updateSetting('acmeEmail', (e.target as HTMLInputElement).value)}>
|
||||
<div class="form-hint">Email address for Let's Encrypt notifications.</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Network Settings</span>
|
||||
<span class="section-subtitle">Configure network and proxy settings</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="input-row">
|
||||
<div class="form-group">
|
||||
<div class="field-label">HTTP Port</div>
|
||||
<input type="number" .value=${String(this.settings.httpPort)} @input=${(e: Event) => this.updateSetting('httpPort', parseInt((e.target as HTMLInputElement).value))}>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="field-label">HTTPS Port</div>
|
||||
<input type="number" .value=${String(this.settings.httpsPort)} @input=${(e: Event) => this.updateSetting('httpsPort', parseInt((e.target as HTMLInputElement).value))}>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Force HTTPS</span>
|
||||
<span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
|
||||
</div>
|
||||
<div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Account</span>
|
||||
<span class="section-subtitle">Manage your account settings</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="form-group">
|
||||
<div class="field-label">Current User</div>
|
||||
<div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
|
||||
</div>
|
||||
<div class="password-section">
|
||||
<div class="password-title">Change Password</div>
|
||||
<div class="password-fields">
|
||||
<div>
|
||||
<div class="field-label">Current Password</div>
|
||||
<input type="password" id="currentPassword">
|
||||
</div>
|
||||
<div>
|
||||
<div class="field-label">New Password</div>
|
||||
<input type="password" id="newPassword">
|
||||
</div>
|
||||
<div>
|
||||
<div class="field-label">Confirm Password</div>
|
||||
<input type="password" id="confirmPassword">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button" @click=${() => this.handleChangePassword()}>Update Password</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<dees-tile>
|
||||
<div class="section-content" style="padding: 12px 16px; text-align: center; color: var(--dees-color-text-muted); font-size: 12px;">
|
||||
Save your changes or reset to defaults.
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button" @click=${() => this.handleReset()}>Reset</button>
|
||||
<button class="tile-button primary" @click=${() => this.handleSave()}>Save Settings</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user