Skip to content

Commit 532a6b0

Browse files
willmcguganwillmcgugan
authored
Merge pull request #5257 from Textualize/tutorial-update
Tutorial update
2 parents 8d99130 + 9ce509f commit 532a6b0

17 files changed

+546
-519
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](http://keepachangelog.com/)
66
and this project adheres to [Semantic Versioning](http://semver.org/).
77

8+
## [0.86.3] - 2024-11-19
9+
10+
### Changed
11+
12+
- Updated the tutorial (text and code) https://github.com/Textualize/textual/pull/5257
13+
14+
### Fixed
15+
16+
- 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
817

918
## [0.86.2] - 2024-11-18
1019

@@ -2552,7 +2561,7 @@ https://textual.textualize.io/blog/2022/11/08/version-040/#version-040
25522561
- New handler system for messages that doesn't require inheritance
25532562
- Improved traceback handling
25542563

2555-
2564+
[0.86.3]: https://github.com/Textualize/textual/compare/v0.86.2...v0.86.3
25562565
[0.86.2]: https://github.com/Textualize/textual/compare/v0.86.1...v0.86.2
25572566
[0.86.1]: https://github.com/Textualize/textual/compare/v0.86.0...v0.86.1
25582567
[0.86.0]: https://github.com/Textualize/textual/compare/v0.85.2...v0.86.0

‎docs/examples/tutorial/stopwatch.py

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
from time import monotonic
22

33
from textual.app import App, ComposeResult
4-
from textual.containers import ScrollableContainer
4+
from textual.containers import HorizontalGroup, VerticalScroll
55
from textual.reactive import reactive
6-
from textual.widgets import Button, Footer, Header, Static
6+
from textual.widgets import Button, Digits, Footer, Header
77

88

9-
class TimeDisplay(Static):
9+
class TimeDisplay(Digits):
1010
"""A widget to display elapsed time."""
1111

1212
start_time = reactive(monotonic)
@@ -44,7 +44,7 @@ def reset(self):
4444
self.time = 0
4545

4646

47-
class Stopwatch(Static):
47+
class Stopwatch(HorizontalGroup):
4848
"""A stopwatch widget."""
4949

5050
def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -83,7 +83,7 @@ def compose(self) -> ComposeResult:
8383
"""Called to add widgets to the app."""
8484
yield Header()
8585
yield Footer()
86-
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch(), id="timers")
86+
yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch(), id="timers")
8787

8888
def action_add_stopwatch(self) -> None:
8989
"""An action to add a timer."""

‎docs/examples/tutorial/stopwatch.tcss

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ Stopwatch {
88
}
99

1010
TimeDisplay {
11-
content-align: center middle;
12-
text-opacity: 60%;
11+
text-align: center;
12+
color: $foreground-muted;
1313
height: 3;
1414
}
1515

@@ -30,14 +30,13 @@ Button {
3030
dock: right;
3131
}
3232

33-
.started {
34-
text-style: bold;
35-
background: $success;
33+
.started {
34+
background: $success-muted;
3635
color: $text;
3736
}
3837

3938
.started TimeDisplay {
40-
text-opacity: 100%;
39+
color: $foreground;
4140
}
4241

4342
.started #start {

‎docs/examples/tutorial/stopwatch02.py

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
from textual.app import App, ComposeResult
2-
from textual.containers import ScrollableContainer
3-
from textual.widgets import Button, Footer, Header, Static
2+
from textual.containers import HorizontalGroup, VerticalScroll
3+
from textual.widgets import Button, Digits, Footer, Header
44

55

6-
class TimeDisplay(Static):
6+
class TimeDisplay(Digits):
77
"""A widget to display elapsed time."""
88

99

10-
class Stopwatch(Static):
10+
class Stopwatch(HorizontalGroup):
1111
"""A stopwatch widget."""
1212

1313
def compose(self) -> ComposeResult:
@@ -27,7 +27,7 @@ def compose(self) -> ComposeResult:
2727
"""Create child widgets for the app."""
2828
yield Header()
2929
yield Footer()
30-
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
30+
yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
3131

3232
def action_toggle_dark(self) -> None:
3333
"""An action to toggle dark mode."""

‎docs/examples/tutorial/stopwatch03.py

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
from textual.app import App, ComposeResult
2-
from textual.containers import ScrollableContainer
3-
from textual.widgets import Button, Footer, Header, Static
2+
from textual.containers import HorizontalGroup, VerticalScroll
3+
from textual.widgets import Button, Digits, Footer, Header
44

55

6-
class TimeDisplay(Static):
6+
class TimeDisplay(Digits):
77
"""A widget to display elapsed time."""
88

99

10-
class Stopwatch(Static):
10+
class Stopwatch(HorizontalGroup):
1111
"""A stopwatch widget."""
1212

1313
def compose(self) -> ComposeResult:
@@ -28,7 +28,7 @@ def compose(self) -> ComposeResult:
2828
"""Create child widgets for the app."""
2929
yield Header()
3030
yield Footer()
31-
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
31+
yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
3232

3333
def action_toggle_dark(self) -> None:
3434
"""An action to toggle dark mode."""

‎docs/examples/tutorial/stopwatch03.tcss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
Stopwatch {
2-
layout: horizontal;
1+
Stopwatch {
32
background: $boost;
43
height: 5;
54
margin: 1;
65
min-width: 50;
76
padding: 1;
87
}
98

10-
TimeDisplay {
11-
content-align: center middle;
12-
text-opacity: 60%;
9+
TimeDisplay {
10+
text-align: center;
11+
color: $foreground-muted;
1312
height: 3;
1413
}
1514

‎docs/examples/tutorial/stopwatch04.py

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
from textual.app import App, ComposeResult
2-
from textual.containers import ScrollableContainer
3-
from textual.widgets import Button, Footer, Header, Static
2+
from textual.containers import HorizontalGroup, VerticalScroll
3+
from textual.widgets import Button, Digits, Footer, Header
44

55

6-
class TimeDisplay(Static):
6+
class TimeDisplay(Digits):
77
"""A widget to display elapsed time."""
88

99

10-
class Stopwatch(Static):
10+
class Stopwatch(HorizontalGroup):
1111
"""A stopwatch widget."""
1212

1313
def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -35,7 +35,7 @@ def compose(self) -> ComposeResult:
3535
"""Create child widgets for the app."""
3636
yield Header()
3737
yield Footer()
38-
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
38+
yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
3939

4040
def action_toggle_dark(self) -> None:
4141
"""An action to toggle dark mode."""

‎docs/examples/tutorial/stopwatch04.tcss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
Stopwatch {
2-
layout: horizontal;
32
background: $boost;
43
height: 5;
54
margin: 1;
65
min-width: 50;
76
padding: 1;
87
}
98

10-
TimeDisplay {
11-
content-align: center middle;
12-
text-opacity: 60%;
9+
TimeDisplay {
10+
text-align: center;
11+
color: $foreground-muted;
1312
height: 3;
1413
}
1514

@@ -31,13 +30,12 @@ Button {
3130
}
3231

3332
.started {
34-
text-style: bold;
35-
background: $success;
33+
background: $success-muted;
3634
color: $text;
3735
}
3836

3937
.started TimeDisplay {
40-
text-opacity: 100%;
38+
color: $foreground;
4139
}
4240

4341
.started #start {

‎docs/examples/tutorial/stopwatch05.py

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
from time import monotonic
22

33
from textual.app import App, ComposeResult
4-
from textual.containers import ScrollableContainer
4+
from textual.containers import HorizontalGroup, VerticalScroll
55
from textual.reactive import reactive
6-
from textual.widgets import Button, Footer, Header, Static
6+
from textual.widgets import Button, Digits, Footer, Header
77

88

9-
class TimeDisplay(Static):
9+
class TimeDisplay(Digits):
1010
"""A widget to display elapsed time."""
1111

1212
start_time = reactive(monotonic)
@@ -27,7 +27,7 @@ def watch_time(self, time: float) -> None:
2727
self.update(f"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}")
2828

2929

30-
class Stopwatch(Static):
30+
class Stopwatch(HorizontalGroup):
3131
"""A stopwatch widget."""
3232

3333
def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -55,7 +55,7 @@ def compose(self) -> ComposeResult:
5555
"""Create child widgets for the app."""
5656
yield Header()
5757
yield Footer()
58-
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
58+
yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
5959

6060
def action_toggle_dark(self) -> None:
6161
"""An action to toggle dark mode."""

‎docs/examples/tutorial/stopwatch06.py

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
from time import monotonic
22

33
from textual.app import App, ComposeResult
4-
from textual.containers import ScrollableContainer
4+
from textual.containers import HorizontalGroup, VerticalScroll
55
from textual.reactive import reactive
6-
from textual.widgets import Button, Footer, Header, Static
6+
from textual.widgets import Button, Digits, Footer, Header
77

88

9-
class TimeDisplay(Static):
9+
class TimeDisplay(Digits):
1010
"""A widget to display elapsed time."""
1111

1212
start_time = reactive(monotonic)
@@ -44,7 +44,7 @@ def reset(self) -> None:
4444
self.time = 0
4545

4646

47-
class Stopwatch(Static):
47+
class Stopwatch(HorizontalGroup):
4848
"""A stopwatch widget."""
4949

5050
def on_button_pressed(self, event: Button.Pressed) -> None:
@@ -78,7 +78,7 @@ def compose(self) -> ComposeResult:
7878
"""Called to add widgets to the app."""
7979
yield Header()
8080
yield Footer()
81-
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
81+
yield VerticalScroll(Stopwatch(), Stopwatch(), Stopwatch())
8282

8383
def action_toggle_dark(self) -> None:
8484
"""An action to toggle dark mode."""

0 commit comments

Comments
 (0)