Merge pull request #5257 from Textualize/tutorial-update

Tutorial update
Textualize · Nov 19, 2024 · 532a6b0 · 532a6b0
2 parents 8d99130 + 9ce509f
commit 532a6b0
Show file tree

Hide file tree

Showing 17 changed files with 546 additions and 519 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.86.3] - 2024-11-19
+
+### Changed
+
+- Updated the tutorial (text and code) https://github.com/Textualize/textual/pull/5257
+
+### Fixed
+
+- Fixed a glitch with the scrollbar that occurs when you hold `a` to add stopwatches in the tutorial app https://github.com/Textualize/textual/pull/5257
 
 ## [0.86.2] - 2024-11-18
 
@@ -2552,7 +2561,7 @@ https://textual.textualize.io/blog/2022/11/08/version-040/#version-040
 - New handler system for messages that doesn't require inheritance
 - Improved traceback handling
 
-
+[0.86.3]: https://github.com/Textualize/textual/compare/v0.86.2...v0.86.3
 [0.86.2]: https://github.com/Textualize/textual/compare/v0.86.1...v0.86.2
 [0.86.1]: https://github.com/Textualize/textual/compare/v0.86.0...v0.86.1
 [0.86.0]: https://github.com/Textualize/textual/compare/v0.85.2...v0.86.0

diff --git a/docs/examples/tutorial/stopwatch.py b/docs/examples/tutorial/stopwatch.py
@@ -1,12 +1,12 @@
 from time import monotonic
 
 from textual.app import App, ComposeResult
-from textual.containers import ScrollableContainer
+from textual.containers import HorizontalGroup, VerticalScroll
 from textual.reactive import reactive
-from textual.widgets import Button, Footer, Header, Static
+from textual.widgets import Button, Digits, Footer, Header
 
 
-class TimeDisplay(Static):
+class TimeDisplay(Digits):
     """A widget to display elapsed time."""
 
     start_time = reactive(monotonic)
@@ -44,7 +44,7 @@ def reset(self):
         self.time = 0
 
 
-class Stopwatch(Static):
+class Stopwatch(HorizontalGroup):
     """A stopwatch widget."""
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -83,7 +83,7 @@ def compose(self) -> ComposeResult:
         """Called to add widgets to the app."""
         yield Header()
         yield Footer()
-        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch(), id="timers")
+        yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch(), id="timers")
 
     def action_add_stopwatch(self) -> None:
         """An action to add a timer."""

diff --git a/docs/examples/tutorial/stopwatch.tcss b/docs/examples/tutorial/stopwatch.tcss
@@ -8,8 +8,8 @@ Stopwatch {
 }
 
 TimeDisplay {
-    content-align: center middle;
-    text-opacity: 60%;
+    text-align: center;
+    color: $foreground-muted;   
     height: 3;
 }
 
@@ -30,14 +30,13 @@ Button {
     dock: right;
 }
 
-.started {
-    text-style: bold;
-    background: $success;
+.started {   
+    background: $success-muted;
     color: $text;
 }
 
 .started TimeDisplay {
-    text-opacity: 100%;
+    color: $foreground;
 }
 
 .started #start {

diff --git a/docs/examples/tutorial/stopwatch02.py b/docs/examples/tutorial/stopwatch02.py
@@ -1,13 +1,13 @@
 from textual.app import App, ComposeResult
-from textual.containers import ScrollableContainer
-from textual.widgets import Button, Footer, Header, Static
+from textual.containers import HorizontalGroup, VerticalScroll
+from textual.widgets import Button, Digits, Footer, Header
 
 
-class TimeDisplay(Static):
+class TimeDisplay(Digits):
     """A widget to display elapsed time."""
 
 
-class Stopwatch(Static):
+class Stopwatch(HorizontalGroup):
     """A stopwatch widget."""
 
     def compose(self) -> ComposeResult:
@@ -27,7 +27,7 @@ def compose(self) -> ComposeResult:
         """Create child widgets for the app."""
         yield Header()
         yield Footer()
-        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
+        yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
 
     def action_toggle_dark(self) -> None:
         """An action to toggle dark mode."""

diff --git a/docs/examples/tutorial/stopwatch03.py b/docs/examples/tutorial/stopwatch03.py
@@ -1,13 +1,13 @@
 from textual.app import App, ComposeResult
-from textual.containers import ScrollableContainer
-from textual.widgets import Button, Footer, Header, Static
+from textual.containers import HorizontalGroup, VerticalScroll
+from textual.widgets import Button, Digits, Footer, Header
 
 
-class TimeDisplay(Static):
+class TimeDisplay(Digits):
     """A widget to display elapsed time."""
 
 
-class Stopwatch(Static):
+class Stopwatch(HorizontalGroup):
     """A stopwatch widget."""
 
     def compose(self) -> ComposeResult:
@@ -28,7 +28,7 @@ def compose(self) -> ComposeResult:
         """Create child widgets for the app."""
         yield Header()
         yield Footer()
-        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
+        yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
 
     def action_toggle_dark(self) -> None:
         """An action to toggle dark mode."""

diff --git a/docs/examples/tutorial/stopwatch03.tcss b/docs/examples/tutorial/stopwatch03.tcss
@@ -1,15 +1,14 @@
-Stopwatch {
-    layout: horizontal;
+Stopwatch {   
     background: $boost;
     height: 5;
     margin: 1;
     min-width: 50;
     padding: 1;
 }
 
-TimeDisplay {
-    content-align: center middle;
-    text-opacity: 60%;
+TimeDisplay {   
+    text-align: center;
+    color: $foreground-muted;
     height: 3;
 }
 

diff --git a/docs/examples/tutorial/stopwatch04.py b/docs/examples/tutorial/stopwatch04.py
@@ -1,13 +1,13 @@
 from textual.app import App, ComposeResult
-from textual.containers import ScrollableContainer
-from textual.widgets import Button, Footer, Header, Static
+from textual.containers import HorizontalGroup, VerticalScroll
+from textual.widgets import Button, Digits, Footer, Header
 
 
-class TimeDisplay(Static):
+class TimeDisplay(Digits):
     """A widget to display elapsed time."""
 
 
-class Stopwatch(Static):
+class Stopwatch(HorizontalGroup):
     """A stopwatch widget."""
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -35,7 +35,7 @@ def compose(self) -> ComposeResult:
         """Create child widgets for the app."""
         yield Header()
         yield Footer()
-        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
+        yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
 
     def action_toggle_dark(self) -> None:
         """An action to toggle dark mode."""

diff --git a/docs/examples/tutorial/stopwatch04.tcss b/docs/examples/tutorial/stopwatch04.tcss
@@ -1,15 +1,14 @@
 Stopwatch {
-    layout: horizontal;
     background: $boost;
     height: 5;
     margin: 1;
     min-width: 50;
     padding: 1;
 }
 
-TimeDisplay {
-    content-align: center middle;
-    text-opacity: 60%;
+TimeDisplay {   
+    text-align: center;
+    color: $foreground-muted;
     height: 3;
 }
 
@@ -31,13 +30,12 @@ Button {
 }
 
 .started {
-    text-style: bold;
-    background: $success;
+    background: $success-muted;
     color: $text;
 }
 
 .started TimeDisplay {
-    text-opacity: 100%;
+    color: $foreground;
 }
 
 .started #start {

diff --git a/docs/examples/tutorial/stopwatch05.py b/docs/examples/tutorial/stopwatch05.py
@@ -1,12 +1,12 @@
 from time import monotonic
 
 from textual.app import App, ComposeResult
-from textual.containers import ScrollableContainer
+from textual.containers import HorizontalGroup, VerticalScroll
 from textual.reactive import reactive
-from textual.widgets import Button, Footer, Header, Static
+from textual.widgets import Button, Digits, Footer, Header
 
 
-class TimeDisplay(Static):
+class TimeDisplay(Digits):
     """A widget to display elapsed time."""
 
     start_time = reactive(monotonic)
@@ -27,7 +27,7 @@ def watch_time(self, time: float) -> None:
         self.update(f"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}")
 
 
-class Stopwatch(Static):
+class Stopwatch(HorizontalGroup):
     """A stopwatch widget."""
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -55,7 +55,7 @@ def compose(self) -> ComposeResult:
         """Create child widgets for the app."""
         yield Header()
         yield Footer()
-        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
+        yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
 
     def action_toggle_dark(self) -> None:
         """An action to toggle dark mode."""

diff --git a/docs/examples/tutorial/stopwatch06.py b/docs/examples/tutorial/stopwatch06.py
@@ -1,12 +1,12 @@
 from time import monotonic
 
 from textual.app import App, ComposeResult
-from textual.containers import ScrollableContainer
+from textual.containers import HorizontalGroup, VerticalScroll
 from textual.reactive import reactive
-from textual.widgets import Button, Footer, Header, Static
+from textual.widgets import Button, Digits, Footer, Header
 
 
-class TimeDisplay(Static):
+class TimeDisplay(Digits):
     """A widget to display elapsed time."""
 
     start_time = reactive(monotonic)
@@ -44,7 +44,7 @@ def reset(self) -> None:
         self.time = 0
 
 
-class Stopwatch(Static):
+class Stopwatch(HorizontalGroup):
     """A stopwatch widget."""
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -78,7 +78,7 @@ def compose(self) -> ComposeResult:
         """Called to add widgets to the app."""
         yield Header()
         yield Footer()
-        yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
+        yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
 
     def action_toggle_dark(self) -> None:
         """An action to toggle dark mode."""