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

fix(settings-ui): align settings gateway cards with dees-tile footer actions

Browse Source
This commit is contained in:
Jürgen Kunz
2026-05-24 17:41:34 +00:00
parent 4b48f0056e
commit 3f15cbda80
3 changed files with 102 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/elements/ob-view-settings.ts
+95 -40
View File
@@ -48,31 +48,45 @@ export class ObViewSettings extends DeesElement {
cssManager.defaultStyles,
shared.viewHostCss,
css`
.gateway-card {
dees-tile {
display: block;
margin-bottom: 24px;
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 12px;
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
overflow: hidden;
box-shadow: 0 1px 2px ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.2)')};
}
.gateway-header {
padding: 16px 20px;
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
background: ${cssManager.bdTheme('#fafafa', '#101013')};
height: 36px;
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.gateway-heading {
flex: 1;
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.gateway-title {
font-size: 15px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gateway-subtitle {
margin-top: 4px;
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gateway-content {
@@ -176,8 +190,51 @@ export class ObViewSettings extends DeesElement {
.gateway-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0 20px 20px;
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%)')};
}
@media (max-width: 700px) {
@@ -249,24 +306,23 @@ export class ObViewSettings extends DeesElement {
private renderAdminUiSettings(): TemplateResult {
const settings = this.settingsState.settings;
return html`
<section class="gateway-card">
<div class="gateway-header">
<div class="gateway-title">Onebox Admin UI</div>
<div class="gateway-subtitle">Configure the public hostname for this Onebox dashboard. Onebox keeps this route separate from app service domains.</div>
<dees-tile>
<div slot="header" class="gateway-header">
<div class="gateway-heading">
<span class="gateway-title">Onebox Admin UI</span>
<span class="gateway-subtitle">Configure the public hostname for this Onebox dashboard</span>
</div>
</div>
<div class="gateway-content">
${this.renderGatewayInput('adminUiDomain', 'Admin UI Domain', settings?.adminUiDomain || '', 'Example: onebox.example.com. Leave empty to disable the public Admin UI route.')}
${this.renderGatewayReadonly('Local Target', 'Onebox OpsServer on port 3000', 'The external gateway forwards to SmartProxy, which forwards this hostname to the Onebox Admin UI.')}
</div>
<div class="gateway-footer">
<dees-button
.text=${'Save Admin UI Domain'}
.type=${'default'}
.icon=${'lucide:Save'}
@click=${() => this.saveAdminUiSettings()}
></dees-button>
<div slot="footer" class="gateway-footer">
<button class="tile-button primary" type="button" @click=${() => this.saveAdminUiSettings()}>
Save Admin UI Domain
</button>
</div>
</section>
</dees-tile>
`;
}
@@ -274,10 +330,12 @@ export class ObViewSettings extends DeesElement {
const settings = this.settingsState.settings;
const mode = settings?.dcrouterMode || 'managed';
return html`
<section class="gateway-card">
<div class="gateway-header">
<div class="gateway-title">dcrouter Gateway</div>
<div class="gateway-subtitle">Run a local managed dcrouter or delegate routing, DNS, and certificates to an external dcrouter.</div>
<dees-tile>
<div slot="header" class="gateway-header">
<div class="gateway-heading">
<span class="gateway-title">dcrouter Gateway</span>
<span class="gateway-subtitle">Run a local managed dcrouter or delegate routing to an external dcrouter</span>
</div>
</div>
<div class="gateway-mode-row">
${this.renderModeButton('managed', 'Managed Local', mode)}
@@ -303,15 +361,12 @@ export class ObViewSettings extends DeesElement {
<div class="gateway-disabled">dcrouter route delegation is disabled. Onebox will keep using its local SmartProxy directly.</div>
`}
</div>
<div class="gateway-footer">
<dees-button
.text=${'Save dcrouter Settings'}
.type=${'default'}
.icon=${'lucide:Save'}
@click=${() => this.saveExternalGatewaySettings()}
></dees-button>
<div slot="footer" class="gateway-footer">
<button class="tile-button primary" type="button" @click=${() => this.saveExternalGatewaySettings()}>
Save dcrouter Settings
</button>
</div>
</section>
</dees-tile>
`;
}