use short names for width/height

examples/app.py

@@ -42,8 +42,8 @@ def handler(item):
                     ltk.Heading3("Select a menu item from the blue bar shown above, or press it's shortcut on your keyboard"),
                     ltk.UnorderedList().attr("id", "app-feedback"),
                     right_css)
-            ).css("height", "100%")
+            ).height("100%")
         )
-        .css("width", 500)
-        .css("height", 800)
+        .width(500)
+        .height(800)
         .attr("name", "Application"))

examples/custom.py

@@ -8,8 +8,8 @@ class CustomWidget(ltk.VBox):
 
         def __init__(self, src, label):
             ltk.VBox.__init__(self, 
-                ltk.Image(src).css("width", 196),
-                ltk.Text(label).css("width", "100%").css("text-align", "center")
+                ltk.Image(src).width(196),
+                ltk.Text(label).width("100%").css("text-align", "center")
             )
             self.element.css("border", "2px solid orange")
 
@@ -19,7 +19,7 @@ def __init__(self, src, label):
             ltk.Heading2("Showing a Card with a custom widget inside of it"),
             ltk.Card(
                 CustomWidget("https://chrislaffra.com/chris.png", "Chris laffra")
-            ).css("width", 200).draggable(),
+            ).width(200).draggable(),
             ltk.Text("For clarity, we marked the custom widget orange.")
                 .css("margin-top", 20),
             ltk.Heading4("Tip: drag the card."),

examples/documentation.py

@@ -19,7 +19,7 @@ def get_method_doc(clazz, name):
         default = f"Injects HTML element of type <{link(clazz.tag)}>" if is_constructor else ""
         docstring = (item.__doc__ or "").replace("<", "&lt;").replace("\n", "<br>")
         docstring = textwrap.dedent(f"{default}. {docstring}")
-        doc = ltk.Text(docstring).css("color", "darkgreen").css("width", 500)
+        doc = ltk.Text(docstring).css("color", "darkgreen").width(500)
         return ltk.ListItem(ltk.VBox(ltk.Text(f"{name}{signature}"), doc))
 
 def get_widget_doc(name):

examples/helloworld.py

@@ -17,6 +17,6 @@ def create():
                 .css("color", "white")
                 .css("font-size", 42)
         )
-        .css("height", "100%")
+        .height("100%")
         .attr("name", "Hello World")
     )

examples/inputs.py

@@ -101,14 +101,14 @@ def get_widgets():
         ltk.VBox(
             ltk.Heading1(f"Widgets on {runtime}")
                 .css("text-align", "left")
-                .css("height", 50)
+                .height(50)
                 .attr("id", "feedback"),
             ltk.Container(get_widgets()), {
                 "padding": 50,
                 "border": "1px solid gray",
                 "background-color": "lightyellow",
             }
         )
-        .css("height", 708)
+        .height(708)
         .attr("name", "Inputs")
     )

examples/pubsub.py

@@ -36,8 +36,8 @@ def create():
                 fan
                     .css("border", "1px solid gray")
                     .css("overflow", "hidden")
-                    .css("width", 200)
-                    .css("height", 400)
+                    .width(200)
+                    .height(400)
                     .css("margin-top", 5)
                     .addClass("fan"),
             ),

examples/pydata.py

@@ -8,7 +8,7 @@ def create():
 
             ltk.Image("https://pydata.org/wp-content/uploads/2019/06/pydata-logo-final.png")
                 .css("margin-top", 50)
-                .css("width", 350),
+                .width(350),
 
             ltk.Link(
                 "https://pydata.org/eindhoven2023/",

kitchensink.py

@@ -35,8 +35,8 @@ def setsource(src):
         ltk.Code("python", getsource(file))
             .attr("file", file)
             .css("margin-left", 20)
-            .css("width", "95%")
-            .css("height", 800)
+            .width("95%")
+            .height(800)
     ).attr("name", example.attr("name"))
     for file, example in examples.items
 )
@@ -63,7 +63,7 @@ def activate_tab(event, ui=None):
             )
         ).attr("target", "_blank")
     )
-    .css("width", 1300)
+    .width(1300)
     .css("margin", "auto")
 )
 

ltk/logger.py

@@ -24,7 +24,7 @@ class Logger(ltk.Div):
     last_width = 0
 
     def __init__(self):
-        self.log_ui = ltk.VBox(ltk.Div().css("height", 28)).attr("id", "ltk-log-ui")
+        self.log_ui = ltk.VBox(ltk.Div().height(28)).attr("id", "ltk-log-ui")
         self.sequence_ui = _SequenceDiagram()
         ltk.Div.__init__(self,
             ltk.VerticalSplitPane(
@@ -34,15 +34,15 @@ def __init__(self):
         )
         self.element.resizable(ltk.to_js({ "handles": "n" }))
         self.on("resize", lambda event, ui: self.resize())
-        self.css("height", ltk.local_storage["log-list-height"] or 300)
+        self.height(getattr(ltk.local_storage, "log-list-height", None) or 300)
         self._add_table()
         self._setup_logger()
         self._setup_console()
         self._setup_py_error()
         self._filter_rows()
 
     def resize(self):
-        ltk.local_storage["log-list-height"] = self.css("height")
+        setattr(ltk.local_storage, "log-list-height", self.css("height"))
 
     def _add_table(self):
         self.selector = ltk.find('#ltk-log-level')
@@ -52,7 +52,7 @@ def _add_table(self):
                 ltk.Text().text("When"),
                 ltk.Text().text("Level"),
                 ltk.Text().text("Message"),
-            ).css("width", "100vw"),
+            ).width("100vw"),
             ltk.Container(
                 ltk.Select(
                     [ name for name, level in sorted(self.levels.items(), key = lambda item: item[1]) ],
@@ -72,7 +72,7 @@ def _add_table(self):
 
     def _changed(self, element=None):
         if self.element.width() != self.last_width:
-            ltk.find(".ltk-log-header").css("width", self.width())
+            ltk.find(".ltk-log-header").width(self.width())
             ltk.find(".ltk-log-buttons").css("right", 10)
             self.last_width = self.element.width()
 
@@ -248,7 +248,7 @@ def set_position(self):
         width = self.sender.title.width()
         height = self.sender.title.height()
 
-        self.css("width", right - left)
+        self.width(right - left)
         self.css("left", round(left + width / 2 + 8))
         self.css("top", round(top + height * 2 + 26 + self.index * 32))
         self.label.css("opacity", 0).width(self.width())
@@ -299,21 +299,21 @@ def __init__(self):
         ltk.observe(self.element, self.changed)
         self.last_width = self.element.width()
         self.on("resize", lambda event, ui: self.resize())
-        self.css("width", ltk.local_storage["log-sequence-width"] or 300)
+        self.width(getattr(ltk.local_storage, "log-sequence-width", None) or 300)
 
     def resize(self):
-        ltk.local_storage["log-sequence-width"] = self.css("width")
+        setattr(ltk.local_storage, "log-sequence-width", self.css("width"))
 
     def changed(self, element=None, force=False):
         if force or self.element.width() != self.last_width:
-            ltk.find(".ltk-sequence-header").css("width", self.width())
-            self.closest("td").css("width", self.width())
+            ltk.find(".ltk-sequence-header").width(self.width())
+            self.closest("td").width(self.width())
             self.last_width = self.element.width()
             for call in self.calls:
                 call.set_position()
 
     def log(self, sender_name, receiver_name, topic, data):
-        self.element.css("width", "100%")
+        self.element.width("100%")
         sender = self.get_component(sender_name)
         receiver = self.get_component(receiver_name)
         call = _Call(sender, receiver, topic, data, len(self.calls))

ltk/widgets.py

@@ -427,7 +427,7 @@ def __init__(self, left, right):
                     ).element
                 )
         )
-        self.css("width", "100%")
+        self.width("100%")
 
 
 class TextArea(Text):