From bb99d12ef0e8934f91bbeea7345c43d80cba1ed2 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Tue, 3 Dec 2024 15:46:07 +0000 Subject: [PATCH 1/3] added tab border style --- CHANGELOG.md | 4 + src/textual/_border.py | 16 ++- src/textual/css/constants.py | 1 + src/textual/css/types.py | 1 + src/textual/widgets/_footer.py | 7 +- .../test_textual_dev_border_preview.svg | 120 +++++++++--------- tests/snapshot_tests/test_snapshots.py | 25 ++++ 7 files changed, 107 insertions(+), 67 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 51bf4928d5..70cf13e154 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## Unreleased +## Added + +- Added "tab" border style + ## Changed - Fixed Select not scrolling highlight in to view when clicked https://github.com/Textualize/textual/issues/5255 diff --git a/src/textual/_border.py b/src/textual/_border.py index e551ec7a61..7e35d7fc54 100644 --- a/src/textual/_border.py +++ b/src/textual/_border.py @@ -107,6 +107,11 @@ ("▊", " ", "▎"), ("▊", "▁", "▎"), ), + "tab": ( + ("▁", "▁", "▁"), + ("▎", " ", "▊"), + ("▔", "▔", "▔"), + ), "wide": ( ("▁", "▁", "▁"), ("▎", " ", "▊"), @@ -205,6 +210,11 @@ (2, 0, 1), (2, 0, 1), ), + "tab": ( + (1, 1, 1), + (0, 1, 3), + (1, 1, 1), + ), "wide": ( (1, 1, 1), (0, 1, 3), @@ -215,7 +225,10 @@ # Some borders (such as panel) require that the title (and subtitle) be draw in reverse. # This is a mapping of the border type on to a tuple for the top and bottom borders, to indicate # reverse colors is required. -BORDER_TITLE_FLIP: dict[str, tuple[bool, bool]] = {"panel": (True, False)} +BORDER_TITLE_FLIP: dict[str, tuple[bool, bool]] = { + "panel": (True, False), + "tab": (True, True), +} # In a similar fashion, we extract the border _label_ locations for easier access when # rendering a border label. @@ -343,6 +356,7 @@ def render_border_label( cells_reserved = 2 * corners_needed text_label, label_style = label + if not text_label.cell_len or width <= cells_reserved: return diff --git a/src/textual/css/constants.py b/src/textual/css/constants.py index b8ad1234a7..160ff03330 100644 --- a/src/textual/css/constants.py +++ b/src/textual/css/constants.py @@ -22,6 +22,7 @@ "round", "solid", "tall", + "tab", "thick", "vkey", "wide", diff --git a/src/textual/css/types.py b/src/textual/css/types.py index 5e65ee5311..a8f6b1f799 100644 --- a/src/textual/css/types.py +++ b/src/textual/css/types.py @@ -24,6 +24,7 @@ "hkey", "vkey", "tall", + "tab", "panel", "wide", ] diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py index f8bf5e6967..7cc543bbe9 100644 --- a/src/textual/widgets/_footer.py +++ b/src/textual/widgets/_footer.py @@ -47,12 +47,7 @@ class FooterKey(Widget): } &.-disabled { - text-style: dim; - &:hover { - .footer-key--key { - background: $foreground-disabled; - } - } + text-style: dim; } &.-compact { diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_textual_dev_border_preview.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_textual_dev_border_preview.svg index 985a78fc94..0fef184226 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_textual_dev_border_preview.svg +++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_textual_dev_border_preview.svg @@ -19,136 +19,136 @@ font-weight: 700; } - .terminal-3606093770-matrix { + .terminal-3879800597-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-3606093770-title { + .terminal-3879800597-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-3606093770-r1 { fill: #121212 } -.terminal-3606093770-r2 { fill: #0178d4 } -.terminal-3606093770-r3 { fill: #e0e0e0 } -.terminal-3606093770-r4 { fill: #c5c8c6 } -.terminal-3606093770-r5 { fill: #ddedf9;font-weight: bold } -.terminal-3606093770-r6 { fill: #e2e3e5 } + .terminal-3879800597-r1 { fill: #121212 } +.terminal-3879800597-r2 { fill: #0178d4 } +.terminal-3879800597-r3 { fill: #e0e0e0 } +.terminal-3879800597-r4 { fill: #c5c8c6 } +.terminal-3879800597-r5 { fill: #ddedf9;font-weight: bold } +.terminal-3879800597-r6 { fill: #e2e3e5 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - BorderApp + BorderApp - - - - ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ -▊ascii           ▎ -▊blank           ▎ -▊dashed          ▎+--------------------- ascii ----------------------+ -▊double          ▎|| -▊heavy           ▎|| -▊hidden          ▎|I must not fear.| -▊hkey            ▎|Fear is the mind-killer.| -▊inner           ▎|Fear is the little-death that brings total| -▊none            ▎|obliteration.| -▊outer           ▎|I will face my fear.| -▊panel           ▎|I will permit it to pass over me and | -▊round           ▎|through me.| -▊solid           ▎|And when it has gone past, I will turn the| -▊tall            ▎|inner eye to see its path.| -▊thick           ▎|Where the fear has gone there will be | -▊vkey            ▎|nothing. Only I will remain.| -▊wide            ▎|| -▊▎|| -▊▎+-------------------------------- border subtitle -+ -▊▎ -▊▎ -▊▎ -▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎ + + + + ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ +▊ascii           ▎ +▊blank           ▎ +▊dashed          ▎+--------------------- ascii ----------------------+ +▊double          ▎|| +▊heavy           ▎|| +▊hidden          ▎|I must not fear.| +▊hkey            ▎|Fear is the mind-killer.| +▊inner           ▎|Fear is the little-death that brings total| +▊none            ▎|obliteration.| +▊outer           ▎|I will face my fear.| +▊panel           ▎|I will permit it to pass over me and | +▊round           ▎|through me.| +▊solid           ▎|And when it has gone past, I will turn the| +▊tab             ▎|inner eye to see its path.| +▊tall            ▎|Where the fear has gone there will be | +▊thick           ▎|nothing. Only I will remain.| +▊vkey            ▎|| +▊wide            ▎|| +▊▎+-------------------------------- border subtitle -+ +▊▎ +▊▎ +▊▎ +▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎ diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py index 0c18b4e42d..a2deb57f16 100644 --- a/tests/snapshot_tests/test_snapshots.py +++ b/tests/snapshot_tests/test_snapshots.py @@ -2888,3 +2888,28 @@ def compose(self) -> ComposeResult: yield SelectionList(("Hello World " * 100, 0)) snap_compare(SelectionListApp()) + + +def test_border_tab(snap_compare): + """Test tab border style. You should see a border with a left align tab + at the top and a right aligned tab at the bottom.""" + + class TabApp(App): + CSS = """ + Screen { + align: center middle; + } + Label { + border: tab $border; + padding: 2 4; + border-title-align: left; + } + """ + + def compose(self) -> ComposeResult: + label = Label("Hello, World") + label.border_title = "Tab Border" + label.border_subtitle = ":-)" + yield label + + snap_compare(TabApp()) From 2e46c55dfb255c74ec21978dd87260dcd71a275f Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Tue, 3 Dec 2024 15:46:41 +0000 Subject: [PATCH 2/3] changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 70cf13e154..a7596da261 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## Added -- Added "tab" border style +- Added "tab" border style https://github.com/Textualize/textual/pull/5335 ## Changed From 93f823fb850a45dcf39628646abe1c570b755c42 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Tue, 3 Dec 2024 15:47:45 +0000 Subject: [PATCH 3/3] missing snapshot --- .../test_snapshots/test_border_tab.svg | 152 ++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 tests/snapshot_tests/__snapshots__/test_snapshots/test_border_tab.svg diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_border_tab.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_border_tab.svg new file mode 100644 index 0000000000..3dcb22b6db --- /dev/null +++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_border_tab.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + TabApp + + + + + + + + + + + + + + + + + +▁▁ Tab Border ▁▁▁▁▁▁▁▁ +▎▊ +▎▊ +▎Hello, World▊ +▎▊ +▎▊ +▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ :-) ▔▔ + + + + + + + + + + + +