pad.slint

export component Demo inherits Window {
   in-out property<string> fax-number <=> text.text;

    width: 300px;
    height: 300px;

    layout := VerticalLayout {
        text := Text {
            //colspan: 2;
            horizontal-alignment: center;
            font-size: 40px;
            horizontal-stretch: 1;
            overflow: elide;
            min-width: 0;
            preferred-width: 0;
        }

        Rectangle {
            //colspan: 2;
            background: #333;
            height: 50%;
            border-radius: 4px;

            for row-model[r] in [
                [ 7, 8, 9 ],
                [ 4, 5, 6 ],
                [ 1, 2, 3 ],
                [ 0, -1 ],
            ] : Rectangle {
                width: 100%;
                height: 25% * (parent.height - 5*10px);
                y: r * (self.height + 10px) + 10px;

                for num[c] in row-model : Rectangle {
                    height: parent.height;
                    width: (parent.width - 4*10px) / 3;
                    x: c * (self.width + 10px) + 10px;
                    border-radius: 4px;
                    background: key-area.pressed ? #566 : #555 ;
                    Text {
                        width: 100%;
                        height: 100%;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                        color: white;
                        text: num >= 0 ? num : "⌫";
                    }
                    key-area := TouchArea {
                        width: 100%;
                        height: 100%;
                        clicked => {
                            if (num >= 0) {
                                root.fax-number += num;
                            } else {
                                // No way to remove from a string though, needs native code
                            }
                        }
                    }
                }
            }
        }
    }
}