Merge branch 'css' of github.com:Textualize/textual into user-css-over-widget-css

sandbox/basic.css

@@ -76,8 +76,9 @@ App > Screen {
 
 
 Tweet {
-  height: 12;
-  width: 80;
+  height:12;
+  width: 100%;
+ 
   margin: 1 3;
   background: $panel;
   color: $text-panel;
@@ -93,21 +94,21 @@ Tweet {
 
 
 .scrollable {
-  width: 80;
+  
   overflow-y: scroll;
-  max-width:80;
+  margin: 1 2;
   height: 20;
   align-horizontal: center;
   layout: vertical;
 }
 
 .code {
-
-  height: 34;
-  width: 100%;
-
+  
+  height: auto;
+    
 }
 
+
 TweetHeader {
   height:1;
   background: $accent;
@@ -138,8 +139,8 @@ Tweet.scroll-horizontal TweetBody {
 
   /* padding: 1 0 0 0 ; */
 
-  transition: background 200ms in_out_cubic, color 300ms in_out_cubic;
-
+  transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
+ 
 }
 
 .button:hover {
@@ -187,7 +188,7 @@ OptionItem:hover {
 }
 
 Error {
-  width: 80;
+  width: 100%;
   height:3;
   background: $error;
   color: $text-error;
@@ -200,7 +201,7 @@ Error {
 }
 
 Warning {
-  width: 80;
+  width: 100%;
   height:3;
   background: $warning;
   color: $text-warning-fade-1;
@@ -212,8 +213,8 @@ Warning {
 }
 
 Success {
-  width: 80;
-  height:3;
+  width: 100%;
+  height:3;  
   box-sizing: border-box;
   background: $success-lighten-3;
   color: $text-success-lighten-3-fade-1;

sandbox/basic.py

@@ -61,7 +61,7 @@ class TweetHeader(Widget):
 
 
 class TweetBody(Widget):
-    short_lorem = Reactive[bool](False)
+    short_lorem = Reactive(False)
 
     def render(self) -> Text:
         return lorem_short_text if self.short_lorem else lorem_long_text
@@ -120,6 +120,11 @@ class BasicApp(App, css_path="basic.css"):
                 Warning(),
                 Tweet(TweetBody(), classes="scroll-horizontal"),
                 Success(),
+                Tweet(TweetBody(), classes="scroll-horizontal"),
+                Tweet(TweetBody(), classes="scroll-horizontal"),
+                Tweet(TweetBody(), classes="scroll-horizontal"),
+                Tweet(TweetBody(), classes="scroll-horizontal"),
+                Tweet(TweetBody(), classes="scroll-horizontal"),
             ),
             footer=Widget(),
             sidebar=Widget(
@@ -149,9 +154,8 @@ class BasicApp(App, css_path="basic.css"):
 
     def key_t(self):
         # Pressing "t" toggles the content of the TweetBody widget, from a long "Lorem ipsum..." to a shorter one.
-        tweet_body = self.screen.query("TweetBody").first()
+        tweet_body = self.query("TweetBody").first()
         tweet_body.short_lorem = not tweet_body.short_lorem
-        tweet_body.refresh(layout=True)
 
     def key_v(self):
         self.get_child(id="content").scroll_to_widget(self.scroll_to_target)
@@ -164,3 +168,19 @@ app = BasicApp()
 
 if __name__ == "__main__":
     app.run()
+
+    from textual.geometry import Region
+    from textual.color import Color
+
+    print(Region.intersection.cache_info())
+    print(Region.overlaps.cache_info())
+    print(Region.union.cache_info())
+    print(Region.split_vertical.cache_info())
+    print(Region.__contains__.cache_info())
+    from textual.css.scalar import Scalar
+
+    print(Scalar.resolve_dimension.cache_info())
+
+    from rich.style import Style
+
+    print(Style._add.cache_info())

sandbox/table.py

@@ -0,0 +1,76 @@
+from textual.app import App, ComposeResult
+from textual.widgets import DataTable
+
+from rich.syntax import Syntax
+from rich.table import Table
+
+CODE = '''\
+def loop_first_last(values: Iterable[T]) -> Iterable[tuple[bool, bool, T]]:
+    """Iterate and generate a tuple with a flag for first and last value."""
+    iter_values = iter(values)
+    try:
+        previous_value = next(iter_values)
+    except StopIteration:
+        return
+    first = True
+    for value in iter_values:
+        yield first, False, previous_value
+        first = False
+        previous_value = value
+    yield first, True, previous_value'''
+
+test_table = Table(title="Star Wars Movies")
+
+test_table.add_column("Released", style="cyan", no_wrap=True)
+test_table.add_column("Title", style="magenta")
+test_table.add_column("Box Office", justify="right", style="green")
+
+test_table.add_row("Dec 20, 2019", "Star Wars: The Rise of Skywalker", "$952,110,690")
+test_table.add_row("May 25, 2018", "Solo: A Star Wars Story", "$393,151,347")
+test_table.add_row(
+    "Dec 15, 2017", "Star Wars Ep. V111: The Last Jedi", "$1,332,539,889"
+)
+test_table.add_row("Dec 16, 2016", "Rogue One: A Star Wars Story", "$1,332,439,889")
+
+
+class TableApp(App):
+    def compose(self) -> ComposeResult:
+        table = self.table = DataTable(id="data")
+        table.add_column("Foo", width=20)
+        table.add_column("Bar", width=60)
+        table.add_column("Baz", width=20)
+        table.add_column("Foo", width=16)
+        table.add_column("Bar", width=16)
+        table.add_column("Baz", width=16)
+
+        for n in range(200):
+            height = 1
+            row = [f"row [b]{n}[/b] col [i]{c}[/i]" for c in range(6)]
+            if n == 10:
+                row[1] = Syntax(CODE, "python", line_numbers=True, indent_guides=True)
+                height = 13
+
+            if n == 30:
+                row[1] = test_table
+                height = 13
+            table.add_row(*row, height=height)
+        yield table
+
+    def on_mount(self):
+        self.bind("d", "toggle_dark")
+        self.bind("z", "toggle_zebra")
+        self.bind("x", "exit")
+
+    def action_toggle_dark(self) -> None:
+        self.app.dark = not self.app.dark
+
+    def action_toggle_zebra(self) -> None:
+        self.table.zebra_stripes = not self.table.zebra_stripes
+
+    def action_exit(self) -> None:
+        pass
+
+
+app = TableApp()
+if __name__ == "__main__":
+    print(app.run())