slint/examples/todo/ui/todo.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { SpinBox, Button, CheckBox, Slider, LineEdit, ScrollView, ListView,
    HorizontalBox, VerticalBox, GridBox, StandardButton } from "std-widgets.slint";

export struct TodoItem := {
    title: string,
    checked: bool,
}

MainWindow := Window {
    preferred-width: 400px;
    preferred-height: 600px;
    callback todo-added(string);
    callback remove-done();

    callback popup_confirmed;
    callback show_confirm_popup;
    show_confirm_popup => { confirm_popup.show(); }

    confirm_popup := PopupWindow {
        x: 40px;
        y: 100px;
        width: min(confirm_popup_layout.preferred-width, root.width - 80px);
        Rectangle {
            background: root.background;
            border-color: confirm_popup_text.color;
            border-width: 1px;
        }
        confirm_popup_layout := Dialog {
            height:100%; width: 100%;
            confirm_popup_text := Text {
                text: "Some items are not done, are you sure you wish to quit?";
                wrap: word-wrap;
            }
            StandardButton { kind: yes; clicked => { popup_confirmed(); } }
            StandardButton { kind: no; }
        }
    }

    property <[TodoItem]> todo-model: [
        { title: "Implement the .slint file", checked: true },
        { title: "Do the Rust part", checked: false },
        { title: "Make the C++ code", checked: false },
        { title: "Write some JavaScript code", checked: false },
        { title: "Test the application", checked: false },
        { title: "Ship to customer", checked: false },
        { title: "???", checked: false },
        { title: "Profit", checked: false },
    ];

    VerticalBox {
        HorizontalBox {
            text-edit := LineEdit {
                placeholder-text: "What needs to be done?";
                accepted(text) => {
                    todo-added(text);
                    self.text = "";
                }
            }
            btn := Button {
                text: "Add New Entry";
                enabled: text-edit.text != "";
                clicked => {
                    todo-added(text-edit.text);
                    text-edit.text = "";
                }
            }
        }

        list-view := ListView {
            for todo in todo-model:  HorizontalLayout {
                CheckBox {
                    text: todo.title;
                    checked: todo.checked;
                    toggled => {
                        todo.checked = checked;
                    }
                }
            }
        }
        HorizontalBox {
            alignment: end;
            Button {
                text: "Remove Done Items";
                clicked => { root.remove-done(); }
            }
        }
    }
}