slint/examples/printerdemo/ui/common.60

/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>

    SPDX-License-Identifier: GPL-3.0-only
    This file is also available under commercial licensing terms.
    Please contact info@sixtyfps.io for more information.
LICENSE END */

struct ButtonColors := {
    base: color,
    pressed: color,
    hovered: color,
}

export global DemoPalette := {
    // Color of the home/settings/ink buttons on the left side bar
    property <color> active_page_icon_color: night_mode ? #6284FF : #122F7B;
    property <color> inactive_page_icon_color: #BDC0D1;

    property <color> main_background: #0E133F;
    property <color> neutral_box: #BDC0D1;

    property <color> page_background_color: night_mode ? #122F7B : white;

    property <color> text_foreground_color: night_mode ? #F4F6FF : black;
    property <color> secondary_foreground_color: #6C6E7A; // FIXME: night mode

    property <color> printer_action_background_color: night_mode ? main_background : white;
    property <color> printer_queue_item_background_color: page_background_color;

    property <color> status_label_text_color: night_mode ? #F1FF98 : #6284FF;

    // Color used for the border / outline of items that can be clicked on, such as the
    // "Print"/"Scan" buttons, the printer queue items (for expansion) or controls such
    // as the combo box or spin box.
    property <color> control_outline_color: #FFBF63;
    property <color> control_secondary: #6284FF;
    property <color> control_foreground: night_mode ? white : #122F7B;  // FIXME: the night mode color was not part of the design

    property <color> primary_push_button_base: #6284FF;
    property <ButtonColors> primary_push_button_colors: {
        base: primary_push_button_base,
        pressed: primary_push_button_base.darker(40%),
        hovered: primary_push_button_base.darker(20%),
    };

    property <color> secondary_push_button_base: #FFBF63;
    property <ButtonColors> secondary_push_button_colors: {
        base: secondary_push_button_base,
        pressed: secondary_push_button_base.darker(40%),
        hovered: secondary_push_button_base.darker(20%),
    };


    property <color> push_button_text_color: white;

    property <length> base_font_size: 16px;

    property <bool> night_mode: false;
}

export Page := Rectangle {
    property<string> header <=> h.text;
    background: DemoPalette.page_background_color;
    property <bool> has_back_button: false;
    callback back;

    TouchArea {} // protect underneath controls

    if (has_back_button) : Image {
        source: @image-url("images/back.svg");
        image-fit: contain;
        colorize: DemoPalette.control_secondary;
        y: h.y + (h.height - height) / 2;
        width: 14px;
        height: 24px;
        TouchArea {
            clicked => { back() }
            width: 150%;
        }
    }

    h := Text {
        font-weight: 900;
        font-size: DemoPalette.base_font_size * 2;
        color: DemoPalette.text_foreground_color;
        y: 46px - font-size;
        x: has_back_button ? 24px + 16px : 0px;
        // Allow clicking on the title as well to get back easier when just
        // using fingers on a small screen.
        if (has_back_button) : TouchArea {
            clicked => { back() }
        }
    }
}

export struct PrinterQueueItem := {
    status: string, // WAITING..., PRINTING
    progress: int,
    title: string,
    owner: string,
    pages: int,
    size: string, // number instead and format in .60?
    submission_date: string
}

export Label := Text {
    color: DemoPalette.text_foreground_color;
    vertical-alignment: center;
    font-weight: 700;
    vertical-stretch: 0;
}

SquareButton := Rectangle {
    callback clicked;
    property<image> img;
    border-radius: 3px;
    border-width: 2px;
    border-color: DemoPalette.control_outline_color;
    touch := TouchArea {
        clicked => {
            root.clicked();
        }
    }
    Image {
        height: 40%;
        width: 40%;
        x: (parent.width - width)/2;
        y: (parent.height - height)/2;
        source <=> root.img;
        image-fit: contain;
        colorize: DemoPalette.control_secondary;
    }
}

export SpinBox := Rectangle {
    property <int> value;
    property <int> minimum;
    property <int> maximum: 100;
    height: 32px;

    HorizontalLayout {
        spacing: 12px;
        padding: 0;
        SquareButton {
            width: root.height - parent.padding * 2;
            img: @image-url("images/minus.svg");
            clicked => {
                if (root.value > root.minimum) {
                    root.value -= 1;
                }
            }
        }

        Rectangle {
            border-radius: 3px;
            border-width: 2px;
            border-color: DemoPalette.control_outline_color;
            Text {
                width: 100%;
                height: 100%;
                vertical-alignment: center;
                horizontal-alignment: center;
                text: value;
                color: DemoPalette.control_foreground;
            }
        }

        SquareButton {
            width: root.height - parent.padding * 2;
            img: @image-url("images/plus.svg");
            clicked => {
                if (root.value < root.maximum) {
                    root.value += 1;
                }
            }
        }
    }
}

export ComboBox := Rectangle {
    property<string> value;
    property<[string]> choices;
    border-radius: 3px;
    border-width: 2px;
    border-color: DemoPalette.control_outline_color;
    height: 32px;
    min-width: label.x + label.width + i.width;
    label := Text {
        vertical-alignment: center;
        horizontal-alignment: left;
        text <=> root.value;
        color: DemoPalette.control_foreground;
        height: 100%;
        x: 12px;
    }
    i := Image {
        source: @image-url("images/down.svg");
        colorize: DemoPalette.control_secondary;
        height: 40%;
        width: height;
        image-fit: contain;
        x: parent.width - width - y;
        y: (parent.height - height)/2;
    }

    TouchArea {
        width: 100%;
        height: 100%;
        clicked => { popup.show(); }
    }

    popup := PopupWindow {
        y: root.height;
        width: root.width;
        Rectangle {
            background: DemoPalette.page_background_color;
            border-radius: 3px;
            border-width: 2px;
            border-color: DemoPalette.control_outline_color;
        }
        VerticalLayout {
            spacing: 6px;
            padding: 3px;
            for value[idx] in root.choices: Rectangle {
                border-radius: 3px;
                background: item_area.has_hover ? DemoPalette.primary_push_button_colors.hovered : #0000;
                HorizontalLayout {
                    Text {
                        text: value;
                        color: item_area.has_hover ? DemoPalette.push_button_text_color : DemoPalette.text_foreground_color;
                        font-size: DemoPalette.base_font_size;
                    }
                }
                item_area := TouchArea {
                    clicked => {
                        root.value = value;
                    }
                }
            }
        }
    }
}

export CheckBox := Rectangle {
    property <bool> checked;
    property <string> text;

    height: 32px;

    HorizontalLayout {
        spacing: 12px;
        padding: 0;
        SquareButton {
            width: root.height - parent.padding * 2;
            img: checked ? @image-url("images/check.svg") : @image-url("");
            clicked => { checked = !checked; }
        }

        Text {
            text <=> root.text;
            vertical-alignment: center;
            horizontal-alignment: center;
            color: DemoPalette.control_foreground;
            horizontal-stretch: 1;
        }
    }
}

export PushButton := Rectangle {
    callback clicked;
    property <string> text <=> label.text;
    property <image> icon <=> img.source;
    property <bool> primary: true;
    property <bool> pressed: touch_area.pressed;

    property <ButtonColors> colors: primary ? DemoPalette.primary_push_button_colors : DemoPalette.secondary_push_button_colors;

    border-radius: 13.5px;

    background: pressed ? colors.pressed : (touch_area.has_hover ? colors.hovered : colors.base);

    height: 27px; // line-height in the design
    horizontal-stretch: 1;

    HorizontalLayout {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: parent.border_radius;
        padding-right: parent.border_radius;

        img := Image {
            horizontal-stretch: 0;
            colorize: DemoPalette.push_button_text_color;
            image-fit: contain;
            width: 17px;
        }

        label := Text {
            font-weight: 900;
            font-size: DemoPalette.base_font_size * 0.975;
            color: DemoPalette.push_button_text_color;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }

    touch_area := TouchArea { clicked => { root.clicked() } }
}