diff --git a/coin/instructions/common_environment.yaml b/coin/instructions/common_environment.yaml index 245d4a5298d..e8812895829 100644 --- a/coin/instructions/common_environment.yaml +++ b/coin/instructions/common_environment.yaml @@ -7,7 +7,7 @@ instructions: variableValue: "RelWithDebInfo" - type: EnvironmentVariable variableName: QTC_QT_BASE_URL - variableValue: "http://ci-files02-hki.intra.qt.io/packages/jenkins/archive/qt/6.2/6.2.0-beta4-released/" + variableValue: "http://ci-files02-hki.intra.qt.io/packages/jenkins/archive/qt/6.2/6.2.0-rc-released/" - type: EnvironmentVariable variableName: QTC_QT_MODULES variableValue: "qt5compat qtbase qtdeclarative qtimageformats qtquick3d qtquickcontrols2 qtquicktimeline qtserialport qtshadertools qtsvg qttools qttranslations" 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/qtcreator/images/qmldesigner-dynamicprops.png b/doc/qtcreator/images/qmldesigner-dynamicprops.png index fc321c4c7e2..460be93f2bd 100644 Binary files a/doc/qtcreator/images/qmldesigner-dynamicprops.png and b/doc/qtcreator/images/qmldesigner-dynamicprops.png differ diff --git a/doc/qtcreator/images/qmldesigner-screen-design.png b/doc/qtcreator/images/qmldesigner-screen-design.png index dcf5a485dca..79da601126c 100644 Binary files a/doc/qtcreator/images/qmldesigner-screen-design.png and b/doc/qtcreator/images/qmldesigner-screen-design.png differ diff --git a/doc/qtcreator/images/qmldesigner-states.png b/doc/qtcreator/images/qmldesigner-states.png index e1cea9fda5f..e73fb441f16 100644 Binary files a/doc/qtcreator/images/qmldesigner-states.png and b/doc/qtcreator/images/qmldesigner-states.png differ diff --git a/doc/qtcreator/images/qtquick-annotations.png b/doc/qtcreator/images/qtquick-annotations.png index 5dfcb100377..4fc9ddff3dd 100644 Binary files a/doc/qtcreator/images/qtquick-annotations.png and b/doc/qtcreator/images/qtquick-annotations.png differ diff --git a/doc/qtcreator/images/qtquick-custom-properties.png b/doc/qtcreator/images/qtquick-custom-properties.png index 9964bb6317f..ce9fc5d400e 100644 Binary files a/doc/qtcreator/images/qtquick-custom-properties.png and b/doc/qtcreator/images/qtquick-custom-properties.png differ diff --git a/doc/qtcreator/images/qtquick-designer-stacked-view.png b/doc/qtcreator/images/qtquick-designer-stacked-view.png index 19c0f6a4baf..5ede90aed62 100644 Binary files a/doc/qtcreator/images/qtquick-designer-stacked-view.png and b/doc/qtcreator/images/qtquick-designer-stacked-view.png differ diff --git a/doc/qtcreator/images/studio-iso-icon.png b/doc/qtcreator/images/studio-iso-icon.png index d8491d6c438..690b5003290 100644 Binary files a/doc/qtcreator/images/studio-iso-icon.png and b/doc/qtcreator/images/studio-iso-icon.png differ diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index bd754ad177d..1daf929e54d 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -146,6 +146,7 @@ \li \l{Scene Environment} \li \l{Morph Target} \li \l{Repeater3D} + \li \l{Loader3D} \endlist \li \l {Creating Component Instances} \li \l {Creating Custom Components} diff --git a/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc index d78ed8c922e..eb2e12f8f99 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc @@ -25,7 +25,7 @@ /*! \page quick-component-instances.html - \previouspage studio-3d-repeater-3d.html + \previouspage studio-3d-loader-3d.html \nextpage quick-components-creating.html \title Creating Component Instances diff --git a/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc index 10ef412b118..407c2715b51 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc @@ -212,7 +212,10 @@ \if defined(qtdesignstudio) \section1 Iso Icon - The IsoIcon component specifies an icon from an ISO 7000 icon library as a + \note The Iso Icon component is not available if you selected + \uicontrol {Qt 6} when \l{Creating Projects}{creating the project}. + + The Iso Icon component specifies an icon from an ISO 7000 icon library as a \l [QtQuickExtras] {Picture} component. The icon to use for the type and its color can be specified. @@ -223,7 +226,7 @@ \image studio-iso-icon.png You can use the \l{Picking Colors}{color picker} in \l Properties to - set the icon color. + set the value of \uicontrol {Icon color}. \image iso-icon-browser.png \endif @@ -270,6 +273,8 @@ \li \li An icon from an ISO 7000 icon library specified as a \l Picture component. You can select the icon to use and its color. + + \note This component is not supported on Qt 6. \endif \endtable */ diff --git a/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc index 40ecbe98631..0f110e2fee8 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc @@ -84,6 +84,7 @@ \li \l {Scene Environment} \li \l {Morph Target} \li \l {Repeater3D} + \li \l {Loader3D} \endlist When you import 3D scenes from files that you exported from 3D graphics diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc index abb179bfc39..c0db8d22e79 100644 --- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc @@ -50,6 +50,11 @@ Similarly, you can add custom properties for your own components that are based on preset components. + Any content that is data-driven should be exported as a public property + (alias property) of the relevant component. For example, a speedometer + should have an \e int or \e real property for speed to which the UI is + bound. + You can add properties for components in \l {Connection View} > \uicontrol Properties. diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc index f1d39786b7e..754066a93c4 100644 --- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc @@ -93,7 +93,7 @@ For examples of using the \uicontrol {Connections} view, see: \list - \li \l{Connecting Buttons to States} in \l{Log In UI - Part 3} + \li \l{Connecting Buttons to States} in \l{Log In UI - States} \li \l{Connecting Buttons to State Changes} in \l{Washing Machine UI} \endlist \endif diff --git a/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc b/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc index 9141b442c75..1b7be831024 100644 --- a/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc @@ -61,7 +61,7 @@ state change. \if defined(qtdesignstudio) - The \l{Log In UI - Part 3} example illustrates using states to create + The \l{Log In UI - States} example illustrates using states to create two UI screens and signals emitted by buttons to apply the states. The button components also switch states when they are pressed down. diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc index 1b83f5ae694..71d4eba388c 100644 --- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-states.qdoc @@ -58,7 +58,7 @@ by using a \l{Creating Custom Controls}{wizard template}. For more information about editing the states within the button component and hiding and showing buttons to create several screens, see - \l{Log In UI - Part 1} and \l{Log In UI - Part 3}. + \l{Log In UI - Components} and \l{Log In UI - States}. \endif To add motion to a screen, you can change the position of a component diff --git a/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc b/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc index 3228056f869..246442def94 100644 --- a/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc @@ -69,7 +69,7 @@ \youtube V3Po15bNErw \if defined(qtdesignstudio) - To try it yourself, follow the \l{Log In UI - Part 4} tutorial. + To try it yourself, follow the \l{Log In UI - Timeline} tutorial. \endif diff --git a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf index 587dd583b40..3e333d3b640 100644 --- a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf +++ b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf @@ -69,7 +69,8 @@ excludedirs += ../../qtcreator/examples/accelbubble \ exampledirs = ../examples/ \ ../../qtcreator/examples -examples.fileextensions += *.qml *.svg *.ts *.qm +examples.fileextensions += *.qml *.ts *.qm +examples.imageextensions = "*.svg *.png *.jpg *.gif" depends += qtwidgets \ qtcore \ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.jpg new file mode 100644 index 00000000000..0bac23dd186 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png deleted file mode 100644 index 890bf0ce9fe..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png deleted file mode 100644 index e314e7dcfe4..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png deleted file mode 100644 index 1a053715c7d..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png deleted file mode 100644 index e0494bce083..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png index c7c1a03d298..2f15db64fdd 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg new file mode 100644 index 00000000000..ef441b60a67 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png index c16f35e88fe..88981ca72db 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg new file mode 100644 index 00000000000..999959b20bf Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png deleted file mode 100644 index 56e1d313ad4..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-library.jpg new file mode 100644 index 00000000000..c5f8f1c4111 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-library.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png deleted file mode 100644 index 809f8a14e2e..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.jpg new file mode 100644 index 00000000000..ed036e37f2e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png deleted file mode 100644 index f2fb3340ec9..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png index 20c5785d350..47ff9b43032 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png index 9aa778fa029..93ca7c6c8c9 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.jpg new file mode 100644 index 00000000000..eef48f2a653 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png deleted file mode 100644 index d02864703e9..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-text-font-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-text-font-properties.png deleted file mode 100644 index 7fe7abbf460..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-text-font-properties.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties-button.png new file mode 100644 index 00000000000..072f399970d Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties-button.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png index 1aaba0b9a78..67d57812a45 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1.jpg new file mode 100644 index 00000000000..0a50f3005e9 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1.png b/doc/qtdesignstudio/examples/doc/images/loginui1.png deleted file mode 100644 index 541e8d9b9dc..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1.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/images/loginui3-base-state.jpg b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.jpg new file mode 100644 index 00000000000..0b9ac89b4a8 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png deleted file mode 100644 index d9f10117032..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png index 81886e475b3..6ebf2f0e470 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state-preview.jpg b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state-preview.jpg new file mode 100644 index 00000000000..26159f9be48 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state-preview.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg new file mode 100644 index 00000000000..ab76d81007c Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png deleted file mode 100644 index fe00720aabc..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg b/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg new file mode 100644 index 00000000000..b7192194ec6 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png deleted file mode 100644 index 34374504e8d..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png index 2f3c65eae52..48bedc6a485 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3.gif b/doc/qtdesignstudio/examples/doc/images/loginui3.gif index 3e4c321e8a5..0179e2828b8 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3.gif and b/doc/qtdesignstudio/examples/doc/images/loginui3.gif differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png new file mode 100644 index 00000000000..7d1e60c7a24 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png new file mode 100644 index 00000000000..6f582f6d46e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png new file mode 100644 index 00000000000..66f42f9210b Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png deleted file mode 100644 index 2743c56b713..00000000000 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png index c1eda5a125e..119fb89a9da 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png index 6e830752a6b..25f06f380ad 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png index 38dbb31de74..f36bcfb215e 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png index a9fa47c4381..67b0c041b70 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4.gif b/doc/qtdesignstudio/examples/doc/images/loginui4.gif index 9a28af1fdca..35d2737cdc7 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4.gif and b/doc/qtdesignstudio/examples/doc/images/loginui4.gif differ diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index e9585fda00e..73bd0ebdf42 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -27,20 +27,20 @@ \example loginui1 \ingroup studioexamples \ingroup gstutorials - \nextpage {Log In UI - Part 2} + \nextpage {Log In UI - Positioning} - \title Log In UI - Part 1 - \brief Illustrates how to use wizard templates to create a simple UI that - contains a text label, push buttons, and a logo. + \title Log In UI - Components + \brief Illustrates how to use wizard templates to create a simple UI + wireframe that contains a text label, images, and push buttons. - \image loginui1.png + \image loginui1.jpg - \e{Log In UI - Part 1} is the first 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 fields. Part 1 describes - how to use the \QDS wizard templates to create a project and a - button UI control, and how to modify the files generated by the wizard - templates to design your own UI. + \e{Log In UI - Components} is the first 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 fields. The first tutorial + in the series describes how to use the \QDS wizard templates to create a + project and a button UI control, and how to modify the files generated by + the wizard templates to wireframe the UI. The \e {Learn More} sections provide additional information about the tasks performed by the wizards and about other basic tasks and concepts. @@ -67,9 +67,10 @@ \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 the initial - size of the UI. In this tutorial, we use the smallest predefined - size, \e {640 x 480}. You can easily change the screen size later - in \l Properties. + size of the UI. In this tutorial, we use the predefined size + \e {720 x 1280 (HD)} (portrait) instead of the default size + (landscape). You can easily change the screen size later in + \l Properties. \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create the project. \endlist @@ -115,41 +116,55 @@ \li The \e {qtquickcontrols2.conf} file specifies the selected \l {Styling Qt Quick Controls}{UI style} and some style-specific arguments. - \li The \e imports folder contains a \e {Constants.qml} file that - specifies a font loader for the Arial font and a \e qmldir module - definition file that declares the Constant component. For more - information, see \l {Module Definition qmldir Files}. The - \e EventListModel.qml and \e EventListSimulator.qml files are - not used in this example, so you can ignore them for now. + \li The \e imports folder contains \e {Constants.qml} and + \e {DirectoryFontLoader.qml} files that specify a font loader + and a \e qmldir module definition file that declares the Constant + component. For more information, see + \l {Module Definition qmldir Files}. The \e EventListModel.qml and + \e EventListSimulator.qml files are not used in this example, so + you can ignore them for now. \endlist - UI files define a hierarchy of components with a highly-readable, structured - layout. Every UI file consists of two parts: an imports section and an - component declaration section. The components and functionality most common to - UIs are provided in the QtQuick import. You can view the code of an - .ui.qml file in the \l{Text Editor} view. + \l{UI Files}{UI files} define a hierarchy of components with a + highly-readable, structured layout. Every UI file consists of two parts: + an imports section and an component declaration section. The components and + functionality most common to UIs are provided in the \c QtQuick import. You + can view the code of a \e .ui.qml file in the \l{Text Editor} view. Next, you will edit the values of the properties of the component instances to create the main page of the UI. \section1 Creating the Main Page - You will now change the values of the properties of the \l{basic-rectangle} - {Rectangle} component instance to add a gradient to the UI background and - those of the \l Text component instance 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. + You will now change the values of the properties of the \l Text component + instance to create a tag line using a custom font. You will add the font + as an asset and set it to be used in the properties of the component. + In addition, you will import a background image and logo as assets and + add them to the page as instances of the \l{Images}{Image} component. - To add an image to your UI, you should first 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. Next, you need to add the image to \l Library: + You can download the logo and the background image from here: + + \list + \li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_128x128px.png} + {qt_logo_green_128x128px.png} + \li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/adventurePage.jpg} + {Background image} (\e adventurePage.jpg) + + Photo by \l{https://unsplash.com/photos/a2MgJdG6UvE} + {Benjamin DeYoung} on \l{https://unsplash.com}{Unsplash}. + \endlist + + You can download the font from + \l{https://fonts.google.com/specimen/Titillium+Web#standard-styles} + {Titillium Web ExtraLight font} or use Arial as a substitute. + + To add the assets to \l Library: \list 1 \li Select \uicontrol Library > \uicontrol Assets > \inlineimage plus.png . - \li Select the image file, and then select \uicontrol Open. - \li Select the location where the image will be saved in the + \li Select the asset files, and then select \uicontrol Open. + \li Select the location where the files will be saved in the \uicontrol {Add Resources} dialog. \li Select \uicontrol OK. \endlist @@ -166,42 +181,35 @@ To modify the \e Screen01 component in \uicontrol {Form Editor}: \list 1 - \li Select the \e Rectangle instance in the \l Navigator view to display - its properties in the \l Properties view. - \li In the \uicontrol Color field, select the - \inlineimage icon_color_gradient.png - (\uicontrol {Linear Gradient}) button to add a linear gradient to - the screen background. Click the start point (1) and end point (2) - to specify the gradient colors. Drag-and-drop the points along the - gradient bar to specify where the gradient starts and ends. In this - tutorial, the color changes from white to green (#41cd52), starting - mid-screen, at position 0.5. You can use your favorite colors or - select a predefined gradient in the \uicontrol {Gradient Picker}. - For more information, see \l{Picking Gradients}. - \image loginui1-background-gradient.png "Rectangle color properties" - \li Select \e Text in \uicontrol Navigator to display its properties in - \uicontrol 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. - \image loginui1-text-properties.png "Text properties" - \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. - \image loginui1-text-font-properties.png "Font properties" - \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 \uicontrol Library > \uicontrol Assets - to the top-left corner of the rectangle. - \image loginui1-library-assets.png "Library view Assets tab" - \QDS automatically creates an instance of the \l{Images}{Image} - component for you with the path to the image file set as the value of - the \uicontrol Source field in \uicontrol Properties. + \li Drag-and-drop the background image from \uicontrol Library > + \uicontrol Assets to the rectangle in \l Navigator. + \image loginui1-library-assets.jpg "Library view Assets tab" + \li \QDS automatically creates an instance of the \l{Images}{Image} + component for you with the path to the image file set as the + value of \l Properties > \uicontrol Image > \uicontrol Source. \image loginui1-image-properties.png "Image properties" - \li In the \uicontrol ID field, change the ID of the image to \e logo. + \li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle + in \uicontrol Navigator and move it to the top-center of the + background image in \uicontrol {Form Editor}. + \li Select \e Text in \uicontrol Navigator and drag it below the logo + in \uicontrol {Form Editor}. If the text is hidden behind the + background, select \inlineimage icons/navigator-arrowdown.png + in \uicontrol Navigator to move the text as the last item in the + component tree structure. The text should then appear on top + of the background. + \li Edit text properties in \uicontrol Properties: + \list a + \li In \uicontrol Component > \uicontrol ID, enter the ID + \e tagLine. + \li In \uicontrol Character > \uicontrol Text, enter the tag + line: \e {Are you ready to explore?}. + \image loginui1-text-properties.png "Text properties" + \li In \uicontrol Font, select \e {Titillium Web ExtraLight}. + \li In \uicontrol Size, set the font size of the tag line to + \e 50 pixels (\uicontrol px). + \li In \uicontrol {Text color}, set the text color to white + (\e #ffffff). + \endlist \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -209,7 +217,9 @@ Your UI should now look something like this in \uicontrol {Form Editor} and live preview: - \image loginui1-main-page.png "Modified UI in the Design mode" + \image loginui1-main-page.jpg "Modified UI in the Design mode" + + You can resize the preview dialog to display the whole screen. \section2 Learn More - Components @@ -236,7 +246,7 @@ The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image} components used in this tutorial are based on the \l Item component. It is the base component for all visual elements, with implementation - of basic functions and properties, such as component name, ID, position, + of basic functions and properties, such as component type, ID, position, size, and visibility. For more information, see \l{Use Case - Visual Elements In QML}. For @@ -264,19 +274,6 @@ properties for each text component, such as size in points or pixels, weight, style, and spacing. - To add custom fonts in the list of available fonts in \l Properties: - - \list 1 - \li Select \uicontrol Library > \l Assets - > \inlineimage plus.png - . - \li Browse to the folder that contains the font files and select them, - and then select \uicontrol Open. - \li Select the location where the file will be saved in the - \uicontrol {Add Resources} dialog. - \li Select \uicontrol OK to save the fonts. - \endlist - If you want to create a label with a background, use the \l Label component from the \uicontrol {Qt Quick Controls} module instead of the Text component. @@ -284,9 +281,8 @@ The \l {Images}{Image} component 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. To add an image you wish to use in your - designs to \uicontrol Library, select \uicontrol Library > \uicontrol Assets - > \inlineimage plus.png + graphics formats such as SVG. To add an image to \uicontrol Library, select + \uicontrol Assets > \inlineimage plus.png , and then select the image file. If you need to display animated images, use the \l {Animated Image} @@ -298,11 +294,11 @@ You can use another wizard template to create a push button and to add it to the project. The wizard template creates a reusable button component that appears in \uicontrol Library > \uicontrol Components > - \uicontrol {My Components}. You can drag-and-drop it to \l {Form Editor} + \uicontrol {My Components}. You can drag-and-drop it to \l Navigator to create button instances and modify their properties in the \uicontrol Properties view to change their appearance and functionality. - If you find that you cannot use the wizard template nor the preset + If you cannot use the wizard template nor the preset button controls available in \uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick Controls} to create the kind of push button that you want, you can create your button from scratch using default components. For @@ -316,9 +312,9 @@ \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} > \uicontrol {Custom Button} > \uicontrol Choose. \li In the \uicontrol {Component name} field, enter a name for your - button component: \e {PushButton}. + button component: \e {EntryField}. \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create - the button. + the button UI file, \e EntryField.ui.qml. \endlist Your button should now look something like this in the \uicontrol Design @@ -336,20 +332,20 @@ you to set text, display an icon, react to mouse clicks, and so on. To be able to use the functionality of the Button control, the wizard template - adds the following \e import statements to the \e PushButton.ui.qml file: + adds the following \e import statements to the \e EntryField.ui.qml file: - \quotefromfile loginui1/PushButton.ui.qml + \quotefromfile loginui1/EntryField.ui.qml \skipto import \printuntil Controls - Next, you will change the appearance of the PushButton component by + Next, you will change the appearance of the EntryField component by modifying its properties. \section1 Styling the Button - You can now modify the properties of the PushButton component to your - liking. To make the changes apply to all the PushButton instances, you - must make them in the \e PushButton.ui.qml file. + You can now modify the properties of the EntryField component to your + liking. To make the changes apply to all the EntryField instances, you + must make them in the \e EntryField.ui.qml file. The Custom Button wizard template adds a \e normal state and a \e down state to change the button background and text color when the button is clicked. @@ -357,98 +353,149 @@ button in the \e base state, they are automatically applied to the other states. However, the property values that have been explicitly changed in the \e normal or \e down state are not changed automatically and you have - to change them separately in that state. + to either reset them to the base state or set them separately in that state. To change the button property values: \list 1 + \li Select \e control in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button + width (\uicontrol W) to \e 500 and height (\uicontrol H) + to \e 100, to match the width of the tag line. + \li In the \uicontrol Control section, deselect the \uicontrol Hover + check box because we don't want the hover effect for the button. \li Select the button background in \uicontrol Navigator to display its properties in \uicontrol Properties. - \li In the \uicontrol Color field, select - \inlineimage icon_color_none.png - to use a solid background color (white) instead of transparent. - \li In the \uicontrol {Border Color} field, select - \inlineimage icons/action-icon.png - (\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" - \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 + \li In \uicontrol Rectangle > \uicontrol {Fill color}, set the color to + transparent light gray (\e #28e7e7e7) in \uicontrol Hex. You can + also use the \l{Picking Colors}{color picker} to set the color. + \li In \uicontrol {Border Color}, select white (\e #ffffff). + \li In \uicontrol Radius, enter \e 50 to give the button rounded corners. - \li In the \uicontrol States view, select the \e normal state and set - the background color to white and the border color to green, as - instructed above. Repeat for the \e down state. - \li Select the \e base state, and then select the text component - in \uicontrol Navigator to display its properties in - \uicontrol Properties. - \li In the \uicontrol {Text Color} field, select \uicontrol Actions > - \uicontrol Reset to reset the text color to the default color, - black. - \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 the same green as the border. + \li Select the text component in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol Character > \uicontrol Font, select + \e {Titillium Web ExtraLight}. + \li In \uicontrol Size, set the font size to \e 34 pixels + (\uicontrol px). + \li In \uicontrol {Text color}, set the text color to white + (\e #ffffff). + \li In \uicontrol {Alignment H}, select the \uicontrol Left button to + align the text horizontally to the left. + \li In the \uicontrol Padding section > \uicontrol Horizontal > + \uicontrol Left, set the padding in the field between background + border and text to \e 50. + \image loginui1-text-properties-button.png "Text properties" + \li In the \uicontrol States view, select the \e normal state and + repeat the changes in the background color and text properties, + as necessary. Repeat for the \e down state. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist Your button should now look something like this: - \image loginui1-button-styled.png "Modified button in the Form Editor" + \image loginui1-entry-field-styled.jpg "Modified button in the Form Editor" - \section2 Learn More - Property Bindings + Next, you will add instances of the \e EntryField component to the + \e Screen01 component and modify their properties. - A component's property can be assigned a static value which stays constant - until it is explicitly assigned a new value. In this tutorial, the color - values you set in \uicontrol {Binding Editor} are static. + \section1 Adding Entry Fields to the UI - However, to make the fullest use of the built-in support for dynamic - component behavior, you can use property bindings that specify relationships - between different component properties. When a property's dependencies change - in value, the property is automatically updated according to the specified - relationship. + You will now add EntryField instances to the UI and modify their properties. - Behind the scenes, the property's dependencies are monitored (that is, the - variables in the binding expression). When a change is detected, the binding - expression is re-evaluated and the new result is applied to the property. + \list 1 + \li Double-click \e Screen01.ui.qml in \uicontrol Projects + to open it in \uicontrol {Form Editor}. + \li Drag-and-drop two instances of the EntryField component from + \uicontrol Library > \uicontrol Components > + \uicontrol {My Components} to the rectangle in \uicontrol Navigator. + \image loginui1-library.jpg "My Components tab of Library view" + \li Select the first EntryField instance in \uicontrol Navigator + to modify its ID and text in \uicontrol Properties. + \li In \uicontrol Component > \uicontrol ID, enter \e username. + \li In \uicontrol {Button Content} > \uicontrol Text, enter + \e {Username or Email} and select \uicontrol tr to mark the text + \l {Internationalization and Localization with Qt Quick} + {translatable}. + \li Select the second EntryField instance, and change its ID to + \e password and text to \e Password. Again, mark the text + translatable. + \li Move the cursor on the selected button instance to make the + selection icon appear. You can now drag the button instance + to another position in \uicontrol {Form Editor}. Use the + guidelines to align the button instances below the tag line: + \image loginui1-align-buttons.jpg + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist - For more information, see \l {Property Binding}. + \section1 Creating Another Button - Next, you will add two instances of the \e PushButton component to the - \e Screen01 component and modify their text labels. + We want to center-align the text of two additional push buttons and use + brighter colors for them, so we create a second button component as + instructed in \l{Creating a Push Button}. This time we call it + \e PushButton. - \section1 Adding Buttons to the UI + To make the changes apply to all the PushButton instances, you + must make them in the \e PushButton.ui.qml file. - You will now add two PushButton instances to the UI and modify their labels. + To change the button property values: + + \list 1 + \li Select \e control in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button + width (\uicontrol W) to \e 500 and height (\uicontrol H) + to \e 100. + \li In the \uicontrol Control section, deselect the \uicontrol Hover + check box because we don't want the hover effect for the button. + \li Select the button background in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol Rectangle > \uicontrol {Border color}, select the + green used in the logo (\e #41cd52). + \li In \uicontrol Radius, enter \e 50 to give the button rounded + corners. + \li Select the the text component in \uicontrol Navigator to display + its properties in \uicontrol Properties. + \li In \uicontrol Character > \uicontrol Font, select + \e {Titillium Web ExtraLight}. + \li In \uicontrol Size, set the font size to \e 34 pixels. + \li In \uicontrol {Text color}, set the text color to \e #41cd52. + \li In the \uicontrol States view, select the \e normal state and repeat + the changes, as necessary. + \li Repeat for the \e down state. However, in \uicontrol Rectangle > + \uicontrol {Fill color}, set the color to green (\e #41cd52) to + turn the button background green when the button is pressed down. + Also, in \uicontrol Text > \uicontrol Character > + \uicontrol {Text color}, keep the text color as white (\e #ffffff). + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + \section1 Adding Push Buttons to the UI + + You will now add PushButton instances to the UI and modify their properties. \list 1 \li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it in \uicontrol {Form Editor}. \li Drag-and-drop two instances of the PushButton component from - \uicontrol Library > \uicontrol Components > \uicontrol {My Components} - to \uicontrol {Form Editor}. - \image loginui1-library.png "My Components tab of Library view" - \li Select one of the PushButton instances in \uicontrol Navigator + \uicontrol Library > \uicontrol Components > + \uicontrol {My Components} to the rectangle in \uicontrol Navigator. + \li Drag the button instances to the bottom of the background image in + \uicontrol {Form Editor}. Use the guidelines to align the button + instances horizontally with the entry fields. + \li Select the first PushButton instance in \uicontrol Navigator to modify its ID and text label in \uicontrol Properties. - \li In the \uicontrol ID field, enter \e loginButton. - \li In the \uicontrol Text field, enter \e {Log In} and select - \uicontrol tr to mark the text - \l {Internationalization and Localization with Qt Quick} - {translatable}. - \li Select the other PushButton instance, and change its ID to - \e registerButton and text label to \e {Create Account}. - Again, mark the text translatable. - \li When a component instance is selected, selection handles are - displayed in its corners and on its sides. Use the selection - handles to resize the button instances so that the text fits - comfortably on the button background. - In this tutorial, the button width is set to 120 pixels. - \li Move the cursor on the selected button instance to make the - selection icon appear. You can now drag the button instance - to another position in \uicontrol {Form Editor}. Use the - guidelines to align the button instances below the page title: - \image loginui1-align-buttons.png + \li In \uicontrol Component > \uicontrol ID, enter \e login. + \li In \uicontrol {Button Content} > \uicontrol Text, enter + \e Continue and select \uicontrol tr to mark the text + translatable. + \li Select the second PushButton instance, and change its ID to + \e createAccount and text label to \e {Create Account}. Again, + mark the text translatable. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -456,7 +503,7 @@ The first iteration of your UI is now ready and should now look something like this in \uicontrol {Form Editor} and live preview: - \image loginui1-ready.png "The finished UI in Form Editor" + \image loginui1-ready.jpg "The finished UI in Form Editor" \section2 Learn More - Component IDs @@ -472,7 +519,7 @@ To learn how to add more UI controls and position them on the page using anchors and layouts so that the UI is scalable, see the next tutorial in - the series, \l {Log In UI - Part 2}. + the series, \l {Log In UI - Positioning}. For a more advanced example of creating a menu button and using it to construct a button bar, see \l {Side Menu}. diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc index 58cdff97c90..0a74a67f850 100644 --- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc @@ -27,39 +27,41 @@ \example loginui2 \ingroup studioexamples \ingroup gstutorials - \previouspage {Log In UI - Part 1} - \nextpage {Log In UI - Part 3} + \previouspage {Log In UI - Components} + \nextpage {Log In UI - States} - \title Log In UI - Part 2 + \title Log In UI - Positioning \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 - Part 2} is the second in a series of tutorials that build + \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 with different screen sizes, you will use anchors and positioners. - These instructions build on \l {Log In UI - Part 1}. + These instructions build on \l {Log In UI - Components}. The \e {Learn More} sections provide additional information about the task at hand. \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 @@ -197,6 +198,6 @@ \section1 Next Steps To learn how to add a second page and move to it from the main page, see - the next tutorial in the series, \l {Log In UI - Part 3}. + the next tutorial in the series, \l {Log In UI - States}. */ diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc index 6981cf5218f..a7a919319cf 100644 --- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc @@ -28,29 +28,30 @@ \ingroup studioexamples \ingroup gstutorials - \title Log In UI - Part 3 + \title Log In UI - States \brief Illustrates how to use states to create a second UI page. - \previouspage {Log In UI - Part 2} - \nextpage {Log In UI - Part 4} + \previouspage {Log In UI - Positioning} + \nextpage {Log In UI - Timeline} \image loginui3.gif "Log In UI" - \e{Log In UI - Part 3} is the third in a series of tutorials that build + \e{Log In UI - States} is the third 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 3 - describes how to use \e states to add a second page to the UI. On the - first page, users can enter a username and password to log in. On the - second page, they can register if they do not already have an account. + some basic UI components, such as pages, buttons, and entry fields. The + third tutorial in the series describes how to use \e states to add a + second page to the UI. On the first page, users can enter a username + and password to log in. On the second page, they can register if they + do not already have an account. Because the second page will contain most of the same UI components as the login page, you will use \e states to show and hide UI components as necessary - when a user selects the \uicontrol {Create Account} button. + when a user selects the \e {Create Account} button. These instructions build on: \list - \li \l {Log In UI - Part 1} - \li \l {Log In UI - Part 2} + \li \l {Log In UI - Components} + \li \l {Log In UI - Positioning} \endlist The \e {Learn More} sections provide additional information relevant to the @@ -58,93 +59,82 @@ \section1 Adding UI Components - You will add another text field for verifying the password that users - enter to create an account and a back button for returning to the login - page. You are already familiar with the tasks in this section from Part 1 - and Part 2 of this tutorial. + You will add another entry field for verifying the password that users + enter to create an account. You are already familiar with the tasks in + this section from previous parts of the tutorial. To preview the changes that you make to the UI while you make them, select the \inlineimage live_preview.png (\uicontrol {Show Live Preview}) button on the \l {Form Editor} toolbar or press \key {Alt+P}. - To add the text field and a back button needed on the registration page - to the \e Screen01 component: + To add the entry field needed on the second page to the \e Screen01 + component: \list 1 - \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing. - \li Drag-and-drop a \uicontrol {Text Field} from \l Library - > \uicontrol Components > \uicontrol {Qt Quick Controls} to - \e fieldColumn in \l Navigator. - \li In \l Properties, change the ID of the text field to - \e verifyPasswordField. - \li In the \uicontrol Geometry group, \uicontrol Size field, set the - width of the field to \e 300 pixels to match the size of the - existing fields. - \li In the \uicontrol Placeholder field, set the placeholder text to - \e {Verify password} and mark the text translatable. - \li Drag-and-drop a PushButton component from \uicontrol Library > - \uicontrol Components > \uicontrol {My Components} to the root - rectangle in \uicontrol Navigator. - \li Select the button in \uicontrol Navigator and change its ID to - \e backButton in \uicontrol Properties. - \li In the \uicontrol Geometry group, \uicontrol Size field, set the - button width to \e 40 pixels to create a small round button. - \li In the \uicontrol Text field, enter \e <. - \li In the \uicontrol Font group, \uicontrol Size field, set the font - size to \e 24 pixels. - \li Under \uicontrol Layout, select the \inlineimage icons/anchor-top.png - (\uicontrol Top) and \inlineimage icons/anchor-right.png - (\uicontrol Right) anchor buttons to anchor \e backButton to - the top right corner of its parent with 20- and 10-pixel margins, - respectively. + \li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it + in \uicontrol {Form Editor}. + \li Drag-and-drop an instance of the EntryField component from + \uicontrol Library > \uicontrol Components > + \uicontrol {My Components} to \e fields in \l Navigator. + \li Select the EntryField instance in \uicontrol Navigator to modify + its ID and text in \uicontrol Properties. + \li In \uicontrol Component > \uicontrol ID, enter + \e repeatPassword. + \li In \uicontrol {Button Content} > \uicontrol Text, enter + \e {Repeat Password} and select \uicontrol tr to mark the text + translatable. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist - \e Screen01 should now look something like this in the \uicontrol Design - mode and live preview: + \e Screen01 should now look something like this in \uicontrol {Form Editor}: - \image loginui3-base-state.png "Login page with new UI components" + \image loginui3-base-state.jpg "Login page with a Repeat Password field" - Next, you will add states for the login page and the registration page, - where you use the visibility property to hide the password verification - field and the back button on the login page and the login button on the - registration page. + Next, you will add states for the login page and the account creation page, + where you use the visibility property to hide the repeat password field on + the login page and the \e {Create Account} button on the account creation + page. \section1 Using States to Simulate Page Changes You will now add \l{Adding States}{states} to the UI to show and hide UI - components in the \uicontrol {Form Editor}, depending on the current page: + components in \uicontrol {Form Editor}, depending on the current page: \list 1 \li In the \l States view, select \uicontrol {Create New State}. - \image loginui3-login-state.png "States view" - \li Enter \e loginState as the state name. - \li Select \e verifyPasswordField in the \uicontrol Navigator, - and deselect the \uicontrol Visibility check box in - \uicontrol Properties to hide the verify password field in - the login state. + \li Enter \e login as the state name. + \image loginui3-login-state.jpg "States view" + \li Select \e repeatPassword in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In the \uicontrol Visibility section, deselect the + \uicontrol Visible check box to hide the repeat + password field in the login state. \image loginui3-visibility.png - \li Repeat the above step for \e backButton to hide it, too. \li In \uicontrol States, select \inlineimage icons/action-icon.png - for \e loginState to open the \uicontrol Actions menu, and then - select \uicontrol {Set as Default} to determine that \e loginState - is applied when the application starts. + for \e login to open the \uicontrol Actions menu, and then + select \uicontrol {Set as Default} to determine that the \e login + state is applied when the application starts. \li With the base state selected, add another state and name it - \e registerState. This state should now look identical to the base + \e createAccount. This state should now look identical to the base + state. + \li Select \e createAccount in the \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol Visibility, deselect the \uicontrol Visible check box + to hide the \e {Create Account} button in the account creation state. - \li Select \e loginButton in the \uicontrol Navigator, and deselect - the \uicontrol Visibility check box in \uicontrol Properties to - hide the login button in the registration state. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist - You can now see all the states in the \uicontrol States view. The live - preview displays the default state, \e loginState: + You can now see all the states in the \uicontrol States view: - \image loginui3-states.png "States view" + \image loginui3-states.jpg "All states in the States view" + + The live preview displays the default state, \e login: + + \image loginui3-login-state-preview.jpg "Preview of the login state" \section2 Learn More - States @@ -171,9 +161,7 @@ Next, you will create connections to specify that clicking the \uicontrol {Create Account} button on the login page triggers a - transition to the registration page and that clicking the back - button on the registration page triggers a transition to the login - page. + transition to the account creation page. \section1 Connecting Buttons to States @@ -183,35 +171,27 @@ is clicked within the area. You will now use \l {Connection View} to - \l{Connecting Components to Signals}{connect} the clicked signal of - \e registerButton to \e registerState and that of \e backButton - to \e loginState: + \l{Connecting Components to Signals}{connect} the clicked signal of the + \e createAccount button to \e createAccount state: \list 1 \li Select \uicontrol View > \uicontrol Views > \uicontrol {Connection View} to open the \uicontrol Connections tab. - \li Select \e registerButton in the \uicontrol Navigator. + \li Select \e createAccount in \uicontrol Navigator. \li In the \uicontrol Connections tab, select the \inlineimage plus.png button to add the action that the \c onClicked signal handler of - \e registerButton should apply. + \e createAccount should apply. \li Double-click the value \uicontrol Action column and select - \uicontrol {Change state to registerState} in the drop-down menu. - \li Repeat the steps above to connect \e backButton to \e loginState - by selecting \uicontrol {Change state to loginState} in the last - step. + \uicontrol {Change state to createAccount} in the drop-down menu. + \image loginui3-connections.png "Connections tab" \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist - You can now see the following connections in the \uicontrol Design mode: - - \image loginui3-connections.png "Connections tab" - In the live preview, you can now click the \uicontrol {Create Account} - button to go to the registration page and the back button to return to - the login page. + button to go to the account creation page. - \image loginui3.gif "Moving between login page and registration page" + \image loginui3.gif "Moving between login page and account creation page" \section2 Learn More - Signal and Event Handlers @@ -220,11 +200,11 @@ needs to know that the user has clicked on it. In response, the button may change color to indicate its state and perform an action. - A \e {signal-and-handler} mechanism is used, where the \e signal is the - event that is responded to through a \e {signal handler}. When a signal is - emitted, the corresponding signal handler is invoked. Placing logic, such - as a script or other operations, in the handler allows the component to - respond to the event. + To accomplish this, a \e {signal-and-handler} mechanism is used, where the + \e signal is the event that is responded to through a \e {signal handler}. + When a signal is emitted, the corresponding signal handler is invoked. + Placing logic, such as a script or other operations, in the handler allows + the component to respond to the event. For more information, see \l{Signal and Handler Event System}. @@ -236,6 +216,6 @@ \l{Lists and Other Data Models}. To learn how to use a timeline to animate the transition between the login - and registration pages, see the next tutorial in the series, - \l {Log In UI - Part 4}. + and account creation pages, see the next tutorial in the series, + \l {Log In UI - Timeline}. */ diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc index 0d7024776bf..b88c122558c 100644 --- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc @@ -28,30 +28,31 @@ \ingroup studioexamples \ingroup gstutorials - \title Log In UI - Part 4 + \title Log In UI - Timeline \brief Illustrates how to use the timeline and states to animate UI components. - \previouspage {Log In UI - Part 3} + \previouspage {Log In UI - States} \image loginui4.gif "Log In UI" - \e{Log In UI - Part 4} is the fourth in a series of tutorials that build + \e{Log In UI - Timeline} is the fourth 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 4 - describes how to use the timeline and states to animate UI components. + some basic UI components, such as pages, buttons, and entry fields. The + fourth part of the tutorial describes how to use the timeline and states + to animate UI components. - In Part 3, you learned how to use states to simulate page changes - in a UI and connections to provide user interaction with it. In - Part 4, you will now learn another way of animating the UI by creating + In \l {Log In UI - States}, you learned how to use states to simulate page + changes in a UI and connections to provide user interaction with it. In + this part, you will now learn another way of animating the UI by creating \l{Creating Timeline Animations}{timeline animations} that you bind to states. These instructions build on: \list - \li \l {Log In UI - Part 1} - \li \l {Log In UI - Part 2} - \li \l {Log In UI - Part 3} + \li \l {Log In UI - Components} + \li \l {Log In UI - Positioning} + \li \l {Log In UI - States} \endlist The \e {Learn More} sections provide additional information relevant to the @@ -59,18 +60,18 @@ \section1 Animating UI Components - In Part 3, you changed the visibility property in different states to - simulate changing pages. To make sure that those changes won't interfere - with the changes to the opacity property you will make in Part 4, you will - first remove the states. + In \l {Log In UI - States}, you changed the visibility property in different + states to simulate changing pages. To make sure that those changes won't + interfere with the changes to the opacity property you will make next, you + will first remove the states. Then, you will add a timeline and insert keyframes for the opacity property - to hide the password verification field and back button on the login page - and the login button on the registration page. Because we want the password - verification field to appear to slide down from the password field, you will - also need to insert a keyframe for its anchor margin property. To be able to - animate the anchor, you also need to pull out the fields from the fields - column and anchor them to the page and to each other instead. + to hide the \e {Retype Password} field on the login page and the + \e {Create Account} button on the account creation page. Because we want the + retype password field to appear to slide down from the password field, you + will also need to insert a keyframe for its anchor margin property. To be + able to animate the anchor, you also need to pull out the fields from the + column component and anchor them to the rectangle and to each other instead. To preview the changes that you make to the UI while you make them, select the \inlineimage live_preview.png @@ -82,39 +83,47 @@ First, you will prepare the \e Screen01 component for adding animation: \list 1 - \li Open \e {Screen01.ui.qml} in \l {Form Editor} for editing. - \li In the \l States view, select the \inlineimage close.png - (\uicontrol Close) button in \e loginState and \e registerState - to remove the states. - \li Select the fields in \e fieldColumn in \l Navigator - and drag and drop them to their parent rectangle to prepare for - deleting the column component. - \li Select \e fieldColumn in \uicontrol Navigator and press - \key Delete to delete it. - \li Select \e usernameField in \uicontrol Navigator. - \li In \l Properties > \uicontrol Layout, select the - \inlineimage icons/anchor-top.png - (\uicontrol Top) button to anchor the top of the field to the top - of its parent. \QDS will suggest an appropriate margin based on - the current position of the field on the y axis, 200 pixels. - \li Select the \inlineimage icons/anchor-center-horizontal.png - (\uicontrol {Horizontal Center}) button to anchor - the horizontal center of the field to that of its parent. - \li Select \e passwordField, and then select the \uicontrol Top - button in \uicontrol Properties > \uicontrol Layout. - \li In the \uicontrol Target field, select \e usernameField to anchor - the top of \e passwordField to the bottom of \e usernameField - with a 5-pixel margin. - \li Select the \uicontrol {Horizontal Center} button to anchor the - horizontal center of \e passwordField to that of \e usernameField. - \li Repeat the above steps to anchor the top of \e verifyPasswordField - to the bottom of \e passwordField with a 5-pixel margin and to - anchor its horizontal center to that of \e passwordField. + \li Double-click \e Screen01.ui.qml in \l Projects to open it + in \l {Form Editor}. + \li In the \l States view, select \e login, and then select + \inlineimage close.png + to remove the state. Repeat for the \e createAccount state. + \li Select \e username in \l Navigator, and then select + \inlineimage arrowleft.png + to move it into the parent rectangle to prepare for + deleting the \e fields column component instance. + \li Select \inlineimage icons/navigator-arrowup.png + to move \e username below \e tagLine in \uicontrol Navigator + to preserve the \l{Arranging Components}{component hierarchy}. + \li Repeat for \e password and \e repeatPassword. + \li Select \e fields in \uicontrol Navigator and press \key Delete to + delete it. + \li Select \e username in \uicontrol Navigator to display its properties + in \l Properties. + \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png + to anchor the top of \e username to the bottom of \e tagLine in the + \uicontrol Target field. \QDS will suggest an appropriate margin + based on the current position of the field on the y axis, 170 + pixels. + \li Select \inlineimage icons/anchor-center-horizontal.png + to anchor \e username horizontally to its parent in the + \uicontrol Target field. + \li Select \e password in \uicontrol Navigator to display its properties + in \uicontrol Properties. + \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png + to anchor the top of \e password to the bottom of \e username in + the \uicontrol Target field with a 20-pixel margin. + \li Select \inlineimage icons/anchor-center-horizontal.png + to anchor \e password horizontally to its parent in the + \uicontrol Target field. + \li Repeat the above steps to anchor the top of \e repeatPassword + to the bottom of \e password with a 20-pixel margin and to + anchor it horizontally to its parent. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist - You could also animate the y-position property of the verify password + You could also animate the y-position property of the repeat password field for a similar effect. In that case, you would need to use absolute positioning for the field. This is less flexible if you export your design from a design tool, such as Adobe Photoshop, and decide to change @@ -122,18 +131,13 @@ would probably stay the same, even if the positions of the fields on the page would change. - \e Screen01 should now look something like this in the \uicontrol Design - mode and live preview: + \e Screen01 should not display visible changes in \uicontrol {Form Editor}: - \image loginui4-page.png "UI with all the buttons and fields in the Design mode" + \image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode" \section2 Adding a Timeline and Animation Settings - You are now ready to add the \l{Creating Timeline Animations}{timeline}. You will - need two animations, one for moving into the registration page and another - for returning to the login page. You can use the same animation for both - cases, by running it either from the beginning to the end or from the - end to the beginning. + You are now ready to add the \l{Creating Timeline Animations}{timeline}. To add a timeline with settings for running the animation: @@ -143,18 +147,12 @@ \li In \uicontrol Timeline, select \inlineimage plus.png to add a 1000-frame timeline and settings for running the animation. \image loginui4-timeline-settings.png - \li In the \uicontrol {Animation ID} field, enter \e toLoginState. - \li Deselect the \uicontrol {Running in base state} check box, because + \li In the \uicontrol {Animation ID} field, enter + \e toCreateAccountState. + \li Deselect the \uicontrol {Running in base state} check box because you want the animation to run only after the user clicks the \uicontrol {Create Account} button. You can use the default settings for the other fields. - \li Select \inlineimage plus.png - next to the \uicontrol {Animation Settings} group to add settings - for running the animation when the user clicks the back button. - \li In the \uicontrol {Animation ID} field, enter \e toRegisterState. - \li To run the animation backwards when the user clicks the back button, - enter \e 1000 in the \uicontrol {Start frame} field and \e 0 in the - \uicontrol {End frame} field. \li Select \uicontrol Close in the \uicontrol {Timeline Settings} view to save the timeline and the animation settings. \endlist @@ -167,14 +165,17 @@ \uicontrol Timeline: \list 1 - \li Select \e backButton in \uicontrol Navigator. - \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings, - select \uicontrol {Insert Keyframe} to insert a keyframe for the - opacity property of the button. + \li Select \e repeatPassword in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol Visibility > \uicontrol Opacity, select + \inlineimage icons/action-icon.png + > \uicontrol {Insert Keyframe} to insert a keyframe for the + opacity property of the component. + \image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property" \li In \uicontrol Timeline, check that the playhead is in frame 0, and select the \inlineimage recordfill.png (\uicontrol {Per Property Recording}) button for the - \uicontrol opacity property of \e backButton to start + \uicontrol opacity property of \e repeatPassword to start recording property changes. \image loginui4-timeline-opacity.png "Record button for the opacity property" \li In the field next to the opacity property name on that same line, @@ -188,12 +189,8 @@ \li Select the record button again to stop recording property changes. If you forget this, all the following changes will be recorded, and the results will be unpredictable. - \li Select \e verifyPasswordField in \uicontrol Navigator, - and repeat the above steps to insert a keyframe for the - \uicontrol opacity property of the field and to record - changes for it. - \li Select \e loginButton in \uicontrol Navigator, and repeat - the above steps to insert a keyframe for the \uicontrol opacity + \li Select \e createAccount in \uicontrol Navigator, and repeat + the above steps to insert a keyframe for the \uicontrol Opacity property of the button and to record changes for it. However, this time the opacity value needs to be 1 in frame 0 and 0 in frame 1000. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} @@ -201,30 +198,34 @@ \endlist When you move the playhead along the timeline, you can see how the login - button fades out while the verify password field and back button fade in. + button fades out while the repeat password field fades in. - You will now animate the top anchor margin of the verify password field + You will now animate the top anchor margin of the repeat password field to make it appear to slide down from the password field. \section2 Animating Anchors - To animate the top anchor margin of the verify password field: + To animate the top anchor margin of the repeat password field: \list 1 - \li Select \e verifyPasswordField in \uicontrol Navigator. - \li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin + \li Select \e repeatPassword in \uicontrol Navigator to display its + properties in \uicontrol Properties. + \li In \uicontrol Layout > \uicontrol Margin (under + \inlineimage icons/anchor-top.png + ), select \inlineimage icons/action-icon.png > \uicontrol {Insert Keyframe} to insert a keyframe for the top - anchor margin of \e verifyPasswordField. + anchor margin of \e repeatPassword. + \image loginui4-keyframe-top-anchor-margin.png "Inserting keyframe for top anchor margin" \li In \uicontrol Timeline, check that the playhead is in frame 0, and select the record button for the \e anchors.topMargin - property of \e verifyPasswordField. + property of \e repeatPassword. \li In the field next to the property, set a negative value for the - top anchor margin, -40, to place \e verifyPasswordField on top of - \e passwordField. + top anchor margin, -40, to place \e repeatPassword on top of + \e password. \li Move the playhead to frame 1000 and change the top anchor margin - to 5, so that, combined with the change in the opacity value, - \e verifyPasswordField appears to slide down and settle below - \e passwordField. + to 20, so that, combined with the change in the \uicontrol Opacity + value, \e repeatPassword appears to slide down and settle below + \e password. \li Select the record button again to stop recording property changes. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. @@ -239,6 +240,7 @@ \li Click the keyframe marker \inlineimage keyframe_linear_inactive.png for the \e anchors.topMargin property at frame 1000 on the timeline to select it. + \image loginui4-easing-curve-top-anchor-margin.png "Top anchor margin keyframe marker" \li Right-click the keyframe marker to open a context menu, and select \uicontrol {Edit Easing Curve} to add an easing curve to the animation. @@ -256,7 +258,7 @@ \image loginui4-timeline.png "Timeline view with the recorded property changes" - Next, you'll create states for the login and registration pages and bind + Next, you'll create states for the login and account creation pages and bind them to the animation settings. \section1 Binding Animation to States @@ -267,27 +269,30 @@ \list 1 \li In \uicontrol States, select \uicontrol {Create New State} twice to - add two states called \e loginState and \e registerState. You don't - need to make any property changes this time, because you'll bind the + add two states called \e login and \e createAccount. You don't + need to make any property changes this time because you'll bind the states to property animations. + \li In \uicontrol States, select \inlineimage icons/action-icon.png + for \e login to open the \uicontrol Actions menu, and then + select \uicontrol {Set as Default} to determine that the \e login + state is applied when the application starts. \li In \uicontrol Timeline, select the \inlineimage animation.png (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press - \key S to open the \uicontrol {Timeline Settings} dialog. + \key S) to open the \uicontrol {Timeline Settings} dialog. \image loginui4-timeline-settings-states.png \li Double-click the cell in the \uicontrol Timeline column on the - \e loginState row, and select \e timeline in the list. + \e createAccount row, and select \e timeline in the list. \li Double-click the cell in the \uicontrol Animation column on the - \e loginState row, and select \e toRegisterState. - \li Repeat these steps for \e registerState row, but select - \e toLoginState in the \uicontrol Animation column. + \e createAccount row, and select \e toCreateAccountState. \li Click \uicontrol Close to save the timeline settings. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. \endlist In the live preview, you can now click the \uicontrol {Create Account} - button to go to the registration page and the back button to return to - the login page. + button to go to the account creation page. - \image loginui4.gif "Moving between login page and registration page" + \image loginui4.gif "Moving between login page and account creation page" \section2 Learn More - Timeline diff --git a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui1/EntryField.ui.qml similarity index 86% rename from doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml rename to doc/qtdesignstudio/examples/loginui1/EntryField.ui.qml index 320a21ca716..4232d16445b 100644 --- a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml +++ b/doc/qtdesignstudio/examples/loginui1/EntryField.ui.qml @@ -1,4 +1,5 @@ + /**************************************************************************** ** ** Copyright (C) 2021 The Qt Company Ltd. @@ -53,6 +54,8 @@ import QtQuick.Controls 2.12 Button { id: control + width: 500 + height: 100 implicitWidth: Math.max( buttonBackground ? buttonBackground.implicitWidth : 0, @@ -64,26 +67,31 @@ Button { rightPadding: 4 text: "My Button" + hoverEnabled: false background: buttonBackground Rectangle { id: buttonBackground + color: "#00000000" implicitWidth: 100 implicitHeight: 40 opacity: enabled ? 1 : 0.3 - radius: 20 - border.color: "#41cd52" + radius: 50 + border.color: "#ffffff" } contentItem: textItem Text { id: textItem text: control.text + font.pixelSize: 34 opacity: enabled ? 1.0 : 0.3 - horizontalAlignment: Text.AlignHCenter + color: "#ffffff" + horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter - font.bold: true + leftPadding: 50 + font.family: "Titillium Web ExtraLight" } states: [ @@ -91,9 +99,14 @@ Button { name: "normal" when: !control.down + PropertyChanges { + target: textItem + font.family: "Titillium Web ExtraLight" + } + PropertyChanges { target: buttonBackground - border.color: "#41cd52" + color: "#28e7e7e7" } }, State { @@ -101,12 +114,13 @@ Button { when: control.down PropertyChanges { target: textItem - color: "#41cd52" + color: "#ffffff" } PropertyChanges { target: buttonBackground - border.color: "#41cd52" + color: "#e7e7e7" + border.color: "#ffffff" } } ] diff --git a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml index 320a21ca716..3a0871f4fc8 100644 --- a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml +++ b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml @@ -1,4 +1,5 @@ + /**************************************************************************** ** ** Copyright (C) 2021 The Qt Company Ltd. @@ -53,6 +54,8 @@ import QtQuick.Controls 2.12 Button { id: control + width: 500 + height: 100 implicitWidth: Math.max( buttonBackground ? buttonBackground.implicitWidth : 0, @@ -64,14 +67,16 @@ Button { rightPadding: 4 text: "My Button" + hoverEnabled: false background: buttonBackground Rectangle { id: buttonBackground + color: "#00000000" implicitWidth: 100 implicitHeight: 40 opacity: enabled ? 1 : 0.3 - radius: 20 + radius: 50 border.color: "#41cd52" } @@ -79,11 +84,13 @@ Button { Text { id: textItem text: control.text + font.pixelSize: 34 opacity: enabled ? 1.0 : 0.3 + color: "#41cd52" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.bold: true + font.family: "Titillium Web ExtraLight" } states: [ @@ -93,7 +100,7 @@ Button { PropertyChanges { target: buttonBackground - border.color: "#41cd52" + color: "#00000000" } }, State { @@ -101,13 +108,20 @@ Button { when: control.down PropertyChanges { target: textItem - color: "#41cd52" + color: "#ffffff" } PropertyChanges { target: buttonBackground - border.color: "#41cd52" + color: "#41cd52" + border.color: "#00000000" } } ] } + +/*##^## +Designer { + D{i:0;height:100;width:500} +} +##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml index fe9d967e26a..9fbbf7fb090 100644 --- a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml @@ -1,7 +1,8 @@ + /**************************************************************************** ** -** 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 Design Studio. @@ -48,69 +49,76 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.15 -import QtQuick.Studio.Components 1.0 -import QtQuick.Controls 2.15 +import QtQuick +import QtQuick.Controls import loginui1 1.0 Rectangle { - color: "#ffffff" - gradient: Gradient { - GradientStop { - position: 0.5 - color: "#ffffff" - } + width: Constants.width + height: Constants.height - GradientStop { - position: 1 - color: "#41cd52" - } - } - - Text { - id: pageTitle - x: 273 - y: 33 - text: qsTr("Qt Account") - font.pixelSize: 24 - font.bold: true - font.weight: Font.ExtraBold - anchors.verticalCenterOffset: -180 - anchors.horizontalCenterOffset: 0 - anchors.centerIn: parent - font.family: Constants.font.family - } + color: Constants.backgroundColor Image { - id: logo - x: 8 - y: 19 - source: "qt_logo_green_64x64px.png" + id: adventurePage + x: 0 + y: 0 + source: "images/adventurePage.jpg" fillMode: Image.PreserveAspectFit } - PushButton { - id: loginButton - x: 260 - y: 352 - width: 120 - height: 40 - text: "Log In" + Image { + id: qt_logo_green_128x128px + x: 296 + y: 40 + source: "images/qt_logo_green_128x128px.png" + fillMode: Image.PreserveAspectFit + } + Text { + id: tagLine + width: 541 + height: 78 + color: "#ffffff" + text: qsTr("Are you ready to explore?") + font.pixelSize: 50 + font.family: "Titillium Web ExtraLight" + anchors.verticalCenterOffset: -391 + anchors.horizontalCenterOffset: 18 + anchors.centerIn: parent + } + + EntryField { + id: username + x: 128 + y: 470 + text: "Username or Email" + } + + EntryField { + id: password + x: 128 + y: 590 + text: qsTr("Password") } PushButton { - id: registerButton - x: 260 - y: 398 - width: 120 - height: 40 + id: login + x: 102 + y: 966 + text: qsTr("Continue") + } + + PushButton { + id: createAccount + x: 102 + y: 1088 text: qsTr("Create Account") } } /*##^## Designer { - D{i:0;autoSize:true;formeditorZoom:0.5;height:480;width:640} + D{i:0;formeditorZoom:0.33} } ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui1/images/adventurePage.jpg b/doc/qtdesignstudio/examples/loginui1/images/adventurePage.jpg new file mode 100644 index 00000000000..c134876ece9 Binary files /dev/null and b/doc/qtdesignstudio/examples/loginui1/images/adventurePage.jpg differ diff --git a/doc/qtdesignstudio/examples/loginui1/images/qt_logo_green_128x128px.png b/doc/qtdesignstudio/examples/loginui1/images/qt_logo_green_128x128px.png new file mode 100644 index 00000000000..1a002353a55 Binary files /dev/null and b/doc/qtdesignstudio/examples/loginui1/images/qt_logo_green_128x128px.png differ diff --git a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml index d73cb621b0e..6fef815fa14 100644 --- a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml +++ b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml @@ -1,24 +1,23 @@ pragma Singleton -import QtQuick 2.10 +import QtQuick QtObject { - readonly property int width: 1280 - readonly property int height: 720 - - 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 font font: Qt.font({ - family: mySystemFont.name, + family: Qt.application.font.family, pixelSize: Qt.application.font.pixelSize }) readonly property font largeFont: Qt.font({ - family: mySystemFont.name, + family: Qt.application.font.family, pixelSize: Qt.application.font.pixelSize * 1.6 }) + readonly property color backgroundColor: "#c2c2c2" property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader { diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qml b/doc/qtdesignstudio/examples/loginui1/loginui1.qml index 604733f9f8d..68ded96dd7b 100644 --- a/doc/qtdesignstudio/examples/loginui1/loginui1.qml +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** 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 Design Studio. @@ -48,7 +48,7 @@ ** ****************************************************************************/ -import QtQuick 2.12 +import QtQuick import loginui1 1.0 Item { @@ -57,4 +57,5 @@ Item { Screen01 { } + } diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject index 322f9d6466d..a11e3d77c75 100644 --- a/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject @@ -37,6 +37,8 @@ Project { QT_AUTO_SCREEN_SCALE_FACTOR: "1" } + qt6Project: true + /* List of plugin directories passed to QML runtime */ importPaths: [ "imports", "asset_imports" ] diff --git a/doc/qtdesignstudio/examples/loginui1/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui1/qt_logo_green_64x64px.png deleted file mode 100644 index 235a381b5f1..00000000000 Binary files a/doc/qtdesignstudio/examples/loginui1/qt_logo_green_64x64px.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf index 7ad5144dc36..75b2cb8fffb 100644 --- a/doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf +++ b/doc/qtdesignstudio/examples/loginui1/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 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 diff --git a/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml deleted file mode 100644 index 320a21ca716..00000000000 --- a/doc/qtdesignstudio/examples/loginui3/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/loginui3/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml index 9539da8c30b..28131577351 100644 --- a/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml @@ -1,10 +1,11 @@ + /**************************************************************************** ** -** 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,160 +49,113 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.10 +import QtQuick +import QtQuick.Controls import loginui3 1.0 -import QtQuick.Controls 2.3 Rectangle { - id: root - state: "loginState" + id: rectangle width: Constants.width height: Constants.height - gradient: Gradient { - GradientStop { - position: 0.5 - color: "#ffffff" - } - GradientStop { - position: 1 - color: "#41cd52" - } - } - - PushButton { - id: backButton - x: 590 - y: 20 - width: 40 - text: "<" - font.pixelSize: 24 - anchors.right: parent.right - anchors.rightMargin: 10 - anchors.top: parent.top - anchors.topMargin: 20 - } - - Text { - id: pageTitle - x: 258 - y: 70 - width: 123 - 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 + state: "login" 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 } - Connections { - target: registerButton - onClicked: { - root.state = "registerState" + Image { + id: qt_logo_green_128x128px + x: 296 + anchors.top: parent.top + 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" + } + + 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" + } + + EntryField { + id: password + text: qsTr("Password") + } + + EntryField { + id: repeatPassword + text: "Repeat Password" } } - Connections { - target: backButton - onClicked: { - root.state = "loginState" + Column { + id: buttons + x: 102 + y: 966 + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: 100 + spacing: 20 + + PushButton { + id: login + text: qsTr("Continue") + } + + PushButton { + id: createAccount + text: qsTr("Create Account") + + Connections { + target: createAccount + onClicked: rectangle.state = "createAccount" + } } } - states: [ State { - name: "loginState" + name: "login" PropertyChanges { - target: verifyPasswordField - visible: false - } - - PropertyChanges { - target: backButton + target: repeatPassword visible: false } }, State { - name: "registerState" + name: "createAccount" PropertyChanges { - target: loginButton + target: createAccount visible: false } } ] - Column { - id: fieldColumn - x: 170 - y: 200 - width: 300 - height: 130 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 200 - - TextField { - id: usernameField - width: 300 - placeholderText: qsTr("Username") - font.pointSize: 10 - } - - TextField { - id: passwordField - width: 300 - placeholderText: qsTr("Password") - font.pointSize: 10 - } - - TextField { - id: verifyPasswordField - width: 300 - visible: true - font.pointSize: 10 - placeholderText: qsTr("Verify password") - } - } - - 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: registerButton - width: 120 - text: qsTr("Create Account") - } - } } /*##^## diff --git a/doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml index 74a66dcae2b..6fef815fa14 100644 --- a/doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml +++ b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/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/loginui3/imports/loginui3/qmldir b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir index 616ac203530..69846237302 100644 --- a/doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir +++ b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir @@ -1 +1,2 @@ singleton Constants 1.0 Constants.qml +EventListSimulator 1.0 EventListSimulator.qml diff --git a/doc/qtdesignstudio/examples/loginui3/loginui3.qml b/doc/qtdesignstudio/examples/loginui3/loginui3.qml index 0fd5dcc8e72..ea8b947d3ce 100644 --- a/doc/qtdesignstudio/examples/loginui3/loginui3.qml +++ b/doc/qtdesignstudio/examples/loginui3/loginui3.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 loginui3 1.0 Item { @@ -57,11 +57,5 @@ Item { Screen01 { } + } - - - -/*##^## Designer { - D{i:0;autoSize:true;height:480;width:640} -} - ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject b/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject index 418175f23cb..3015de6092e 100644 --- a/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject +++ b/doc/qtdesignstudio/examples/loginui3/loginui3.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/loginui3" + targetDirectory: "/opt/loginui1" } diff --git a/doc/qtdesignstudio/examples/loginui3/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui3/qt_logo_green_64x64px.png deleted file mode 100644 index 235a381b5f1..00000000000 Binary files a/doc/qtdesignstudio/examples/loginui3/qt_logo_green_64x64px.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf index 7ad5144dc36..caace6db8e4 100644 --- a/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf +++ b/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf @@ -1,3 +1,2 @@ -; 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 +[Controls] +Style=Default diff --git a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml deleted file mode 100644 index 320a21ca716..00000000000 --- a/doc/qtdesignstudio/examples/loginui4/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/loginui4/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml index e57d19c368a..e919f39d82e 100644 --- a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml @@ -1,10 +1,11 @@ + /**************************************************************************** ** -** 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,168 +49,118 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.12 +import QtQuick +import QtQuick.Controls import loginui4 1.0 -import QtQuick.Controls 2.15 import QtQuick.Timeline 1.0 Rectangle { id: rectangle width: Constants.width height: Constants.height - color: "#ffffff" - gradient: Gradient { - GradientStop { - position: 0.50125 - color: "#ffffff" - } - 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 - } + color: Constants.backgroundColor + state: "login" Image { - id: logo - anchors.left: parent.left - anchors.top: parent.top - source: "qt_logo_green_64x64px.png" - anchors.topMargin: 10 - anchors.leftMargin: 10 + id: adventurePage + anchors.fill: parent + source: "images/adventurePage.jpg" fillMode: Image.PreserveAspectFit } + Image { + id: qt_logo_green_128x128px + x: 296 + anchors.top: parent.top + 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" + } + + EntryField { + id: username + x: 110 + text: "Username or Email" + anchors.top: tagLine.bottom + anchors.topMargin: 170 + anchors.horizontalCenter: parent.horizontalCenter + } + + EntryField { + id: password + x: 110 + text: qsTr("Password") + anchors.top: username.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: 20 + } + + EntryField { + id: repeatPassword + x: 110 + text: "Repeat Password" + anchors.top: password.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: 20 + } + Column { - id: buttonColumn + id: buttons + x: 102 + y: 966 anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter - anchors.bottomMargin: 50 - spacing: 5 + anchors.bottomMargin: 100 + spacing: 20 PushButton { - id: loginButton - width: 120 - opacity: 1 - text: qsTr("Log In") + id: login + text: qsTr("Continue") } PushButton { - id: registerButton - width: 120 + id: createAccount text: qsTr("Create Account") - font.bold: true Connections { - target: registerButton - onClicked: rectangle.state = "registerState" + target: createAccount + onClicked: rectangle.state = "createAccount" } } } - 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: verifyPasswordField - x: 170 - width: 300 - opacity: 1 - anchors.top: passwordField.bottom - anchors.horizontalCenter: passwordField.horizontalCenter - anchors.topMargin: 5 - 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: toLoginState + id: toCreateAccountState + running: false loops: 1 duration: 1000 - running: false to: 1000 from: 0 - }, - TimelineAnimation { - id: toRegisterState - loops: 1 - duration: 1000 - running: false - to: 0 - from: 1000 } ] - enabled: true endFrame: 1000 startFrame: 0 + enabled: true KeyframeGroup { - target: backButton - property: "opacity" - Keyframe { - frame: 0 - value: 0 - } - - Keyframe { - frame: 1000 - value: 1 - } - } - - KeyframeGroup { - target: verifyPasswordField + target: repeatPassword property: "opacity" Keyframe { @@ -218,18 +169,14 @@ Rectangle { } Keyframe { - frame: 1000 + frame: 999 value: 1 } } KeyframeGroup { - target: loginButton + target: createAccount property: "opacity" - Keyframe { - frame: 0 - value: 1 - } Keyframe { frame: 1000 @@ -238,8 +185,9 @@ Rectangle { } KeyframeGroup { - target: verifyPasswordField + target: repeatPassword property: "anchors.topMargin" + Keyframe { frame: 0 value: -40 @@ -247,32 +195,26 @@ Rectangle { Keyframe { easing.bezierCurve: [0.39,0.575,0.565,1,1,1] - frame: 1000 - value: 5 + frame: 999 + value: 20 } } } states: [ State { - name: "loginState" + name: "login" PropertyChanges { target: timeline - currentFrame: 0 enabled: true } PropertyChanges { - target: toLoginState - } - - PropertyChanges { - target: toRegisterState - running: true + target: toCreateAccountState } }, State { - name: "registerState" + name: "createAccount" PropertyChanges { target: timeline @@ -280,7 +222,7 @@ Rectangle { } PropertyChanges { - target: toLoginState + target: toCreateAccountState running: true } } @@ -289,7 +231,6 @@ Rectangle { /*##^## 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} + D{i:0;formeditorZoom:0.5}D{i:6}D{i:9}D{i:11} } ##^##*/ - diff --git a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml index 74a66dcae2b..6fef815fa14 100644 --- a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml +++ b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/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/loginui4/imports/loginui4/qmldir b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir index 616ac203530..69846237302 100644 --- a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir +++ b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir @@ -1 +1,2 @@ singleton Constants 1.0 Constants.qml +EventListSimulator 1.0 EventListSimulator.qml diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qml b/doc/qtdesignstudio/examples/loginui4/loginui4.qml index 0f6b845bce4..6ce943cc3da 100644 --- a/doc/qtdesignstudio/examples/loginui4/loginui4.qml +++ b/doc/qtdesignstudio/examples/loginui4/loginui4.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 loginui4 1.0 Item { @@ -57,11 +57,5 @@ Item { Screen01 { } + } - - - -/*##^## Designer { - D{i:0;autoSize:true;height:480;width:640} -} - ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject index 8447f30664e..9bb93ec5dd2 100644 --- a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject +++ b/doc/qtdesignstudio/examples/loginui4/loginui4.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/loginui3" + targetDirectory: "/opt/loginui4" } diff --git a/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png deleted file mode 100644 index 235a381b5f1..00000000000 Binary files a/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png and /dev/null differ diff --git a/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf index 7ad5144dc36..caace6db8e4 100644 --- a/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf +++ b/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf @@ -1,3 +1,2 @@ -; 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 +[Controls] +Style=Default diff --git a/doc/qtdesignstudio/images/studio-3d-loader3d-binding-editor.png b/doc/qtdesignstudio/images/studio-3d-loader3d-binding-editor.png new file mode 100644 index 00000000000..698f62cab3f Binary files /dev/null and b/doc/qtdesignstudio/images/studio-3d-loader3d-binding-editor.png differ diff --git a/doc/qtdesignstudio/images/studio-3d-loader3d-properties.png b/doc/qtdesignstudio/images/studio-3d-loader3d-properties.png new file mode 100644 index 00000000000..f77a4c7855f Binary files /dev/null and b/doc/qtdesignstudio/images/studio-3d-loader3d-properties.png differ diff --git a/doc/qtdesignstudio/images/studio-custom-button.gif b/doc/qtdesignstudio/images/studio-custom-button.gif index 62d559da12e..79c8d7114ee 100644 Binary files a/doc/qtdesignstudio/images/studio-custom-button.gif and b/doc/qtdesignstudio/images/studio-custom-button.gif differ diff --git a/doc/qtdesignstudio/images/studio-custom-check-box.gif b/doc/qtdesignstudio/images/studio-custom-check-box.gif index 59845f4109b..b83545c348f 100644 Binary files a/doc/qtdesignstudio/images/studio-custom-check-box.gif and b/doc/qtdesignstudio/images/studio-custom-check-box.gif differ diff --git a/doc/qtdesignstudio/images/studio-custom-dial.gif b/doc/qtdesignstudio/images/studio-custom-dial.gif index 4c49e6953f8..0ea71d7d921 100644 Binary files a/doc/qtdesignstudio/images/studio-custom-dial.gif and b/doc/qtdesignstudio/images/studio-custom-dial.gif differ diff --git a/doc/qtdesignstudio/images/studio-custom-slider.gif b/doc/qtdesignstudio/images/studio-custom-slider.gif index 8e9672ec93b..372d914627a 100644 Binary files a/doc/qtdesignstudio/images/studio-custom-slider.gif and b/doc/qtdesignstudio/images/studio-custom-slider.gif differ diff --git a/doc/qtdesignstudio/images/studio-custom-spinbox.gif b/doc/qtdesignstudio/images/studio-custom-spinbox.gif index e93f3d5379e..dddbd5dcf5e 100644 Binary files a/doc/qtdesignstudio/images/studio-custom-spinbox.gif and b/doc/qtdesignstudio/images/studio-custom-spinbox.gif differ diff --git a/doc/qtdesignstudio/images/studio-custom-switch.gif b/doc/qtdesignstudio/images/studio-custom-switch.gif index 1788df14d14..3f8ee01187f 100644 Binary files a/doc/qtdesignstudio/images/studio-custom-switch.gif and b/doc/qtdesignstudio/images/studio-custom-switch.gif differ diff --git a/doc/qtdesignstudio/images/studio-dial.png b/doc/qtdesignstudio/images/studio-dial.png index 05f15b4c45f..79c4237ccb0 100644 Binary files a/doc/qtdesignstudio/images/studio-dial.png and b/doc/qtdesignstudio/images/studio-dial.png differ diff --git a/doc/qtdesignstudio/images/studio-imported-assets.png b/doc/qtdesignstudio/images/studio-imported-assets.png index 2722c84ba47..7915769ffab 100644 Binary files a/doc/qtdesignstudio/images/studio-imported-assets.png and b/doc/qtdesignstudio/images/studio-imported-assets.png differ diff --git a/doc/qtdesignstudio/images/studio-run-settings.png b/doc/qtdesignstudio/images/studio-run-settings.png index 034377a98d6..0a8fa23612d 100644 Binary files a/doc/qtdesignstudio/images/studio-run-settings.png and b/doc/qtdesignstudio/images/studio-run-settings.png differ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc index efa43dcbbae..e319a0042b9 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -52,6 +52,10 @@ You can edit the properties of the controls in all the preset \l{Adding States}{states} to apply your own style to them. + \note For buttons and check boxes, you can disable the misbehaving hover + effects by selecting \l Properties > \uicontrol Control, and then disabling + the \uicontrol Hover check box. + \image studio-dial.png "A stylable Dial component in Form Editor" To create stylable UI controls: @@ -72,7 +76,7 @@ \endlist For an example of using the \uicontrol Button template to create a button - and styling it, see \l{Creating a Push Button} in the \l{Log In UI - Part 1} + and styling it, see \l{Creating a Push Button} in the \l{Log In UI - Components} tutorial. In addition, you can create starting points for different types of screens: diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 832526005e4..976da0d4ccd 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -103,6 +103,7 @@ \li \l{Scene Environment} \li \l{Morph Target} \li \l{Repeater3D} + \li \l{Loader3D} \endlist \li \l {Creating Component Instances} \li \l {Creating Custom Components} diff --git a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc index b2855619758..331e84185a5 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc @@ -35,8 +35,9 @@ You can follow a set of hands-on tutorials that build on each other to illustrate how to use the features of \QDS. Even if you plan to export your designs from a design tool, it is useful to first create a small UI from - scratch to learn to use \QDS. In particular, Part 1 describes the terms - and concepts that you will run into when exporting designs with \QB. + scratch to learn to use \QDS. In particular, \e {Log In UI - Components} + describes the terms and concepts that you will run into when exporting + designs with \QB. Before you start, take a look at the following topics to familiarize yourself with the parts of \QDS in general, and the \uicontrol Design diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc new file mode 100644 index 00000000000..1ab2bf0c9d5 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc @@ -0,0 +1,110 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \page studio-3d-loader-3d.html + \previouspage studio-3d-repeater-3d.html + \nextpage quick-component-instances.html + + \title Loader3D + + \note The \uicontrol Loader3D component is released as a tech preview + feature in \QDS 2.2, and its functionality will be improved in future + releases. + + \uicontrol Loader3D is a loader component used to dynamically load 3D + components. It can load a QML file using the \uicontrol Source property or a + component using the \uicontrol {Source component} property. \uicontrol Loader3D + is useful for delaying the creation of a component until it is required, for + example, when a component should be created on demand or when a component + should not be created unnecessarily for performance reasons. + + Add a \uicontrol Loader3D component to your scene by drag-and-dropping it + from \uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D} > + \uicontrol {Qt Quick 3D} to \uicontrol Scene in \uicontrol Navigator. + + For more information, see the \l{https://doc.qt.io/qt/qml-qtquick3d-loader3d.html} + {Loader3D QML type} in the \uicontrol {Qt Quick 3D} documentation. + + \section1 Loader3D Properties + + Select the \uicontrol Loader3D component in \uicontrol Navigator to specify + its properties in \uicontrol Properties > \uicontrol Loader3D. + + \image studio-3d-loader3d-properties.png "Loader3D specific properties" + + The \uicontrol Active property is set to \uicontrol true by default, which + makes the \uicontrol Loader3D currently active. Setting \uicontrol Active to + \uicontrol false makes \uicontrol Loader3D inactive. If you change the + \uicontrol Source or \uicontrol {Source component} of an inactive + \uicontrol Loader3D, the component will not be instantiated until + \uicontrol Loader3D is made active. Setting \uicontrol Loader3D inactive + will also cause any item loaded by the loader to be released, but this will + not affect the files or components defined as \uicontrol Source or + \uicontrol {Source component}. + + Use the dropdown menu of the \uicontrol Source property to define the URL of + the 3D component to instantiate. To unload the currently loaded object, set + this property to an empty string or set the \uicontrol {Source component} to + undefined. Setting \uicontrol Source to a new URL will also cause the item + created by the previous URL to be unloaded. + + The \uicontrol {Source component} property defines the component for + \uicontrol Loader3D to instantiate. Currently, the + \uicontrol {Source component} needs to be defined in code using the + \l {Working in Edit Mode}{Edit} mode or \l {Text Editor}. + + Set the \uicontrol Asynchronous property to define whether the component + will be instantiated asynchronously. This property is set to \uicontrol false + by default. When used in conjunction with the source property, loading and + compilation will be performed in a background thread. Loading asynchronously + creates the objects declared by the component across multiple frames and + reduces the likelihood of glitches in animation. Setting the value of + \uicontrol Asynchronous to \uicontrol false while an asynchronous load is in + progress will force immediate synchronous completion. This allows an + asynchronous loading to begin and then forces completion if the + \uicontrol Loader3D content must be accessed before the asynchronous + loading is completed. + + To avoid seeing the components loading progressively, set the \uicontrol + Visibility property for \uicontrol Loader3D appropriately in + \uicontrol {Binding Editor}: + \list 1 + \li In \uicontrol Properties > \uicontrol Loader3D, select the + \uicontrol Asynchronous check box to set the property to + \uicontrol true. + \li In \uicontrol Node > \l {Setting Node Opacity and Visibility}{Visibility}, + select \inlineimage icons/action-icon.png + to open the actions menu, and then select \uicontrol {Set Binding}. + \li Type \c {status === Loader3D.Ready} into \uicontrol {Binding Editor}, + as shown in the image below. + \li Select \uicontrol OK. + \endlist + + \image studio-3d-loader3d-binding-editor.png "Setting Visibility in Binding Editor" + +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc index 0a12a8bec96..4d992d0b409 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc @@ -28,7 +28,7 @@ /*! \page studio-3d-repeater-3d.html \previouspage studio-3d-morph-target.html - \nextpage quick-component-instances.html + \nextpage studio-3d-loader-3d.html \title Repeater3D @@ -60,7 +60,7 @@ For more information, see \l{https://doc.qt.io/qt/qml-qtquick3d-repeater3d.html} {Repeater3D} in the \uicontrol {Qt Quick 3D} documentation. - \section1 Repeater 3D Properties + \section1 Repeater3D Properties To define a model providing data for the repeater, select it in \l Navigator, and then in \uicontrol Properties > \uicontrol Repeater, specify the diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml index c1ecf1dc7f1..d8f664cd409 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml @@ -67,8 +67,8 @@ T.AbstractButton { indicator: Item { x: 0 y: 0 - implicitWidth: myButton.width - implicitHeight: myButton.height + width: myButton.width + height: myButton.height T.Label { id: buttonIcon diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml index fee38c2213d..9defca106fe 100644 --- a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml +++ b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml @@ -79,7 +79,7 @@ FocusScope { anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton - onClicked: { + onClicked: function(mouse) { if (mouse.button === Qt.LeftButton) { contextMenu.dismiss() focus = true diff --git a/src/libs/advanceddockingsystem/floatingdockcontainer.cpp b/src/libs/advanceddockingsystem/floatingdockcontainer.cpp index 59575ab20ad..3865f287da9 100644 --- a/src/libs/advanceddockingsystem/floatingdockcontainer.cpp +++ b/src/libs/advanceddockingsystem/floatingdockcontainer.cpp @@ -562,7 +562,7 @@ static const char* windowsMessageString(int messageId) this, &FloatingDockContainer::close); #else - setWindowFlags(Qt::Window | Qt::WindowMaximizeButtonHint | Qt::WindowCloseButtonHint); + setWindowFlags(Qt::Window | Qt::WindowMaximizeButtonHint | Qt::WindowCloseButtonHint | Qt::Tool); QBoxLayout *boxLayout = new QBoxLayout(QBoxLayout::TopToBottom); boxLayout->setContentsMargins(0, 0, 0, 0); boxLayout->setSpacing(0); diff --git a/src/libs/utils/processreaper.cpp b/src/libs/utils/processreaper.cpp index daaab5dee63..b3679c7d957 100644 --- a/src/libs/utils/processreaper.cpp +++ b/src/libs/utils/processreaper.cpp @@ -154,7 +154,7 @@ void ProcessReaper::reap(QProcess *process, int timeoutMs) if (!process) return; - QTC_ASSERT(QThread::currentThread() == process->thread(), return); + QTC_ASSERT(QThread::currentThread() == process->thread(), return ); process->disconnect(); if (process->state() == QProcess::NotRunning) { diff --git a/src/plugins/android/androidbuildapkstep.cpp b/src/plugins/android/androidbuildapkstep.cpp index 63ec2972d1d..ca6c072f909 100644 --- a/src/plugins/android/androidbuildapkstep.cpp +++ b/src/plugins/android/androidbuildapkstep.cpp @@ -551,13 +551,13 @@ bool AndroidBuildApkStep::init() } m_openPackageLocationForRun = m_openPackageLocation; + const FilePath outputDir = AndroidManager::androidBuildDirectory(target()); if (m_buildAAB) { const QString bt = buildType() == BuildConfiguration::Release ? QLatin1String("release") : QLatin1String("debug"); - m_packagePath = buildDirectory() - .pathAppended(Constants::ANDROID_BUILDDIRECTORY) - .pathAppended(QString("build/outputs/bundle/%1/android-build-%1.aab").arg(bt)); + m_packagePath = outputDir.pathAppended( + QString("build/outputs/bundle/%1/android-build-%1.aab").arg(bt)); } else { m_packagePath = AndroidManager::apkPath(target()); } @@ -565,7 +565,6 @@ bool AndroidBuildApkStep::init() qCDebug(buildapkstepLog) << "APK or AAB path:" << m_packagePath; FilePath command = version->hostBinPath().pathAppended("androiddeployqt").withExecutableSuffix(); - FilePath outputDir = buildDirectory().pathAppended(Constants::ANDROID_BUILDDIRECTORY); m_inputFile = AndroidQtVersion::androidDeploymentSettings(target()); if (m_inputFile.isEmpty()) { @@ -641,7 +640,7 @@ void AndroidBuildApkStep::setupOutputFormatter(OutputFormatter *formatter) if (node) sourceDirPath = FilePath::fromVariant(node->data(Constants::AndroidPackageSourceDir)); parser->setSourceDirectory(sourceDirPath.canonicalPath()); - parser->setBuildDirectory(buildDirectory().pathAppended(Constants::ANDROID_BUILDDIRECTORY)); + parser->setBuildDirectory(AndroidManager::androidBuildDirectory(target())); formatter->addLineParser(parser); AbstractProcessStep::setupOutputFormatter(formatter); } @@ -747,8 +746,10 @@ void AndroidBuildApkStep::doRun() if (!version) return false; + const FilePath buildDir = buildDirectory(); + const FilePath androidBuildDir = AndroidManager::androidBuildDirectory(target()); for (const auto &abi : androidAbis) { - FilePath androidLibsDir = buildDirectory() / "android-build/libs" / abi; + FilePath androidLibsDir = androidBuildDir / "libs" / abi; if (!androidLibsDir.exists()) { if (!androidLibsDir.ensureWritableDir()) { const QString error = tr("The Android build folder %1 wasn't found and " @@ -762,7 +763,7 @@ void AndroidBuildApkStep::doRun() // and now it's made directly with ALL target, so this code below ensures // these versions are not broken. const QString fileName = QString("lib%1_%2.so").arg(buildKey, abi); - const FilePath from = buildDirectory() / fileName; + const FilePath from = buildDir / fileName; const FilePath to = androidLibsDir / fileName; if (!from.exists() || to.exists()) continue; @@ -795,7 +796,7 @@ void AndroidBuildApkStep::doRun() if (!version->supportsMultipleQtAbis()) { QTC_ASSERT(androidAbis.size() == 1, return false); applicationBinary = buildSystem()->buildTarget(buildKey).targetFilePath.toString(); - FilePath androidLibsDir = buildDirectory() / "android-build/libs" / androidAbis.first(); + FilePath androidLibsDir = androidBuildDir / "libs" / androidAbis.first(); for (const FilePath &target : targets) { if (!copyFileIfNewer(target, androidLibsDir.pathAppended(target.fileName()))) return false; @@ -813,7 +814,7 @@ void AndroidBuildApkStep::doRun() applicationBinary.remove(0, 3).chop(targetSuffix.size()); } - FilePath androidLibsDir = buildDirectory() / "android-build/libs" / abi; + FilePath androidLibsDir = androidBuildDir / "libs" / abi; for (const FilePath &target : targets) { if (target.endsWith(targetSuffix)) { if (!copyFileIfNewer(target, androidLibsDir.pathAppended(target.fileName()))) diff --git a/src/plugins/android/androidconstants.h b/src/plugins/android/androidconstants.h index 5dd62d743ab..01350cd7181 100644 --- a/src/plugins/android/androidconstants.h +++ b/src/plugins/android/androidconstants.h @@ -58,7 +58,7 @@ const char ANDROID_MANIFEST_EDITOR_CONTEXT[] = "Android.AndroidManifestEditor.Id const char ANDROID_KIT_NDK[] = "Android.NDK"; const char ANDROID_KIT_SDK[] = "Android.SDK"; -const char ANDROID_BUILDDIRECTORY[] = "android-build"; +const char ANDROID_BUILD_DIRECTORY[] = "android-build"; const char JAVA_EDITOR_ID[] = "java.editor"; const char JLS_SETTINGS_ID[] = "Java::JLSSettingsID"; const char JAVA_MIMETYPE[] = "text/x-java"; diff --git a/src/plugins/android/androiddebugsupport.cpp b/src/plugins/android/androiddebugsupport.cpp index 73a8b2c1d0a..2d37f6a59c1 100644 --- a/src/plugins/android/androiddebugsupport.cpp +++ b/src/plugins/android/androiddebugsupport.cpp @@ -139,11 +139,16 @@ void AndroidDebugSupport::start() if (qtVersion) solibSearchPath.append(qtVersion->qtSoPaths()); solibSearchPath.append(uniquePaths(extraLibs)); - solibSearchPath.append(runControl()->buildDirectory().toString()); + + const RunConfiguration *activeRunConfig = target->activeRunConfiguration(); + FilePath buildDir; + if (activeRunConfig) + buildDir = activeRunConfig->buildTargetInfo().workingDirectory; + solibSearchPath.append(buildDir.toString()); solibSearchPath.removeDuplicates(); setSolibSearchPath(solibSearchPath); qCDebug(androidDebugSupportLog) << "SoLibSearchPath: "<buildDirectory().pathAppended("app_process")); + setSymbolFile(buildDir.pathAppended("app_process")); setSkipExecutableValidation(true); setUseExtendedRemote(true); QString devicePreferredAbi = AndroidManager::apkDevicePreferredAbi(target); diff --git a/src/plugins/android/androiddeployqtstep.cpp b/src/plugins/android/androiddeployqtstep.cpp index 4c4b9e9e5b1..1b62dcf717b 100644 --- a/src/plugins/android/androiddeployqtstep.cpp +++ b/src/plugins/android/androiddeployqtstep.cpp @@ -188,7 +188,6 @@ bool AndroidDeployQtStep::init() m_manifestName = AndroidManager::manifestPath(target()); m_useAndroiddeployqt = version->qtVersion() >= QtSupport::QtVersionNumber(5, 4, 0); - if (m_useAndroiddeployqt) { const QString buildKey = target()->activeBuildKey(); const ProjectNode *node = target()->project()->findNodeForBuildKey(buildKey); @@ -216,7 +215,7 @@ bool AndroidDeployQtStep::init() } m_command = m_command.pathAppended("androiddeployqt").withExecutableSuffix(); - m_workingDirectory = bc->buildDirectory().pathAppended(Constants::ANDROID_BUILDDIRECTORY); + m_workingDirectory = AndroidManager::androidBuildDirectory(target()); m_androiddeployqtArgs.addArgs({"--verbose", "--output", m_workingDirectory.toString(), @@ -237,7 +236,7 @@ bool AndroidDeployQtStep::init() m_uninstallPreviousPackageRun = true; m_command = AndroidConfigurations::currentConfig().adbToolPath(); m_apkPath = AndroidManager::apkPath(target()); - m_workingDirectory = bc ? bc->buildDirectory() : FilePath(); + m_workingDirectory = bc ? AndroidManager::buildDirectory(target()): FilePath(); } m_environment = bc ? bc->environment() : Utils::Environment(); @@ -444,9 +443,8 @@ bool AndroidDeployQtStep::runImpl() void AndroidDeployQtStep::gatherFilesToPull() { m_filesToPull.clear(); - BuildConfiguration *bc = target()->activeBuildConfiguration(); - QString buildDir = bc ? bc->buildDirectory().toString() : QString(); - if (bc && !buildDir.endsWith("/")) { + QString buildDir = AndroidManager::buildDirectory(target()).toString(); + if (!buildDir.endsWith("/")) { buildDir += "/"; } diff --git a/src/plugins/android/androidmanager.cpp b/src/plugins/android/androidmanager.cpp index 671c533c645..d5177de6819 100644 --- a/src/plugins/android/androidmanager.cpp +++ b/src/plugins/android/androidmanager.cpp @@ -47,9 +47,13 @@ #include #include #include +#include #include #include +#include + +#include #include #include @@ -242,8 +246,37 @@ bool AndroidManager::isQtCreatorGenerated(const FilePath &deploymentFile) FilePath AndroidManager::dirPath(const Target *target) { - if (auto *bc = target->activeBuildConfiguration()) - return bc->buildDirectory() / Constants::ANDROID_BUILDDIRECTORY; + return androidBuildDirectory(target); +} + +FilePath AndroidManager::androidBuildDirectory(const Target *target) +{ + return buildDirectory(target) / Constants::ANDROID_BUILD_DIRECTORY; +} + +bool AndroidManager::isQt5CmakeProject(const ProjectExplorer::Target *target) +{ + const QtSupport::BaseQtVersion *qt = QtSupport::QtKitAspect::qtVersion(target->kit()); + const bool isQt5 = qt && qt->qtVersion() < QtSupport::QtVersionNumber{6, 0, 0}; + const Core::Context cmakeCtx = Core::Context(CMakeProjectManager::Constants::CMAKE_PROJECT_ID); + const bool isCmakeProject = (target->project()->projectContext() == cmakeCtx); + return isQt5 && isCmakeProject; +} + +FilePath AndroidManager::buildDirectory(const Target *target) +{ + if (const BuildSystem *bs = target->buildSystem()) { + const QString buildKey = target->activeBuildKey(); + const FilePath buildDir = bs->buildTarget(target->activeBuildKey()).workingDirectory; + if (isQt5CmakeProject(target)) { + // Return the main build dir and not the android libs dir + const QString libsDir = QString(Constants::ANDROID_BUILD_DIRECTORY) + "/libs"; + Utils::FilePath parentDuildDir = buildDir.parentDir(); + if (parentDuildDir.endsWith(libsDir) || libsDir.endsWith(libsDir + "/")) + return parentDuildDir.parentDir().parentDir(); + } + return buildDir; + } return {}; } @@ -264,7 +297,7 @@ FilePath AndroidManager::apkPath(const Target *target) else apkPath += QLatin1String("debug.apk"); - return dirPath(target) / apkPath; + return androidBuildDirectory(target) / apkPath; } bool AndroidManager::matchedAbis(const QStringList &deviceAbis, const QStringList &appAbis) @@ -339,7 +372,7 @@ FilePath AndroidManager::manifestPath(const Target *target) QVariant manifest = target->namedSettings(AndroidManifestName); if (manifest.isValid()) return manifest.value(); - return dirPath(target).pathAppended(AndroidManifestName); + return androidBuildDirectory(target).pathAppended(AndroidManifestName); } void AndroidManager::setManifestPath(Target *target, const FilePath &path) @@ -371,7 +404,7 @@ static QString preferredAbi(const QStringList &appAbis, const Target *target) QString AndroidManager::apkDevicePreferredAbi(const Target *target) { - auto libsPath = dirPath(target).pathAppended("libs"); + auto libsPath = androidBuildDirectory(target).pathAppended("libs"); if (!libsPath.exists()) { if (const ProjectNode *node = currentProjectNode(target)) return preferredAbi(node->data(Android::Constants::ANDROID_ABIS).toStringList(), diff --git a/src/plugins/android/androidmanager.h b/src/plugins/android/androidmanager.h index 99701393f40..a32bbcacbca 100644 --- a/src/plugins/android/androidmanager.h +++ b/src/plugins/android/androidmanager.h @@ -93,7 +93,12 @@ public: static QStringList applicationAbis(const ProjectExplorer::Target *target); static QString archTriplet(const QString &abi); + static bool isQt5CmakeProject(const ProjectExplorer::Target *target); + + // TODO: remove this on 6.0 branch, kept here for binary compatibility for 5.0 release. static Utils::FilePath dirPath(const ProjectExplorer::Target *target); + static Utils::FilePath androidBuildDirectory(const ProjectExplorer::Target *target); + static Utils::FilePath buildDirectory(const ProjectExplorer::Target *target); static Utils::FilePath manifestPath(const ProjectExplorer::Target *target); static void setManifestPath(ProjectExplorer::Target *target, const Utils::FilePath &path); static Utils::FilePath manifestSourcePath(const ProjectExplorer::Target *target); diff --git a/src/plugins/android/androidpackageinstallationstep.cpp b/src/plugins/android/androidpackageinstallationstep.cpp index d8247de83c5..9212443b7ea 100644 --- a/src/plugins/android/androidpackageinstallationstep.cpp +++ b/src/plugins/android/androidpackageinstallationstep.cpp @@ -38,6 +38,7 @@ #include #include #include +#include #include #include @@ -67,6 +68,9 @@ public: QString nativeAndroidBuildPath() const; + Utils::FilePath androidBuildDirectory() const; + Utils::FilePath buildDirectory() const; + private: bool init() final; void setupOutputFormatter(OutputFormatter *formatter) final; @@ -103,6 +107,8 @@ bool AndroidPackageInstallationStep::init() cmd.addArgs(outerQuoted + " install", CommandLine::Raw); processParameters()->setCommandLine(cmd); + // This is useful when running an example target from a Qt module project. + processParameters()->setWorkingDirectory(buildDirectory()); m_androidDirsToClean.clear(); // don't remove gradle's cache, it takes ages to rebuild it. @@ -114,7 +120,7 @@ bool AndroidPackageInstallationStep::init() QString AndroidPackageInstallationStep::nativeAndroidBuildPath() const { - QString buildPath = buildDirectory().pathAppended(Constants::ANDROID_BUILDDIRECTORY).toString(); + QString buildPath = androidBuildDirectory().toString(); if (HostOsInfo::isWindowsHost()) if (buildEnvironment().searchInPath("sh.exe").isEmpty()) buildPath = QDir::toNativeSeparators(buildPath); @@ -122,6 +128,18 @@ QString AndroidPackageInstallationStep::nativeAndroidBuildPath() const return buildPath; } +FilePath AndroidPackageInstallationStep::androidBuildDirectory() const +{ + return buildDirectory() / Constants::ANDROID_BUILD_DIRECTORY; +} + +FilePath AndroidPackageInstallationStep::buildDirectory() const +{ + if (const BuildSystem *bs = buildSystem()) + return buildSystem()->buildTarget(target()->activeBuildKey()).workingDirectory; + return {}; +} + void AndroidPackageInstallationStep::setupOutputFormatter(OutputFormatter *formatter) { formatter->addLineParser(new GnuMakeParser); diff --git a/src/plugins/android/androidqtversion.cpp b/src/plugins/android/androidqtversion.cpp index 94872e34c81..3cc9b06ccd4 100644 --- a/src/plugins/android/androidqtversion.cpp +++ b/src/plugins/android/androidqtversion.cpp @@ -42,6 +42,7 @@ #include #include #include +#include #include @@ -172,19 +173,24 @@ int AndroidQtVersion::minimumNDK() const Utils::FilePath AndroidQtVersion::androidDeploymentSettings(const Target *target) { // Try to fetch the file name from node data as provided by qmake and Qbs - const QString buildKey = target->activeBuildKey(); + QString buildKey = target->activeBuildKey(); const ProjectNode *node = target->project()->findNodeForBuildKey(buildKey); if (node) { const QString nameFromData = node->data(Constants::AndroidDeploySettingsFile).toString(); if (!nameFromData.isEmpty()) return Utils::FilePath::fromUserInput(nameFromData); } + // If unavailable, construct the name by ourselves (CMake) - const BaseQtVersion *qt = QtSupport::QtKitAspect::qtVersion(target->kit()); - const bool isQt6 = qt && qt->qtVersion() >= QtSupport::QtVersionNumber{6, 0, 0}; - return target->activeBuildConfiguration()->buildDirectory().pathAppended( - isQt6 ? QString::fromLatin1("android-%1-deployment-settings.json").arg(buildKey) - : QLatin1String("android_deployment_settings.json")); + const BuildSystem *bs = target->buildSystem(); + if (!bs) + return {}; + const QString displayName = bs->buildTarget(buildKey).displayName; + return AndroidManager::buildDirectory(target).pathAppended( + AndroidManager::isQt5CmakeProject(target) + ? QLatin1String("android_deployment_settings.json") + : QString::fromLatin1("android-%1-deployment-settings.json") + .arg(displayName)); } void AndroidQtVersion::parseMkSpec(ProFileEvaluator *evaluator) const diff --git a/src/plugins/clangtools/unit-tests/qt-essential-includes/main.cpp b/src/plugins/clangtools/unit-tests/qt-essential-includes/main.cpp index 55f49d685f2..a60dcaef70a 100644 --- a/src/plugins/clangtools/unit-tests/qt-essential-includes/main.cpp +++ b/src/plugins/clangtools/unit-tests/qt-essential-includes/main.cpp @@ -1,7 +1,11 @@ #include #include +#ifdef QT_MULTIMEDIA_LIB #include +#endif +#ifdef QT_MULTIMEDIAWIDGETS_LIB #include +#endif #include #include #include diff --git a/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.pro b/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.pro index 2ff839a99a8..810b457b859 100644 --- a/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.pro +++ b/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.pro @@ -1,12 +1,18 @@ -QT += multimedia \ - multimediawidgets \ - network \ +QT += network \ qml \ quick \ sql \ testlib \ widgets +qtHaveModule(multimedia) { + QT += multimedia +} + +qtHaveModule(multimediawidgets) { + QT += multimediawidgets +} + TARGET = qt-essential-includes TEMPLATE = app SOURCES += main.cpp diff --git a/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.qbs b/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.qbs index d0b90bdacdb..0b1d0c0658e 100644 --- a/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.qbs +++ b/src/plugins/clangtools/unit-tests/qt-essential-includes/qt-essential-includes.qbs @@ -6,8 +6,6 @@ QtApplication { Depends { name: "Qt" submodules: [ - "multimedia", - "multimediawidgets", "network", "qml", "quick", @@ -17,6 +15,9 @@ QtApplication { ] } + Depends { name: "Qt.multimedia"; required: false } + Depends { name: "Qt.multimediawidgets"; required: false } + files : [ "main.cpp", ] diff --git a/src/plugins/qmakeprojectmanager/qmakeparsernodes.cpp b/src/plugins/qmakeprojectmanager/qmakeparsernodes.cpp index 51da4fafc8c..6cc4634375a 100644 --- a/src/plugins/qmakeprojectmanager/qmakeparsernodes.cpp +++ b/src/plugins/qmakeprojectmanager/qmakeparsernodes.cpp @@ -1186,7 +1186,7 @@ QmakeProFile::~QmakeProFile() m_parseFutureWatcher->cancel(); m_parseFutureWatcher->waitForFinished(); if (m_readerExact) - applyAsyncEvaluate(); + applyAsyncEvaluate(false); delete m_parseFutureWatcher; } cleanupProFileReaders(); @@ -1195,8 +1195,9 @@ QmakeProFile::~QmakeProFile() void QmakeProFile::setupFutureWatcher() { m_parseFutureWatcher = new QFutureWatcher; - QObject::connect(m_parseFutureWatcher, &QFutureWatcherBase::finished, - [this](){ applyAsyncEvaluate(); }); + QObject::connect(m_parseFutureWatcher, &QFutureWatcherBase::finished, [this]() { + applyAsyncEvaluate(true); + }); } bool QmakeProFile::isParent(QmakeProFile *node) @@ -1640,9 +1641,9 @@ void QmakeProFile::asyncEvaluate(QFutureInterface &fi, QmakeE fi.reportResult(evalResult); } -void QmakeProFile::applyAsyncEvaluate() +void QmakeProFile::applyAsyncEvaluate(bool apply) { - if (m_parseFutureWatcher->isFinished()) + if (apply) applyEvaluate(m_parseFutureWatcher->result()); m_buildSystem->decrementPendingEvaluateFutures(); } diff --git a/src/plugins/qmakeprojectmanager/qmakeparsernodes.h b/src/plugins/qmakeprojectmanager/qmakeparsernodes.h index f9400d9755b..fc90e0759de 100644 --- a/src/plugins/qmakeprojectmanager/qmakeparsernodes.h +++ b/src/plugins/qmakeprojectmanager/qmakeparsernodes.h @@ -352,7 +352,7 @@ private: void setParseInProgress(bool b); void setValidParseRecursive(bool b); - void applyAsyncEvaluate(); + void applyAsyncEvaluate(bool apply); void setupReader(); Internal::QmakeEvalInput evalInput() const; diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp index a6030701721..a647b653581 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp @@ -165,7 +165,7 @@ void PropertyEditorView::changeValue(const QString &name) m_locked = false; QString errMsg = QmlDesigner::ModelNode::getIdValidityErrorMessage(newId); if (!errMsg.isEmpty()) - Core::AsynchronousMessageBox::warning(tr("Invalid ID"), errMsg.arg(newId)); + Core::AsynchronousMessageBox::warning(tr("Invalid ID"), errMsg); else Core::AsynchronousMessageBox::warning(tr("Invalid ID"), tr("%1 already exists.").arg(newId)); } diff --git a/src/plugins/qmldesigner/designercore/imagecache/imagecacheconnectionmanager.cpp b/src/plugins/qmldesigner/designercore/imagecache/imagecacheconnectionmanager.cpp index 2c7982bd1f6..a33da7df5d8 100644 --- a/src/plugins/qmldesigner/designercore/imagecache/imagecacheconnectionmanager.cpp +++ b/src/plugins/qmldesigner/designercore/imagecache/imagecacheconnectionmanager.cpp @@ -41,7 +41,7 @@ bool ImageCacheConnectionManager::waitForCapturedData() disconnect(connections().front().socket.get(), &QIODevice::readyRead, nullptr, nullptr); while (!m_capturedDataArrived) { - bool dataArrived = connections().front().socket->waitForReadyRead(600000); + bool dataArrived = connections().front().socket->waitForReadyRead(10000); if (!dataArrived) return false; diff --git a/src/plugins/qmldesigner/designercore/model/modelnode.cpp b/src/plugins/qmldesigner/designercore/model/modelnode.cpp index 9e1e260bb09..924172b5b1a 100644 --- a/src/plugins/qmldesigner/designercore/model/modelnode.cpp +++ b/src/plugins/qmldesigner/designercore/model/modelnode.cpp @@ -218,21 +218,21 @@ QString ModelNode::getIdValidityErrorMessage(const QString &id) return {}; // valid if (id.at(0).isUpper()) - return QObject::tr("ID cannot start with an uppercase character."); + return QObject::tr("ID cannot start with an uppercase character (%1).").arg(id); if (id.at(0).isDigit()) - return QObject::tr("ID cannot start with a number."); + return QObject::tr("ID cannot start with a number (%1).").arg(id); if (id.contains(' ')) - return QObject::tr("ID cannot include whitespace."); + return QObject::tr("ID cannot include whitespace (%1).").arg(id); if (idIsQmlKeyWord(id)) - return QObject::tr("%1 is a reserved QML keyword."); + return QObject::tr("%1 is a reserved QML keyword.").arg(id); if (isIdToAvoid(id)) - return QObject::tr("%1 is a reserved property keyword."); + return QObject::tr("%1 is a reserved property keyword.").arg(id); - return QObject::tr("ID includes invalid characters."); + return QObject::tr("ID includes invalid characters (%1).").arg(id); } bool ModelNode::hasId() const diff --git a/src/plugins/studiowelcome/studiowelcomeplugin.cpp b/src/plugins/studiowelcome/studiowelcomeplugin.cpp index 8d6a6893483..52957d71925 100644 --- a/src/plugins/studiowelcome/studiowelcomeplugin.cpp +++ b/src/plugins/studiowelcome/studiowelcomeplugin.cpp @@ -456,11 +456,13 @@ WelcomeMode::WelcomeMode() setWidget(m_modeWidget); - QStringList designStudioQchPathes = {Core::HelpManager::documentationPath() - + "/qtdesignstudio.qch", - Core::HelpManager::documentationPath() + "/qtquick.qch", - Core::HelpManager::documentationPath() - + "/qtquickcontrols.qch"}; + QStringList designStudioQchPathes + = {Core::HelpManager::documentationPath() + "/qtdesignstudio.qch", + Core::HelpManager::documentationPath() + "/qtquick.qch", + Core::HelpManager::documentationPath() + "/qtquickcontrols.qch", + Core::HelpManager::documentationPath() + "/qtquicktimeline.qch", + Core::HelpManager::documentationPath() + "/qtquick3d.qch", + Core::HelpManager::documentationPath() + "/qtqml.qch"}; Core::HelpManager::registerDocumentation( Utils::filtered(designStudioQchPathes, diff --git a/src/plugins/welcome/welcomeplugin.cpp b/src/plugins/welcome/welcomeplugin.cpp index 3808ea43015..fad1cf44d70 100644 --- a/src/plugins/welcome/welcomeplugin.cpp +++ b/src/plugins/welcome/welcomeplugin.cpp @@ -175,7 +175,7 @@ public: : QWidget(parent), m_iconSource(iconSource), m_title(title), m_openUrl(openUrl) { setAutoFillBackground(true); - setMinimumHeight(30); + setMinimumHeight(35); setToolTip(m_openUrl); const QString fileName = QString(":/welcome/images/%1.png").arg(iconSource); @@ -289,7 +289,6 @@ public: { auto l = new QVBoxLayout; l->setContentsMargins(0, 0, 0, 0); - l->setSpacing(5); l->addWidget(new IconAndLink("download", tr("Get Qt"), "https://www.qt.io/download", this)); l->addWidget(new IconAndLink("qtaccount", tr("Qt Account"), "https://account.qt.io", this)); l->addWidget(new IconAndLink("community", tr("Online Community"), "https://forum.qt.io", this)); diff --git a/src/shared/qbs b/src/shared/qbs index 24924ce845f..351461d3680 160000 --- a/src/shared/qbs +++ b/src/shared/qbs @@ -1 +1 @@ -Subproject commit 24924ce845f09281fdfcb9b02784d23326bdd2bd +Subproject commit 351461d3680ec680a606fc5333e529c00e161c50 diff --git a/tests/system/suite_general/tst_opencreator_qbs/test.py b/tests/system/suite_general/tst_opencreator_qbs/test.py index cf663f2c660..3938f29f4bd 100644 --- a/tests/system/suite_general/tst_opencreator_qbs/test.py +++ b/tests/system/suite_general/tst_opencreator_qbs/test.py @@ -34,7 +34,7 @@ def main(): if not startedWithoutPluginError(): return openQbsProject(pathCreator) - if not addAndActivateKit(Targets.DESKTOP_5_10_1_DEFAULT): + if not addAndActivateKit(Targets.DESKTOP_5_14_1_DEFAULT): test.fatal("Failed to activate '%s'" % Targets.getStringForTarget(Targets.DESKTOP_5_10_1_DEFAULT)) invokeMenuItem("File", "Exit") return diff --git a/tests/system/suite_general/tst_opencreator_qbs/testdata/projecttree_creator.tsv b/tests/system/suite_general/tst_opencreator_qbs/testdata/projecttree_creator.tsv index 93dfff235ba..276eea2e851 100644 --- a/tests/system/suite_general/tst_opencreator_qbs/testdata/projecttree_creator.tsv +++ b/tests/system/suite_general/tst_opencreator_qbs/testdata/projecttree_creator.tsv @@ -1278,7 +1278,6 @@ "scanner.pro" "7" "plugins.pri" "6" "plugins.pro" "6" -"json.pri" "6" "install_prefix.pri" "5" "library_dirname.pri" "5" "tests" "4" @@ -2326,7 +2325,6 @@ "file.qbs" "6" "main.cpp" "6" "wizard.json" "6" -"qmake/empty" "5" "file.pro" "6" "wizard.json" "6" "qtquickapplication" "5" diff --git a/tests/system/suite_tools/tst_codepasting/test.py b/tests/system/suite_tools/tst_codepasting/test.py index 76dbb7ca092..530deca473a 100644 --- a/tests/system/suite_tools/tst_codepasting/test.py +++ b/tests/system/suite_tools/tst_codepasting/test.py @@ -239,9 +239,16 @@ def main(): clickButton(waitForObject(":*Qt Creator.Clear_QToolButton")) continue test.compare(filenameCombo.currentText, "%s: %s" % (protocol, pasteId), "Verify title of editor") - if protocol in (NAME_DPCOM, NAME_PBCOM) and pastedText.endswith("\n"): - pastedText = pastedText[:-1] - test.compare(editor.plainText, pastedText, "Verify that pasted and fetched texts are the same") + if protocol in (NAME_PBCOM): + test.verify(abs(len(str(editor.plainText)) - len(pastedText)) < 2, + "Verify that pasted and fetched texts have similar length") + test.compare(str(editor.plainText).rstrip(), pastedText.rstrip(), + "Verify that pasted and fetched texts have the same content") + else: + if protocol in (NAME_DPCOM) and pastedText.endswith("\n"): + pastedText = pastedText[:-1] + test.compare(editor.plainText, pastedText, + "Verify that pasted and fetched texts are the same") if protocol == NAME_DPCOM: checkForMovedUrl()