Todo example: add a context menu

examples/todo/cpp/app.cpp

@@ -35,6 +35,8 @@ AppState create_ui()
         }
     });
 
+    demo->on_remove([todo_model](int index) { todo_model->erase(index); });
+
     demo->on_popup_confirmed(
             [demo = slint::ComponentWeakHandle(demo)] { (*demo.lock())->window().hide(); });
 

examples/todo/rust/lib.rs

@@ -41,6 +41,12 @@ fn init() -> State {
         let todo_model = todo_model.clone();
         move |text| todo_model.push(TodoItem { checked: false, title: text })
     });
+    main_window.on_remove({
+        let todo_model = todo_model.clone();
+        move |index| {
+            todo_model.remove(index as usize);
+        }
+    });
     main_window.on_remove_done({
         let todo_model = todo_model.clone();
         move || {

examples/todo/ui/todo.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { SpinBox, Button, CheckBox, Slider, LineEdit, ScrollView, ListView,
-    HorizontalBox, VerticalBox, GridBox, StandardButton, Palette } from "std-widgets.slint";
+    HorizontalBox, VerticalBox, GridBox, StandardButton, Palette, StyleMetrics } from "std-widgets.slint";
 
 @rust-attr(derive(serde::Serialize, serde::Deserialize))
 export struct TodoItem  {
@@ -28,6 +28,7 @@ export component MainWindow inherits Window {
 
     callback todo-added(string);
     callback remove-done();
+    callback remove(index: int);
     callback popup_confirmed;
     callback show_confirm_popup;
     callback apply_sorting_and_filtering();
@@ -108,14 +109,31 @@ export component MainWindow inherits Window {
         }
 
         list-view := ListView {
-            for todo in root.todo-model:  HorizontalLayout {
-                CheckBox {
-                    toggled => {
-                        todo.checked = self.checked;
+            for todo[index] in root.todo-model: cm := ContextMenu {
+                MenuItem {
+                    title: @tr("Remove");
+                    activated => { root.remove(index); }
+                }
+                MenuItem {
+                    title: todo.checked ? @tr("Mark as not done") : @tr("Mark as done");
+                    activated => {
+                        todo.checked = !todo.checked;
+                    }
+                }
+                HorizontalLayout {
+                    padding: StyleMetrics.layout-spacing / 2;
+                    spacing: StyleMetrics.layout-spacing;
+                    CheckBox {
+                        toggled => {
+                            todo.checked = self.checked;
+                        }
+                        checked: todo.checked;
+                        horizontal-stretch: 0;
+                    }
+                    Text {
+                        horizontal-stretch: 1;
+                        text: todo.title;
                     }
-
-                    text: todo.title;
-                    checked: todo.checked;
                 }
             }
         }