introduction docs

docs/examples/introduction/stopwatch.css

@@ -1,7 +1,6 @@
-TimerWidget {
+Stopwatch {
     layout: horizontal;
     background: $panel-darken-1;
-    
     height: 5;
     min-width: 50;
     margin: 1;
@@ -9,7 +8,7 @@ TimerWidget {
     transition: background 300ms linear;
 }
 
-TimerWidget.started {   
+Stopwatch.started {   
     text-style: bold;
     background: $success;
     color: $text-success;
@@ -22,7 +21,7 @@ TimeDisplay {
     height: 3;
 }
 
-TimerWidget.started TimeDisplay {
+Stopwatch.started TimeDisplay {
     opacity: 100%;
 }
 
@@ -43,15 +42,15 @@ Button {
     dock: right;
 }
 
-TimerWidget.started #start {
+Stopwatch.started #start {
     display: none
 }
 
-TimerWidget.started #stop {
+Stopwatch.started #stop {
     display: block
 }
 
-TimerWidget.started #reset {
+Stopwatch.started #reset {
     visibility: hidden
 }
 

docs/examples/introduction/stopwatch.py

@@ -9,16 +9,16 @@ from textual.widgets import Button, Header, Footer, Static
 class TimeDisplay(Static):
     """Displays the time."""
 
-    time_delta = Reactive(0.0)
+    time = Reactive(0.0)
 
-    def watch_time_delta(self, time_delta: float) -> None:
+    def watch_time(self, time: float) -> None:
         """Called when time_delta changes."""
-        minutes, seconds = divmod(time_delta, 60)
+        minutes, seconds = divmod(time, 60)
         hours, minutes = divmod(minutes, 60)
         self.update(f"{hours:02.0f}:{minutes:02.0f}:{seconds:05.2f}")
 
 
-class TimerWidget(Static):
+class Stopwatch(Static):
     """The timer widget (display + buttons)."""
 
     start_time = Reactive(0.0)
@@ -31,7 +31,7 @@ class TimerWidget(Static):
 
     def update_elapsed(self) -> None:
         """Updates elapsed time."""
-        self.query_one(TimeDisplay).time_delta = (
+        self.query_one(TimeDisplay).time = (
             self.total + monotonic() - self.start_time if self.started else self.total
         )
 
@@ -64,7 +64,7 @@ class TimerWidget(Static):
             self.update_elapsed()
 
 
-class TimerApp(App):
+class StopwatchApp(App):
     """Manage the timers."""
 
     def on_load(self) -> None:
@@ -77,11 +77,11 @@ class TimerApp(App):
         """Called to ad widgets to the app."""
         yield Header()
         yield Footer()
-        yield Container(TimerWidget(), TimerWidget(), TimerWidget(), id="timers")
+        yield Container(Stopwatch(), Stopwatch(), Stopwatch(), id="timers")
 
     def action_add_timer(self) -> None:
         """An action to add a timer."""
-        new_timer = TimerWidget()
+        new_timer = Stopwatch()
         self.query_one("#timers").mount(new_timer)
         new_timer.scroll_visible()
 
@@ -95,6 +95,6 @@ class TimerApp(App):
         self.dark = not self.dark
 
 
-app = TimerApp(css_path="timers.css")
+app = StopwatchApp(css_path="stopwatch.css")
 if __name__ == "__main__":
     app.run()

docs/examples/introduction/stopwatch01.py

@@ -2,7 +2,7 @@ from textual.app import App
 from textual.widgets import Header, Footer
 
 
-class TimerApp(App):
+class StopwatchApp(App):
     def compose(self):
         yield Header()
         yield Footer()
@@ -14,6 +14,6 @@ class TimerApp(App):
         self.dark = not self.dark
 
 
-app = TimerApp()
+app = StopwatchApp()
 if __name__ == "__main__":
     app.run()

docs/examples/introduction/stopwatch02.css

@@ -0,0 +1 @@
+/* Blank for now */

docs/examples/introduction/stopwatch02.py

@@ -0,0 +1,33 @@
+from textual.app import App, ComposeResult
+from textual.layout import Container
+from textual.widgets import Button, Header, Footer, Static
+
+
+class TimeDisplay(Static):
+    pass
+
+
+class Stopwatch(Static):
+    def compose(self) -> ComposeResult:
+        yield Button("Start", id="start", variant="success")
+        yield Button("Stop", id="stop", variant="error")
+        yield Button("Reset", id="reset")
+        yield TimeDisplay("00:00:00.00")
+
+
+class StopwatchApp(App):
+    def compose(self):
+        yield Header()
+        yield Footer()
+        yield Container(Stopwatch(), Stopwatch(), Stopwatch())
+
+    def on_load(self):
+        self.bind("d", "toggle_dark", description="Dark mode")
+
+    def action_toggle_dark(self):
+        self.dark = not self.dark
+
+
+app = StopwatchApp(css_path="stopwatch02.css")
+if __name__ == "__main__":
+    app.run()