mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-07-09 17:08:29 +00:00
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:
parent
5c5dc07f92
commit
d707fe7bcf
3 changed files with 73 additions and 0 deletions
22
tests/test_model_config_ui.py
Normal file
22
tests/test_model_config_ui.py
Normal 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
|
||||
|
|
@ -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`.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue