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/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..1737873b3f9 100644 --- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc @@ -27,16 +27,16 @@ \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" - \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 @@ -46,7 +46,7 @@ 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. @@ -197,6 +197,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..50df2245895 100644 --- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc @@ -28,14 +28,14 @@ \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 @@ -49,8 +49,8 @@ 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 @@ -237,5 +237,5 @@ 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}. + \l {Log In UI - Timeline}. */ diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc index 0d7024776bf..17d49f4bb8a 100644 --- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc @@ -28,14 +28,14 @@ \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. @@ -49,9 +49,9 @@ 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 diff --git a/doc/qtdesignstudio/examples/loginui1/EntryField.ui.qml b/doc/qtdesignstudio/examples/loginui1/EntryField.ui.qml new file mode 100644 index 00000000000..4232d16445b --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/EntryField.ui.qml @@ -0,0 +1,127 @@ + + +/**************************************************************************** +** +** 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 + width: 500 + height: 100 + + 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" + hoverEnabled: false + + background: buttonBackground + Rectangle { + id: buttonBackground + color: "#00000000" + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + radius: 50 + border.color: "#ffffff" + } + + contentItem: textItem + Text { + id: textItem + text: control.text + font.pixelSize: 34 + + opacity: enabled ? 1.0 : 0.3 + color: "#ffffff" + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + leftPadding: 50 + font.family: "Titillium Web ExtraLight" + } + + states: [ + State { + name: "normal" + when: !control.down + + PropertyChanges { + target: textItem + font.family: "Titillium Web ExtraLight" + } + + PropertyChanges { + target: buttonBackground + color: "#28e7e7e7" + } + }, + State { + name: "down" + when: control.down + PropertyChanges { + target: textItem + color: "#ffffff" + } + + PropertyChanges { + target: buttonBackground + 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/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc index efa43dcbbae..89165ac9ae3 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -72,7 +72,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-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