Doc: Update Qt Design Studio tutorials to use a new style

Based on the first part of the tutorial.

Change-Id: I169ea9bcd2707771fffce03a8f3678d1c73be0cd
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/qtdesignstudio/examples/doc/loginui2.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -53,11 +53,9 @@
 
     \section1 Anchoring UI Components
 
-    First, you will add a new rectangle to \uicontrol {Form Editor} and move
+    First, you will \l {Setting Anchors and Margins}{anchor} the static page
-    all the current UI components to it to create a new page. Then, you will
+    elements, logo image (\e logo) and page title (\e pageTitle), to the page.
-    \l {Setting Anchors and Margins}{anchor} the static elements on the
+    When you created the project using the new project wizard template
-    page, that is the logo image (\e logo) and page title (\e pageTitle), to the
-    page. When you created the project using the new project wizard template
     in Part 1 of this example, the wizard template anchored \e pageTitle to the
     vertical and horizontal center of the page. Therefore, you will only
     need to replace the vertical anchor of \e pageTitle with a top anchor
@@ -73,23 +71,11 @@
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the
             \uicontrol {Form Editor} view.
-        \li Select the rectangle that forms the UI background in the
-            \uicontrol Navigator view, and change its id to \e root in the
-            \uicontrol Properties view.
-        \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
-            view to \e root in \uicontrol Navigator, and change its id to
-            \e loginPage in \uicontrol Properties.
-        \li Under \uicontrol Layout, select the \inlineimage anchor-fill.png
-            (\uicontrol {Fill Parent Item}) button to anchor the page to the root
-            item on all sides.
-        \li Select all the other UI elements below \e root in
-            \uicontrol Navigator (press the \key Shift key for multiple
-            selection) and drag them to \e loginPage.
         \li Select \e logo in \uicontrol Navigator.
         \li Select the \inlineimage anchor-top.png
             (\uicontrol Top) and \inlineimage anchor-left.png
             (\uicontrol Left) anchor buttons to anchor \e logo to the top left
-            corner of its parent (\e loginPage) with 10-pixel margins.
+            corner of its parent with 10-pixel margins.
         \li Select \e pageTitle in \uicontrol Navigator.
         \li Deselect the \inlineimage anchor-vertical-center.png
             (\uicontrol {Vertical Center}) button to remove the
@@ -132,26 +118,33 @@
             \uicontrol {+ \QtQuick.Controls} button to display the
             \l {Qt Quick Controls 2} types in the tab:
             \image loginui2-imports.png
-        \li Drag and drop two instances of the \uicontrol {Text Field} type
+        \li Drag and drop two instances of the \uicontrol {Text Field}
-            to \uicontrol {Form Editor}.
+            type from the \uicontrol {Qt Quick Controls 2} tab to
+            \uicontrol {Form Editor}.
         \li Select one of the text fields in \uicontrol Navigator, and
             change its id to \e usernameField in \uicontrol Properties.
-        \li In the \uicontrol Geometry group, \uicontrol Size field, set the
+        \li In the \uicontrol Geometry group, \uicontrol Size field,
-            width of the field to \e 300 pixels.
+            make the field wide enough to accommodate long user names
-        \li In the \uicontrol Placeholder field, enter \e Username and select
+            by setting its width to \e 300 pixels.
-            \uicontrol tr to mark the text translatable.
+        \li In the \uicontrol Placeholder field, set the text to display
+            inside the field before users type in it to \e Username
+        \li Select \uicontrol tr to mark the text translatable.
             \image loginui2-field-properties.png "Text field properties"
         \li Select the other text field, and change its id to
             \e passwordField, placeholder text to \e Password,
             and width to \e 300 pixels.
     \endlist
 
+    The Text Field type has additional properties that you can use to change
+    its appearance. For example, you can change the color, font, alignment, or
+    word and letter spacing of the placeholder text.
+
     You will now position the fields and buttons as columns:
 
     \list 1
-        \li Select \e usernameField and \e passwordField in
+        \li Select \e usernameField and \e passwordField in \uicontrol Navigator
-            \uicontrol Navigator, and right-click on either item
+            (press the \key Shift key for multiple selection), and right-click
-            to open a context menu.
+            either of them to open a context menu.
         \li Select \uicontrol Position > \uicontrol {Position in Column}
             to position the fields on top of each other in
             \uicontrol {Form Editor}.
@@ -173,7 +166,7 @@
         \li Select \e fieldColumn in \uicontrol Navigator.
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \uicontrol Top button to anchor the top of the button column to
-            the top of its parent (the \e loginPage) with a 200-pixel margin.
+            the top of its parent with a 200-pixel margin.
         \li Select the \inlineimage anchor-horizontal-center.png
             (\uicontrol {Horizontal Center}) button to center the field
             column horizontally on the page.
@@ -181,8 +174,7 @@
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \inlineimage anchor-bottom.png
             (\uicontrol Bottom) button to anchor the bottom of the button
-            column to the bottom of its parent (the \e loginPage) with a
+            column to the bottom of its parent with a 50-pixel margin.
-            50-pixel margin.
         \li Select the \uicontrol {Horizontal Center} button to center
             the button column horizontally on the page.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -38,7 +38,9 @@
     \e{Log In UI - Part 3} is the third in a series of examples 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 3
-    describes how to use states to add a second page to the UI.
+    describes how to use \e states to add a second page to the UI. On the
+    first page, users can enter a username and password to log in. On the
+    second page, they can register if they do not already have an account.
 
     Because the second page will contain most of the same UI elements as the
     login page, you will use \e states to show and hide UI elements as necessary
@@ -59,7 +61,7 @@
     You will add another text field for verifying the password that users
     enter to create an account and a back button for returning to the login
     page. You are already familiar with the tasks in this section from Part 1
-    of this example.
+    and Part 2 of this example.
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
@@ -76,11 +78,12 @@
         \li In \uicontrol Properties, change the id of the text field to
             \e verifyPasswordField.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
-            width of the field to \e 300 pixels.
+            width of the field to \e 300 pixels to match the size of the
+            existing fields.
         \li In the \uicontrol Placeholder field, set the placeholder text to
             \e {Verify password} and mark the text translatable.
         \li Drag and drop a PushButton type from \uicontrol Library >
-            \uicontrol {My QML Components} to \e loginPage in
+            \uicontrol {My QML Components} to their parent rectangle in
             \uicontrol Navigator.
         \li Select the button in \uicontrol Navigator and change its id to
             \e backButton in \uicontrol Properties.
@@ -92,8 +95,8 @@
         \li Under \uicontrol Layout, select the \inlineimage anchor-top.png
             (\uicontrol Top) and \inlineimage anchor-right.png
             (\uicontrol Right) anchor buttons to anchor \e backButton to
-            the top right corner of its parent (the \e loginPage) with 20-
+            the top right corner of its parent with 20- and 10-pixel margins,
-            and 10-pixel margins, respectively.
+            respectively.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -111,7 +114,7 @@
     \section1 Using States to Simulate Page Changes
 
     You will now add \l{Adding States}{states} to the UI to show and hide UI
-    components in the \uicontrol {Form Editor}:
+    components in the \uicontrol {Form Editor}, depending on the current page:
 
     \list 1
         \li In the \uicontrol States view, select \uicontrol {Create New State}.
@@ -122,7 +125,7 @@
             \uicontrol Properties to hide the verify password field in
             the login state.
             \image loginui3-visibility.png
-        \li Repeat the above step for \e backButton.
+        \li Repeat the above step for \e backButton to hide it, too.
         \li In \uicontrol States, select \inlineimage icons/action-icon.png
             for \e loginState to open the \uicontrol Actions menu, and then
             select \uicontrol {Set as Default} to determine that \e loginState
@@ -217,8 +220,8 @@
     \section2 Learn Qt Quick - Signal and Event Handlers
 
     UI components need to communicate with each other. For example, a button
-    needs to know that the user has clicked on it. The button may change color
+    needs to know that the user has clicked on it. In response, the button may
-    to indicate its state and perform an action.
+    change color to indicate its state and perform an action.
 
     QML has a signal and handler mechanism, where the signal is the event that
     is responded to through a signal handler. When a signal is emitted, the

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -86,15 +86,16 @@
             (\uicontrol Close) button in \e loginState and \e registerState
             to remove the states.
         \li Select the fields in \e fieldColumn in \uicontrol Navigator
-            and drag and drop them to \e loginPage.
+            and drag and drop them to their parent rectangle to prepare for
+            deleting the column component.
         \li Select \e fieldColumn in \uicontrol Navigator and press
             \key Delete to delete it.
         \li Select \e usernameField in \uicontrol Navigator.
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \inlineimage anchor-top.png
             (\uicontrol Top) button to anchor the top of the field to the top
-            of its parent (\e loginPage). \QDS will suggest an appropriate
+            of its parent. \QDS will suggest an appropriate margin based on
-            margin based on the current Y-position of the field.
+            the current position of the field on the y axis, 200 pixels.
         \li Select the \inlineimage anchor-horizontal-center.png
             (\uicontrol {Horizontal Center}) button to anchor
             the horizontal center of the field to that of its parent.
@@ -112,7 +113,7 @@
             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 verify 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
@@ -168,15 +169,20 @@
         \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
             select \uicontrol {Insert Keyframe} to insert a keyframe for the
             opacity property of the button.
-        \li Check that the playhead is in frame 0, and select the
+        \li In \uicontrol Timeline, check that the playhead is in
-            \inlineimage recordfill.png
+            frame 0, and select the \inlineimage recordfill.png
-            (Per Property Recording) button for the \uicontrol opacity property
+            (\uicontrol {Per Property Recording}) button for the
-            of \e backButton to start recording property changes.
+            \uicontrol opacity property of \e backButton 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,
             type 0 to hide the button, and press \key Enter to save the value.
         \li Move the playhead to frame 1000 and change the opacity value to 1
             to show the button.
+
+            To fine-tune the value of a keyframe, you can also right-click the
+            keyframe marker \inlineimage keyframe_linear_inactive.png
+            , and select \uicontrol {Edit Keyframe}.
         \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.
@@ -213,9 +219,10 @@
         \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
             \e passwordField.
-        \li Move the playhead to frame 1000 and change the top anchor margin to
+        \li Move the playhead to frame 1000 and change the top anchor margin
-            5, so that \e verifyPasswordField appears to slide down and settle
+            to 5, so that, combined with the change in the opacity value,
-            below \e passwordField.
+            \e verifyPasswordField appears to slide down and settle below
+            \e passwordField.
         \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.
@@ -247,8 +254,8 @@
 
     \image loginui4-timeline.png "Timeline view with the recorded property changes"
 
-    Next, you create states for the login and registration pages and bind them
+    Next, you'll create states for the login and registration pages and bind
-    to the animation settings.
+    them to the animation settings.
 
     \section1 Binding Animation to States
 

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 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.Templates 2.1 as T
 import loginui2 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        font.bold: true
         elide: Text.ElideRight
     }
 
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.color: "#41cd52"
+        border.width: 1
+        anchors.fill: parent
+        radius: 20
+    }
+
     states: [
         State {
             name: "normal"
@@ -54,19 +108,13 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

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

@@ -2,7 +2,7 @@
 
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Toolkit.
@@ -54,17 +54,38 @@ import loginui2 1.0
 import QtQuick.Controls 2.3
 
 Rectangle {
-    id: root
     width: Constants.width
     height: Constants.height
-
+    gradient: Gradient {
-    Rectangle {
+        GradientStop {
-        id: loginPage
+            position: 0.50157
             color: "#ffffff"
-        anchors.fill: parent
+        }
+
+        GradientStop {
+            position: 1
+            color: "#41cd52"
+        }
+    }
+
+    Text {
+        id: pageTitle
+        x: 258
+        y: 70
+        width: 135
+        height: 40
+        text: qsTr("Qt Account")
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 70
+        font.pixelSize: 24
+        font.bold: true
+    }
 
     Image {
         id: logo
+        x: 10
+        y: 10
         width: 100
         height: 100
         anchors.topMargin: 10
@@ -75,19 +96,10 @@ Rectangle {
         fillMode: Image.PreserveAspectFit
     }
 
-        Text {
-            id: pageTitle
-            width: 123
-            height: 40
-            text: qsTr("Qt Account")
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 70
-            font.pixelSize: 24
-        }
-
     Column {
         id: fieldColumn
+        x: 170
+        y: 200
         width: 300
         height: 85
         spacing: 5
@@ -112,6 +124,8 @@ Rectangle {
 
     Column {
         id: buttonColumn
+        x: 260
+        y: 345
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 50
         spacing: 5
@@ -129,5 +143,4 @@ Rectangle {
             text: qsTr("Create Account")
         }
     }
-    }
 }

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 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.Templates 2.1 as T
 import loginui3 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        font.bold: true
         elide: Text.ElideRight
     }
 
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.color: "#41cd52"
+        border.width: 1
+        anchors.fill: parent
+        radius: 20
+    }
+
     states: [
         State {
             name: "normal"
@@ -54,19 +108,13 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

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

@@ -57,14 +57,49 @@ Rectangle {
     state: "loginState"
     width: Constants.width
     height: Constants.height
-
+    gradient: Gradient {
-    Rectangle {
+        GradientStop {
-        id: loginPage
+            position: 0.5
             color: "#ffffff"
-        anchors.fill: parent
+        }
+
+        GradientStop {
+            position: 1
+            color: "#41cd52"
+        }
+    }
+
+    PushButton {
+        id: backButton
+        x: 590
+        y: 20
+        width: 40
+        text: "<"
+        font.pixelSize: 24
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        anchors.top: parent.top
+        anchors.topMargin: 20
+    }
+
+    Text {
+        id: pageTitle
+        x: 258
+        y: 70
+        width: 123
+        height: 40
+        text: qsTr("Qt Account")
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 70
+        font.pixelSize: 24
+        font.bold: true
+    }
 
     Image {
         id: logo
+        x: 10
+        y: 10
         width: 100
         height: 100
         anchors.topMargin: 10
@@ -75,30 +110,47 @@ Rectangle {
         fillMode: Image.PreserveAspectFit
     }
 
-        Text {
+    Connections {
-            id: pageTitle
+        target: registerButton
-            width: 123
+        onClicked: {
-            height: 40
+            root.state = "registerState"
-            text: qsTr("Qt Account")
+        }
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 70
-            font.pixelSize: 24
     }
 
-        PushButton {
+    Connections {
-            id: backButton
+        target: backButton
-            width: 40
+        onClicked: {
-            text: "<"
+            root.state = "loginState"
-            font.pixelSize: 24
+        }
-            anchors.right: parent.right
-            anchors.rightMargin: 10
-            anchors.top: parent.top
-            anchors.topMargin: 20
     }
 
+    states: [
+        State {
+            name: "loginState"
+
+            PropertyChanges {
+                target: verifyPasswordField
+                visible: false
+            }
+
+            PropertyChanges {
+                target: backButton
+                visible: false
+            }
+        },
+        State {
+            name: "registerState"
+
+            PropertyChanges {
+                target: loginButton
+                visible: false
+            }
+        }
+    ]
     Column {
         id: fieldColumn
+        x: 170
+        y: 200
         width: 300
         height: 130
         spacing: 5
@@ -131,6 +183,8 @@ Rectangle {
 
     Column {
         id: buttonColumn
+        x: 260
+        y: 345
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 50
         spacing: 5
@@ -148,46 +202,11 @@ Rectangle {
             text: qsTr("Create Account")
         }
     }
-    }
-
-    Connections {
-        target: registerButton
-        onClicked: {
-            root.state = "registerState"
-        }
-    }
-
-    Connections {
-        target: backButton
-        onClicked: {
-            root.state = "loginState"
-        }
-    }
-    states: [
-        State {
-            name: "loginState"
-
-            PropertyChanges {
-                target: verifyPasswordField
-                visible: false
-            }
-
-            PropertyChanges {
-                target: backButton
-                visible: false
-            }
-        },
-        State {
-            name: "registerState"
-            PropertyChanges {
-                target: verifyPasswordField
-                visible: true
-            }
-
-            PropertyChanges {
-                target: loginButton
-                visible: false
-            }
-        }
-    ]
 }
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:0.5}
+}
+##^##*/
+

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 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.Templates 2.1 as T
 import loginui4 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        font.bold: true
         elide: Text.ElideRight
     }
 
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.color: "#41cd52"
+        border.width: 1
+        anchors.fill: parent
+        radius: 20
+    }
+
     states: [
         State {
             name: "normal"
@@ -54,19 +108,13 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

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

@@ -48,67 +48,60 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.10
+import QtQuick 2.12
 import loginui4 1.0
-import QtQuick.Controls 2.3
+import QtQuick.Controls 2.15
 import QtQuick.Timeline 1.0
 
 Rectangle {
-    id: root
+    id: rectangle
     width: Constants.width
     height: Constants.height
-
-    Rectangle {
-        id: loginPage
     color: "#ffffff"
-        anchors.fill: parent
+    gradient: Gradient {
+        GradientStop {
+            position: 0.50125
+            color: "#ffffff"
+        }
 
-        Image {
+        GradientStop {
-            id: logo
+            position: 1
-            width: 100
+            color: "#41cd52"
-            height: 100
+        }
-            anchors.topMargin: 10
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.top: parent.top
-            source: "qt_logo_green_64x64px.png"
-            fillMode: Image.PreserveAspectFit
     }
 
     Text {
         id: pageTitle
-            width: 123
-            height: 40
         text: qsTr("Qt Account")
-            anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
-            anchors.topMargin: 70
         font.pixelSize: 24
+        anchors.topMargin: 70
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.bold: true
+        font.family: Constants.font.family
     }
 
-        PushButton {
+    Image {
-            id: backButton
+        id: logo
-            x: 507
+        anchors.left: parent.left
-            width: 40
-            text: "<"
-            opacity: 1
-            anchors.right: parent.right
-            anchors.rightMargin: 10
         anchors.top: parent.top
-            anchors.topMargin: 20
+        source: "qt_logo_green_64x64px.png"
-            font.pixelSize: 24
+        anchors.topMargin: 10
+        anchors.leftMargin: 10
+        fillMode: Image.PreserveAspectFit
     }
 
     Column {
         id: buttonColumn
         anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottomMargin: 50
         spacing: 5
-            anchors.horizontalCenter: parent.horizontalCenter
 
         PushButton {
             id: loginButton
             width: 120
+            opacity: 1
             text: qsTr("Log In")
         }
 
@@ -116,67 +109,93 @@ Rectangle {
             id: registerButton
             width: 120
             text: qsTr("Create Account")
+            font.bold: true
+
+            Connections {
+                target: registerButton
+                onClicked: rectangle.state = "registerState"
+            }
         }
     }
 
-        TextField {
+    PushButton {
-            id: usernameField
+        id: backButton
-            width: 300
+        width: 40
-            anchors.horizontalCenter: parent.horizontalCenter
+        opacity: 1.2
+        text: "<"
+        anchors.right: parent.right
         anchors.top: parent.top
-            anchors.topMargin: 200
+        font.pixelSize: 24
-            placeholderText: qsTr("Username")
+        anchors.rightMargin: 10
-            font.pointSize: 10
+        anchors.topMargin: 10
-        }
+        font.bold: true
+        checked: true
 
-        TextField {
+        Connections {
-            id: passwordField
+            target: backButton
-            width: 300
+            onClicked: rectangle.state = "loginState"
-            anchors.horizontalCenter: usernameField.horizontalCenter
+        }
-            anchors.top: usernameField.bottom
-            anchors.topMargin: 5
-            placeholderText: qsTr("Password")
-            font.pointSize: 10
     }
 
     TextField {
         id: verifyPasswordField
+        x: 170
         width: 300
-            anchors.horizontalCenter: passwordField.horizontalCenter
+        opacity: 1
         anchors.top: passwordField.bottom
+        anchors.horizontalCenter: passwordField.horizontalCenter
         anchors.topMargin: 5
-            visible: true
-            font.pointSize: 10
         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: toRegisterState
+                id: toLoginState
-                running: false
                 loops: 1
                 duration: 1000
+                running: false
                 to: 1000
                 from: 0
             },
             TimelineAnimation {
-                id: toLoginState
+                id: toRegisterState
                 loops: 1
-                from: 1000
+                duration: 1000
                 running: false
                 to: 0
-                duration: 1000
+                from: 1000
             }
         ]
         enabled: true
-        startFrame: 0
         endFrame: 1000
+        startFrame: 0
 
         KeyframeGroup {
-            target: verifyPasswordField
+            target: backButton
             property: "opacity"
             Keyframe {
                 frame: 0
@@ -184,8 +203,23 @@ Rectangle {
             }
 
             Keyframe {
+                frame: 1000
+                value: 1
+            }
+        }
+
+        KeyframeGroup {
+            target: verifyPasswordField
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
                 value: 1
-                frame: 1001
             }
         }
 
@@ -199,70 +233,46 @@ Rectangle {
 
             Keyframe {
                 frame: 1000
-                value: "0"
+                value: 0
             }
         }
 
         KeyframeGroup {
             target: verifyPasswordField
             property: "anchors.topMargin"
-
-            Keyframe {
-                easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1]
-                value: 5
-                frame: 1001
-            }
-
-            Keyframe {
-                value: "-40"
-                frame: 0
-            }
-        }
-
-        KeyframeGroup {
-            target: backButton
-            property: "opacity"
             Keyframe {
                 frame: 0
-                value: 0
+                value: -40
             }
 
             Keyframe {
+                easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
                 frame: 1000
-                value: 1
+                value: 5
             }
         }
     }
-
-    Connections {
-        target: registerButton
-        onClicked: {
-            root.state = "registerState"
-        }
-    }
-
-    Connections {
-        target: backButton
-        onClicked: {
-            root.state = "loginState"
-        }
-    }
     states: [
         State {
-            name: "registerState"
+            name: "loginState"
 
             PropertyChanges {
                 target: timeline
+                currentFrame: 0
                 enabled: true
             }
 
+            PropertyChanges {
+                target: toLoginState
+            }
+
             PropertyChanges {
                 target: toRegisterState
                 running: true
             }
         },
         State {
-            name: "loginState"
+            name: "registerState"
 
             PropertyChanges {
                 target: timeline
@@ -277,11 +287,9 @@ 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}
-/*##^## Designer {
-    D{i:4;anchors_y:28;timeline_expanded:true}D{i:6;timeline_expanded:true}D{i:7;timeline_expanded:true}
-D{i:8;anchors_y:200;timeline_expanded:true}D{i:9;anchors_x:170;anchors_y:245}D{i:10;anchors_y:245;timeline_expanded:true}
 }
- ##^##*/
+##^##*/
+