new align

docs/examples/events/dictionary.py

@@ -6,9 +6,8 @@ except ImportError:
     raise ImportError("Please install httpx with 'pip install httpx' ")
 
 from rich.json import JSON
-
 from textual.app import App, ComposeResult
-from textual.layout import Vertical
+from textual.containers import Vertical
 from textual.widgets import Static, TextInput
 
 

docs/examples/guide/dom3.py

@@ -1,6 +1,6 @@
 from textual.app import App, ComposeResult
-from textual.layout import Container, Horizontal
-from textual.widgets import Header, Footer, Static, Button
+from textual.containers import Container, Horizontal
+from textual.widgets import Button, Footer, Header, Static
 
 QUESTION = "Do you want to learn about Textual CSS?"
 

docs/examples/guide/dom4.py

@@ -1,5 +1,5 @@
 from textual.app import App, ComposeResult
-from textual.layout import Container, Horizontal
+from textual.containers import Container, Horizontal
 from textual.widgets import Header, Footer, Static, Button
 
 QUESTION = "Do you want to learn about Textual CSS?"

docs/examples/guide/input/mouse01.py

@@ -1,6 +1,6 @@
 from textual import events
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.widgets import Static, TextLog
 
 

docs/examples/guide/layout/center_layout.css

@@ -1,21 +0,0 @@
-Screen {
-    layout: center;
-}
-
-#bottom {
-    width: 20;
-    height: 20;
-    background: red;
-}
-
-#middle {
-    width: 26;
-    height: 12;
-    background: green;
-}
-
-#top {
-    width: 32;
-    height: 6;
-    background: blue;
-}

docs/examples/guide/layout/center_layout.py

@@ -1,16 +0,0 @@
-from textual.app import App, ComposeResult
-from textual.widgets import Static
-
-
-class CenterLayoutExample(App):
-    CSS_PATH = "center_layout.css"
-
-    def compose(self) -> ComposeResult:
-        yield Static("One", id="bottom")
-        yield Static("Two", id="middle")
-        yield Static("Three", id="top")
-
-
-if __name__ == "__main__":
-    app = CenterLayoutExample()
-    app.run()

docs/examples/guide/layout/combining_layouts.py

@@ -1,4 +1,4 @@
-from textual import layout
+from textual.containers import Container, Horizontal, Vertical
 from textual.app import ComposeResult, App
 from textual.widgets import Static, Header
 
@@ -8,19 +8,19 @@ class CombiningLayoutsExample(App):
 
     def compose(self) -> ComposeResult:
         yield Header()
-        yield layout.Container(
-            layout.Vertical(
+        yield Container(
+            Vertical(
                 *[Static(f"Vertical layout, child {number}") for number in range(15)],
                 id="left-pane",
             ),
-            layout.Horizontal(
+            Horizontal(
                 Static("Horizontally"),
                 Static("Positioned"),
                 Static("Children"),
                 Static("Here"),
                 id="top-right",
             ),
-            layout.Container(
+            Container(
                 Static("This"),
                 Static("panel"),
                 Static("is"),
@@ -31,14 +31,6 @@ class CombiningLayoutsExample(App):
             id="app-grid",
         )
 
-    async def on_key(self, event) -> None:
-        await self.dispatch_key(event)
-
-    def key_a(self):
-        print(self.stylesheet.variables["boost"])
-        print(self.stylesheet.variables["boost-lighten-1"])
-        print(self.stylesheet.variables["boost-lighten-2"])
-
 
 if __name__ == "__main__":
     app = CombiningLayoutsExample()

docs/examples/guide/layout/grid_layout1.css

@@ -1,6 +1,6 @@
 Screen {
     layout: grid;
-    grid-size: 3;
+    grid-size: 3 2;
 }
 
 .box {

docs/examples/guide/layout/grid_layout2.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout1.css"
+    CSS_PATH = "grid_layout2.css"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/layers.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
     layers: below above;
 }
 

docs/examples/guide/layout/offset.css

@@ -1,36 +0,0 @@
-Screen {
-    layout: center;
-}
-
-#parent {
-    layout: center;
-    background: #9e9e9e;
-    width: 60;
-    height: 20;
-}
-
-Box {
-    color: auto;
-    width: auto;
-    height: auto;
-    padding: 1 2;
-}
-
-#box1 {
-    background: $primary;
-}
-
-#box2 {
-    background: $secondary;
-    offset: 12 4;
-}
-
-#box3 {
-    background: lightseagreen;
-    offset: -12 -4;
-}
-
-#box4 {
-    background: darkred;
-    offset: -26 10;
-}

docs/examples/guide/layout/offset.py

@@ -1,29 +0,0 @@
-from rich.console import RenderableType
-
-from textual import layout
-from textual.app import App, ComposeResult
-from textual.widgets import Static
-
-
-class Box(Static):
-    def render(self) -> RenderableType:
-        x, y = self.styles.offset
-        return f"{self.id}: offset = ({x}, {y})"
-
-
-class OffsetExample(App):
-    CSS_PATH = "offset.css"
-
-    def compose(self) -> ComposeResult:
-        yield layout.Container(
-            Box(id="box1"),
-            Box(id="box2"),
-            Box(id="box3"),
-            Box(id="box4"),
-            id="parent",
-        )
-
-
-if __name__ == "__main__":
-    app = OffsetExample()
-    app.run()

docs/examples/guide/layout/utility_containers.py

@@ -1,5 +1,5 @@
-from textual import layout
 from textual.app import App, ComposeResult
+from textual.containers import Horizontal, Vertical
 from textual.widgets import Static
 
 
@@ -7,13 +7,13 @@ class UtilityContainersExample(App):
     CSS_PATH = "utility_containers.css"
 
     def compose(self) -> ComposeResult:
-        yield layout.Horizontal(
-            layout.Vertical(
+        yield Horizontal(
+            Vertical(
                 Static("One"),
                 Static("Two"),
                 classes="column",
             ),
-            layout.Vertical(
+            Vertical(
                 Static("Three"),
                 Static("Four"),
                 classes="column",

docs/examples/guide/widgets/fizzbuzz01.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
 }
 
 FizzBuzz {

docs/examples/guide/widgets/fizzbuzz02.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
 }
 
 FizzBuzz {

docs/examples/guide/widgets/hello01.css

@@ -1,3 +1,3 @@
 Screen {
-    layout: center;
+    align: center middle;
 }

docs/examples/guide/widgets/hello02.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
 }
 
 Hello {

docs/examples/guide/widgets/hello03.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
 }
 
 Hello {

docs/examples/guide/widgets/hello04.css

@@ -1,3 +1,3 @@
 Screen {
-    layout: center;
+    align: center middle;
 }

docs/examples/guide/widgets/hello04.py

@@ -25,14 +25,14 @@ class Hello(Static):
     """Display a greeting."""
 
     DEFAULT_CSS = """
-        Hello {
+    Hello {
         width: 40;
         height: 9;
         padding: 1 2;
         background: $panel;
         border: $secondary tall;
         content-align: center middle;
-        }
+    }
     """
 
     def on_mount(self) -> None:

docs/examples/guide/widgets/hello05.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
 }
 
 Hello {

docs/examples/styles/align.css

@@ -0,0 +1,13 @@
+Screen {
+    align: center middle;
+}
+
+.box {
+    width: 40;
+    height: 5;
+    margin: 1;
+    padding: 1;
+    background: green;
+    color: white 90%;
+    border: heavy white;
+}

docs/examples/styles/align.py

@@ -0,0 +1,11 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class AlignApp(App):
+    def compose(self):
+        yield Static("Vertical alignment with [b]Textual[/]", classes="box")
+        yield Static("Take note, browsers.", classes="box")
+
+
+app = AlignApp(css_path="align.css")

docs/examples/styles/layout.css

@@ -10,12 +10,6 @@
     height: auto;
 }
 
-#center-layout {
-    layout: center;
-    background: darkslateblue;
-    height: 7;
-}
-
 Static {
     margin: 1;
     width: 12;

docs/examples/styles/layout.py

@@ -1,27 +1,22 @@
-from textual import layout
 from textual.app import App
-from textual.widget import Widget
+from textual.containers import Container
 from textual.widgets import Static
 
 
 class LayoutApp(App):
     def compose(self):
-        yield layout.Container(
+        yield Container(
             Static("Layout"),
             Static("Is"),
             Static("Vertical"),
             id="vertical-layout",
         )
-        yield layout.Container(
+        yield Container(
             Static("Layout"),
             Static("Is"),
             Static("Horizontal"),
             id="horizontal-layout",
         )
-        yield layout.Container(
-            Static("Center"),
-            id="center-layout",
-        )
 
 
 app = LayoutApp(css_path="layout.css")

docs/examples/styles/overflow.py

@@ -1,6 +1,6 @@
 from textual.app import App
 from textual.widgets import Static
-from textual.layout import Horizontal, Vertical
+from textual.containers import Horizontal, Vertical
 
 TEXT = """I must not fear.
 Fear is the mind-killer.

docs/examples/styles/scrollbar_size.py

@@ -1,5 +1,5 @@
 from textual.app import App
-from textual import layout
+from textual.containers import Vertical
 from textual.widgets import Static
 
 TEXT = """I must not fear.
@@ -14,7 +14,7 @@ Where the fear has gone there will be nothing. Only I will remain.
 
 class ScrollbarApp(App):
     def compose(self):
-        yield layout.Vertical(Static(TEXT * 5), classes="panel")
+        yield Vertical(Static(TEXT * 5), classes="panel")
 
 
 app = ScrollbarApp(css_path="scrollbar_size.css")

docs/examples/styles/scrollbars.py

@@ -1,5 +1,5 @@
 from textual.app import App
-from textual import layout
+from textual.containers import Vertical
 from textual.widgets import Static
 
 TEXT = """I must not fear.
@@ -14,8 +14,8 @@ Where the fear has gone there will be nothing. Only I will remain.
 
 class ScrollbarApp(App):
     def compose(self):
-        yield layout.Vertical(Static(TEXT * 5), classes="panel1")
-        yield layout.Vertical(Static(TEXT * 5), classes="panel2")
+        yield Vertical(Static(TEXT * 5), classes="panel1")
+        yield Vertical(Static(TEXT * 5), classes="panel2")
 
 
 app = ScrollbarApp(css_path="scrollbars.css")

docs/examples/tutorial/clock01.py

@@ -1,22 +0,0 @@
-from datetime import datetime
-
-from textual.app import App
-from textual.widget import Widget
-
-
-class Clock(Widget):
-    def on_mount(self):
-        self.styles.content_align = ("center", "middle")
-        self.auto_refresh = 1.0
-
-    def render(self):
-        return datetime.now().strftime("%X")
-
-
-class ClockApp(App):
-    def compose(self):
-        yield Clock()
-
-
-app = ClockApp()
-app.run()

docs/examples/tutorial/clock02.py

@@ -1,22 +0,0 @@
-from datetime import datetime
-
-from textual.app import App
-from textual.widget import Widget
-
-
-class Clock(Widget):
-    def on_mount(self):
-        self.styles.content_align = ("center", "middle")
-        self.auto_refresh = 1.0
-
-    def render(self):
-        return datetime.now().strftime("%c")
-
-
-class ClockApp(App):
-    def compose(self):
-        yield Clock()
-
-
-app = ClockApp()
-app.run()

docs/examples/tutorial/stopwatch.py

@@ -1,7 +1,7 @@
 from time import monotonic
 
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.reactive import reactive
 from textual.widgets import Button, Header, Footer, Static
 

docs/examples/tutorial/stopwatch02.py

@@ -1,5 +1,5 @@
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.widgets import Button, Header, Footer, Static
 
 

docs/examples/tutorial/stopwatch03.py

@@ -1,5 +1,5 @@
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.widgets import Button, Header, Footer, Static
 
 

docs/examples/tutorial/stopwatch04.py

@@ -1,5 +1,5 @@
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.widgets import Button, Header, Footer, Static
 
 

docs/examples/tutorial/stopwatch05.py

@@ -1,7 +1,7 @@
 from time import monotonic
 
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.reactive import reactive
 from textual.widgets import Button, Header, Footer, Static
 

docs/examples/tutorial/stopwatch06.py

@@ -1,7 +1,7 @@
 from time import monotonic
 
 from textual.app import App, ComposeResult
-from textual.layout import Container
+from textual.containers import Container
 from textual.reactive import reactive
 from textual.widgets import Button, Header, Footer, Static
 

docs/examples/widgets/button.py

@@ -1,5 +1,5 @@
-from textual import layout
 from textual.app import App, ComposeResult
+from textual.containers import Horizontal, Vertical
 from textual.widgets import Button, Static
 
 
@@ -7,8 +7,8 @@ class ButtonsApp(App[str]):
     CSS_PATH = "button.css"
 
     def compose(self) -> ComposeResult:
-        yield layout.Horizontal(
-            layout.Vertical(
+        yield Horizontal(
+            Vertical(
                 Static("Standard Buttons", classes="header"),
                 Button("Default"),
                 Button("Primary!", variant="primary"),
@@ -16,7 +16,7 @@ class ButtonsApp(App[str]):
                 Button.warning("Warning!"),
                 Button.error("Error!"),
             ),
-            layout.Vertical(
+            Vertical(
                 Static("Disabled Buttons", classes="header"),
                 Button("Default", disabled=True),
                 Button("Primary!", variant="primary", disabled=True),