From a2407f9377b7d6c578909facdb1fbba92cbd7bfb Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Thu, 14 Nov 2024 11:39:04 +0000 Subject: [PATCH] Fixing more CSS, particularly around the widgets which involve toggling elements. --- examples/theme_sandbox.py | 53 +++++++++++++------------- src/textual/widgets/_data_table.py | 10 ++--- src/textual/widgets/_radio_set.py | 15 +------- src/textual/widgets/_selection_list.py | 28 ++------------ src/textual/widgets/_toggle_button.py | 29 +------------- 5 files changed, 37 insertions(+), 98 deletions(-) diff --git a/examples/theme_sandbox.py b/examples/theme_sandbox.py index d29515062..8dedf4df5 100644 --- a/examples/theme_sandbox.py +++ b/examples/theme_sandbox.py @@ -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)) diff --git a/src/textual/widgets/_data_table.py b/src/textual/widgets/_data_table.py index a8bca4b7d..54f8dc638 100644 --- a/src/textual/widgets/_data_table.py +++ b/src/textual/widgets/_data_table.py @@ -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; } diff --git a/src/textual/widgets/_radio_set.py b/src/textual/widgets/_radio_set.py index 61802999b..0c71f71ce 100644 --- a/src/textual/widgets/_radio_set.py +++ b/src/textual/widgets/_radio_set.py @@ -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; diff --git a/src/textual/widgets/_selection_list.py b/src/textual/widgets/_selection_list.py index 05cac5c14..3c0080c8f 100644 --- a/src/textual/widgets/_selection_list.py +++ b/src/textual/widgets/_selection_list.py @@ -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; - } - } - } """ diff --git a/src/textual/widgets/_toggle_button.py b/src/textual/widgets/_toggle_button.py index abacb41f9..6f5f81cce 100644 --- a/src/textual/widgets/_toggle_button.py +++ b/src/textual/widgets/_toggle_button.py @@ -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 = "▐"