Fixing more CSS, particularly around the widgets which involve toggling elements.

This commit is contained in:
Darren Burns
2024-11-14 11:39:04 +00:00
parent 260f28fd56
commit a2407f9377
5 changed files with 37 additions and 98 deletions

View File

@@ -363,8 +363,31 @@ class ChangingThemeApp(App[None]):
yield Header(show_clock=True, icon="🐟")
yield ThemeList(id="theme-list")
with VerticalScroll(id="widget-list") as container:
container.can_focus = False
with VerticalScroll(id="widget-list", can_focus=False) as container:
yield ToggleButton(label="Toggle Button")
yield SelectionList[int](
("Falken's Maze", 0, True),
("Black Jack", 1),
("Gin Rummy", 2),
("Hearts", 3),
("Bridge", 4),
("Checkers", 5),
("Chess", 6, True),
("Poker", 7),
("Fighter Combat", 8, True),
)
yield RadioSet(
"Amanda",
"Connor MacLeod",
"Duncan MacLeod",
"Heather MacLeod",
"Joe Dawson",
"Kurgan, [bold italic red]The[/]",
"Methos",
"Rachel Ellenstein",
"Ramírez",
)
yield Select(
[("foo", "foo"), ("bar", "bar"), ("baz", "baz"), ("qux", "qux")]
@@ -460,35 +483,11 @@ class ChangingThemeApp(App[None]):
)
yield Switch()
yield ToggleButton(label="Toggle Button")
yield SelectionList[int](
("Falken's Maze", 0, True),
("Black Jack", 1),
("Gin Rummy", 2),
("Hearts", 3),
("Bridge", 4),
("Checkers", 5),
("Chess", 6, True),
("Poker", 7),
("Fighter Combat", 8, True),
)
yield RadioSet(
"Amanda",
"Connor MacLeod",
"Duncan MacLeod",
"Heather MacLeod",
"Joe Dawson",
"Kurgan, [bold italic red]The[/]",
"Methos",
"Rachel Ellenstein",
"Ramírez",
)
yield Footer()
def on_mount(self) -> None:
self.theme = "textual-ansi"
self.theme = "textual-light"
text_area = self.query_one(TextArea)
text_area.selection = Selection((0, 0), (1, 10))

View File

@@ -35,12 +35,8 @@ from textual.widget import PseudoClasses
CellCacheKey: TypeAlias = (
"tuple[RowKey, ColumnKey, Style, bool, bool, bool, int, PseudoClasses]"
)
LineCacheKey: TypeAlias = (
"tuple[int, int, int, int, Coordinate, Coordinate, Style, CursorType, bool, int, PseudoClasses]"
)
RowCacheKey: TypeAlias = (
"tuple[RowKey, int, Style, Coordinate, Coordinate, CursorType, bool, bool, int, PseudoClasses]"
)
LineCacheKey: TypeAlias = "tuple[int, int, int, int, Coordinate, Coordinate, Style, CursorType, bool, int, PseudoClasses]"
RowCacheKey: TypeAlias = "tuple[RowKey, int, Style, Coordinate, Coordinate, CursorType, bool, bool, int, PseudoClasses]"
CursorType = Literal["cell", "row", "column", "none"]
"""The valid types of cursors for [`DataTable.cursor_type`][textual.widgets.DataTable.cursor_type]."""
CellType = TypeVar("CellType")
@@ -360,7 +356,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
}
& > .datatable--fixed {
background: $secondary 50%;
background: $secondary-muted;
color: $foreground;
}

View File

@@ -39,7 +39,7 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
padding: 0;
& > .toggle--button {
color: $surface;
color: $panel-darken-1;
background: $panel;
}
@@ -49,7 +49,7 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
}
& > RadioButton.-on .toggle--button {
color: $success;
color: $text-success;
}
&:focus {
@@ -58,17 +58,6 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
*/
border: tall $border;
background-tint: $foreground 5%;
& > RadioButton {
& > .toggle--button {
color: $surface;
background: $panel-lighten-1;
}
&.-on > .toggle--button {
color: $success;
}
}
& > RadioButton.-selected {
color: $block-cursor-foreground;
text-style: $block-cursor-text-style;

View File

@@ -98,45 +98,25 @@ class SelectionList(Generic[SelectionType], OptionList):
height: auto;
& > .selection-list--button {
color: $surface-darken-1;
color: $panel-darken-1;
background: $panel;
}
& > .selection-list--button-highlighted {
color: $surface-darken-1;
color: $panel-darken-1;
background: $panel;
}
& > .selection-list--button-selected {
color: $success;
color: $text-success;
background: $panel;
}
& > .selection-list--button-selected-highlighted {
color: $success;
color: $text-success;
background: $panel;
}
&:focus {
& > .selection-list--button {
background: $panel-lighten-1;
}
& > .selection-list--button-highlighted {
background: $panel-lighten-1;
}
& > .selection-list--button-selected {
color: $success;
background: $panel-lighten-1;
}
& > .selection-list--button-selected-highlighted {
color: $success;
background: $panel-lighten-1;
}
}
}
"""

View File

@@ -60,12 +60,12 @@ class ToggleButton(Static, can_focus=True):
background: $surface;
& > .toggle--button {
color: red;
color: $panel-darken-1;
background: $panel;
}
&.-on > .toggle--button {
color: $success;
color: $text-success;
background: $panel;
}
@@ -77,18 +77,6 @@ class ToggleButton(Static, can_focus=True):
background: $block-cursor-background;
text-style: $block-cursor-text-style;
}
& > .toggle--button {
background: $panel-lighten-1;
}
&.-on > .toggle--button {
background: $panel-lighten-1;
}
&:hover {
& > .toggle--label {
background: $block-cursor-background;
}
}
}
&:hover {
@@ -98,19 +86,6 @@ class ToggleButton(Static, can_focus=True):
}
}
/* Base button colors (including in dark themes). */
ToggleButton > .toggle--button {
text-style: $block-cursor-text-style;
background: $foreground 15%;
}
ToggleButton.-on:focus > .toggle--button {
background: $foreground 25%;
}
""" # TODO: https://github.com/Textualize/textual/issues/1780
BUTTON_LEFT: str = ""