Merge branch 'css' into auto-dimensions

sandbox/basic.css

@@ -84,7 +84,8 @@ Tweet {
   /* border: outer $primary; */
   padding: 1;
   border: wide $panel-darken-2;
-  overflow-y: auto; 
+  overflow-y: auto;
+  scrollbar-gutter: stable;
   align-horizontal: center;
   
 }
@@ -116,7 +117,7 @@ TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height:20;
+  height: auto;
   padding: 0 1 0 0;
  
 }

sandbox/basic.py

@@ -4,6 +4,7 @@ from rich.syntax import Syntax
 from rich.text import Text
 
 from textual.app import App
+from textual.reactive import Reactive
 from textual.widget import Widget
 from textual.widgets import Static
 
@@ -44,11 +45,15 @@ class Offset(NamedTuple):
 '''
 
 
-lorem = Text.from_markup(
-    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
-    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
+lorem_short = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit liber a a a, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum."""
+lorem = (
+    lorem_short
+    + """ In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
 )
 
+lorem_short_text = Text.from_markup(lorem_short)
+lorem_long_text = Text.from_markup(lorem * 2)
+
 
 class TweetHeader(Widget):
     def render(self, style: Style) -> RenderableType:
@@ -56,8 +61,10 @@ class TweetHeader(Widget):
 
 
 class TweetBody(Widget):
+    short_lorem = Reactive[bool](False)
+
     def render(self, style: Style) -> Text:
-        return lorem
+        return lorem_short_text if self.short_lorem else lorem_long_text
 
 
 class Tweet(Widget):
@@ -135,9 +142,18 @@ class BasicApp(App):
     def key_d(self):
         self.dark = not self.dark
 
+    async def key_q(self):
+        await self.shutdown()
+
     def key_x(self):
         self.panic(self.tree)
 
+    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.short_lorem = not tweet_body.short_lorem
+        tweet_body.refresh(layout=True)
+
 
 app = BasicApp(
     css_path="basic.css",

sandbox/buttons.py

@@ -18,7 +18,9 @@ class ButtonsApp(App[str]):
         self.exit(event.button.id)
 
 
-app = ButtonsApp(log_path="textual.log", css_path="buttons.css", log_verbosity=2)
+app = ButtonsApp(
+    log_path="textual.log", css_path="buttons.css", watch_css=True, log_verbosity=2
+)
 
 if __name__ == "__main__":
     result = app.run()

sandbox/input.py

@@ -0,0 +1,45 @@
+from textual.app import App
+from textual.widget import Widget
+
+from textual.widgets.text_input import TextInput, TextWidgetBase, TextArea
+
+
+def celsius_to_fahrenheit(celsius: float) -> float:
+    return celsius * 1.8 + 32
+
+
+def fahrenheit_to_celsius(fahrenheit: float) -> float:
+    return (fahrenheit - 32) / 1.8
+
+
+class InputApp(App[str]):
+    def on_mount(self) -> None:
+        self.fahrenheit = TextInput(placeholder="Fahrenheit", id="fahrenheit")
+        self.celsius = TextInput(placeholder="Celsius", id="celsius")
+        self.fahrenheit.focus()
+        text_boxes = Widget(self.fahrenheit, self.celsius)
+        self.mount(inputs=text_boxes)
+        self.mount(spacer=Widget())
+        self.mount(footer=TextInput(placeholder="Footer Search Bar"))
+        self.mount(text_area=TextArea())
+
+    def handle_changed(self, event: TextWidgetBase.Changed) -> None:
+        try:
+            value = float(event.value)
+        except ValueError:
+            return
+        if event.sender == self.celsius:
+            fahrenheit = celsius_to_fahrenheit(value)
+            self.fahrenheit.value = f"{fahrenheit:.1f}"
+        elif event.sender == self.fahrenheit:
+            celsius = fahrenheit_to_celsius(value)
+            self.celsius.value = f"{celsius:.1f}"
+
+
+app = InputApp(
+    log_path="textual.log", css_path="input.scss", watch_css=True, log_verbosity=2
+)
+
+if __name__ == "__main__":
+    result = app.run()
+    print(repr(result))

sandbox/input.scss

@@ -0,0 +1,48 @@
+App {
+  background: $secondary;
+}
+
+#spacer {
+  height: 1;
+  background: $primary-darken-2;
+  dock: top;
+}
+
+Screen {
+  layout: dock;
+  docks: top=top bottom=bottom;
+  background: $secondary;
+}
+
+#fahrenheit {
+  width: 50%;
+}
+
+#celsius {
+  width: 50%;
+}
+
+#celsius :focus {
+  border: heavy darkgoldenrod;
+}
+
+#inputs {
+  dock: top;
+  background: $primary;
+  height: 3;
+  layout: horizontal;
+}
+
+#text_area {
+  dock: bottom;
+}
+
+#footer {
+  dock: bottom;
+  height: 1;
+  border: ;
+}
+
+#footer :focus {
+  border: heavy $secondary;
+}