summaryrefslogtreecommitdiff
path: root/OnboardingForm.ui.qml
blob: 2b90394c79f82e20cbc2ecc1a85e9237565a7a2d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.3

StackView {
    property alias logoImage: logoImage
    property alias onboardingImage: onboardingImage
    property alias onboardingText1: onboardingText1
    property alias onboardingText2: onboardingText2
    property alias startButton: startButton

    initialItem: Page {
        id: page
        title: qsTr("Onboarding")

        ToolBar {
            id: toolBar

            height: 56
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0

            background: Rectangle {
                color: "transparent"
            }
            RowLayout {
                anchors.fill: parent

                Image {
                    id: logoImage
                    Layout.preferredHeight: 24
                    Layout.preferredWidth: 100
                    fillMode: Image.PreserveAspectFit
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    Layout.fillWidth: false
                    Layout.fillHeight: false
                    source: "https://via.placeholder.com/100x24.png"
                }
            }
        }

        StackView {
            id: contentView
            anchors.fill: parent
            z: -1

            Image {
                id: onboardingImage
                anchors.bottom: onboardingText1.top
                anchors.bottomMargin: 32
                anchors.topMargin: 32 + toolBar.height
                anchors.right: parent.right
                anchors.rightMargin: 64
                anchors.left: parent.left
                anchors.leftMargin: 64
                source: "https://via.placeholder.com/600x600.png"
                fillMode: Image.PreserveAspectFit
            }
            Text {
                id: onboardingText1
                text: qsTr("Onboarding text")
                anchors.bottom: onboardingText2.top
                anchors.bottomMargin: 4
                wrapMode: Text.WordWrap
                anchors.right: parent.right
                anchors.rightMargin: 72
                anchors.left: parent.left
                anchors.leftMargin: 16
                font.pointSize: 24
                font.family: "Work Sans"
                font.weight: Font.Bold
            }

            Text {
                id: onboardingText2
                color: "#99000000"
                text: qsTr("Onboarding text 2")
                anchors.bottom: startButton.top
                anchors.bottomMargin: 16
                wrapMode: Text.WordWrap
                anchors.right: parent.right
                anchors.rightMargin: 72
                anchors.left: parent.left
                anchors.leftMargin: 16
                font.pointSize: 16
                font.family: "WorkSans"
                font.weight: Font.Normal
            }

            RoundButton {
                id: startButton
                highlighted: true
                Material.foreground: Material.primary
                text: qsTr("Get Started")
                anchors.right: parent.right
                anchors.rightMargin: 8
                anchors.left: parent.left
                anchors.leftMargin: 8
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 16
                font.capitalization: Font.MixedCase
                font.family: "Work Sans"
            }
        }
    }
}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
##^##*/