Doc: Update fourth part of entry-level tutorial

Task-number: QDS-5001
Change-Id: Iab790f9141424ef848ddeaa2566108bf7a75d18a
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -37,12 +37,13 @@
 
     \e{Log In UI - Timeline} is the fourth in a series of tutorials that build
     on each other to illustrate how to use \QDS to create a simple UI with
-    some basic UI components, such as pages, buttons, and entry fields. Part 4
+    some basic UI components, such as pages, buttons, and entry fields. The
-    describes how to use the timeline and states to animate UI components.
+    fourth part of the tutorial describes how to use the timeline and states
+    to animate UI components.
 
-    In Part 3, you learned how to use states to simulate page changes
+    In \l {Log In UI - States}, you learned how to use states to simulate page
-    in a UI and connections to provide user interaction with it. In
+    changes in a UI and connections to provide user interaction with it. In
-    Part 4, you will now learn another way of animating the UI by creating
+    this part, you will now learn another way of animating the UI by creating
     \l{Creating Timeline Animations}{timeline animations} that you bind
     to states.
 
@@ -59,18 +60,18 @@
 
     \section1 Animating UI Components
 
-    In Part 3, you changed the visibility property in different states to
+    In \l {Log In UI - States}, you changed the visibility property in different
-    simulate changing pages. To make sure that those changes won't interfere
+    states to simulate changing pages. To make sure that those changes won't
-    with the changes to the opacity property you will make in Part 4, you will
+    interfere with the changes to the opacity property you will make next, you
-    first remove the states.
+    will first remove the states.
 
     Then, you will add a timeline and insert keyframes for the opacity property
-    to hide the password verification field and back button on the login page
+    to hide the \e {Retype Password} field on the login page and the
-    and the login button on the registration page. Because we want the password
+    \e {Create Account} button on the account creation page. Because we want the
-    verification field to appear to slide down from the password field, you will
+    retype password field to appear to slide down from the password field, you
-    also need to insert a keyframe for its anchor margin property. To be able to
+    will also need to insert a keyframe for its anchor margin property. To be
-    animate the anchor, you also need to pull out the fields from the fields
+    able to animate the anchor, you also need to pull out the fields from the
-    column and anchor them to the page and to each other instead.
+    column component and anchor them to the rectangle and to each other instead.
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
@@ -82,39 +83,47 @@
     First, you will prepare the \e Screen01 component for adding animation:
 
     \list 1
-        \li Open \e {Screen01.ui.qml} in \l {Form Editor} for editing.
+        \li Double-click \e Screen01.ui.qml in \l Projects to open it
-        \li In the \l States view, select the \inlineimage close.png
+            in \l {Form Editor}.
-            (\uicontrol Close) button in \e loginState and \e registerState
+        \li In the \l States view, select \e login, and then select
-            to remove the states.
+            \inlineimage close.png
-        \li Select the fields in \e fieldColumn in \l Navigator
+            to remove the state. Repeat for the \e createAccount state.
-            and drag and drop them to their parent rectangle to prepare for
+        \li Select \e username in \l Navigator, and then select
-            deleting the column component.
+            \inlineimage arrowleft.png
-        \li Select \e fieldColumn in \uicontrol Navigator and press
+            to move it into the parent rectangle to prepare for
-            \key Delete to delete it.
+            deleting the \e fields column component instance.
-        \li Select \e usernameField in \uicontrol Navigator.
+        \li Select \inlineimage icons/navigator-arrowup.png
-        \li In \l Properties > \uicontrol Layout, select the
+            to move \e username below \e tagLine in \uicontrol Navigator
-            \inlineimage icons/anchor-top.png
+            to preserve the \l{Arranging Components}{component hierarchy}.
-            (\uicontrol Top) button to anchor the top of the field to the top
+        \li Repeat for \e password and \e repeatPassword.
-            of its parent. \QDS will suggest an appropriate margin based on
+        \li Select \e fields in \uicontrol Navigator and press \key Delete to
-            the current position of the field on the y axis, 200 pixels.
+            delete it.
-        \li Select the \inlineimage icons/anchor-center-horizontal.png
+        \li Select \e username in \uicontrol Navigator to display its properties
-            (\uicontrol {Horizontal Center}) button to anchor
+            in \l Properties.
-            the horizontal center of the field to that of its parent.
+        \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
-        \li Select \e passwordField, and then select the \uicontrol Top
+            to anchor the top of \e username to the bottom of \e tagLine in the
-            button in \uicontrol Properties > \uicontrol Layout.
+            \uicontrol Target field. \QDS will suggest an appropriate margin
-        \li In the \uicontrol Target field, select \e usernameField to anchor
+            based on the current position of the field on the y axis, 170
-            the top of \e passwordField to the bottom of \e usernameField
+            pixels.
-            with a 5-pixel margin.
+        \li Select \inlineimage icons/anchor-center-horizontal.png
-        \li Select the \uicontrol {Horizontal Center} button to anchor the
+            to anchor \e username horizontally to its parent in the
-            horizontal center of \e passwordField to that of \e usernameField.
+            \uicontrol Target field.
-        \li Repeat the above steps to anchor the top of \e verifyPasswordField
+        \li Select \e password in \uicontrol Navigator to display its properties
-            to the bottom of \e passwordField with a 5-pixel margin and to
+            in \uicontrol Properties.
-            anchor its horizontal center to that of \e passwordField.
+        \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
+            to anchor the top of \e password to the bottom of \e username in
+            the \uicontrol Target field with a 20-pixel margin.
+        \li Select \inlineimage icons/anchor-center-horizontal.png
+            to anchor \e password horizontally to its parent in the
+            \uicontrol Target field.
+        \li Repeat the above steps to anchor the top of \e repeatPassword
+            to the bottom of \e password with a 20-pixel margin and to
+            anchor it horizontally to its parent.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    You could also animate the y-position property of the verify password
+    You could also animate the y-position property of the repeat password
     field for a similar effect. In that case, you would need to use absolute
     positioning for the field. This is less flexible if you export your
     design from a design tool, such as Adobe Photoshop, and decide to change
@@ -122,18 +131,13 @@
     would probably stay the same, even if the positions of the fields on the
     page would change.
 
-    \e Screen01 should now look something like this in the \uicontrol Design
+    \e Screen01 should not display visible changes in \uicontrol {Form Editor}:
-    mode and live preview:
 
-    \image loginui4-page.png "UI with all the buttons and fields in the Design mode"
+    \image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode"
 
     \section2 Adding a Timeline and Animation Settings
 
-    You are now ready to add the \l{Creating Timeline Animations}{timeline}. You will
+    You are now ready to add the \l{Creating Timeline Animations}{timeline}.
-    need two animations, one for moving into the registration page and another
-    for returning to the login page. You can use the same animation for both
-    cases, by running it either from the beginning to the end or from the
-    end to the beginning.
 
     To add a timeline with settings for running the animation:
 
@@ -143,18 +147,12 @@
         \li In \uicontrol Timeline, select \inlineimage plus.png
             to add a 1000-frame timeline and settings for running the animation.
             \image loginui4-timeline-settings.png
-        \li In the \uicontrol {Animation ID} field, enter \e toLoginState.
+        \li In the \uicontrol {Animation ID} field, enter
-        \li Deselect the \uicontrol {Running in base state} check box, because
+            \e toCreateAccountState.
+        \li Deselect the \uicontrol {Running in base state} check box because
             you want the animation to run only after the user clicks the
             \uicontrol {Create Account} button. You can use the default settings
             for the other fields.
-        \li Select \inlineimage plus.png
-            next to the \uicontrol {Animation Settings} group to add settings
-            for running the animation when the user clicks the back button.
-        \li In the \uicontrol {Animation ID} field, enter \e toRegisterState.
-        \li To run the animation backwards when the user clicks the back button,
-            enter \e 1000 in the \uicontrol {Start frame} field and \e 0 in the
-            \uicontrol {End frame} field.
         \li Select \uicontrol Close in the \uicontrol {Timeline Settings} view
             to save the timeline and the animation settings.
     \endlist
@@ -167,14 +165,17 @@
     \uicontrol Timeline:
 
     \list 1
-        \li Select \e backButton in \uicontrol Navigator.
+        \li Select \e repeatPassword in \uicontrol Navigator to display its
-        \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
+            properties in \uicontrol Properties.
-            select \uicontrol {Insert Keyframe} to insert a keyframe for the
+        \li In \uicontrol Visibility > \uicontrol Opacity, select
-            opacity property of the button.
+            \inlineimage icons/action-icon.png
+            > \uicontrol {Insert Keyframe} to insert a keyframe for the
+            opacity property of the component.
+            \image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property"
         \li In \uicontrol Timeline, check that the playhead is in
             frame 0, and select the \inlineimage recordfill.png
             (\uicontrol {Per Property Recording}) button for the
-            \uicontrol opacity property of \e backButton to start
+            \uicontrol opacity property of \e repeatPassword to start
             recording property changes.
             \image loginui4-timeline-opacity.png "Record button for the opacity property"
         \li In the field next to the opacity property name on that same line,
@@ -188,12 +189,8 @@
         \li Select the record button again to stop recording property changes.
             If you forget this, all the following changes will be recorded, and
             the results will be unpredictable.
-        \li Select \e verifyPasswordField in \uicontrol Navigator,
+        \li Select \e createAccount in \uicontrol Navigator, and repeat
-            and repeat the above steps to insert a keyframe for the
+            the above steps to insert a keyframe for the \uicontrol Opacity
-            \uicontrol opacity property of the field and to record
-            changes for it.
-        \li Select \e loginButton in \uicontrol Navigator, and repeat
-            the above steps to insert a keyframe for the \uicontrol opacity
             property of the button and to record changes for it. However, this
             time the opacity value needs to be 1 in frame 0 and 0 in frame 1000.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
@@ -201,30 +198,34 @@
     \endlist
 
     When you move the playhead along the timeline, you can see how the login
-    button fades out while the verify password field and back button fade in.
+    button fades out while the repeat password field fades in.
 
-    You will now animate the top anchor margin of the verify password field
+    You will now animate the top anchor margin of the repeat password field
     to make it appear to slide down from the password field.
 
     \section2 Animating Anchors
 
-    To animate the top anchor margin of the verify password field:
+    To animate the top anchor margin of the repeat password field:
 
     \list 1
-        \li Select \e verifyPasswordField in \uicontrol Navigator.
+        \li Select \e repeatPassword in \uicontrol Navigator to display its
-        \li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin
+            properties in \uicontrol Properties.
+        \li In \uicontrol Layout > \uicontrol Margin (under
+            \inlineimage icons/anchor-top.png
+            ), select \inlineimage icons/action-icon.png
             > \uicontrol {Insert Keyframe} to insert a keyframe for the top
-            anchor margin of \e verifyPasswordField.
+            anchor margin of \e repeatPassword.
+            \image loginui4-keyframe-top-anchor-margin.png "Inserting keyframe for top anchor margin"
         \li In \uicontrol Timeline, check that the playhead is in
             frame 0, and select the record button for the \e anchors.topMargin
-            property of \e verifyPasswordField.
+            property of \e repeatPassword.
         \li In the field next to the property, set a negative value for the
-            top anchor margin, -40, to place \e verifyPasswordField on top of
+            top anchor margin, -40, to place \e repeatPassword on top of
-            \e passwordField.
+            \e password.
         \li Move the playhead to frame 1000 and change the top anchor margin
-            to 5, so that, combined with the change in the opacity value,
+            to 20, so that, combined with the change in the \uicontrol Opacity
-            \e verifyPasswordField appears to slide down and settle below
+            value, \e repeatPassword appears to slide down and settle below
-            \e passwordField.
+            \e password.
         \li Select the record button again to stop recording property changes.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
@@ -239,6 +240,7 @@
         \li Click the keyframe marker \inlineimage keyframe_linear_inactive.png
             for the \e anchors.topMargin property at frame 1000 on the
             timeline to select it.
+            \image loginui4-easing-curve-top-anchor-margin.png "Top anchor margin keyframe marker"
         \li Right-click the keyframe marker to open a context menu, and
             select \uicontrol {Edit Easing Curve} to add an easing curve
             to the animation.
@@ -256,7 +258,7 @@
 
     \image loginui4-timeline.png "Timeline view with the recorded property changes"
 
-    Next, you'll create states for the login and registration pages and bind
+    Next, you'll create states for the login and account creation pages and bind
     them to the animation settings.
 
     \section1 Binding Animation to States
@@ -267,27 +269,30 @@
 
     \list 1
         \li In \uicontrol States, select \uicontrol {Create New State} twice to
-            add two states called \e loginState and \e registerState. You don't
+            add two states called \e login and \e createAccount. You don't
-            need to make any property changes this time, because you'll bind the
+            need to make any property changes this time because you'll bind the
             states to property animations.
+       \li In \uicontrol States, select \inlineimage icons/action-icon.png
+            for \e login to open the \uicontrol Actions menu, and then
+            select \uicontrol {Set as Default} to determine that the \e login
+            state is applied when the application starts.
         \li In \uicontrol Timeline, select the \inlineimage animation.png
             (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
-            \key S to open the \uicontrol {Timeline Settings} dialog.
+            \key S) to open the \uicontrol {Timeline Settings} dialog.
             \image loginui4-timeline-settings-states.png
         \li Double-click the cell in the \uicontrol Timeline column on the
-            \e loginState row, and select \e timeline in the list.
+            \e createAccount row, and select \e timeline in the list.
         \li Double-click the cell in the \uicontrol Animation column on the
-            \e loginState row, and select \e toRegisterState.
+            \e createAccount row, and select \e toCreateAccountState.
-        \li Repeat these steps for \e registerState row, but select
-            \e toLoginState in the \uicontrol Animation column.
         \li Click \uicontrol Close to save the timeline settings.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
     \endlist
 
     In the live preview, you can now click the \uicontrol {Create Account}
-    button to go to the registration page and the back button to return to
+    button to go to the account creation page.
-    the login page.
 
-    \image loginui4.gif "Moving between login page and registration page"
+    \image loginui4.gif "Moving between login page and account creation page"
 
     \section2 Learn More - Timeline
 

doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml

@@ -1,113 +0,0 @@
-
-/****************************************************************************
-**
-** Copyright (C) 2021 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Design Studio.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.15
-import QtQuick.Controls 2.12
-
-Button {
-    id: control
-
-    implicitWidth: Math.max(
-                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       textItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        textItem.implicitHeight + topPadding + bottomPadding)
-    leftPadding: 4
-    rightPadding: 4
-
-    text: "My Button"
-
-    background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        radius: 20
-        border.color: "#41cd52"
-    }
-
-    contentItem: textItem
-    Text {
-        id: textItem
-        text: control.text
-
-        opacity: enabled ? 1.0 : 0.3
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        font.bold: true
-    }
-
-    states: [
-        State {
-            name: "normal"
-            when: !control.down
-
-            PropertyChanges {
-                target: buttonBackground
-                border.color: "#41cd52"
-            }
-        },
-        State {
-            name: "down"
-            when: control.down
-            PropertyChanges {
-                target: textItem
-                color: "#41cd52"
-            }
-
-            PropertyChanges {
-                target: buttonBackground
-                border.color: "#41cd52"
-            }
-        }
-    ]
-}

doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml

@@ -1,10 +1,11 @@
 
+
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of the examples of the Qt Design Studio.
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,168 +49,118 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.12
+import QtQuick
+import QtQuick.Controls
 import loginui4 1.0
-import QtQuick.Controls 2.15
 import QtQuick.Timeline 1.0
 
 Rectangle {
     id: rectangle
     width: Constants.width
     height: Constants.height
-    color: "#ffffff"
-    gradient: Gradient {
-        GradientStop {
-            position: 0.50125
-            color: "#ffffff"
-        }
 
-        GradientStop {
+    color: Constants.backgroundColor
-            position: 1
+    state: "login"
-            color: "#41cd52"
-        }
-    }
-
-    Text {
-        id: pageTitle
-        text: qsTr("Qt Account")
-        anchors.top: parent.top
-        font.pixelSize: 24
-        anchors.topMargin: 70
-        anchors.horizontalCenter: parent.horizontalCenter
-        font.bold: true
-        font.family: Constants.font.family
-    }
 
     Image {
-        id: logo
+        id: adventurePage
-        anchors.left: parent.left
+        anchors.fill: parent
-        anchors.top: parent.top
+        source: "images/adventurePage.jpg"
-        source: "qt_logo_green_64x64px.png"
-        anchors.topMargin: 10
-        anchors.leftMargin: 10
         fillMode: Image.PreserveAspectFit
     }
 
+    Image {
+        id: qt_logo_green_128x128px
+        x: 296
+        anchors.top: parent.top
+        source: "images/qt_logo_green_128x128px.png"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 40
+        fillMode: Image.PreserveAspectFit
+    }
+    Text {
+        id: tagLine
+        width: 541
+        height: 78
+        color: "#ffffff"
+        text: qsTr("Are you ready to explore?")
+        anchors.top: qt_logo_green_128x128px.bottom
+        font.pixelSize: 50
+        anchors.topMargin: 40
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: "Titillium Web ExtraLight"
+    }
+
+    EntryField {
+        id: username
+        x: 110
+        text: "Username or Email"
+        anchors.top: tagLine.bottom
+        anchors.topMargin: 170
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    EntryField {
+        id: password
+        x: 110
+        text: qsTr("Password")
+        anchors.top: username.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 20
+    }
+
+    EntryField {
+        id: repeatPassword
+        x: 110
+        text: "Repeat Password"
+        anchors.top: password.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 20
+    }
+
     Column {
-        id: buttonColumn
+        id: buttons
+        x: 102
+        y: 966
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottomMargin: 50
+        anchors.bottomMargin: 100
-        spacing: 5
+        spacing: 20
 
         PushButton {
-            id: loginButton
+            id: login
-            width: 120
+            text: qsTr("Continue")
-            opacity: 1
-            text: qsTr("Log In")
         }
 
         PushButton {
-            id: registerButton
+            id: createAccount
-            width: 120
             text: qsTr("Create Account")
-            font.bold: true
 
             Connections {
-                target: registerButton
+                target: createAccount
-                onClicked: rectangle.state = "registerState"
+                onClicked: rectangle.state = "createAccount"
             }
         }
     }
 
-    PushButton {
-        id: backButton
-        width: 40
-        opacity: 1.2
-        text: "<"
-        anchors.right: parent.right
-        anchors.top: parent.top
-        font.pixelSize: 24
-        anchors.rightMargin: 10
-        anchors.topMargin: 10
-        font.bold: true
-        checked: true
-
-        Connections {
-            target: backButton
-            onClicked: rectangle.state = "loginState"
-        }
-    }
-
-    TextField {
-        id: verifyPasswordField
-        x: 170
-        width: 300
-        opacity: 1
-        anchors.top: passwordField.bottom
-        anchors.horizontalCenter: passwordField.horizontalCenter
-        anchors.topMargin: 5
-        placeholderText: qsTr("Verify password")
-    }
-
-    TextField {
-        id: passwordField
-        x: 170
-        width: 300
-        anchors.top: usernameField.bottom
-        anchors.horizontalCenter: usernameField.horizontalCenter
-        anchors.topMargin: 5
-        placeholderText: qsTr("Password")
-    }
-
-    TextField {
-        id: usernameField
-        x: 170
-        width: 300
-        text: ""
-        anchors.top: parent.top
-        horizontalAlignment: Text.AlignLeft
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.topMargin: 200
-        placeholderText: qsTr("Username")
-    }
-
     Timeline {
         id: timeline
         animations: [
             TimelineAnimation {
-                id: toLoginState
+                id: toCreateAccountState
+                running: false
                 loops: 1
                 duration: 1000
-                running: false
                 to: 1000
                 from: 0
-            },
-            TimelineAnimation {
-                id: toRegisterState
-                loops: 1
-                duration: 1000
-                running: false
-                to: 0
-                from: 1000
             }
         ]
-        enabled: true
         endFrame: 1000
         startFrame: 0
+        enabled: true
 
         KeyframeGroup {
-            target: backButton
+            target: repeatPassword
-            property: "opacity"
-            Keyframe {
-                frame: 0
-                value: 0
-            }
-
-            Keyframe {
-                frame: 1000
-                value: 1
-            }
-        }
-
-        KeyframeGroup {
-            target: verifyPasswordField
             property: "opacity"
 
             Keyframe {
@@ -218,18 +169,14 @@ Rectangle {
             }
 
             Keyframe {
-                frame: 1000
+                frame: 999
                 value: 1
             }
         }
 
         KeyframeGroup {
-            target: loginButton
+            target: createAccount
             property: "opacity"
-            Keyframe {
-                frame: 0
-                value: 1
-            }
 
             Keyframe {
                 frame: 1000
@@ -238,8 +185,9 @@ Rectangle {
         }
 
         KeyframeGroup {
-            target: verifyPasswordField
+            target: repeatPassword
             property: "anchors.topMargin"
+
             Keyframe {
                 frame: 0
                 value: -40
@@ -247,32 +195,26 @@ Rectangle {
 
             Keyframe {
                 easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
-                frame: 1000
+                frame: 999
-                value: 5
+                value: 20
             }
         }
     }
     states: [
         State {
-            name: "loginState"
+            name: "login"
 
             PropertyChanges {
                 target: timeline
-                currentFrame: 0
                 enabled: true
             }
 
             PropertyChanges {
-                target: toLoginState
+                target: toCreateAccountState
-            }
-
-            PropertyChanges {
-                target: toRegisterState
-                running: true
             }
         },
         State {
-            name: "registerState"
+            name: "createAccount"
 
             PropertyChanges {
                 target: timeline
@@ -280,7 +222,7 @@ Rectangle {
             }
 
             PropertyChanges {
-                target: toLoginState
+                target: toCreateAccountState
                 running: true
             }
         }
@@ -289,7 +231,6 @@ Rectangle {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.5}D{i:5}D{i:7}D{i:10}D{i:12}D{i:13}D{i:14}D{i:15}
+    D{i:0;formeditorZoom:0.5}D{i:6}D{i:9}D{i:11}
 }
 ##^##*/
-

doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml

@@ -1,76 +1,26 @@
-/****************************************************************************
-**
-** Copyright (C) 2019 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
 pragma Singleton
-import QtQuick 2.10
+import QtQuick
 
 QtObject {
-    readonly property int width: 640
+    readonly property int width: 720
-    readonly property int height: 480
+    readonly property int height: 1280
-    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+
+    property alias fontDirectory: directoryFontLoader.fontDirectory
+    property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory
+
     /* Edit this comment to add your custom font */
-    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
     readonly property font font: Qt.font({
-                                             family: mySystemFont.name,
+                                             family: Qt.application.font.family,
-                                             pointSize: Qt.application.font.pixelSize
+                                             pixelSize: Qt.application.font.pixelSize
                                          })
     readonly property font largeFont: Qt.font({
-                                                  family: mySystemFont.name,
+                                                  family: Qt.application.font.family,
-                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                                  pixelSize: Qt.application.font.pixelSize * 1.6
                                               })
+
     readonly property color backgroundColor: "#c2c2c2"
+
+    property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader {
+        id: directoryFontLoader
     }
-
-
-
-/*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}
 }
- ##^##*/

doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir

@@ -1 +1,2 @@
 singleton Constants 1.0 Constants.qml
+EventListSimulator 1.0 EventListSimulator.qml

doc/qtdesignstudio/examples/loginui4/loginui4.qml

@@ -1,9 +1,9 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of the examples of the Qt Design Studio.
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.10
+import QtQuick
 import loginui4 1.0
 
 Item {
@@ -57,11 +57,5 @@ Item {
 
     Screen01 {
     }
+
 }
-
-
-
-/*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
- ##^##*/

doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject

@@ -28,14 +28,20 @@ Project {
         directory: "."
     }
 
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
     Environment {
         QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
         QT_AUTO_SCREEN_SCALE_FACTOR: "1"
     }
 
+    qt6Project: true
+
     /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports" ]
+    importPaths: [ "imports", "asset_imports" ]
 
     /* Required for deployment */
-    targetDirectory: "/opt/loginui3"
+    targetDirectory: "/opt/loginui4"
 }

doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf

@@ -1,3 +1,2 @@
-; This file can be edited to change the style of the application
+[Controls]
-; Read "Qt Quick Controls 2 Configuration File" for details:
+Style=Default
-; https://doc.qt.io/qt/qtquickcontrols2-configuration.html