Merge pull request #638 from Textualize/focus-order

Focus order

sandbox/darren/just_a_box.css

@@ -1,6 +1,61 @@
-#box {
-    height: 50%;
-    width: 50%;
-    align: center middle;
+Screen {
+    height: 100vh;
+    width: 100%;
+    background: red;
+}
+
+#horizontal {
+    width: 100%;
+}
+
+.box {
+    height: 5;
+    width: 5;
+    margin: 1 10;
+}
+
+#left_pane {
+    width: 1fr;
+    background: $background;
+}
+
+#middle_pane {
+    margin-top: 4;
+    width: 1fr;
+    background: #173f5f;
+}
+
+#middle_pane:focus {
+    tint: cyan 40%;
+}
+
+#right_pane {
+    width: 1fr;
+    background: #f6d55c;
+}
+
+.box:focus {
+    tint: cyan 40%;
+}
+
+#box1 {
     background: green;
 }
+
+#box2 {
+    offset-y: 3;
+    background: hotpink;
+}
+
+#box3 {
+    background: red;
+}
+
+
+#box4 {
+    background: blue;
+}
+
+#box5 {
+    background: darkviolet;
+}

sandbox/darren/just_a_box.py

@@ -4,10 +4,11 @@ from rich.console import RenderableType
 from rich.panel import Panel
 
 from textual.app import App, ComposeResult
+from textual.layout import Horizontal, Vertical
 from textual.widget import Widget
 
 
-class Box(Widget):
+class Box(Widget, can_focus=True):
     CSS = "#box {background: blue;}"
 
     def __init__(
@@ -20,8 +21,25 @@ class Box(Widget):
 
 
 class JustABox(App):
+    dark = True
+
     def compose(self) -> ComposeResult:
-        yield Box(id="box")
+        yield Horizontal(
+            Vertical(
+                Box(id="box1", classes="box"),
+                Box(id="box2", classes="box"),
+                Box(id="box3", classes="box"),
+                id="left_pane",
+            ),
+            Box(id="middle_pane"),
+            Vertical(
+                Box(id="box", classes="box"),
+                Box(id="box4", classes="box"),
+                Box(id="box5", classes="box"),
+                id="right_pane",
+            ),
+            id="horizontal",
+        )
 
 
 if __name__ == "__main__":