forked from qt-creator/qt-creator
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>
This commit is contained in:
Leena Miettinen
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 540 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 430 KiB After Width: | Height: | Size: 593 KiB |
@@ -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,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
|
||||
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}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding)
|
||||
buttonBackground ? buttonBackground.implicitWidth : 0,
|
||||
textItem.implicitWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(
|
||||
background ? background.implicitHeight : 0,
|
||||
contentItem.implicitHeight + topPadding + bottomPadding)
|
||||
buttonBackground ? buttonBackground.implicitHeight : 0,
|
||||
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"
|
||||
border.color: "black"
|
||||
color: "#ffffff"
|
||||
border.color: "#41cd52"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
@@ -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,80 +54,93 @@ import loginui2 1.0
|
||||
import QtQuick.Controls 2.3
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
width: Constants.width
|
||||
height: Constants.height
|
||||
|
||||
Rectangle {
|
||||
id: loginPage
|
||||
color: "#ffffff"
|
||||
anchors.fill: parent
|
||||
|
||||
Image {
|
||||
id: logo
|
||||
width: 100
|
||||
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
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.50157
|
||||
color: "#ffffff"
|
||||
}
|
||||
|
||||
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
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#41cd52"
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: fieldColumn
|
||||
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
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 10
|
||||
anchors.top: parent.top
|
||||
source: "qt_logo_green_64x64px.png"
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
|
||||
Column {
|
||||
id: fieldColumn
|
||||
x: 170
|
||||
y: 200
|
||||
width: 300
|
||||
height: 85
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 200
|
||||
|
||||
TextField {
|
||||
id: usernameField
|
||||
width: 300
|
||||
height: 85
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 200
|
||||
|
||||
TextField {
|
||||
id: usernameField
|
||||
width: 300
|
||||
placeholderText: qsTr("Username")
|
||||
font.pointSize: 10
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: passwordField
|
||||
width: 300
|
||||
placeholderText: qsTr("Password")
|
||||
font.pointSize: 10
|
||||
}
|
||||
placeholderText: qsTr("Username")
|
||||
font.pointSize: 10
|
||||
}
|
||||
|
||||
Column {
|
||||
id: buttonColumn
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 50
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
TextField {
|
||||
id: passwordField
|
||||
width: 300
|
||||
placeholderText: qsTr("Password")
|
||||
font.pointSize: 10
|
||||
}
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: loginButton
|
||||
width: 120
|
||||
text: qsTr("Log In")
|
||||
}
|
||||
Column {
|
||||
id: buttonColumn
|
||||
x: 260
|
||||
y: 345
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 50
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
PushButton {
|
||||
id: registerButton
|
||||
width: 120
|
||||
text: qsTr("Create Account")
|
||||
}
|
||||
PushButton {
|
||||
id: loginButton
|
||||
width: 120
|
||||
text: qsTr("Log In")
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: registerButton
|
||||
width: 120
|
||||
text: qsTr("Create Account")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding)
|
||||
buttonBackground ? buttonBackground.implicitWidth : 0,
|
||||
textItem.implicitWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(
|
||||
background ? background.implicitHeight : 0,
|
||||
contentItem.implicitHeight + topPadding + bottomPadding)
|
||||
buttonBackground ? buttonBackground.implicitHeight : 0,
|
||||
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"
|
||||
border.color: "black"
|
||||
color: "#ffffff"
|
||||
border.color: "#41cd52"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
@@ -57,97 +57,57 @@ Rectangle {
|
||||
state: "loginState"
|
||||
width: Constants.width
|
||||
height: Constants.height
|
||||
|
||||
Rectangle {
|
||||
id: loginPage
|
||||
color: "#ffffff"
|
||||
anchors.fill: parent
|
||||
|
||||
Image {
|
||||
id: logo
|
||||
width: 100
|
||||
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
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.5
|
||||
color: "#ffffff"
|
||||
}
|
||||
|
||||
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
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#41cd52"
|
||||
}
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: backButton
|
||||
width: 40
|
||||
text: "<"
|
||||
font.pixelSize: 24
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 10
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 20
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
Column {
|
||||
id: fieldColumn
|
||||
width: 300
|
||||
height: 130
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 200
|
||||
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
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: usernameField
|
||||
width: 300
|
||||
placeholderText: qsTr("Username")
|
||||
font.pointSize: 10
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: passwordField
|
||||
width: 300
|
||||
placeholderText: qsTr("Password")
|
||||
font.pointSize: 10
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: verifyPasswordField
|
||||
width: 300
|
||||
visible: true
|
||||
font.pointSize: 10
|
||||
placeholderText: qsTr("Verify password")
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: buttonColumn
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 50
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
PushButton {
|
||||
id: loginButton
|
||||
width: 120
|
||||
text: qsTr("Log In")
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: registerButton
|
||||
width: 120
|
||||
text: qsTr("Create Account")
|
||||
}
|
||||
}
|
||||
Image {
|
||||
id: logo
|
||||
x: 10
|
||||
y: 10
|
||||
width: 100
|
||||
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
|
||||
}
|
||||
|
||||
Connections {
|
||||
@@ -163,6 +123,7 @@ Rectangle {
|
||||
root.state = "loginState"
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "loginState"
|
||||
@@ -179,10 +140,6 @@ Rectangle {
|
||||
},
|
||||
State {
|
||||
name: "registerState"
|
||||
PropertyChanges {
|
||||
target: verifyPasswordField
|
||||
visible: true
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: loginButton
|
||||
@@ -190,4 +147,66 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
]
|
||||
Column {
|
||||
id: fieldColumn
|
||||
x: 170
|
||||
y: 200
|
||||
width: 300
|
||||
height: 130
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 200
|
||||
|
||||
TextField {
|
||||
id: usernameField
|
||||
width: 300
|
||||
placeholderText: qsTr("Username")
|
||||
font.pointSize: 10
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: passwordField
|
||||
width: 300
|
||||
placeholderText: qsTr("Password")
|
||||
font.pointSize: 10
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: verifyPasswordField
|
||||
width: 300
|
||||
visible: true
|
||||
font.pointSize: 10
|
||||
placeholderText: qsTr("Verify password")
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: buttonColumn
|
||||
x: 260
|
||||
y: 345
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 50
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
PushButton {
|
||||
id: loginButton
|
||||
width: 120
|
||||
text: qsTr("Log In")
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: registerButton
|
||||
width: 120
|
||||
text: qsTr("Create Account")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;formeditorZoom:0.5}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
|
||||
@@ -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,
|
||||
contentItem.implicitWidth + leftPadding + rightPadding)
|
||||
buttonBackground ? buttonBackground.implicitWidth : 0,
|
||||
textItem.implicitWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(
|
||||
background ? background.implicitHeight : 0,
|
||||
contentItem.implicitHeight + topPadding + bottomPadding)
|
||||
buttonBackground ? buttonBackground.implicitHeight : 0,
|
||||
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"
|
||||
border.color: "black"
|
||||
color: "#ffffff"
|
||||
border.color: "#41cd52"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
@@ -48,176 +48,151 @@
|
||||
** $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
|
||||
|
||||
Image {
|
||||
id: logo
|
||||
width: 100
|
||||
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
|
||||
color: "#ffffff"
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.50125
|
||||
color: "#ffffff"
|
||||
}
|
||||
|
||||
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
|
||||
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
|
||||
}
|
||||
|
||||
Image {
|
||||
id: logo
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
source: "qt_logo_green_64x64px.png"
|
||||
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
|
||||
|
||||
PushButton {
|
||||
id: loginButton
|
||||
width: 120
|
||||
opacity: 1
|
||||
text: qsTr("Log In")
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: backButton
|
||||
x: 507
|
||||
width: 40
|
||||
text: "<"
|
||||
opacity: 1
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 10
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 20
|
||||
font.pixelSize: 24
|
||||
}
|
||||
id: registerButton
|
||||
width: 120
|
||||
text: qsTr("Create Account")
|
||||
font.bold: true
|
||||
|
||||
Column {
|
||||
id: buttonColumn
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 50
|
||||
spacing: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
PushButton {
|
||||
id: loginButton
|
||||
width: 120
|
||||
text: qsTr("Log In")
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: registerButton
|
||||
width: 120
|
||||
text: qsTr("Create Account")
|
||||
Connections {
|
||||
target: registerButton
|
||||
onClicked: rectangle.state = "registerState"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: usernameField
|
||||
width: 300
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 200
|
||||
placeholderText: qsTr("Username")
|
||||
font.pointSize: 10
|
||||
}
|
||||
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
|
||||
|
||||
TextField {
|
||||
id: passwordField
|
||||
width: 300
|
||||
anchors.horizontalCenter: usernameField.horizontalCenter
|
||||
anchors.top: usernameField.bottom
|
||||
anchors.topMargin: 5
|
||||
placeholderText: qsTr("Password")
|
||||
font.pointSize: 10
|
||||
Connections {
|
||||
target: backButton
|
||||
onClicked: rectangle.state = "loginState"
|
||||
}
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: verifyPasswordField
|
||||
width: 300
|
||||
anchors.horizontalCenter: passwordField.horizontalCenter
|
||||
anchors.top: passwordField.bottom
|
||||
anchors.topMargin: 5
|
||||
visible: true
|
||||
font.pointSize: 10
|
||||
placeholderText: qsTr("Verify password")
|
||||
}
|
||||
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: toRegisterState
|
||||
running: false
|
||||
id: toLoginState
|
||||
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
|
||||
|
||||
KeyframeGroup {
|
||||
target: verifyPasswordField
|
||||
property: "opacity"
|
||||
Keyframe {
|
||||
frame: 0
|
||||
value: 0
|
||||
}
|
||||
|
||||
Keyframe {
|
||||
value: 1
|
||||
frame: 1001
|
||||
}
|
||||
}
|
||||
|
||||
KeyframeGroup {
|
||||
target: loginButton
|
||||
property: "opacity"
|
||||
Keyframe {
|
||||
frame: 0
|
||||
value: 1
|
||||
}
|
||||
|
||||
Keyframe {
|
||||
frame: 1000
|
||||
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
|
||||
}
|
||||
}
|
||||
startFrame: 0
|
||||
|
||||
KeyframeGroup {
|
||||
target: backButton
|
||||
@@ -232,37 +207,72 @@ Rectangle {
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: registerButton
|
||||
onClicked: {
|
||||
root.state = "registerState"
|
||||
KeyframeGroup {
|
||||
target: verifyPasswordField
|
||||
property: "opacity"
|
||||
|
||||
Keyframe {
|
||||
frame: 0
|
||||
value: 0
|
||||
}
|
||||
|
||||
Keyframe {
|
||||
frame: 1000
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: backButton
|
||||
onClicked: {
|
||||
root.state = "loginState"
|
||||
KeyframeGroup {
|
||||
target: loginButton
|
||||
property: "opacity"
|
||||
Keyframe {
|
||||
frame: 0
|
||||
value: 1
|
||||
}
|
||||
|
||||
Keyframe {
|
||||
frame: 1000
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
|
||||
KeyframeGroup {
|
||||
target: verifyPasswordField
|
||||
property: "anchors.topMargin"
|
||||
Keyframe {
|
||||
frame: 0
|
||||
value: -40
|
||||
}
|
||||
|
||||
Keyframe {
|
||||
easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
|
||||
frame: 1000
|
||||
value: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
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: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}
|
||||
/*##^##
|
||||
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}
|
||||
}
|
||||
##^##*/
|
||||
##^##*/
|
||||
|
||||
|
||||
Reference in New Issue
Block a user