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
-    all the current UI components to it to create a new page. Then, you will
-    \l {Setting Anchors and Margins}{anchor} the static elements on the
-    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
+    First, you will \l {Setting Anchors and Margins}{anchor} the static page
+    elements, 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
-            to \uicontrol {Form Editor}.
+        \li Drag and drop two instances of the \uicontrol {Text Field}
+            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
-            width of the field to \e 300 pixels.
-        \li In the \uicontrol Placeholder field, enter \e Username and select
-            \uicontrol tr to mark the text translatable.
+        \li In the \uicontrol Geometry group, \uicontrol Size field,
+            make the field wide enough to accommodate long user names
+            by setting its width to \e 300 pixels.
+        \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
-            \uicontrol Navigator, and right-click on either item
-            to open a context menu.
+        \li Select \e usernameField and \e passwordField in \uicontrol Navigator
+            (press the \key Shift key for multiple selection), and right-click
+            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,16 +166,15 @@
         \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.
         \li Select \e buttonColumn in \uicontrol Navigator.
         \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
-            50-pixel margin.
+            column to the bottom of its parent with a 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-
-            and 10-pixel margins, respectively.
+            the top right corner of its parent with 20- and 10-pixel margins,
+            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
-    to indicate its state and perform an action.
+    needs to know that the user has clicked on it. In response, the button may
+    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
-            margin based on the current Y-position of the field.
+            of its parent. \QDS will suggest an appropriate margin based on
+            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
-            \inlineimage recordfill.png
-            (Per Property Recording) button for the \uicontrol opacity property
-            of \e backButton to start recording property changes.
+        \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
+            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
-            5, so that \e verifyPasswordField appears to slide down and settle
-            below \e passwordField.
+        \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,
+            \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
-    to the animation settings.
+    Next, you'll create states for the login and registration pages and bind
+    them to the animation settings.
 
     \section1 Binding Animation to States