InstalledWelcomeScreen.qml 7.15 KB
Newer Older
1
import QtQuick 2.12
2 3 4
import QtQuick.Controls 2.3
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.2
5
import ScreenPlay 1.0
Elias Steurer's avatar
Elias Steurer committed
6 7
import "../Common"

8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Item {
    id: installedUserHelper
    signal helperButtonPressed(var pos)
    anchors {
        fill: parent
    }

    state: "out"
    Component.onCompleted: state = "in"

    Image {
        id: imgBg
        source: "qrc:/assets/images/Intro.png"
        anchors.fill: parent
    }
Elias Steurer's avatar
Elias Steurer committed
23

24 25 26 27 28 29 30 31 32 33 34 35 36 37
    Item {
        height: parent.height
        anchors {
            top: parent.top
            topMargin: parent.height * .5 + 50
            right: parent.right
            left: parent.left
        }

        Image {
            id: imgShine
            source: "qrc:/assets/images/Intro_shine.png"
            height: 1753
            width: 1753
Elias Steurer's avatar
Elias Steurer committed
38
            opacity: 0
39 40 41 42 43 44 45
            anchors.centerIn: parent
            RotationAnimator {
                target: imgShine
                from: 0
                to: 360
                duration: 100000
                running: true
46
                loops: Animation.Infinite
47 48 49 50
            }
        }
    }

Elias Steurer's avatar
Elias Steurer committed
51 52 53 54 55 56 57 58 59 60 61 62 63
    Image {
        id: imgLogo
        source: "qrc:/assets/images/Early_Access.png"
        anchors {
            top: parent.top
            topMargin: -200
            horizontalCenter: parent.horizontalCenter
        }
        width: 539
        height: 148
        sourceSize: Qt.size(width, height)
    }

Elias Steurer's avatar
Elias Steurer committed
64
    Text {
Elias Steurer's avatar
Elias Steurer committed
65
        id: txtHeadline
Elias Steurer's avatar
Elias Steurer committed
66 67
        y: 80
        text: qsTr("Get free Widgets and Wallpaper via the Steam Workshop")
68
        font.family: ScreenPlay.settings.font
Elias Steurer's avatar
Elias Steurer committed
69
        font.capitalization: Font.Capitalize
Elias Steurer's avatar
Elias Steurer committed
70 71 72
        wrapMode: Text.WordWrap
        color: "white"
        font.weight: Font.Thin
Elias Steurer's avatar
Elias Steurer committed
73
        font.pointSize: 28
Elias Steurer's avatar
Elias Steurer committed
74
        horizontalAlignment: Text.AlignHCenter
75
        anchors {
Elias Steurer's avatar
Elias Steurer committed
76 77
            right: parent.right
            left: parent.left
78 79 80 81 82 83 84 85
            top: parent.top
        }
    }

    Image {
        id: imgPC
        source: "qrc:/assets/images/Intro_PC.png"
        anchors {
Elias Steurer's avatar
Elias Steurer committed
86 87
            top: parent.top
            topMargin: 50
88 89
            horizontalCenter: parent.horizontalCenter
        }
Elias Steurer's avatar
Elias Steurer committed
90 91
        width: 500 * .8
        height: 500 * .8
92 93 94 95 96
        sourceSize: Qt.size(width, height)
    }

    Button {
        id: btnWorkshop
Elias Steurer's avatar
Typo  
Elias Steurer committed
97
        text: qsTr("Browse the Steam Workshop")
Elias Steurer's avatar
Elias Steurer committed
98
        Material.background: Material.color(Material.Orange)
99
        Material.foreground: "white"
Elias Steurer's avatar
Elias Steurer committed
100
        font.pointSize: 16
Elias Steurer's avatar
Elias Steurer committed
101
        font.weight: Font.Thin
Elias Steurer's avatar
Elias Steurer committed
102 103 104 105 106
        width: implicitWidth + 20
        height: implicitHeight + 10
        icon.source: "qrc:/assets/icons/icon_steam.svg"
        icon.width: 18
        icon.height: 18
Elias Steurer's avatar
Elias Steurer committed
107 108 109 110 111 112
        transform: [
            Shake {
                id: animShake
            },
            Grow {
                id: animGrow
Elias Steurer's avatar
Elias Steurer committed
113 114
                centerX: btnWorkshop.width * .5
                centerY: btnWorkshop.height * .5
Elias Steurer's avatar
Elias Steurer committed
115 116 117
                loops: -1
            }
        ]
118 119 120 121 122 123 124
        anchors {
            bottom: parent.bottom
            bottomMargin: -100
            horizontalCenter: parent.horizontalCenter
        }
        onClicked: helperButtonPressed(1)
    }
Elias Steurer's avatar
Elias Steurer committed
125

126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
    states: [
        State {
            name: "out"

            PropertyChanges {
                target: imgBg
                opacity: 0
            }

            PropertyChanges {
                target: imgShine
                opacity: 0
            }
            PropertyChanges {
                target: imgPC
                opacity: 0
Elias Steurer's avatar
Elias Steurer committed
142
                anchors.topMargin: -500
143
            }
Elias Steurer's avatar
Elias Steurer committed
144 145 146 147 148 149 150

            PropertyChanges {
                target: imgLogo
                opacity: 1
                anchors.topMargin: -500
            }

151
            PropertyChanges {
Elias Steurer's avatar
Elias Steurer committed
152
                target: txtHeadline
153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
                opacity: 0
                anchors.topMargin: -300
            }
            PropertyChanges {
                target: btnWorkshop
                anchors.bottomMargin: -100
            }
        },
        State {
            name: "in"

            PropertyChanges {
                target: imgBg
                opacity: 1
            }

            PropertyChanges {
                target: imgShine
Elias Steurer's avatar
Elias Steurer committed
171
                opacity: .5
172 173 174 175
            }
            PropertyChanges {
                target: imgPC
                opacity: 1
Elias Steurer's avatar
Elias Steurer committed
176
                anchors.topMargin: 250
177 178 179
            }

            PropertyChanges {
Elias Steurer's avatar
Elias Steurer committed
180 181 182 183 184 185 186
                target: imgLogo
                opacity: 1
                anchors.topMargin: 50
            }

            PropertyChanges {
                target: txtHeadline
187 188
                color: "#ffffff"
                opacity: 1
Elias Steurer's avatar
Elias Steurer committed
189
                anchors.topMargin: 250
190 191 192
            }
            PropertyChanges {
                target: btnWorkshop
Elias Steurer's avatar
Elias Steurer committed
193
                anchors.bottomMargin: 50
194 195 196 197 198 199 200 201 202 203
            }
        }
    ]

    transitions: [
        Transition {
            from: "out"
            to: "in"
            reversible: true

Elias Steurer's avatar
Elias Steurer committed
204 205 206 207 208 209 210 211 212 213 214 215
            ParallelAnimation {
                PropertyAnimation {
                    targets: imgBg
                    property: "opacity"
                    duration: 400
                }
                PropertyAnimation {
                    targets: imgShine
                    property: "opacity"
                    duration: 600
                }
            }
216
            SequentialAnimation {
Elias Steurer's avatar
Elias Steurer committed
217 218 219

                PauseAnimation {
                    duration: 500
220
                }
Elias Steurer's avatar
Elias Steurer committed
221 222 223 224 225 226 227

                PropertyAnimation {
                    targets: imgPC
                    property: "topMargin"
                    duration: 700
                    easing.type: Easing.OutBack
                }
Elias Steurer's avatar
Elias Steurer committed
228 229 230 231 232 233 234

                PropertyAnimation {
                    targets: imgPC
                    property: "opacity"
                    duration: 600
                    easing.type: Easing.OutBack
                }
Elias Steurer's avatar
Elias Steurer committed
235 236 237 238 239
            }

            SequentialAnimation {

                PropertyAnimation {
Elias Steurer's avatar
Elias Steurer committed
240
                    targets: imgLogo
Elias Steurer's avatar
Elias Steurer committed
241
                    property: "opacity"
Elias Steurer's avatar
Elias Steurer committed
242 243 244 245 246 247 248 249
                    duration: 500
                    easing.type: Easing.InOutExpo
                }

                PropertyAnimation {
                    targets: imgLogo
                    property: "topMargin"
                    duration: 500
Elias Steurer's avatar
Elias Steurer committed
250
                    easing.type: Easing.InOutExpo
251
                }
Elias Steurer's avatar
Elias Steurer committed
252 253 254
            }

            SequentialAnimation {
255 256 257 258

                PauseAnimation {
                    duration: 200
                }
Elias Steurer's avatar
Elias Steurer committed
259
                PropertyAnimation {
Elias Steurer's avatar
Elias Steurer committed
260
                    targets: txtHeadline
Elias Steurer's avatar
Elias Steurer committed
261 262 263 264 265
                    properties: "topMargin, opacity"
                    duration: 1100
                    easing.type: Easing.InOutExpo
                }
            }
266

Elias Steurer's avatar
Elias Steurer committed
267 268 269 270 271 272 273 274 275 276 277 278 279
            SequentialAnimation {

                PauseAnimation {
                    duration: 600
                }
                PropertyAnimation {
                    targets: btnWorkshop
                    properties: "bottomMargin"
                    duration: 400
                    easing.type: Easing.OutBack
                }
                ScriptAction {
                    script: {
Elias Steurer's avatar
Elias Steurer committed
280
                        animShake.start(2000, 1000, -1)
281 282 283 284 285 286
                    }
                }
            }
        }
    ]
}
Elias Steurer's avatar
Elias Steurer committed
287 288 289 290 291 292

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