Doc: Turn "Using Qt Quick Toolbars" into a how-to topic

Task-number: QTCREATORBUG-29361
Change-Id: I5ed2aa9322f2d83dc8c58a6254a7cde5186252be
Reviewed-by: Eike Ziller <eike.ziller@qt.io>

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)

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

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} >
+        \li Go to \uicontrol File > \uicontrol {New File}.
-            \uicontrol Qt >
+        \li Select \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)}.
-            \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
+    Select the light bulb icon \inlineimage icons/refactormarker.png next to the
-    next to the type name to open the \l{Editing Rectangles}
+    type name to open a \l{Edit rectangles}{toolbar} that you can use to specify
-    {Qt Quick Toolbar for rectangles}. You can use it 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
+    Use a \l{Preview images}{toolbar for images} to specify image properties,
-    specify image properties, such as source file and fill mode.
+    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}
+    \note Use a \l{Preview animations}{toolbar for animations} to specify the
-    {Qt Quick Toolbar for animation} to specify the
     easing curve type and animation duration.
 
     \image qml-toolbar-animation.png {Qt Quick Toolbar for animation}

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
+    \previouspage qtquick-text-editor.html
-    \nextpage studio-finding.html
     \else
-    \previouspage creator-completing-code.html
+    \previouspage creator-how-tos.html
-    \nextpage creator-editor-codepasting.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,
+    \title Edit properties of QML types
-    a light bulb icon appears: \inlineimage icons/refactormarker.png
-    . Select the icon to open the toolbar.
 
-    To open toolbars immediately when you select a QML type, select
+    When you edit QML code in the code editor, you specify the properties of QML
-    \preferences > \uicontrol {Qt Quick} >
+    types. For some properties, such as colors and font names, this is not a
-    \uicontrol {QML/JS Editing} > \uicontrol {Always show Qt Quick Toolbar}.
+    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
+    \section1 Preview images
-    \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 Previewing Images
+    Edit the properties of
-
-    The Qt Quick Toolbar for images allows you to 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
-
+    to scale and tile the images, replace them with other images,
-    You can 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
+    Edit the properties of \l{Text} items to change the font family and size,
-    \l{Text} items.
+    as well as text formatting, style, alignment, and color.
-    You can 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
+    Edit the properties of PropertyAnimation items and the items that inherit it
-    PropertyAnimation items and the items that inherit it. You can
+    to change the easing curve type and duration. For some curves, you can also
-    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
 */

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

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