diff --git a/doc/qtcreator/images/icons/anchor-center-horizontal.png b/doc/qtcreator/images/icons/anchor-center-horizontal.png index bdd51c79d19..b3be3037238 100644 Binary files a/doc/qtcreator/images/icons/anchor-center-horizontal.png and b/doc/qtcreator/images/icons/anchor-center-horizontal.png differ diff --git a/doc/qtcreator/images/icons/anchor-center-vertical.png b/doc/qtcreator/images/icons/anchor-center-vertical.png index e8f8f253d91..cdea461bd3d 100644 Binary files a/doc/qtcreator/images/icons/anchor-center-vertical.png and b/doc/qtcreator/images/icons/anchor-center-vertical.png differ diff --git a/doc/qtcreator/images/icons/center-horizontal.png b/doc/qtcreator/images/icons/center-horizontal.png deleted file mode 100644 index cdea461bd3d..00000000000 Binary files a/doc/qtcreator/images/icons/center-horizontal.png and /dev/null differ diff --git a/doc/qtcreator/images/icons/center-vertical.png b/doc/qtcreator/images/icons/center-vertical.png deleted file mode 100644 index b3be3037238..00000000000 Binary files a/doc/qtcreator/images/icons/center-vertical.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png index e4d8b398ae4..014465bcf0e 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png and b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-layout-text.png b/doc/qtdesignstudio/examples/doc/images/loginui2-layout-text.png new file mode 100644 index 00000000000..46bcafffb27 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui2-layout-text.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-layout.png b/doc/qtdesignstudio/examples/doc/images/loginui2-layout.png new file mode 100644 index 00000000000..8fb849abf77 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui2-layout.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.jpg b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.jpg new file mode 100644 index 00000000000..29cc6d47cae Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png deleted file mode 100644 index f78b7ec7dbe..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.jpg b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.jpg new file mode 100644 index 00000000000..fc92c5cdb1b Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png deleted file mode 100644 index 8026f458cb7..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2.png b/doc/qtdesignstudio/examples/doc/images/loginui2.png deleted file mode 100644 index 85025cbf7b4..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc index 1737873b3f9..0a74a67f850 100644 --- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc @@ -34,13 +34,13 @@ \brief Illustrates how to position UI components on pages using anchors and positioners. - \image loginui2.png "Log In UI" + \image loginui1.jpg "Log In UI" \e{Log In UI - Positioning} is the second in a series of tutorials 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 2 - describes how to position the UI components on pages to create a scalable - UI. + some basic UI components, such as pages, buttons, and entry fields. The + second tutorial in the series describes how to position the UI components + on pages to create a scalable UI. To ensure that the layout is responsive and all the UI components stay in their proper places when you resize the UI on the desktop or on devices @@ -53,13 +53,15 @@ \section1 Anchoring UI Components - 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 tutorial, 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 - to align it with \e logo on the page. + First, you will \l {Setting Anchors and Margins}{anchor} the + static page elements, background image (\e adventurePage), logo + (\e qt_logo_green_128x128px), and tag line (\e tagLine), to the page. + + When you created the project using the project wizard template + in \l {Log In UI - Components}, the wizard template anchored \e tagLine to + the vertical and horizontal center of the page. Therefore, you will only + need to replace the vertical anchor of \e tagLine with a top anchor and + adjust the margins to align it with \e qt_logo_green_128x128px on the page. To preview the changes that you make to the UI while you make them, select the \inlineimage live_preview.png @@ -71,17 +73,40 @@ \list 1 \li Open \e {Screen01.ui.qml} for editing in the \uicontrol {Form Editor} view. - \li Select \e logo in the \l Navigator view. - \li In the \l Properties view, \uicontrol Layout tab, - select the \inlineimage icons/anchor-top.png - (\uicontrol Top) and \inlineimage icons/anchor-left.png - (\uicontrol Left) anchor buttons to anchor \e logo to the top left - corner of its parent with 10-pixel margins. - \li Select \e pageTitle in \uicontrol Navigator. - \li Deselect the \inlineimage icons/anchor-center-vertical.png - (\uicontrol {Vertical Center}) button to remove the - anchor, and then select the \uicontrol Top button to anchor the - title to the top of the page with a 70-pixel margin. + \li Select \e adventurePage in the \l Navigator view to display its + properties in the \l Properties view. + \li In \uicontrol Properties > \uicontrol Layout, select + the \inlineimage icons/anchor-fill.png + anchor button to anchor \e adventurePage to its + parent in the \uicontrol Target field. This attaches the background + image to the rectangle on all sides. + \image loginui2-layout.png "Layout properties" + \li Select \e qt_logo_green_128x128px in \l Navigator. + \li In \uicontrol Properties > \uicontrol Layout, select the + \inlineimage icons/anchor-top.png + and \inlineimage icons/anchor-center-horizontal.png + anchor buttons to anchor \e qt_logo_green_128x128px to the top of + its parent in the \uicontrol Target field with a 40-pixel margin + and to center it horizontally. This attaches the logo to the + rectangle at the top, while keeping its horizontal center aligned + with that of the rectangle. + \li Select \e tagLine in \uicontrol Navigator. + \li In \uicontrol Properties > \uicontrol Layout, deselect the + \inlineimage icons/anchor-center-vertical.png + button to remove the vertical center anchor, and then select the + \inlineimage icons/anchor-top.png + button to anchor the tag line to + \e qt_logo_green_128x128px in the \uicontrol Target field with a + 40-pixel margin. This attaches the top of the tag line to the + bottom of the logo, while keeping its horizontal center aligned + with that of the rectangle. + \image loginui2-layout-text.png "Text Layout properties" + \note You can anchor component instances to their parent and sibling + components. If a component instance is not listed in the + \uicontrol Target field, check that the component instance is + located in the correct place in the component hierarchy in + \uicontrol Navigator. For more information, + see \l{Arranging Components}. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -89,7 +114,7 @@ Your page now should look something like this in the \uicontrol Design mode and live preview: - \image loginui2-loginpage.png "Login page in the Design mode" + \image loginui2-loginpage.jpg "Login page in the Design mode and live preview" \section2 Learn More - Anchors @@ -107,74 +132,50 @@ \section1 Using Column Positioners - You will now add two entry fields to the page and position them in a column + You will now position the entry fields and buttons in columns to learn another method of \l{Using Positioners}{positioning components}. - Next, you will position the push buttons on the page in another column. - Finally, you will anchor the columns to the page to enable their positions + Then, you will anchor the columns to the page to enable their positions to change when the screen size changes. - To add entry fields to the page: + To position the fields and buttons as columns: \list 1 - \li Drag-and-drop two instances of the \uicontrol {Text Field} - component from \l Library > \uicontrol Components > - \uicontrol {Qt Quick Controls} to \l {Form Editor}. - \li Select one of the text fields in \l Navigator, and - change its ID to \e usernameField in \l Properties. - \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 component 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 - (press the \key Shift key for multiple selection), and right-click + \li Select \e username and \e password in \uicontrol Navigator + (press and hold the \key Shift or \key Ctrl key for + \l {Multiselection}{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}. \li Select the column in \uicontrol Navigator and change its ID - to \e fieldColumn in \uicontrol Properties. - \li In the \uicontrol Spacing field, set the spacing between the - fields to 5 pixels. + to \e fields in \uicontrol Properties. + \li In \uicontrol Column > \uicontrol Spacing, set the spacing between + the fields to 20 pixels. \image loginui2-column-properties.png "Column properties" - \li Select \e loginButton and \e registerButton, and then select + \li Select \e login and \e createAccount, and then select \uicontrol Position > \uicontrol {Position in Column} to position them in a column. - \li Select the button column, change its ID to \e buttonColumn, and - set the spacing between the buttons to 5 pixels, as above. + \li Select the button column, change its ID to \e buttons, and + set the spacing between the buttons to 20 pixels, as above. \endlist You will now anchor the field and button columns to the page: \list 1 - \li Select \e fieldColumn in \uicontrol Navigator. + \li Select \e fields 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 with a 200-pixel margin. + \inlineimage icons/anchor-top.png + button to anchor the top of the field column to + the bottom of \e tagLine with a 170-pixel margin. \li Select the \inlineimage icons/anchor-center-horizontal.png - (\uicontrol {Horizontal Center}) button to center the field - column horizontally on the page. - \li Select \e buttonColumn in \uicontrol Navigator. + button to anchor the column horizontally to its parent. + \li Select \e buttons in \uicontrol Navigator. \li In \uicontrol Properties > \uicontrol Layout, select the \inlineimage icons/anchor-bottom.png - (\uicontrol Bottom) button to anchor the bottom of the button - 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. + button to anchor the button column to the bottom of its parent + with a 50-pixel margin. + \li Select the \inlineimage icons/anchor-center-horizontal.png + button to anchor the column horizontally to its parent. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -182,7 +183,7 @@ The second iteration of your UI is now ready and should look something like this in the \uicontrol Design mode and live preview: - \image loginui2-loginpage-ready.png "Login page in the Design mode" + \image loginui2-loginpage-ready.jpg "Login page in the Design mode and live preview" \section1 Learn More - Positioners diff --git a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml deleted file mode 100644 index 320a21ca716..00000000000 --- a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml +++ /dev/null @@ -1,113 +0,0 @@ - -/**************************************************************************** -** -** Copyright (C) 2021 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.Controls 2.12 - -Button { - id: control - - implicitWidth: Math.max( - buttonBackground ? buttonBackground.implicitWidth : 0, - textItem.implicitWidth + leftPadding + rightPadding) - implicitHeight: Math.max( - buttonBackground ? buttonBackground.implicitHeight : 0, - textItem.implicitHeight + topPadding + bottomPadding) - leftPadding: 4 - rightPadding: 4 - - text: "My Button" - - background: buttonBackground - Rectangle { - id: buttonBackground - implicitWidth: 100 - implicitHeight: 40 - opacity: enabled ? 1 : 0.3 - radius: 20 - border.color: "#41cd52" - } - - contentItem: textItem - Text { - id: textItem - text: control.text - - opacity: enabled ? 1.0 : 0.3 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.bold: true - } - - states: [ - State { - name: "normal" - when: !control.down - - PropertyChanges { - target: buttonBackground - border.color: "#41cd52" - } - }, - State { - name: "down" - when: control.down - PropertyChanges { - target: textItem - color: "#41cd52" - } - - PropertyChanges { - target: buttonBackground - border.color: "#41cd52" - } - } - ] -} diff --git a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml index 3491ac6c96d..6466b19bd06 100644 --- a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml @@ -2,10 +2,10 @@ /**************************************************************************** ** -** Copyright (C) 2020 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** -** This file is part of the examples of the Qt Toolkit. +** This file is part of the examples of the Qt Design Studio. ** ** $QT_BEGIN_LICENSE:BSD$ ** Commercial License Usage @@ -49,98 +49,89 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.10 +import QtQuick +import QtQuick.Controls import loginui2 1.0 -import QtQuick.Controls 2.3 Rectangle { + id: rectangle width: Constants.width height: Constants.height - gradient: Gradient { - GradientStop { - position: 0.50157 - color: "#ffffff" - } - GradientStop { - position: 1 - color: "#41cd52" - } - } - - 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 - } + color: Constants.backgroundColor 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" + id: adventurePage + anchors.fill: parent + source: "images/adventurePage.jpg" fillMode: Image.PreserveAspectFit } - Column { - id: fieldColumn - x: 170 - y: 200 - width: 300 - height: 85 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter + Image { + id: qt_logo_green_128x128px + x: 296 anchors.top: parent.top - anchors.topMargin: 200 + source: "images/qt_logo_green_128x128px.png" + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: 40 + fillMode: Image.PreserveAspectFit + } + Text { + id: tagLine + width: 541 + height: 78 + color: "#ffffff" + text: qsTr("Are you ready to explore?") + anchors.top: qt_logo_green_128x128px.bottom + font.pixelSize: 50 + anchors.topMargin: 40 + anchors.horizontalCenter: parent.horizontalCenter + font.family: "Titillium Web ExtraLight" + } - TextField { - id: usernameField - width: 300 - placeholderText: qsTr("Username") - font.pointSize: 10 + Column { + id: fields + x: 128 + anchors.top: tagLine.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: 170 + spacing: 20 + + EntryField { + id: username + text: "Username or Email" } - TextField { - id: passwordField - width: 300 - placeholderText: qsTr("Password") - font.pointSize: 10 + EntryField { + id: password + text: qsTr("Password") } } Column { - id: buttonColumn - x: 260 - y: 345 + id: buttons + x: 102 + y: 966 anchors.bottom: parent.bottom - anchors.bottomMargin: 50 - spacing: 5 anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: 100 + spacing: 20 PushButton { - id: loginButton - width: 120 - text: qsTr("Log In") + id: login + text: qsTr("Continue") } PushButton { - id: registerButton - width: 120 + id: createAccount text: qsTr("Create Account") } } } + +/*##^## +Designer { + D{i:0;formeditorZoom:0.5}D{i:1}D{i:2}D{i:4} +} +##^##*/ + diff --git a/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml index 74a66dcae2b..6fef815fa14 100644 --- a/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml +++ b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml @@ -1,76 +1,26 @@ -/**************************************************************************** -** -** Copyright (C) 2019 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of the Qt Toolkit. -** -** $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$ -** -****************************************************************************/ - pragma Singleton -import QtQuick 2.10 +import QtQuick QtObject { - readonly property int width: 640 - readonly property int height: 480 - readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + readonly property int width: 720 + readonly property int height: 1280 + + property alias fontDirectory: directoryFontLoader.fontDirectory + property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory + /* Edit this comment to add your custom font */ - /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */ readonly property font font: Qt.font({ - family: mySystemFont.name, - pointSize: Qt.application.font.pixelSize + family: Qt.application.font.family, + pixelSize: Qt.application.font.pixelSize }) readonly property font largeFont: Qt.font({ - family: mySystemFont.name, - pointSize: Qt.application.font.pixelSize * 1.6 + family: Qt.application.font.family, + pixelSize: Qt.application.font.pixelSize * 1.6 }) + readonly property color backgroundColor: "#c2c2c2" + + property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader { + id: directoryFontLoader + } } - - - -/*##^## Designer { - D{i:0;autoSize:true;height:480;width:640} -} - ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir index 616ac203530..69846237302 100644 --- a/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir +++ b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir @@ -1 +1,2 @@ singleton Constants 1.0 Constants.qml +EventListSimulator 1.0 EventListSimulator.qml diff --git a/doc/qtdesignstudio/examples/loginui2/loginui2.qml b/doc/qtdesignstudio/examples/loginui2/loginui2.qml index 594150b0057..127e947a1c5 100644 --- a/doc/qtdesignstudio/examples/loginui2/loginui2.qml +++ b/doc/qtdesignstudio/examples/loginui2/loginui2.qml @@ -1,9 +1,9 @@ /**************************************************************************** ** -** Copyright (C) 2019 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** -** This file is part of the examples of the Qt Toolkit. +** This file is part of the examples of the Qt Design Studio. ** ** $QT_BEGIN_LICENSE:BSD$ ** Commercial License Usage @@ -48,7 +48,7 @@ ** ****************************************************************************/ -import QtQuick 2.10 +import QtQuick import loginui2 1.0 Item { @@ -57,6 +57,5 @@ Item { Screen01 { } + } - - diff --git a/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject index 094cd9b2c32..7d9e775731f 100644 --- a/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject +++ b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject @@ -28,14 +28,20 @@ Project { directory: "." } + Files { + filter: "*.ttf;*.otf" + } + Environment { QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" QT_AUTO_SCREEN_SCALE_FACTOR: "1" } + qt6Project: true + /* List of plugin directories passed to QML runtime */ - importPaths: [ "imports" ] + importPaths: [ "imports", "asset_imports" ] /* Required for deployment */ - targetDirectory: "/opt/loginui2" + targetDirectory: "/opt/loginui1" } diff --git a/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds deleted file mode 100644 index 5c5ff41596c..00000000000 --- a/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds +++ /dev/null @@ -1,121 +0,0 @@ - - - - - - EnvironmentId - {595d361f-de69-4ff2-b1f6-d89b95edfd27} - - - ProjectExplorer.Project.ActiveTarget - 0 - - - ProjectExplorer.Project.EditorSettings - - true - false - true - - Cpp - - CppGlobal - - - - QmlJS - - QmlJSGlobal - - - 2 - UTF-8 - false - 4 - false - 80 - true - true - 1 - true - false - 0 - true - true - 0 - 8 - true - 1 - true - true - true - false - - - - ProjectExplorer.Project.PluginSettings - - - - ProjectExplorer.Project.Target.0 - - Desktop - Desktop - {8994bd34-5ed9-4c45-8c0a-94c8f33eca4a} - -1 - 0 - 0 - 0 - - - 0 - Deploy - Deploy - ProjectExplorer.BuildSteps.Deploy - - 1 - - false - ProjectExplorer.DefaultDeployConfiguration - - 1 - - - false - false - 1000 - - true - 0 - - QML Scene - QmlProjectManager.QmlRunConfiguration.QmlScene - - en - CurrentFile - - false - false - - false - true - false - false - true - - 1 - - - - ProjectExplorer.Project.TargetCount - 1 - - - ProjectExplorer.Project.Updater.FileVersion - 22 - - - Version - 22 - - diff --git a/doc/qtdesignstudio/examples/loginui2/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui2/qt_logo_green_64x64px.png deleted file mode 100644 index 235a381b5f1..00000000000 Binary files a/doc/qtdesignstudio/examples/loginui2/qt_logo_green_64x64px.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf index 7ad5144dc36..75b2cb8fffb 100644 --- a/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf +++ b/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf @@ -1,3 +1,6 @@ ; This file can be edited to change the style of the application ; Read "Qt Quick Controls 2 Configuration File" for details: -; https://doc.qt.io/qt/qtquickcontrols2-configuration.html +; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html + +[Controls] +Style=Default