From 2ee1af2032e369ec28afcf5a2cb841b89963e604 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Thu, 24 Sep 2020 12:25:50 +0200 Subject: 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 --- .../examples/loginui2/PushButton.ui.qml | 98 +++++++++++---- .../examples/loginui2/Screen01.ui.qml | 139 +++++++++++---------- 2 files changed, 149 insertions(+), 88 deletions(-) (limited to 'doc/qtdesignstudio/examples/loginui2') 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") } } } -- cgit v1.2.3