diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png new file mode 100644 index 00000000000..7d1e60c7a24 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png new file mode 100644 index 00000000000..6f582f6d46e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png new file mode 100644 index 00000000000..66f42f9210b Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png deleted file mode 100644 index 2743c56b713..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png index c1eda5a125e..119fb89a9da 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png index 6e830752a6b..25f06f380ad 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png index 38dbb31de74..f36bcfb215e 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png index a9fa47c4381..67b0c041b70 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4.gif b/doc/qtdesignstudio/examples/doc/images/loginui4.gif index 9a28af1fdca..35d2737cdc7 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4.gif and b/doc/qtdesignstudio/examples/doc/images/loginui4.gif differ diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc index 17d49f4bb8a..b88c122558c 100644 --- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc +++ b/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 - describes how to use the timeline and states to animate UI components. + some basic UI components, such as pages, buttons, and entry fields. The + 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 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 + In \l {Log In UI - States}, you learned how to use states to simulate page + changes in a UI and connections to provide user interaction with it. In + 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 - simulate changing pages. To make sure that those changes won't interfere - with the changes to the opacity property you will make in Part 4, you will - first remove the states. + In \l {Log In UI - States}, you changed the visibility property in different + states to simulate changing pages. To make sure that those changes won't + interfere with the changes to the opacity property you will make next, you + 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 - and the login button on the registration page. Because we want the password - verification field to appear to slide down from the password field, you will - also need to insert a keyframe for its anchor margin property. To be able to - animate the anchor, you also need to pull out the fields from the fields - column and anchor them to the page and to each other instead. + to hide the \e {Retype Password} field on the login page and the + \e {Create Account} button on the account creation page. Because we want the + retype password field to appear to slide down from the password field, you + will also need to insert a keyframe for its anchor margin property. To be + able to animate the anchor, you also need to pull out the fields from the + 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 In the \l States view, select the \inlineimage close.png - (\uicontrol Close) button in \e loginState and \e registerState - to remove the states. - \li Select the fields in \e fieldColumn in \l Navigator - 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 \l Properties > \uicontrol Layout, select the - \inlineimage icons/anchor-top.png - (\uicontrol Top) button to anchor the top of the field to the top - 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 icons/anchor-center-horizontal.png - (\uicontrol {Horizontal Center}) button to anchor - the horizontal center of the field to that of its parent. - \li Select \e passwordField, and then select the \uicontrol Top - button in \uicontrol Properties > \uicontrol Layout. - \li In the \uicontrol Target field, select \e usernameField to anchor - the top of \e passwordField to the bottom of \e usernameField - with a 5-pixel margin. - \li Select the \uicontrol {Horizontal Center} button to anchor the - horizontal center of \e passwordField to that of \e usernameField. - \li Repeat the above steps to anchor the top of \e verifyPasswordField - to the bottom of \e passwordField with a 5-pixel margin and to - anchor its horizontal center to that of \e passwordField. + \li Double-click \e Screen01.ui.qml in \l Projects to open it + in \l {Form Editor}. + \li In the \l States view, select \e login, and then select + \inlineimage close.png + to remove the state. Repeat for the \e createAccount state. + \li Select \e username in \l Navigator, and then select + \inlineimage arrowleft.png + to move it into the parent rectangle to prepare for + deleting the \e fields column component instance. + \li Select \inlineimage icons/navigator-arrowup.png + to move \e username below \e tagLine in \uicontrol Navigator + to preserve the \l{Arranging Components}{component hierarchy}. + \li Repeat for \e password and \e repeatPassword. + \li Select \e fields in \uicontrol Navigator and press \key Delete to + delete it. + \li Select \e username in \uicontrol Navigator to display its properties + in \l Properties. + \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png + to anchor the top of \e username to the bottom of \e tagLine in the + \uicontrol Target field. \QDS will suggest an appropriate margin + based on the current position of the field on the y axis, 170 + pixels. + \li Select \inlineimage icons/anchor-center-horizontal.png + to anchor \e username horizontally to its parent in the + \uicontrol Target field. + \li Select \e password in \uicontrol Navigator to display its properties + in \uicontrol Properties. + \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 - mode and live preview: + \e Screen01 should not display visible changes in \uicontrol {Form Editor}: - \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 - 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. + You are now ready to add the \l{Creating Timeline Animations}{timeline}. 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 Deselect the \uicontrol {Running in base state} check box, because + \li In the \uicontrol {Animation ID} field, enter + \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 In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings, - select \uicontrol {Insert Keyframe} to insert a keyframe for the - opacity property of the button. + \li Select \e repeatPassword in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol Visibility > \uicontrol Opacity, select + \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, - and repeat the above steps to insert a keyframe for the - \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 + \li Select \e createAccount 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 \uicontrol Properties > \uicontrol Layout > \uicontrol Margin + \li Select \e repeatPassword in \uicontrol Navigator to display its + 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 - \e passwordField. + top anchor margin, -40, to place \e repeatPassword on top of + \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, - \e verifyPasswordField appears to slide down and settle below - \e passwordField. + to 20, so that, combined with the change in the \uicontrol Opacity + value, \e repeatPassword appears to slide down and settle below + \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 - need to make any property changes this time, because you'll bind the + 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 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. - \li Repeat these steps for \e registerState row, but select - \e toLoginState in the \uicontrol Animation column. + \e createAccount row, and select \e toCreateAccountState. \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 - the login page. + button to go to the account creation 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 diff --git a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml deleted file mode 100644 index 320a21ca716..00000000000 --- a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml +++ /dev/null @@ -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" - } - } - ] -} diff --git a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml index e57d19c368a..e919f39d82e 100644 --- a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml +++ b/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 { - position: 1 - 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 - } + color: Constants.backgroundColor + state: "login" Image { - id: logo - anchors.left: parent.left - anchors.top: parent.top - source: "qt_logo_green_64x64px.png" - anchors.topMargin: 10 - anchors.leftMargin: 10 + id: adventurePage + anchors.fill: parent + source: "images/adventurePage.jpg" 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 - spacing: 5 + anchors.bottomMargin: 100 + spacing: 20 PushButton { - id: loginButton - width: 120 - opacity: 1 - text: qsTr("Log In") + id: login + text: qsTr("Continue") } PushButton { - id: registerButton - width: 120 + id: createAccount text: qsTr("Create Account") - font.bold: true Connections { - target: registerButton - onClicked: rectangle.state = "registerState" + target: createAccount + 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 - property: "opacity" - Keyframe { - frame: 0 - value: 0 - } - - Keyframe { - frame: 1000 - value: 1 - } - } - - KeyframeGroup { - target: verifyPasswordField + target: repeatPassword 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 - value: 5 + frame: 999 + value: 20 } } } states: [ State { - name: "loginState" + name: "login" PropertyChanges { target: timeline - currentFrame: 0 enabled: true } PropertyChanges { - target: toLoginState - } - - PropertyChanges { - target: toRegisterState - running: true + target: toCreateAccountState } }, 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} } ##^##*/ - diff --git a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml index 74a66dcae2b..6fef815fa14 100644 --- a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml +++ b/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 height: 480 - readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + readonly property int width: 720 + readonly property int height: 1280 + + 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, - pointSize: Qt.application.font.pixelSize + family: Qt.application.font.family, + pixelSize: Qt.application.font.pixelSize }) readonly property font largeFont: Qt.font({ - family: mySystemFont.name, - pointSize: Qt.application.font.pixelSize * 1.6 + family: Qt.application.font.family, + 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} -} - ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir index 616ac203530..69846237302 100644 --- a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir +++ b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir @@ -1 +1,2 @@ singleton Constants 1.0 Constants.qml +EventListSimulator 1.0 EventListSimulator.qml diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qml b/doc/qtdesignstudio/examples/loginui4/loginui4.qml index 0f6b845bce4..6ce943cc3da 100644 --- a/doc/qtdesignstudio/examples/loginui4/loginui4.qml +++ b/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} -} - ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject index 8447f30664e..9bb93ec5dd2 100644 --- a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject +++ b/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" } diff --git a/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png deleted file mode 100644 index 235a381b5f1..00000000000 Binary files a/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf index 7ad5144dc36..caace6db8e4 100644 --- a/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf +++ b/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf @@ -1,3 +1,2 @@ -; This file can be edited to change the style of the application -; Read "Qt Quick Controls 2 Configuration File" for details: -; https://doc.qt.io/qt/qtquickcontrols2-configuration.html +[Controls] +Style=Default