refactored and improved trello demo

examples/trello_cards/main.py

@@ -1,56 +1,18 @@
 #!/usr/bin/env python3
-from __future__ import annotations
-
-from typing import Optional
+import trello
 
 from nicegui import ui
 
-
-class Column(ui.column):
-
-    def __init__(self, name: str) -> None:
-        super().__init__()
-        with self.classes('bg-gray-200 w-48 p-4 rounded shadow'):
-            ui.label(name).classes('text-bold')
-        self.on('dragover.prevent', self.highlight)
-        self.on('dragleave', self.unhighlight)
-        self.on('drop', self.move_card)
-
-    def highlight(self) -> None:
-        self.classes(add='bg-gray-400')
-
-    def unhighlight(self) -> None:
-        self.classes(remove='bg-gray-400')
-
-    def move_card(self) -> None:
-        self.unhighlight()
-        Card.dragged.parent_slot.parent.remove(Card.dragged)
-        with self:
-            Card(Card.dragged.text)
-
-
-class Card(ui.card):
-    dragged: Optional[Card] = None
-
-    def __init__(self, text: str) -> None:
-        super().__init__()
-        self.text = text
-        with self.props('draggable').classes('w-full cursor-pointer'):
-            ui.label(self.text)
-        self.on('dragstart', self.handle_dragstart)
-
-    def handle_dragstart(self) -> None:
-        Card.dragged = self
-
-
 with ui.row():
-    with Column('Next'):
-        Card('Clean up the kitchen')
-        Card('Do the laundry')
-        Card('Go to the gym')
-    with Column('Doing'):
-        Card('Make dinner')
-    with Column('Done'):
-        Card('Buy groceries')
-
-ui.run()
+    with trello.column('Next'):
+        trello.card('Improve Documentation')
+        trello.card('Simplify Layouting')
+        trello.card('Provide Deployment')
+    with trello.column('Doing'):
+        trello.card('Release Standalone-Mode')
+    with trello.column('Done'):
+        trello.card('Invent NiceGUI')
+        trello.card('Test in own Projects')
+        trello.card('Publish as Open Source')
+
+ui.run(standalone=True)

examples/trello_cards/trello.py

@@ -0,0 +1,42 @@
+from __future__ import annotations
+
+from typing import Optional
+
+from nicegui import ui
+
+
+class column(ui.column):
+
+    def __init__(self, name: str) -> None:
+        super().__init__()
+        with self.classes('bg-gray-200 w-60 p-4 rounded shadow-2'):
+            ui.label(name).classes('text-bold')
+        self.on('dragover.prevent', self.highlight)
+        self.on('dragleave', self.unhighlight)
+        self.on('drop', self.move_card)
+
+    def highlight(self) -> None:
+        self.classes(add='bg-gray-400')
+
+    def unhighlight(self) -> None:
+        self.classes(remove='bg-gray-400')
+
+    def move_card(self) -> None:
+        self.unhighlight()
+        card.dragged.parent_slot.parent.remove(card.dragged)
+        with self:
+            card(card.dragged.text)
+
+
+class card(ui.card):
+    dragged: Optional[card] = None
+
+    def __init__(self, text: str) -> None:
+        super().__init__()
+        self.text = text
+        with self.props('draggable').classes('w-full cursor-pointer'):
+            ui.label(self.text)
+        self.on('dragstart', self.handle_dragstart)
+
+    def handle_dragstart(self) -> None:
+        card.dragged = self