Restore shared text button styling

Reintroduce the shared .text-button primitive in WebUI button CSS so model-config preset controls no longer depend on the chat composer being mounted first.

Document the shared compact text-action contract and add a focused regression covering Model Presets and Model Configuration text-button usage.
This commit is contained in:
Alessandro 2026-06-23 17:36:27 +02:00
parent 5c5dc07f92
commit d707fe7bcf
3 changed files with 73 additions and 0 deletions

View file

@ -0,0 +1,22 @@
from pathlib import Path
PROJECT_ROOT = Path(__file__).resolve().parents[1]
def read(*parts: str) -> str:
return PROJECT_ROOT.joinpath(*parts).read_text(encoding="utf-8")
def test_model_config_text_buttons_have_shared_primitive() -> None:
buttons_css = read("webui", "css", "buttons.css")
preset_modal = read("plugins", "_model_config", "webui", "main.html")
config_modal = read("plugins", "_model_config", "webui", "config.html")
assert ".text-button {" in buttons_css
assert "appearance: none;" in buttons_css
assert ".text-button:hover:not(:disabled)" in buttons_css
assert ".text-button .material-symbols-outlined" in buttons_css
assert 'class="text-button preset-add-btn"' in preset_modal
assert 'class="text-button preset-delete-btn"' in preset_modal
assert 'class="text-button"' in config_modal

View file

@ -19,6 +19,7 @@
- Avoid broad selectors that unexpectedly restyle plugin UI or unrelated components.
- Keep layout rules responsive and verify text does not overflow fixed controls.
- Shared modal buttons use `btn btn-ok` for positive actions and `btn btn-cancel` for dismissive or negative actions.
- Shared compact text actions use `.text-button`; component-local styles may adjust layout or sizing but must not be the only definition of the primitive.
- Modal footer action order is positive action first, dismissive or negative action second.
- Modal footers use `.modal-footer` plus `data-modal-footer`; do not redefine `.btn`, `.modal-footer`, `.modal-inner`, or `.modal-scroll` inside components.
- Shared modal sizing keeps `.modal-inner` centered with `width: 90%`, `max-width: 960px`, and `max-height: 90vh`.

View file

@ -21,6 +21,56 @@
box-sizing: border-box;
}
.text-button {
appearance: none;
background-color: transparent;
border: none;
border-radius: 5px;
color: var(--color-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
font-family: "Rubik", Arial, Helvetica, sans-serif;
font-size: 0.78rem;
line-height: 1.2;
opacity: 0.82;
padding: 6px var(--spacing-sm);
transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}
.text-button:hover:not(:disabled) {
opacity: 1;
background-color: var(--color-background-hover);
}
.text-button:active:not(:disabled) {
opacity: 0.5;
}
.text-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.text-button .material-symbols-outlined,
.text-button .material-icons-outlined {
font-size: 1rem;
line-height: 1;
flex-shrink: 0;
}
.text-button svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.text-button p {
margin-block: 0;
}
.button.confirm {
background: var(--color-highlight);
color: #fff;