Merge branch 'css' of github.com:willmcgugan/textual into style-error-improvements

sandbox/align.css

@@ -0,0 +1,46 @@
+
+
+Screen {
+    layout: vertical;
+    overflow: auto;
+}
+
+Widget {
+    margin:1;
+}
+
+#thing {
+
+    width: auto;
+    height: 10;
+    background:magenta;
+    margin: 3;
+    padding: 1; 
+    border: solid white; 
+    box-sizing: border-box;
+    border: solid white; 
+    align-horizontal: center;    
+}
+
+
+#thing2 {
+    border: solid white;
+    /* outline: heavy blue;  */
+    height: 10;
+    padding: 1 2;
+    box-sizing: border-box;
+
+    max-height: 100vh;
+
+    background:green;
+    align-horizontal: center;
+    color:white;
+}
+
+
+#thing3 {
+    height: 10;
+    margin: 1;
+    background:blue;
+    align-horizontal: center;
+}

sandbox/align.py

@@ -0,0 +1,25 @@
+from rich.text import Text
+
+from textual.app import App
+from textual.widget import Widget
+from textual.widgets import Static
+
+
+class Thing(Widget):
+    def render(self):
+        return Text.from_markup("Hello, World. [b magenta]Lorem impsum.")
+
+
+class AlignApp(App):
+    def on_load(self):
+        self.bind("t", "log_tree")
+
+    def on_mount(self) -> None:
+        self.log("MOUNTED")
+        self.mount(thing=Thing(), thing2=Static("0123456789"), thing3=Widget())
+
+    def action_log_tree(self):
+        self.log(self.screen.tree)
+
+
+AlignApp.run(css_file="align.css", log="textual.log", watch_css=True)

sandbox/basic.css

@@ -17,10 +17,11 @@
 App > Screen {
   layout: dock;
   docks: side=left/1;
-  background: $background;
-  color: $text-background;
+  background: $surface;
+  color: $text-surface;
 }
 
+
 #sidebar {
   color: $text-primary;
   background: $primary;
@@ -66,14 +67,14 @@ App > Screen {
   color: $text-background;
   background: $background;
   layout: vertical;
-  overflow-y:scroll;  
-
+  overflow-y: scroll;  
 }
 
 
 Tweet {
-  height: 22;
-  max-width: 80;
+  height: 12;
+  width: 80;
+ 
   margin: 1 3;
   background: $panel;
   color: $text-panel;
@@ -81,7 +82,24 @@ Tweet {
   /* border: outer $primary; */
   padding: 1;
   border: wide $panel-darken-2;
-  overflow-y: scroll
+  overflow-y: scroll; 
+  align-horizontal: center;
+}
+
+.scrollable {
+  width: 80;
+  overflow-y: scroll;
+  max-width:80;
+  height: 20;
+  align-horizontal: center;
+  layout: vertical;
+}
+
+.code {
+
+  height: 34;
+  width: 100%;
+  
 }
 
 
@@ -92,6 +110,7 @@ TweetHeader {
 }
 
 TweetBody {  
+  width: 100%;
   background: $panel;
   color: $text-panel;
   height:20;
@@ -159,7 +178,7 @@ OptionItem:hover {
 }
 
 Error {
-  max-width: 80;
+  width: 80;
   height:3;
   background: $error;
   color: $text-error;
@@ -168,10 +187,11 @@ Error {
   margin: 1 3;
   
   text-style: bold;
+  align-horizontal: center;   
 }
 
 Warning {
-  max-width: 80;
+  width: 80;
   height:3;
   background: $warning;
   color: $text-warning-fade-1;
@@ -179,15 +199,23 @@ Warning {
   border-bottom: hkey $warning-darken-2; 
   margin: 1 2;
   text-style: bold;
+  align-horizontal: center;
 }
 
 Success {
-  max-width: 80;
-  height:3;
+  width: 80;
+  height:3;  
+  box-sizing: border-box;
   background: $success-lighten-3;
   color: $text-success-lighten-3-fade-1;
   border-top: hkey $success;
   border-bottom: hkey $success; 
   margin: 1 2;
   text-style: bold;
+  align-horizontal: center;
 }
+
+
+.horizontal {
+  layout: horizontal
+}

sandbox/basic.py

@@ -1,9 +1,47 @@
 from rich.align import Align
 from rich.console import RenderableType
+from rich.syntax import Syntax
 from rich.text import Text
 
 from textual.app import App
 from textual.widget import Widget
+from textual.widgets import Static
+
+CODE = '''
+class Offset(NamedTuple):
+    """A point defined by x and y coordinates."""
+
+    x: int = 0
+    y: int = 0
+
+    @property
+    def is_origin(self) -> bool:
+        """Check if the point is at the origin (0, 0)"""
+        return self == (0, 0)
+
+    def __bool__(self) -> bool:
+        return self != (0, 0)
+
+    def __add__(self, other: object) -> Offset:
+        if isinstance(other, tuple):
+            _x, _y = self
+            x, y = other
+            return Offset(_x + x, _y + y)
+        return NotImplemented
+
+    def __sub__(self, other: object) -> Offset:
+        if isinstance(other, tuple):
+            _x, _y = self
+            x, y = other
+            return Offset(_x - x, _y - y)
+        return NotImplemented
+
+    def __mul__(self, other: object) -> Offset:
+        if isinstance(other, (float, int)):
+            x, y = self
+            return Offset(int(x * other), int(y * other))
+        return NotImplemented
+'''
 
 
 lorem = Text.from_markup(
@@ -56,9 +94,25 @@ class BasicApp(App):
     def on_mount(self):
         """Build layout here."""
         self.mount(
-            header=Widget(),
+            header=Static(
+                Align.center(
+                    "[b]This is a [u]Textual[/u] app, running in the terminal",
+                    vertical="middle",
+                )
+            ),
             content=Widget(
-                Tweet(TweetBody(), Widget(classes={"button"})),
+                Tweet(
+                    TweetBody(),
+                    # Widget(
+                    #     Widget(classes={"button"}),
+                    #     Widget(classes={"button"}),
+                    #     classes={"horizontal"},
+                    # ),
+                ),
+                Widget(
+                    Static(Syntax(CODE, "python"), classes={"code"}),
+                    classes={"scrollable"},
+                ),
                 Error(),
                 Tweet(TweetBody()),
                 Warning(),

sandbox/uber.css

@@ -8,6 +8,7 @@
 
 .list-item {
   height: 8;
+
   min-width: 80;
   background: dark_blu;
   padding: 2x;