Improve life cycle tutorial

examples/tutorial/Tutorial03_LifeCycle.hs

@@ -37,21 +37,23 @@ buildUI
   -> WidgetNode AppModel AppEvent
 buildUI wenv model = widgetTree where
   listItem idx item = hstack [
-      label_ (item ^. text) [ellipsis] `style` [width 150],
+      label_ (item ^. text) [ellipsis] `style` [width 85],
       spacer,
       textField (items . singular (ix idx) . text),
       spacer,
       button "Delete" (RemoveItem idx)
-    ] `key` showt (item ^. ts) `style` [paddingT 5]
+    ] `key` showt (item ^. ts) `style` [paddingT 10]
   widgetTree = vstack [
       keystroke [("Enter", AddItem)] $ hstack [
         label "Description:",
         spacer,
         textField_ newItemText [placeholder "Write here!"] `key` "description",
         spacer,
-        button "Add" AddItem `style` [paddingH 5]
+        button "Add" AddItem
+          `style` [paddingH 5]
+          `enabled` (model ^. newItemText /= "")
       ],
-      separatorLine `style` [paddingT 20, paddingB 15],
+      separatorLine `style` [paddingT 20, paddingB 10],
       vstack (zipWith listItem [0..] (model ^. items))
     ] `style` [padding 20]
 
@@ -63,12 +65,15 @@ handleEvent
   -> [AppEventResponse AppModel AppEvent]
 handleEvent wenv node model evt = case evt of
   AppInit -> []
-  AddItem -> [Model $ model
-    & newItemText .~ ""
-    & items .~ newItem : model ^. items,
-    setFocusOnKey wenv "description"]
+  AddItem
+    | model ^. newItemText /= "" -> [
+      Model $ model
+        & newItemText .~ ""
+        & items .~ newItem : model ^. items,
+      setFocusOnKey wenv "description"]
   RemoveItem idx -> [Model $ model
     & items .~ removeIdx idx (model ^. items)]
+  _ -> []
   where
     newItem = ListItem (wenv ^. L.timestamp) (model ^. newItemText)
 

tasks.md

@@ -712,18 +712,20 @@
   - Add tests for labeledCheckbox and labeledRadio.
   - Try simple example rendering on a separate thread.
     - Created sdl-continuous-resize which works correctly.
-
-Next
   - Rethink default style for label.
   - Apply improved styles to examples.
+  - Fix button disabled click.
+  - Improve disabled styles.
+
+Next
+  - Dropdown should scroll to selected item when opening.
+  - Dropdown selected item does not seem to be marked on init.
   - Can image be aligned to right when fitting is applied?
   - Should text be aligned based on ascending instead of line height?
     - Review Books example.
   - Add gap support in scroll?
   - Think about rendering with custom beginFrame for some widgets
     - Could work for rounded images.
-  - Dropdown should scroll to selected item when opening.
-  - Dropdown selected item does not seem to be marked on init.
   - Improve base theme creation (scale argument?)
   - Improve Main module (naming, refactor into smaller functions).
   - Apply threading ideas (sdl-continuous-resize).