aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.pngbin32184 -> 28071 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.pngbin78796 -> 38029 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.pngbin185308 -> 64565 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.pngbin137483 -> 62675 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui2.pngbin19297 -> 13696 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui3-base-state.pngbin207261 -> 77503 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui3-connections.pngbin8481 -> 5097 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui3-login-state.pngbin12386 -> 12961 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui3-states.pngbin35310 -> 38418 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui3-visibility.pngbin37254 -> 25305 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui3.gifbin152776 -> 553073 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.pngbin116473 -> 16354 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4-page.pngbin175218 -> 35039 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.pngbin19389 -> 10168 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.pngbin37312 -> 16962 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.pngbin33310 -> 16238 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4-timeline.pngbin30495 -> 14454 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui4.gifbin440484 -> 606936 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/loginui2.qdoc54
-rw-r--r--doc/qtdesignstudio/examples/doc/loginui3.qdoc23
-rw-r--r--doc/qtdesignstudio/examples/doc/loginui4.qdoc33
-rw-r--r--doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml98
-rw-r--r--doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml139
-rw-r--r--doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml98
-rw-r--r--doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml197
-rw-r--r--doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml98
-rw-r--r--doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml262
27 files changed, 594 insertions, 408 deletions
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png
index 26444afef6..792725e390 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png
index cd41dfbe32..f459cb2ae5 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png
index af692bf74e..d0bf47b5ad 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png
index 0381935b0d..e75a93ddbd 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2.png b/doc/qtdesignstudio/examples/doc/images/loginui2.png
index 40fae287d4..85025cbf7b 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui2.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui2.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png
index 2966ea7061..202f310d60 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png
index 783065d3f4..81886e475b 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png
index d738ed3f0f..fe00720aab 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png
index 372c60d6b0..34374504e8 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png
index 858c959942..3b51e10d12 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3.gif b/doc/qtdesignstudio/examples/doc/images/loginui3.gif
index f3380d9078..3e4c321e8a 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3.gif
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3.gif
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png
index 8a1eb963ad..3963443bd1 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png
index 70238a8b85..2743c56b71 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png
index de5346276a..c1eda5a125 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png
Binary files 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 6085894bf9..6e830752a6 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png
index d1affa8d8c..38dbb31de7 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png
index e983c6f42e..a9fa47c438 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4.gif b/doc/qtdesignstudio/examples/doc/images/loginui4.gif
index 0d51973091..9a28af1fdc 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui4.gif
+++ b/doc/qtdesignstudio/examples/doc/images/loginui4.gif
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
index b1ed1e5602..10c43839d2 100644
--- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc
+++ b/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,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}
diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
index ffdd0546c6..89535b184c 100644
--- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc
+++ b/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
diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
index c057558d0c..211364cd34 100644
--- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc
+++ b/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
diff --git a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml
index 6e013d48cf..ffeaf7181e 100644
--- a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml
@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of The Qt Company Ltd nor the names of its
+** contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
import QtQuick.Templates 2.1 as T
import loginui2 1.0
T.Button {
id: control
+ width: 100
+ height: 40
font: Constants.font
implicitWidth: Math.max(
- background ? background.implicitWidth : 0,
- 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}
-}
-##^##*/
diff --git a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml
index 9995430aaf..3491ac6c96 100644
--- a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml
@@ -2,7 +2,7 @@
/****************************************************************************
**
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
@@ -54,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
- width: 300
- height: 85
- spacing: 5
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.top: parent.top
- anchors.topMargin: 200
+ 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
+ }
- TextField {
- id: usernameField
- width: 300
- placeholderText: qsTr("Username")
- font.pointSize: 10
- }
+ 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: passwordField
- width: 300
- placeholderText: qsTr("Password")
- font.pointSize: 10
- }
+ TextField {
+ id: usernameField
+ width: 300
+ placeholderText: qsTr("Username")
+ font.pointSize: 10
+ }
+
+ TextField {
+ id: passwordField
+ width: 300
+ placeholderText: qsTr("Password")
+ font.pointSize: 10
}
+ }
- Column {
- id: buttonColumn
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 50
- spacing: 5
- anchors.horizontalCenter: parent.horizontalCenter
+ 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: loginButton
+ width: 120
+ text: qsTr("Log In")
+ }
- PushButton {
- id: registerButton
- width: 120
- text: qsTr("Create Account")
- }
+ PushButton {
+ id: registerButton
+ width: 120
+ text: qsTr("Create Account")
}
}
}
diff --git a/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml
index b225c50b54..93b247a386 100644
--- a/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml
@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of The Qt Company Ltd nor the names of its
+** contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
import QtQuick.Templates 2.1 as T
import loginui3 1.0
T.Button {
id: control
+ width: 100
+ height: 40
font: Constants.font
implicitWidth: Math.max(
- background ? background.implicitWidth : 0,
- 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}
-}
-##^##*/
diff --git a/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml
index 2ebf95a89c..9539da8c30 100644
--- a/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml
@@ -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
- }
-
- 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
+ gradient: Gradient {
+ GradientStop {
+ position: 0.5
+ color: "#ffffff"
}
- PushButton {
- id: backButton
- width: 40
- text: "<"
- font.pixelSize: 24
- anchors.right: parent.right
- anchors.rightMargin: 10
- anchors.top: parent.top
- anchors.topMargin: 20
+ GradientStop {
+ position: 1
+ color: "#41cd52"
}
+ }
- Column {
- id: fieldColumn
- 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")
- }
- }
+ 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: buttonColumn
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 50
- spacing: 5
- anchors.horizontalCenter: parent.horizontalCenter
-
- PushButton {
- id: loginButton
- width: 120
- text: qsTr("Log In")
- }
+ 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
+ }
- 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}
+}
+##^##*/
+
diff --git a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml
index 569a92f2b4..3e2aeef9d1 100644
--- a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml
@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of The Qt Company Ltd nor the names of its
+** contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
import QtQuick.Templates 2.1 as T
import loginui4 1.0
T.Button {
id: control
+ width: 100
+ height: 40
font: Constants.font
implicitWidth: Math.max(
- background ? background.implicitWidth : 0,
- 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}
-}
-##^##*/
diff --git a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml
index e318223a0b..e57d19c368 100644
--- a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml
@@ -48,135 +48,154 @@
** $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: backButton
- x: 507
- width: 40
- text: "<"
+ id: loginButton
+ width: 120
opacity: 1
- anchors.right: parent.right
- anchors.rightMargin: 10
- anchors.top: parent.top
- anchors.topMargin: 20
- font.pixelSize: 24
+ text: qsTr("Log In")
}
- 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")
+ PushButton {
+ id: registerButton
+ width: 120
+ text: qsTr("Create Account")
+ font.bold: true
+
+ 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
+
+ Connections {
+ target: backButton
+ onClicked: rectangle.state = "loginState"
}
+ }
- TextField {
- id: passwordField
- width: 300
- anchors.horizontalCenter: usernameField.horizontalCenter
- anchors.top: usernameField.bottom
- anchors.topMargin: 5
- placeholderText: qsTr("Password")
- font.pointSize: 10
- }
+ 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: 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: 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
+ startFrame: 0
KeyframeGroup {
- target: verifyPasswordField
+ target: backButton
property: "opacity"
Keyframe {
frame: 0
@@ -184,85 +203,76 @@ Rectangle {
}
Keyframe {
+ frame: 1000
value: 1
- frame: 1001
}
}
KeyframeGroup {
- target: loginButton
+ target: verifyPasswordField
property: "opacity"
+
Keyframe {
frame: 0
- value: 1
+ value: 0
}
Keyframe {
frame: 1000
- value: "0"
+ value: 1
}
}
KeyframeGroup {
- target: verifyPasswordField
- property: "anchors.topMargin"
-
+ target: loginButton
+ property: "opacity"
Keyframe {
- easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1]
- value: 5
- frame: 1001
+ frame: 0
+ value: 1
}
Keyframe {
- value: "-40"
- frame: 0
+ frame: 1000
+ value: 0
}
}
KeyframeGroup {
- target: backButton
- property: "opacity"
+ target: verifyPasswordField
+ property: "anchors.topMargin"
Keyframe {
frame: 0
- value: 0
+ value: -40
}
Keyframe {
+ easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
frame: 1000
- value: 1
+ value: 5
}
}
}
-
- Connections {
- target: registerButton
- onClicked: {
- root.state = "registerState"
- }
- }
-
- Connections {
- target: backButton
- onClicked: {
- root.state = "loginState"
- }
- }
states: [
State {
- name: "registerState"
+ name: "loginState"
PropertyChanges {
target: timeline
+ currentFrame: 0
enabled: true
}
PropertyChanges {
+ target: toLoginState
+ }
+
+ PropertyChanges {
target: toRegisterState
running: true
}
},
State {
- name: "loginState"
+ name: "registerState"
PropertyChanges {
target: timeline
@@ -277,11 +287,9 @@ Rectangle {
]
}
-
-
-
-/*##^## Designer {
- D{i: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}
}
- ##^##*/
+##^##*/
+