Add css as a dict during construction

examples/app.py

@@ -5,7 +5,7 @@
 def create():
     def handler(item):
         ltk.find("#right").append(ltk.Text(f"Menu item: {item.label}").element)
-        
+
     return (
         ltk.VBox(
             ltk.MenuBar(
@@ -19,17 +19,19 @@ def handler(item):
                 ),
             ).css("background-color", "lightblue"),
             ltk.HBox(
-                ltk.VBox(ltk.Text("Left Panel"))
-                    .attr("id", "left")
-                    .css("border-right", "2px solid lightgray")
-                    .css("padding", "50px 20px")
-                    .css("background-color", "lightyellow")
-                    .css("width", "20%"),
-                ltk.VBox(ltk.Text("Right Panel"))
-                    .attr("id", "right")
-                    .css("padding", "50px 20px")
-                    .css("background-color", "lightgreen")
-                    .css("width", "80%"),
+                ltk.VBox(
+                    ltk.Text("Left Panel"), {
+                        "border-right": "2px solid lightgray",
+                        "padding": "50px 20px",
+                        "background-color": "lightyellow",
+                        "width": "20%",
+                    }).attr("id", "left"),
+                ltk.VBox(
+                    ltk.Text("Right Panel"), {
+                        "padding": "50px 20px",
+                        "background-color": "lightgreen",
+                        "width": "80%",
+                    }).attr("id", "right")
             ).css("border-top", "2px solid lightgray")
         )
         .attr("name", "Application")

examples/helloworld.py

@@ -3,10 +3,16 @@
 import ltk
 
 def create():
-    return (
-        ltk.Text("Hello World 🎉")
-            .css("padding", "100px 10px")
-            .css("background-color", "orange")
+    return ltk.HBox(
+        ltk.Text("Hello 🎉", {
+            "padding": 50,
+            "background-color": "orange",
+            "font-size": 42,
+        }),
+
+        ltk.Text("World 🎉")
+            .css("padding", 50)
+            .css("background-color", "red")
+            .css("color", "white")
             .css("font-size", 42)
-            .attr("name", "Hello World")
-    )
+    ).attr("name", "Hello World")

kitchen.py

@@ -21,7 +21,7 @@ def setsource(src):
 
 
 ltk.find("#progress").remove()
-ltk.find("#title").append(f" took {js.startTime() / 1000}s")
+ltk.find("#title").append(f" took {js.startTime() / 1000}s to load")
 
 
 ltk.body.append(

ltk/widgets.py

@@ -16,6 +16,7 @@
 timers = {}
 
 BROWSER_SHORTCUTS = [ "Cmd+N","Cmd+T","Cmd+W", "Cmd+Q" ]
+DEFAULT_CSS = {}
 shortcuts = {}
 
 
@@ -25,17 +26,25 @@ class Widget(object):
     element = None
     tag = "div"
 
-    def __init__(self, *children):
+    def __init__(self, *args):
         self.element = (
             jQuery(f"<{self.tag}>")
                 .addClass(" ".join(self.classes))
-                .append(*self.flatten(children))
+                .append(*self.flatten(args))
         )
+        self.handle_css(args)
+
+    def handle_css(self, args):
+        for arg in filter(lambda arg: isinstance(arg, dict), args):
+            for key, value in arg.items():
+                self.css(key, value)
 
     def flatten(self, children):
         result = []
         for child in children:
-            if isinstance(child, Widget):
+            if isinstance(child, dict):
+                continue
+            elif isinstance(child, Widget):
                 result.append(child.element)
             elif inspect.isgenerator(child) or type(child).__name__ == "generator":
                 result.extend(self.flatten(child))
@@ -78,26 +87,26 @@ class Preformatted(Widget):
 class Text(Widget):
     classes = [ "ltk-text" ]
 
-    def __init__(self, html=""):
-        Widget.__init__(self)
+    def __init__(self, html="", style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         self.element.html(str(html))
 
 
 class Input(Widget):
     classes = [ "ltk-input" ]
     tag = "input"
 
-    def __init__(self, value=""):
-        Widget.__init__(self)
+    def __init__(self, value="", style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         self.element.val(value)
 
 
 class Button(Widget):
     classes = [ "ltk-button" ]
     tag = "button"
 
-    def __init__(self, label, click):
-        Widget.__init__(self)
+    def __init__(self, label, click, style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         self.element.text(label).on("click", proxy(click))
 
 
@@ -158,6 +167,7 @@ def __init__(self, *tabs):
         self.attr("id", self.name)
         for tab in self.flatten(tabs):
             self.add_tab(tab)
+        self.handle_css(tabs)
         self.tabs()
 
     def add_tab(self, tab):
@@ -172,8 +182,8 @@ class File(Widget):
     classes = [ "ltk-file" ]
     tag = "input"
 
-    def __init__(self):
-        Widget.__init__(self)
+    def __init__(self, style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         self.element.attr("type", "file")
 
 
@@ -222,8 +232,8 @@ class Code(Widget):
     classes = [ "ltk-code" ]
     tag = "textarea"
 
-    def __init__(self, language, code):
-        Widget.__init__(self)
+    def __init__(self, language, code, style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         inject_script("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js")
         inject_css("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css")
         self.element.val(code)
@@ -240,8 +250,8 @@ class Image(Widget):
     classes = [ "ltk-image" ]
     tag = "img"
 
-    def __init__(self, src):
-        Widget.__init__(self)
+    def __init__(self, src, style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         self.element.referrerPolicy = "referrer"
         self.element.attr("src", src)
 
@@ -253,18 +263,18 @@ class MenuBar(HBox):
 class MenuLabel(Widget):
     classes = ["ltk-menulabel"]
 
-    def __init__(self, label):
-        Widget.__init__(self)
+    def __init__(self, label, style=DEFAULT_CSS):
+        Widget.__init__(self, style)
         self.element.text(label)
 
 
 class Menu(Widget):
     classes = ["ltk-menu"]
 
-    def __init__(self, label, *items):
+    def __init__(self, label, *items, style=DEFAULT_CSS):
         self.label = MenuLabel(label)
         self.popup = MenuPopup(*items)
-        Widget.__init__(self, self.label, self.popup)
+        Widget.__init__(self, self.label, self.popup, style)
         self.label.on("click", proxy(lambda event: self.show(event)))
         self.on("mouseenter", proxy(lambda event: self.replace_other(event)))
 
@@ -301,11 +311,12 @@ def show(self, element):
 class MenuItem(Widget):
     classes = [ "ltk-menuitem" ]
 
-    def __init__(self, icon, label, shortcut, selected):
+    def __init__(self, icon, label, shortcut, selected, style=DEFAULT_CSS):
         Widget.__init__(self,
             Text(icon).addClass("ltk-menuitem-icon"),
             Text(label).addClass("ltk-menuitem-label"),
             Text(shortcut).addClass("ltk-menuitem-shortcut"),
+            style
         )
         self.on("click", proxy(lambda event: self.select(event)))
         self.on("select", proxy(lambda event: self.select(event)))