Merge pull request #121 from mhsmith/layout-class

Separate layout properties into per-container classes

Makefile

@@ -36,7 +36,7 @@ lint-all:
 	flake8 src/invent tests/*
 
 serve: clean tidy zip
-	python utils/serve.py 8000
+	python utils/serve.py
 
 test:
 	python -m webbrowser http://localhost:8000/index.html

examples/calculator/main.py

@@ -105,7 +105,7 @@ def calculate(data) -> None:
                     columns=4,
                     content=[
                         invent.ui.TextInput(
-                            column_span=4,
+                            layout=dict(column_span=4),
                             value=invent.ui.from_datastore("numbers"),
                         ),
                         invent.ui.Button(
@@ -163,7 +163,7 @@ def calculate(data) -> None:
                             label="+", purpose="SUCCESS", channel="calculator"
                         ),
                         invent.ui.Button(
-                            column_span=2,
+                            layout=dict(column_span=2),
                             label="0",
                             purpose="DEFAULT",
                             channel="calculator",

examples/catfacts/main.py

@@ -61,7 +61,7 @@ def ready(value):
                         Image(
                             image=invent.media.images.puff.svg,
                             visible=from_datastore("working"),
-                            align_self="center",
+                            layout=dict(align_self="center"),
                         ),
                         Button(
                             name="cat_fact_button",
@@ -77,7 +77,7 @@ def ready(value):
                             text=from_datastore(
                                 "cat_fact", with_function=handle_cat_fact
                             ),
-                            align_self="center",
+                            layout=dict(align_self="center"),
                         ),
                     ]
                 ),

examples/farmyard/main.py

@@ -69,10 +69,10 @@ def make_pigs(number_of_oinks):
                         Image(
                             image=invent.media.images.goose.png,
                             channel="honk",
-                            align_self="center",
+                            layout=dict(align_self="center"),
                         ),
                         Row(
-                            align_self="center",
+                            layout=dict(align_self="center"),
                             content=[
                                 Button(
                                     name="button honk",
@@ -91,13 +91,13 @@ def make_pigs(number_of_oinks):
                                 TextBox(
                                     name="number_of_honks",
                                     text=from_datastore("number_of_honks"),
-                                    align_self="center",
+                                    layout=dict(align_self="center"),
                                 ),
                                 Slider(
                                     value=from_datastore("number_of_honks"),
                                     name="Honk Slider",
                                     step=1,
-                                    flex=1,
+                                    layout=dict(flex=1),
                                 ),
                             ]
                         ),
@@ -125,10 +125,10 @@ def make_pigs(number_of_oinks):
                         Image(
                             image=invent.media.images.pig.png,
                             channel="oink",
-                            align_self="center",
+                            layout=dict(align_self="center"),
                         ),
                         Row(
-                            align_self="center",
+                            layout=dict(align_self="center"),
                             content=[
                                 Button(
                                     name="button oink",
@@ -143,7 +143,7 @@ def make_pigs(number_of_oinks):
                                 TextBox(
                                     name="number_of_oinks",
                                     text=from_datastore("number_of_oinks"),
-                                    align_self="center",
+                                    layout=dict(align_self="center"),
                                 ),
                             ],
                         ),
@@ -180,13 +180,13 @@ def make_pigs(number_of_oinks):
                         name="to_lucy",
                         label="Visit Lucy",
                         channel="navigate",
-                        flex=1,
+                        layout=dict(flex=1),
                     ),
                     Button(
                         name="to_percy",
                         label="Visit Percy",
                         channel="navigate",
-                        flex=1,
+                        layout=dict(flex=1),
                     ),
                 ]
             ),

src/invent/compatability.py

@@ -30,6 +30,11 @@ def iscoroutinefunction(obj):
     return inspect.iscoroutinefunction(obj)
 
 
+def capitalize(s):
+    """Cross-interpreter implementation of str.capitalize."""
+    return s[0].upper() + s[1:].lower()
+
+
 async def sleep_ms(ms):
     """Asynchronous sleep for 'ms' milliseconds."""
 

src/invent/ui/containers/box.py

@@ -1,9 +1,27 @@
-from ..core import Container, ChoiceProperty
+from ...compatability import capitalize
+from ..core import Container, ChoiceProperty, TextProperty
 from ..core.component import _TSHIRT_SIZES, ALIGNMENTS
 
-justify_content_kwargs = dict(
-    choices=ALIGNMENTS, default_value="start", map_to_style="justify-content"
-)
+
+def justify_content_property(direction):
+    return ChoiceProperty(
+        f"{capitalize(direction)} alignment of children.",
+        choices=ALIGNMENTS,
+        default_value="start",
+        map_to_style="justify-content"
+    )
+
+
+def flex_property(direction):
+    # TODO: validate input
+    return TextProperty(
+        f"How much {direction} space to consume. " +
+        "May be blank to take no extra space, "
+        "'auto' to take an equal portion of any free space, "
+        "or an integer to take the given proportion of the total space.",
+        default_value="",
+        map_to_style="flex",
+    )
 
 
 class Box(Container):

src/invent/ui/containers/column.py

@@ -1,5 +1,10 @@
-from ..core import ChoiceProperty
-from .box import Box, justify_content_kwargs
+from ..core.component import align_self_property, Layout
+from .box import Box, flex_property, justify_content_property
+
+
+class ColumnLayout(Layout):
+    align_self = align_self_property("horizontal")
+    flex = flex_property("vertical")
 
 
 class Column(Box):
@@ -11,9 +16,7 @@ class Column(Box):
     def icon(cls):
         return '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M104 32H64a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H64V48h40Zm88-176h-40a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176h-40V48h40Z"/></svg>'  # noqa
 
+    layout_class = ColumnLayout
     flex_direction = "column"
 
-    justify_content = ChoiceProperty(
-        "Vertical alignment of children",
-        **justify_content_kwargs,
-    )
+    justify_content = justify_content_property("vertical")

src/invent/ui/containers/grid.py

@@ -1,12 +1,38 @@
 from ..core import Container, ChoiceProperty, IntegerProperty
-from ..core.component import _TSHIRT_SIZES
+from ..core.component import (
+    _TSHIRT_SIZES,
+    ALIGNMENTS_STRETCH,
+    Layout,
+    align_self_property,
+)
+
+
+class GridLayout(Layout):
+    align_self = align_self_property("vertical")
+    justify_self = ChoiceProperty(
+        "Horizontal alignment.",
+        choices=ALIGNMENTS_STRETCH,
+        default_value="stretch",
+        map_to_style="justify-self",
+    )
+
+    column_span = IntegerProperty("Number of columns to fill.", 1)
+    row_span = IntegerProperty("Number of rows to fill.", 1)
+
+    def on_column_span_changed(self):
+        self.element.style.gridColumn = f"span {self.column_span}"
+
+    def on_row_span_changed(self):
+        self.element.style.gridRow = f"span {self.row_span}"
 
 
 class Grid(Container):
     """
     A grid.
     """
 
+    layout_class = GridLayout
+
     column_gap = ChoiceProperty(
         "The gap between columns in the grid.",
         choices=_TSHIRT_SIZES,
@@ -40,12 +66,3 @@ def render(self):
         element = super().render()
         element.style.display = "grid"
         return element
-
-    def update_child(self, child, index):
-        grid_row_span = child.row_span
-        if grid_row_span:
-            child.element.style.gridRow = "span " + str(grid_row_span)
-
-        grid_column_span = child.column_span
-        if grid_column_span:
-            child.element.style.gridColumn = "span " + str(grid_column_span)

src/invent/ui/containers/row.py

@@ -1,5 +1,10 @@
-from ..core import ChoiceProperty
-from .box import Box, justify_content_kwargs
+from ..core.component import Layout, align_self_property
+from .box import Box, flex_property, justify_content_property
+
+
+class RowLayout(Layout):
+    align_self = align_self_property("vertical")
+    flex = flex_property("horizontal")
 
 
 class Row(Box):
@@ -11,9 +16,7 @@ class Row(Box):
     def icon(cls):
         return '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 136H48a16 16 0 0 0-16 16v40a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-40a16 16 0 0 0-16-16m0 56H48v-40h160zm0-144H48a16 16 0 0 0-16 16v40a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16m0 56H48V64h160z"/></svg>'  # noqa
 
+    layout_class = RowLayout
     flex_direction = "row"
 
-    justify_content = ChoiceProperty(
-        "Horizontal alignment of children",
-        **justify_content_kwargs,
-    )
+    justify_content = justify_content_property("horizontal")

src/invent/ui/core/__init__.py

@@ -2,6 +2,7 @@
     _DEFAULT_ICON,
     Component,
     Container,
+    Layout,
     MessageBlueprint,
     Widget,
 )
@@ -29,6 +30,7 @@
     "FloatProperty",
     "IntegerProperty",
     "ListProperty",
+    "Layout",
     "NumericProperty",
     "Property",
     "TextProperty",