diff options
author | Leena Miettinen <riitta-leena.miettinen@qt.io> | 2020-09-18 17:22:23 +0200 |
---|---|---|
committer | Leena Miettinen <riitta-leena.miettinen@qt.io> | 2020-09-30 11:10:18 +0000 |
commit | d61c6c859f58996b2392792f7a78c395639f2713 (patch) | |
tree | f972fbc0d238e50f24801db6c68c708c23534eb4 /doc/qtdesignstudio/examples/loginui1 | |
parent | 6c4a8cf05b0d8ae34d2d54568f9acca702888351 (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>
Diffstat (limited to 'doc/qtdesignstudio/examples/loginui1')
4 files changed, 204 insertions, 37 deletions
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 |