Merge branch 'css' into style-error-improvements

sandbox/basic.css

@@ -41,6 +41,7 @@ App > Screen {
   background: $primary-darken-2;
   color: $text-primary-darken-2 ;
   border-right: outer $primary-darken-3;
+  content-align: center middle;
 }
 
 #sidebar .user {
@@ -48,19 +49,21 @@ App > Screen {
   background: $primary-darken-1;
   color: $text-primary-darken-1;
   border-right: outer $primary-darken-3;
+  content-align: center middle;
 }
 
 #sidebar .content {
   background: $primary;
   color: $text-primary;
   border-right: outer $primary-darken-3;
+  content-align: center middle;
 }
 
 #header {
   color: $text-primary-darken-1;
   background: $primary-darken-1;
-  height: 3
-
+  height: 3;
+  content-align: center middle;
 }
 
 #content {
@@ -84,6 +87,7 @@ Tweet {
   border: wide $panel-darken-2;
   overflow-y: scroll; 
   align-horizontal: center;
+  
 }
 
 .scrollable {
@@ -152,6 +156,7 @@ TweetBody {
   background: $accent;
   height: 1;
   border-top: hkey $accent-darken-2;
+  content-align: center middle;
 }
 
 
@@ -165,6 +170,7 @@ OptionItem {
   transition: background 100ms linear;
   border-right: outer $primary-darken-2;
   border-left: hidden;
+  content-align: center middle;
 }
 
 OptionItem:hover {

sandbox/basic.py

@@ -66,7 +66,7 @@ class Tweet(Widget):
 
 class OptionItem(Widget):
     def render(self) -> Text:
-        return Align.center(Text("Option", justify="center"), vertical="middle")
+        return Text("Option")
 
 
 class Error(Widget):
@@ -95,10 +95,9 @@ class BasicApp(App):
         """Build layout here."""
         self.mount(
             header=Static(
-                Align.center(
-                    "[b]This is a [u]Textual[/u] app, running in the terminal",
-                    vertical="middle",
-                )
+                Text.from_markup(
+                    "[b]This is a [u]Textual[/u] app, running in the terminal"
+                ),
             ),
             content=Widget(
                 Tweet(
@@ -110,8 +109,8 @@ class BasicApp(App):
                     # ),
                 ),
                 Widget(
-                    Static(Syntax(CODE, "python"), classes={"code"}),
-                    classes={"scrollable"},
+                    Static(Syntax(CODE, "python"), classes="code"),
+                    classes="scrollable",
                 ),
                 Error(),
                 Tweet(TweetBody()),
@@ -121,12 +120,12 @@ class BasicApp(App):
             ),
             footer=Widget(),
             sidebar=Widget(
-                Widget(classes={"title"}),
-                Widget(classes={"user"}),
+                Widget(classes="title"),
+                Widget(classes="user"),
                 OptionItem(),
                 OptionItem(),
                 OptionItem(),
-                Widget(classes={"content"}),
+                Widget(classes="content"),
             ),
         )
 
@@ -140,4 +139,7 @@ class BasicApp(App):
         self.panic(self.tree)
 
 
-BasicApp.run(css_file="basic.css", watch_css=True, log="textual.log")
+app = BasicApp(css_file="basic.css", watch_css=True, log="textual.log")
+
+if __name__ == "__main__":
+    app.run()

sandbox/buttons.py

@@ -0,0 +1,24 @@
+from textual.app import App, ComposeResult
+
+from textual.widgets import Button
+from textual import layout
+
+
+class ButtonsApp(App[str]):
+    def compose(self) -> ComposeResult:
+        yield layout.Vertical(
+            Button("foo", id="foo"),
+            Button("bar", id="bar"),
+            Button("baz", id="baz"),
+        )
+
+    def handle_pressed(self, event: Button.Pressed) -> None:
+        self.app.bell()
+        self.exit(event.button.id)
+
+
+app = ButtonsApp(log="textual.log")
+
+if __name__ == "__main__":
+    result = app.run()
+    print(repr(result))

sandbox/uber.css

@@ -1,6 +1,7 @@
 #uber1 {
   layout: vertical;
-  background: dark_green;
+  background: green;
+  overflow: hidden auto;
   border: heavy white;
 }
 

sandbox/uber.py

@@ -30,12 +30,12 @@ class BasicApp(App):
         )
         first_child = Placeholder(id="child1", classes={"list-item"})
         uber1 = Widget(
-            first_child,
-            Placeholder(id="child2", classes={"list-item"}),
-            Placeholder(id="child3", classes={"list-item"}),
-            Placeholder(classes={"list-item"}),
-            Placeholder(classes={"list-item"}),
-            Placeholder(classes={"list-item"}),
+            Placeholder(id="child1", classes="list-item"),
+            Placeholder(id="child2", classes="list-item"),
+            Placeholder(id="child3", classes="list-item"),
+            Placeholder(classes="list-item"),
+            Placeholder(classes="list-item"),
+            Placeholder(classes="list-item"),
         )
         self.mount(uber1=uber1)
         await first_child.focus()
@@ -44,7 +44,7 @@ class BasicApp(App):
         await self.dispatch_key(event)
 
     def action_quit(self):
-        self.panic(self.screen.tree)
+        self.panic(self.app.tree)
 
     def action_dump(self):
         self.panic(str(self.app.registry))
@@ -83,4 +83,7 @@ class BasicApp(App):
         self.focused.styles.border = ("solid", "red")
 
 
-BasicApp.run(css_file="uber.css", log="textual.log", log_verbosity=1)
+app = BasicApp(css_file="uber.css", log="textual.log", log_verbosity=1)
+
+if __name__ == "__main__":
+    app.run()