aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLeena Miettinen <riitta-leena.miettinen@qt.io>2020-09-18 17:22:23 +0200
committerLeena Miettinen <riitta-leena.miettinen@qt.io>2020-09-30 11:10:18 +0000
commitd61c6c859f58996b2392792f7a78c395639f2713 (patch)
treef972fbc0d238e50f24801db6c68c708c23534eb4
parent6c4a8cf05b0d8ae34d2d54568f9acca702888351 (diff)
Doc: Update Qt Design Studio tutorial part 1
- Explain basic Rectangle, Text, and Image types a bit more - Describe how to add gradients - Update info about asset handling Change-Id: Ia23187f647847a16edaab3706f8bf742f09f26b1 Reviewed-by: Brook Cronin <brook.cronin@qt.io> Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.pngbin101822 -> 13903 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.pngbin0 -> 33876 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.pngbin10132 -> 4060 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.pngbin53170 -> 68167 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-button.pngbin57459 -> 56213 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.pngbin0 -> 37240 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.pngbin0 -> 13402 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-library.pngbin39924 -> 6550 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-main-page.pngbin131172 -> 32222 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-project-files.pngbin52568 -> 9179 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-ready.pngbin182426 -> 24389 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.pngbin0 -> 43157 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/images/loginui1.pngbin15572 -> 11866 bytes
-rw-r--r--doc/qtdesignstudio/examples/doc/loginui1.qdoc166
-rw-r--r--doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml92
-rw-r--r--doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml95
-rw-r--r--doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml4
-rw-r--r--doc/qtdesignstudio/examples/loginui1/loginui1.qml50
18 files changed, 321 insertions, 86 deletions
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png
index 1e64ec1b1b..890bf0ce9f 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png
new file mode 100644
index 0000000000..40564fbb14
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png
index abbf16e991..1a053715c7 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png
index 5adf709f57..ee8545d6ff 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png
index c0b0cc87d6..a765566fe1 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png
new file mode 100644
index 0000000000..5b7e5e3f68
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png
new file mode 100644
index 0000000000..b91d698607
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png
index 1183e572cd..6df32f7902 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png
index 06998bdd51..0cd1558c10 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png
index 43a561c54e..bdf136b3f5 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png
index 472dec3001..d02864703e 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png
new file mode 100644
index 0000000000..95529fc500
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1.png b/doc/qtdesignstudio/examples/doc/images/loginui1.png
index 4971673531..541e8d9b9d 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1.png
Binary files differ
diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
index 1f5ab9aa2c..53e76feb66 100644
--- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
@@ -58,12 +58,18 @@
\li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol General > \uicontrol {Qt Quick Application - Empty} >
\uicontrol Choose.
- \li In the \uicontrol Name field, enter \e {loginui1}.
- \li In the \uicontrol {Create in} field, enter the path for the project
- files
+ \li In the \uicontrol Name field, enter the project name: \e {loginui1}.
+ When naming your own projects, keep in mind that they cannot be
+ easily renamed later.
+ \li In the \uicontrol {Create in} field, enter the path to the folder
+ where you want to store the project files. You can move project
+ folders later without problems.
\li Select \uicontrol Next (or \uicontrol Continue on \macos) to
continue to the \uicontrol {Define Project Details} page.
- \li In the \uicontrol {Screen resolution} field, select \e {640 x 480}.
+ \li In the \uicontrol {Screen resolution} field, select the initial
+ size of the UI. In this example, we use the smallest predefined
+ size, \e {640 x 480}. You can easily change the screen size later
+ in \uicontrol Properties.
\li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
the project.
\endlist
@@ -113,15 +119,22 @@
For more information about creating a QML file from scratch, see
\l{First Steps with QML}.
- Next, you will edit the properties of the UI elements to create the main
- page of the UI.
+ Next, you will edit the values of the properties of the UI elements to
+ create the main page of the UI.
\section1 Creating the Main Page
- You will now change the properties of the \l Rectangle type to turn the UI
- background white and those of the \l Text type to change the text and to use
- a larger font size. In addition, you will use the \l Image type to add the
- Qt logo to the page.
+ You will now change the values of the properties of the \l Rectangle
+ component to add a gradient to the UI background and those of the
+ \l Text component to set the title text in a larger strong font. In
+ addition, you will import an image as an asset and add it to the page.
+
+ To be able to use an image in the UI, you must add it to your project
+ in the \uicontrol Assets tab of \uicontrol Library. Click
+ \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png}
+ {here} to open the Qt logo in a browser and save it as a file on your
+ computer. The image is only used for decoration, so you can also use
+ any other image or just leave it out.
To preview the changes that you make to the UI while you make
them, select the \inlineimage live_preview.png
@@ -142,25 +155,35 @@
\li Select \e Rectangle in the \uicontrol Navigator view to display its
properties in \uicontrol Properties.
\li In the \uicontrol Color field, select the
- \inlineimage icons/action-icon-binding.png
- (\uicontrol Actions) menu, and then select \uicontrol Reset to
- reset the rectangle background to the default color, white.
- \li Select \e Text in \uicontrol Navigator.
- \li In the \uicontrol id field, enter the id \e pageTitle.
- \li In the \uicontrol Text field, enter \e {Qt Account}.
- \li In the \uicontrol Font group, \uicontrol Size field, set the font
- size to \e 24 pixels.
- \li Drag and drop an \l Image type from \uicontrol Library >
- \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the
- top-left corner of the rectangle.
+ \inlineimage icon_color_gradient.png
+ (\uicontrol Gradient) button to add a linear gradient to the
+ screen background. In this example, the color changes from
+ white to green (#41cd52), with a stop point set at position 0.5.
+ You can use your favorite colors or select a predefined gradient
+ in the \uicontrol {Gradient Picker}.
+ \image loginui1-background-gradient.png "Rectangle color properties"
+ \li Select \e Text in \uicontrol Navigator to display its properties in
+ \uicontrol Properties.
+ \image loginui1-text-properties.png "Text properties"
+ \list a
+ \li In the \uicontrol id field, enter the id \e pageTitle,
+ so that you can easily find the title component in
+ \uicontrol Navigator and other \QDS views.
+ \li In the \uicontrol Text field, enter the page title:
+ \e {Qt Account}.
+ \li In the \uicontrol Font group, \uicontrol Size field,
+ set the font size of the title: \e 24 pixels.
+ \li In the \uicontrol {Font style} field, select the
+ \uicontrol B button to use a strong font.
+ \endlist
+ \li Drag and drop the Qt logo from the \uicontrol Assets tab of
+ \uicontrol Library to the top-left corner of the rectangle.
+ \image loginui1-library-assets.png "Library view Assets tab"
+ \QDS automatically creates a component of the \l Image type
+ for you with the path to the image file set as the value of
+ the \uicontrol Source field in \uicontrol Properties.
+ \image loginui1-image-properties.png "Image properties"
\li In the \uicontrol id field, change the id of the image to \e logo.
- \li In the \uicontrol Source field, select the \inlineimage browse-button.png
- (\uicontrol Browse) button to locate the Qt logo image file. Click
- \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png}
- {here} to open the Qt logo in a browser and save it as a file in the
- folder where you created the project. The image is only used for
- decoration, so you can also use any other image or just leave it
- out.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
@@ -189,9 +212,53 @@
types, and they will be listed under \uicontrol {My QML Components}.
This section is only visible if you have created custom QML components.
- For more information about the \l Rectangle and \l Image types used in this
- example, see \l{Use Case - Visual Elements In QML}. For descriptions of all
- QML types, see \l{All QML Types} in the Qt reference documentation.
+ The \l [QtQuick] {Rectangle}, \l Text, and \l Image types used in this example are
+ based on the \l Item type. It is the base type for all visual elements,
+ with implementation of basic functions and properties, such as type
+ name, ID, position, size, and visibility.
+
+ For more information, see \l{Use Case - Visual Elements In QML}. For
+ descriptions of all QML types, see \l{All QML Types} in the Qt reference
+ documentation.
+
+ \section3 Regtangle Properties
+
+ The basic \l [QtQuick] {Rectangle} QML type is used for drawing shapes
+ with 4 sides and 4 corners. You can fill rectangles either with a solid
+ fill color or a gradient. You can specify the border color separately.
+ By setting the value of the radius property, you can create shapes with
+ rounded corners.
+
+ If you want to specify the radius of each corner separately, you can
+ use the \l Rectangle type from the Qt Quick Studio Components module
+ instead of the basic rectangle type. It is available in the
+ \uicontrol {Studio Components} tab of \uicontrol Library.
+
+ \section3 Text Properties
+
+ The \l Text type is used for adding static text to the UI, such as titles
+ and labels. You can select the font to use and specify extensive properties
+ for each text item, such as size in points or pixels, weight, style, and
+ spacing.
+
+ To display custom fonts in the list of available fonts in
+ \uicontrol Properties, add them in the \uicontrol Assets
+ tab of \uicontrol Library.
+
+ If you want to create a label with a background, use the \l Label type
+ from the Qt Quick Controls module instead of the Text type.
+
+ \section3 Image Properties
+
+ The \l Image type is used for adding images to the UI in several supported
+ formats, including bitmap formats such as PNG and JPEG and vector graphics
+ formats such as SVG. You must add the images to your project in the
+ \uicontrol Assets tab of \uicontrol Library to be able to use them in
+ designs.
+
+ If you need to display animated images, use the \l {AnimatedImage}
+ {Animated Image} type, also available in the \uicontrol {Qt Quick - Basic}
+ tab of \uicontrol Library.
\section1 Creating a Push Button
@@ -201,9 +268,11 @@
drag and drop it to \uicontrol {Form Editor} and modify its properties
in \uicontrol Properties to change its appearance and functionality.
- If you find that you cannot use the wizard template to create the kind of
- push button that you want, you can create your button from scratch using
- basic QML types. For more information, see \l {Creating Buttons} and
+ If you find that you cannot use the wizard template nor the ready-made
+ button controls available in the \uicontrol {Qt Quick Controls 2} tab
+ in \uicontrol Library to create the kind of push button that you want,
+ you can create your button from scratch using basic QML types. For more
+ information, see \l {Creating Buttons} and
\l {Creating Scalable Buttons and Borders}.
To create a push button:
@@ -212,7 +281,8 @@
\li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} >
\uicontrol {Custom Button} > \uicontrol Choose.
- \li In the \uicontrol {Component name} field, enter \e {PushButton}.
+ \li In the \uicontrol {Component name} field, enter a name for your
+ button type: \e {PushButton}.
\li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
the button.
\endlist
@@ -269,24 +339,22 @@
properties in the \uicontrol Properties view.
\li In the \uicontrol Color field, select
\inlineimage icons/action-icon.png
- (\uicontrol Actions) > \uicontrol {Set Binding} and set the
- button background color to \e #41cd52.
- \li Press \key Enter or select \uicontrol OK to save the new value.
+ (\uicontrol Actions) > \uicontrol Reset to reset the button
+ background color to the default color, white.
+ \li In the \uicontrol {Border Color} field, select \uicontrol Actions >
+ \uicontrol {Set Binding} to use the gradient color (\e #41cd52) as
+ the border color. You can also use the color picker to change the
+ color.
\image loginui1-binding-editor.png "Binding Editor"
- \omit
- \li In the \uicontrol {Border Color} field, set the button
- border color to \e #21be2b. You could also use the color picker
- to change the button color.
- \li In the \uicontrol Radius field, enter 6 to give the button
+ \li Press \key Enter or select \uicontrol OK to save the new value.
+ \li In the \uicontrol Radius field, enter 20 to give the button
rounded corners.
- \endomit
\li Select the text item in \uicontrol Navigator to display its
properties in \uicontrol Properties.
- \li In the \uicontrol {Text color} field, set the button text
- color to white (\e #ffffff).
+ \li In the \uicontrol {Font style} field, select the \uicontrol B button
+ to use the strong font.
\li In the \uicontrol States view, select the \e down state to set the
- button text color to white and the background color to a darker
- shade of green (\e #21be2b).
+ button text color to the same green as the border.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
@@ -327,7 +395,7 @@
to open it in \uicontrol {Form Editor}.
\li Drag and drop two instances of the PushButton type from
\uicontrol Library to \uicontrol {Form Editor}.
- \image loginui1-library.png "Library view"
+ \image loginui1-library.png "My QML Components tab of Library view"
\li Select one of the buttons in \uicontrol Navigator to modify
its id and text label in \uicontrol Properties.
\li In the \uicontrol Id field, enter \e loginButton.
diff --git a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml
index cdfd98b3ef..118e83c5ed 100644
--- a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui1/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 loginui1 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,12 +108,12 @@ 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"
}
}
]
diff --git a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml
index bdd37b0415..590dcb58c4 100644
--- a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml
+++ b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml
@@ -1,46 +1,109 @@
-import QtQuick 2.12
+
+/****************************************************************************
+**
+** Copyright (C) 2019 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 loginui1 1.0
+import QtQuick.Studio.Components 1.0
+import QtQuick.Controls 2.15
Rectangle {
- width: Constants.width
- height: Constants.height
- color: "#fdfdfd"
+ color: "#ffffff"
+ gradient: Gradient {
+ GradientStop {
+ position: 0.5
+ color: "#ffffff"
+ }
+
+ GradientStop {
+ position: 1
+ color: "#41cd52"
+ }
+ }
Text {
id: pageTitle
+ x: 273
+ y: 33
text: qsTr("Qt Account")
font.pixelSize: 24
- anchors.verticalCenterOffset: -153
- anchors.horizontalCenterOffset: 1
+ font.bold: true
+ font.weight: Font.ExtraBold
+ anchors.verticalCenterOffset: -180
+ anchors.horizontalCenterOffset: 0
anchors.centerIn: parent
font.family: Constants.font.family
}
Image {
id: logo
- x: 13
- y: 0
- width: 100
- height: 100
+ x: 8
+ y: 19
source: "qt_logo_green_64x64px.png"
fillMode: Image.PreserveAspectFit
}
PushButton {
id: loginButton
- x: 262
- y: 343
+ x: 260
+ y: 352
width: 120
height: 40
- text: qsTr("Log In")
+ text: "Log In"
}
PushButton {
id: registerButton
- x: 262
- y: 389
+ x: 260
+ y: 398
width: 120
height: 40
- text: qsTr("Create Account")
+ text: "Create Account"
}
}
diff --git a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml
index 26a0421c9b..d73cb621b0 100644
--- a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml
+++ b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml
@@ -2,8 +2,8 @@ pragma Singleton
import QtQuick 2.10
QtObject {
- readonly property int width: 640
- readonly property int height: 480
+ readonly property int width: 1280
+ readonly property int height: 720
readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qml b/doc/qtdesignstudio/examples/loginui1/loginui1.qml
index 46f3994cdc..604733f9f8 100644
--- a/doc/qtdesignstudio/examples/loginui1/loginui1.qml
+++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qml
@@ -1,3 +1,53 @@
+/****************************************************************************
+**
+** 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.12
import loginui1 1.0