From 8946421b3ae868c24a3a523baa67aaebedc7a34c Mon Sep 17 00:00:00 2001 From: Dave Pearson Date: Mon, 31 Oct 2022 09:55:39 +0000 Subject: [PATCH 1/3] Ensure the app title is in the centre of the terminal While the app title is always centred, there was an issue where the clock being visible or invisible would throw off this centralisation. This addresses that by keeping the space used by the clock, but simply not showing the clock. See #1060. --- src/textual/widgets/_header.py | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/textual/widgets/_header.py b/src/textual/widgets/_header.py index c4382906d..3bf5350ed 100644 --- a/src/textual/widgets/_header.py +++ b/src/textual/widgets/_header.py @@ -25,14 +25,26 @@ class HeaderIcon(Widget): return self.icon -class HeaderClock(Widget): +class HeaderClockSpace(Widget): + """The space taken up by the clock on the right of the header.""" + + DEFAULT_CSS = """ + HeaderClockSpace { + dock: right; + width: 10; + padding: 0 1; + } + """ + + def render(self) -> str: + return "" + + +class HeaderClock(HeaderClockSpace): """Display a clock on the right of the header.""" DEFAULT_CSS = """ HeaderClock { - dock: right; - width: 10; - padding: 0 1; background: $secondary-background-lighten-1; color: $text; text-opacity: 85%; @@ -52,9 +64,9 @@ class HeaderTitle(Widget): DEFAULT_CSS = """ HeaderTitle { + layer: title; content-align: center middle; width: 100%; - margin-right: 10; } """ @@ -78,6 +90,7 @@ class Header(Widget): DEFAULT_CSS = """ Header { + layers: title decoration; dock: top; width: 100%; background: $secondary-background; @@ -107,8 +120,7 @@ class Header(Widget): def compose(self): yield HeaderIcon() yield HeaderTitle() - if self.show_clock: - yield HeaderClock() + yield HeaderClock() if self.show_clock else HeaderClockSpace() def watch_tall(self, tall: bool) -> None: self.set_class(tall, "-tall") From 6bdeba894c689c27f2358ab28826b611d0077bbd Mon Sep 17 00:00:00 2001 From: Dave Pearson Date: Mon, 31 Oct 2022 10:00:45 +0000 Subject: [PATCH 2/3] Update header-related snapshot The underlying snapshot is different in content, but not in effect, which is by design. See #1060. --- .../__snapshots__/test_snapshots.ambr | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr index 92eb75fc1..e01117b7d 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr +++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr @@ -5404,132 +5404,132 @@ font-weight: 700; } - .terminal-1853139379-matrix { + .terminal-2939949418-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1853139379-title { + .terminal-2939949418-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1853139379-r1 { fill: #c5c8c6 } - .terminal-1853139379-r2 { fill: #e8e7e5 } - .terminal-1853139379-r3 { fill: #e1e1e1 } + .terminal-2939949418-r1 { fill: #c5c8c6 } + .terminal-2939949418-r2 { fill: #e8e7e5 } + .terminal-2939949418-r3 { fill: #e1e1e1 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - HeaderApp + HeaderApp - - - - ⭘HeaderApp - - - - - - - - - - - - - - - - - - - - - - + + + + ⭘HeaderApp + + + + + + + + + + + + + + + + + + + + + + From ec44edf19c1e4501efaf0f2cbac272f62e974535 Mon Sep 17 00:00:00 2001 From: Dave Pearson Date: Mon, 31 Oct 2022 10:06:39 +0000 Subject: [PATCH 3/3] Remove vestigial test code While trying a couple of approaches to fixing #1060 I experimented with using layers, but forgot to roll back that code. --- src/textual/widgets/_header.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/textual/widgets/_header.py b/src/textual/widgets/_header.py index 3bf5350ed..39f952785 100644 --- a/src/textual/widgets/_header.py +++ b/src/textual/widgets/_header.py @@ -64,7 +64,6 @@ class HeaderTitle(Widget): DEFAULT_CSS = """ HeaderTitle { - layer: title; content-align: center middle; width: 100%; } @@ -90,7 +89,6 @@ class Header(Widget): DEFAULT_CSS = """ Header { - layers: title decoration; dock: top; width: 100%; background: $secondary-background;