ux: normalize plugin settings forms via ui-form

This commit is contained in:
Marco Allegretti 2026-01-30 12:05:55 +01:00
parent f5bf8d5e44
commit 368264e286
2 changed files with 3 additions and 21 deletions

View file

@ -167,7 +167,7 @@
border-color: var(--color-border-hover);
}
:where(input, textarea, select):focus-visible {
:where(input, textarea, select):focus {
outline: none;
border-color: var(--color-primary);
}

View file

@ -121,7 +121,7 @@ const { slug } = Astro.params;
if (!schema || !schema.properties) {
const settingsText = JSON.stringify(settings ?? {}, null, 2);
return `
<div class="settings-body">
<div class="settings-body ui-form" style="--ui-form-group-mb: 0.75rem;">
<p class="settings-hint">No schema defined. Edit raw JSON:</p>
<textarea class="settings-json" spellcheck="false" data-name="${escapeHtml(pluginName)}">${escapeHtml(settingsText)}</textarea>
<div class="settings-actions">
@ -137,7 +137,7 @@ const { slug } = Astro.params;
}).join('');
return `
<form class="settings-form" data-plugin="${escapeHtml(pluginName)}">
<form class="settings-form ui-form" data-plugin="${escapeHtml(pluginName)}" style="--ui-form-group-mb: 1rem;">
${fields}
<div class="settings-actions">
<button type="submit" class="ui-btn ui-btn-primary">Save Settings</button>
@ -459,13 +459,8 @@ const { slug } = Astro.params;
}
textarea.settings-json {
width: 100%;
min-height: 140px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-field-bg);
padding: 0.75rem;
color: var(--color-text);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9rem;
resize: vertical;
@ -565,19 +560,6 @@ const { slug } = Astro.params;
font-size: 0.9rem;
}
.schema-field input[type="text"],
.schema-field input[type="number"],
.schema-field select {
border-radius: var(--radius-md);
}
.schema-field input[type="text"]:focus,
.schema-field input[type="number"]:focus,
.schema-field select:focus {
outline: none;
border-color: var(--color-primary);
}
.checkbox-label {
display: flex;
align-items: center;