alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Simplify the styling of the button

Browse Source
This commit is contained in:
Dave Pearson
2023-02-22 12:58:40 +00:00
parent f8f3691239
commit 277412b92e
1 changed files with 15 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/textual/widgets/_toggle.py
View File

@@ -7,6 +7,7 @@ from __future__ import annotations
from typing import ClassVar
from rich.style import Style
from rich.text import Text, TextType
from ..app import RenderResult
@@ -29,18 +30,14 @@ class ToggleButton(Static, can_focus=True):
"""
COMPONENT_CLASSES: ClassVar[set[str]] = {
"toggle--button",
"toggle--label",
"toggle--button-sides",
"toggle--button-off",
"toggle--button-on",
}
"""
| Class | Description |
| :- | :- |
| `toggle--label` | Targets the text label of the toggle button. |
| `toggle--button-sides` | Targets the side characters of the toggle button. |
| `toggle--button-off` | Targets the inner character of the toggle button when off. |
| `toggle--button-on` | Targets the inner character of the toggle button when on. |
| `toggle--button` | Targets toggle button itself. |
"""
DEFAULT_CSS = """
@@ -53,29 +50,22 @@ class ToggleButton(Static, can_focus=True):
text-style: underline;
}
ToggleButton > .toggle--button-sides {
color: $panel-lighten-2;
ToggleButton > .toggle--button {
color: $background 50%;
background: $foreground 15%;
}
ToggleButton:focus > .toggle--button-sides {
color: $panel-lighten-3;
ToggleButton:focus > .toggle--button {
color: $background 50%;
background: $foreground 25%;
}
ToggleButton > .toggle--button-on {
ToggleButton.-on > .toggle--button {
color: $success;
background: $panel-lighten-2;
}
ToggleButton:focus > .toggle--button-on {
background: $panel-lighten-3;
}
ToggleButton > .toggle--button-off {
color: $panel;
background: $panel-lighten-2;
}
ToggleButton:focus > .toggle--button-off {
ToggleButton.-on:focus > .toggle--button {
background: $panel-lighten-3;
}
""" # TODO: https://github.com/Textualize/textual/issues/1780
@@ -128,13 +118,13 @@ class ToggleButton(Static, can_focus=True):
@property
def _button(self) -> Text:
"""The button, reflecting the current value."""
side_style = self.get_component_rich_style("toggle--button-sides")
inner_style = self.get_component_rich_style(
f"toggle--button-{'on' if self.value else 'off'}"
button_style = self.get_component_rich_style("toggle--button")
side_style = Style.from_color(
button_style.bgcolor, self.background_colors[1].rich_color
)
return Text.assemble(
Text(self.button_left, style=side_style),
Text(self.button_inner, style=inner_style),
Text(self.button_inner, style=button_style),
Text(self.button_right, style=side_style),
)