From ebb3ad8d477929aefce983bb5b118867d26f1464 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Thu, 14 Mar 2024 13:33:26 +0100 Subject: [PATCH] Doc: Turn "Using Qt Quick Toolbars" into a how-to topic Task-number: QTCREATORBUG-29361 Change-Id: I5ed2aa9322f2d83dc8c58a6254a7cde5186252be Reviewed-by: Eike Ziller --- .../editors/creator-editors-writing-code.qdoc | 20 ---- doc/qtcreator/src/qtcreator-toc.qdoc | 1 - .../creator-only/qtquick-app-tutorial.qdoc | 25 +++-- .../src/qtquick/qtquick-toolbars.qdoc | 91 ++++++++++--------- .../src/qtdesignstudio-toc.qdoc | 1 - .../src/views/qtquick-text-editor.qdoc | 2 +- 6 files changed, 62 insertions(+), 78 deletions(-) diff --git a/doc/qtcreator/src/editors/creator-editors-writing-code.qdoc b/doc/qtcreator/src/editors/creator-editors-writing-code.qdoc index a720f795346..1e7ce512236 100644 --- a/doc/qtcreator/src/editors/creator-editors-writing-code.qdoc +++ b/doc/qtcreator/src/editors/creator-editors-writing-code.qdoc @@ -37,26 +37,6 @@ JavaScript object notation (JSON) entity. In addition, you can run static checks on the QML and JavaScript code in your project to find common problems. - - \li \l{Complete code} - - \QC anticipates what you are going to write and completes code - and code snippets for elements, properties, and IDs. - - \li \l{Indent text or code} - - \QC indents text and code according to rules that you - specify separately for files that have C++, QML, or - Nim (experimental) code and for other text files. - - \li \l{Using Qt Quick Toolbars} - - When you edit QML code in the code editor, you specify the - properties of QML components. For some properties, such as - colors and font names, this is not a trivial task. For example, - few people can visualize the color \c {#18793f}. To easily edit - these properties, you can use the Qt Quick Toolbars. - \endlist \if defined(qtcreator) diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index 14fe5e27cdb..12a893a34f2 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -31,7 +31,6 @@ \list \li \l{Semantic Highlighting} \li \l{Checking Code Syntax} - \li \l{Using Qt Quick Toolbars} \endlist \li \l{Configuring the Editor} \endlist diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index b680928109f..b3b91a8d89e 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -1,4 +1,4 @@ -// Copyright (C) 2023 The Qt Company Ltd. +// Copyright (C) 2024 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only /*! @@ -55,9 +55,8 @@ To create a custom QML type: \list 1 - \li Select \uicontrol File > \uicontrol {New File} > - \uicontrol Qt > - \uicontrol {QML File (Qt Quick 2)}. + \li Go to \uicontrol File > \uicontrol {New File}. + \li Select \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)}. \li Select \uicontrol Choose to open the \uicontrol Location dialog. \li In the \uicontrol {File name} field, enter a name for the custom QML type: \e Page. @@ -78,12 +77,11 @@ When you start typing the QML type name, \QC suggests available types and properties to \l{Complete code}{complete the code}. - Select the light bulb icon \inlineimage icons/refactormarker.png - next to the type name to open the \l{Editing Rectangles} - {Qt Quick Toolbar for rectangles}. You can use it to specify + Select the light bulb icon \inlineimage icons/refactormarker.png next to the + type name to open a \l{Edit rectangles}{toolbar} that you can use to specify rectangle properties, such as color, transparency, and gradients. - \image qml-toolbar-rectangle.png {Qt Quick Toolbar for rectangles} + \image qml-toolbar-rectangle.png {Qt Quick toolbar for rectangles} Next, add an \l Image type with \e qt-logo.png as the source. You can also use any other image or a component. Position the image in the top-left @@ -91,10 +89,10 @@ \printuntil } - You can use the \l{Previewing Images}{Qt Quick Toolbar for images} to - specify image properties, such as source file and fill mode. + Use a \l{Preview images}{toolbar for images} to specify image properties, + such as source file and fill mode. - \image qml-toolbar-image.png {Logo visible in Qt Quick Toolbar for images} + \image qml-toolbar-image.png {Logo visible in Qt Quick toolbar for images} Now, create the rectangles that the image will move between. Their size should match the image size and they should be transparent, so that the @@ -114,7 +112,7 @@ \printuntil anchors.fill - To check your code, you can compare it with the \e {Page.qml} example file. + To check your code, compare it with the \e {Page.qml} example file. Next, make the image move between the rectangles when users click them by adding states and by connecting mouse clicks to state changes. @@ -171,8 +169,7 @@ \printuntil }, - \note You can use the \l{Previewing Animation} - {Qt Quick Toolbar for animation} to specify the + \note Use a \l{Preview animations}{toolbar for animations} to specify the easing curve type and animation duration. \image qml-toolbar-animation.png {Qt Quick Toolbar for animation} diff --git a/doc/qtcreator/src/qtquick/qtquick-toolbars.qdoc b/doc/qtcreator/src/qtquick/qtquick-toolbars.qdoc index 829a711138f..d11ec268b3f 100644 --- a/doc/qtcreator/src/qtquick/qtquick-toolbars.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-toolbars.qdoc @@ -1,4 +1,4 @@ -// Copyright (C) 2023 The Qt Company Ltd. +// Copyright (C) 2024 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only // ********************************************************************** @@ -10,56 +10,47 @@ /*! \page qt-quick-toolbars.html \if defined(qtdesignstudio) - \previouspage creator-preferences-qtquick-code-style.html - \nextpage studio-finding.html + \previouspage qtquick-text-editor.html \else - \previouspage creator-completing-code.html - \nextpage creator-editor-codepasting.html + \previouspage creator-how-tos.html \endif - \title Using Qt Quick Toolbars + \ingroup creator-how-to-edit - When you select a QML type in the code and a toolbar is available, - a light bulb icon appears: \inlineimage icons/refactormarker.png - . Select the icon to open the toolbar. + \title Edit properties of QML types - To open toolbars immediately when you select a QML type, select - \preferences > \uicontrol {Qt Quick} > - \uicontrol {QML/JS Editing} > \uicontrol {Always show Qt Quick Toolbar}. + When you edit QML code in the code editor, you specify the properties of QML + types. For some properties, such as colors and font names, this is not a + trivial task. For example, few people can visualize the color \c {#18793f}. + To easily edit these properties, use the Qt Quick toolbars. - \image qtcreator-qml-js-editing.webp {QML/JS Editing preferences} + When you select a QML type in the code and a light bulb icon appears + (\inlineimage icons/refactormarker.png), select it to open a toolbar + for changing the properties of that type. - Drag the toolbar to pin it to another location. Select - \inlineimage icons/pin.png - to unpin the toolbar and move it to its default location. To pin toolbars - by default, select \uicontrol {Pin Qt Quick Toolbar}. + \section1 Preview images - \section1 Previewing Images - - The Qt Quick Toolbar for images allows you to edit the properties of + Edit the properties of \l {Border Image} and \if defined(qtdesignstudio) - \l {Images}{Image} items. + \l {Images}{Image} items \else - \l Image items. + \l Image items \endif - - You can scale and tile the images, replace them with other images, + to scale and tile the images, replace them with other images, preview them, and change the image margins. - \image qml-toolbar-image.png "Qt Quick Toolbar for images" + \image qml-toolbar-image.png {Qt Quick Toolbar for images} To preview an image, double-click it on the toolbar. In the preview dialog, you can zoom the image. Drag the image margins to change them. - \image qml-toolbar-image-preview.png "Image preview dialog" + \image qml-toolbar-image-preview.png {Image preview dialog} - \section1 Formatting Text + \section1 Format text - The Qt Quick Toolbar for text allows you to edit the properties of - \l{Text} items. - You can change the font family and size as well as text formatting, style, - alignment, and color. + Edit the properties of \l{Text} items to change the font family and size, + as well as text formatting, style, alignment, and color. \note Move the mouse pointer over a color hex value in the code editor to see the color as a tooltip. @@ -68,35 +59,53 @@ cannot use the toolbar to edit it. The button for editing the property is disabled. - \image qml-toolbar-text.png "Qt Quick Toolbar for text" + \image qml-toolbar-text.png {Qt Quick Toolbar for text} By default, font size is specified as pixels. To use points, instead, change \uicontrol px to \uicontrol pt in the size field. - \section1 Previewing Animation + \section1 Preview animations - The Qt Quick Toolbar for animation allows you to edit the properties of - PropertyAnimation items and the items that inherit it. You can - change the easing curve type and duration. For some curves, you can also + Edit the properties of PropertyAnimation items and the items that inherit it + to change the easing curve type and duration. For some curves, you can also specify amplitude, period, and overshoot values. - \image qml-toolbar-animation.png "Qt Quick Toolbar for animation" + \image qml-toolbar-animation.png {Qt Quick Toolbar for animation} Select the play button to preview your changes. - \section1 Editing Rectangles + \section1 Edit rectangles - The Qt Quick Toolbar for rectangles allows you to edit the properties of + Edit the properties of \if defined(qtdesignstudio) \l {basic-rectangle}{Rectangle} \else Rectangle \endif - items. You can change the fill and border colors and add gradients. + items to change the fill and border colors and add gradients. - \image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles" + \image qml-toolbar-rectangle.png {Qt Quick Toolbar for rectangles} To add gradient stop points, click above the gradient bar. To remove stop points, drag them upwards. + \section1 Show toolbars immediately + + To open toolbars immediately when you select a QML type, select + \preferences > \uicontrol {Qt Quick} > + \uicontrol {QML/JS Editing} > \uicontrol {Always show Qt Quick Toolbar}. + + \image qtcreator-qml-js-editing.webp {QML/JS Editing preferences} + + \section1 Pin toolbars + + Drag the toolbar to pin it to another location. Select + \inlineimage icons/pin.png to unpin the toolbar and move + it to its default location. + + To pin toolbars by default, select \uicontrol {Pin Qt Quick Toolbar}. + + \if defined(qtcreator) + \sa {Creating a Qt Quick Application} + \endif */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 4ecc7f4cfdd..a335853428c 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -206,7 +206,6 @@ \li \l{Indent text or code} \li \l{Behavior} \li \l{Qt Quick Code Style} - \li \l{Using Qt Quick Toolbars} \endlist \li \l{Finding} \list diff --git a/doc/qtdesignstudio/src/views/qtquick-text-editor.qdoc b/doc/qtdesignstudio/src/views/qtquick-text-editor.qdoc index f6666daa50b..b7b4bdf823b 100644 --- a/doc/qtdesignstudio/src/views/qtquick-text-editor.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-text-editor.qdoc @@ -24,7 +24,7 @@ \li \l{Checking Code Syntax} \li \l{Complete code} \li \l{Indent text or code} - \li \l{Using Qt Quick Toolbars} + \li \l{Edit properties of QML types} \endlist \section1 Refactoring Code