

/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick 6.2
import QtQuick.Controls 6.2
import Tutorial
import QtQuick.Timeline 1.0
import QtQuick.Studio.Components 1.0

Rectangle {
    id: rectangle
    width: 3840
    height: 2224
    color: "#282828"
    clip: true

    QDSApp {
        id: myStart
        state: "start"

        Banner {
            id: startText
            x: 680
            y: 582
            text: "Welcome to Qt Design Studio"
        }

        Banner {
            id: views
            x: 388
            y: 582
            opacity: 0.94
            text: "Qt Design Studio has many views"
            textFormat: Text.RichText
        }

        Highlight {
            id: naigatorHighlight
            x: 10
            y: 272
            width: 850
            height: 860

            Description {
                id: descriptionNavigator
                x: 368
                y: 596
                text: "The Navigator shows all the items in the current file"
                title: "Navigator"
            }
        }

        Highlight {
            id: componentsHighlight
            x: 0
            y: 1143
            width: 860
            height: 1001
            active: false

            Description {
                id: descriptionComponents
                x: 471
                y: 437
                text: "The Components View contains all the ready made components that come with Qt Design Studio"
                title: "Components"
            }
        }

        Highlight {
            id: statesHighlight
            x: 849
            y: 1560
            width: 2063
            height: 596
            active: false

            Description {
                id: descriptionStates
                x: 1029
                y: 149
                text: "The states editor helps you to add and define states"
                title: "States"
            }
        }

        Highlight {
            id: propertyEditorHighlight
            x: 2865
            y: 150
            width: 950
            height: 2016
            active: false

            Description {
                id: descriptionProperty
                x: -464
                y: 1645
                text: "The Properties View allows the user to edit properties"
                title: "Properties"
            }
        }

        Banner {
            id: propertyEditor
            x: 150
            y: 582
            width: 3555
            height: 772
            text: "You have to select an item to see something in the property editor"
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            textFormat: Text.RichText
        }

        Highlight {
            id: assetsHighlight
            x: 21
            y: 1111
            width: 839
            height: 1024
            active: false

            Description {
                id: description
                x: 569
                y: 578
                text: "The Assets View contains the assets of the project"
                title: "Assets View"
            }
        }
    }

    Timeline {
        id: timeline
        animations: [
            TimelineAnimation {
                id: timelineAnimation
                duration: 100000
                loops: 1
                running: true
                to: 1000
                from: 0
            }
        ]
        endFrame: 1000
        startFrame: 0
        enabled: true

        KeyframeGroup {
            target: myStart
            property: "state"
            Keyframe {
                frame: 0
                value: "start"
            }

            Keyframe {
                frame: 209
                value: "slected"
            }

            Keyframe {
                frame: 457
                value: "projects"
            }

            Keyframe {
                frame: 523
                value: "code"
            }

            Keyframe {
                value: "assets"
                frame: 250
            }
        }

        KeyframeGroup {
            target: startText
            property: "opacity"
            Keyframe {
                value: 0
                frame: 30
            }

            Keyframe {
                value: 1
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 25
            }
        }

        KeyframeGroup {
            target: views
            property: "opacity"
            Keyframe {
                value: 0
                frame: 0
            }

            Keyframe {
                value: 0
                frame: 34
            }

            Keyframe {
                value: 1
                frame: 39
            }

            Keyframe {
                value: 0
                frame: 56
            }
        }

        KeyframeGroup {
            target: naigatorHighlight
            property: "active"
            Keyframe {
                value: false
                frame: 0
            }

            Keyframe {
                value: false
                frame: 66
            }

            Keyframe {
                value: true
                frame: 71
            }

            Keyframe {
                value: false
                frame: 84
            }
        }

        KeyframeGroup {
            target: componentsHighlight
            property: "active"
            Keyframe {
                value: false
                frame: 0
            }

            Keyframe {
                value: false
                frame: 94
            }

            Keyframe {
                value: true
                frame: 98
            }

            Keyframe {
                value: false
                frame: 119
            }
        }

        KeyframeGroup {
            target: statesHighlight
            property: "active"
            Keyframe {
                value: false
                frame: 0
            }

            Keyframe {
                value: false
                frame: 130
            }

            Keyframe {
                value: true
                frame: 134
            }

            Keyframe {
                value: false
                frame: 155
            }
        }

        KeyframeGroup {
            target: propertyEditorHighlight
            property: "active"
            Keyframe {
                value: false
                frame: 22
            }

            Keyframe {
                value: false
                frame: 165
            }

            Keyframe {
                value: true
                frame: 169
            }

            Keyframe {
                value: false
                frame: 269
            }
        }

        KeyframeGroup {
            target: propertyEditor
            property: "opacity"
            Keyframe {
                value: 0
                frame: 0
            }

            Keyframe {
                value: 0
                frame: 197
            }

            Keyframe {
                value: 1
                frame: 213
            }

            Keyframe {
                value: 0
                frame: 233
            }

            Keyframe {
                value: 1
                frame: 219
            }
        }

        KeyframeGroup {
            target: assetsHighlight
            property: "active"
            Keyframe {
                value: false
                frame: 1
            }

            Keyframe {
                value: false
                frame: 289
            }

            Keyframe {
                value: true
                frame: 289
            }

            Keyframe {
                value: false
                frame: 353
            }
        }
    }
}
