crossdesk/apps/desktop/src/gui/ui/device_group_dialog.slint

import { FlatSurface, UiSurface } from "ui_surface.slint";
import { UiRadius } from "ui_radius.slint";
import { ScrollView } from "std-widgets.slint";
import { RoundedLineEdit } from "rounded_line_edit.slint";
import { CompactButton, ImGuiCheckBox, ControlStyle } from "common.slint";
import { GalleryStrings } from "device_strings.slint";

export struct DeviceGroupOption {
    name: string,
    selected: bool,
}

export component DeviceGroupDialog inherits Rectangle {
    in property <string> device-name;
    in property <string> device-id;
    in property <[DeviceGroupOption]> options;
    in property <string> error;
    in-out property <string> new-group;
    callback toggle-group(string);
    callback save(string);
    callback cancel();
    background: #00000040;
    TouchArea {}
    dialog := FlatSurface {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: min(360px, parent.width - 40px);
        height: 208px + group-list.height + (root.error == "" ? 0px : 32px);
        background: white; border-radius: UiRadius.surface;
        outline-color: UiSurface.edge;
        TouchArea {}
        Text {
            x: 18px; y: 16px; height: 24px;
            text: GalleryStrings.texts[30];
            color: #24272d; font-size: 17px; font-weight: 600;
        }
        Text {
            x: 18px; y: 47px; width: parent.width - 36px; height: 18px;
            text: root.device-name; color: #30343b; font-size: 12px; overflow: elide;
        }
        Text {
            x: 18px; y: 67px; width: parent.width - 36px; height: 16px;
            text: "ID  " + root.device-id; color: #858c97; font-size: 11px;
        }
        group-list := FlatSurface {
            x: 18px; y: 95px; width: parent.width - 36px;
            height: min(5, max(1, root.options.length)) * 32px + 2px;
            background: #fbfcfd; outline-color: UiSurface.edge; border-radius: UiRadius.surface;
            clip: true;
            ScrollView {
                x: 1px; y: 1px; width: parent.width - 2px; height: parent.height - 2px;
                viewport-width: self.width;
                VerticalLayout {
                    spacing: 0px;
                    for option[index] in root.options: Rectangle {
                        private property <bool> selected: option.selected && (option.name != "" || root.new-group == "");
                        height: 32px;
                        background: self.selected
                            ? (row-touch.pressed ? ControlStyle.selected-pressed : row-touch.has-hover ? ControlStyle.selected-hover : ControlStyle.selected)
                            : row-touch.pressed ? ControlStyle.pressed : row-touch.has-hover ? ControlStyle.hover : transparent;
                        ImGuiCheckBox {
                            x: 9px; y: 6px; width: 20px; height: 20px;
                            checked: parent.selected;
                        }
                        Text {
                            x: 39px; width: parent.width - 48px; height: parent.height;
                            text: option.name == "" ? GalleryStrings.texts[31] : option.name;
                            color: parent.selected ? ControlStyle.selected-text : #30343b;
                            font-weight: parent.selected ? 600 : 400;
                            font-size: 12px; overflow: elide; vertical-alignment: center;
                        }
                        row-touch := TouchArea { clicked => { root.toggle-group(option.name); } }
                    }
                }
            }
            // Keep row hover backgrounds inside the rounded list on every renderer.
            Rectangle {
                x: -UiRadius.surface; y: -UiRadius.surface;
                width: parent.width + 2 * UiRadius.surface;
                height: parent.height + 2 * UiRadius.surface;
                border-width: UiRadius.surface; border-radius: 2 * UiRadius.surface;
                border-color: white;
            }
            FlatSurface {
                width: parent.width; height: parent.height;
                 border-radius: UiRadius.surface;
                outline-color: UiSurface.edge;
            }
        }
        RoundedLineEdit {
            x: 18px; y: group-list.y + group-list.height + 12px;
            width: parent.width - 36px; height: 30px;
            text <=> root.new-group;
            placeholder-text: GalleryStrings.texts[32];
        }
        if root.error != "": Text {
            x: 18px; y: group-list.y + group-list.height + 48px;
            width: parent.width - 36px; height: 32px;
            text: root.error; color: #c53e3e; font-size: 11px; wrap: word-wrap;
        }
        HorizontalLayout {
            x: 18px; y: parent.height - 46px; width: parent.width - 36px; height: 28px;
            spacing: 10px;
            Rectangle { horizontal-stretch: 1; }
            CompactButton { width: 72px; height: 28px; text: GalleryStrings.texts[33]; clicked => { root.cancel(); } }
            CompactButton { width: 88px; height: 28px; primary: true; text: GalleryStrings.texts[34]; clicked => { root.save(root.new-group); } }
        }
    }
}