diff options
Diffstat (limited to 'doc/qtdesignstudio/examples/loginui4')
| -rw-r--r-- | doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml | 98 | ||||
| -rw-r--r-- | doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml | 262 |
2 files changed, 208 insertions, 152 deletions
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} } - ##^##*/ +##^##*/ + |