Doc: Update Design Views documents

- Update images, icons, and text.
- Remove summary and context menu topics.
- Reorganize the design views alphabetically in TOC.

Fixes: QDS-12363
Change-Id: I3ddb659ec872ebc554c5e7fbbf7cb31d7ebd9b05
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtcreator/src/user-interface/creator-file-system-view.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
 
 /*!
@@ -15,7 +15,11 @@
 
     \title File System
 
+    \if defined(qtdesignstudio)
+    \brief View all the files in the current directory.
+    \else
     \brief Shows all the files in the current directory.
+    \endif
 
     \if defined(qtcreator)
     \note Usually, \l{Navigate with locator}{searching with the locator}
@@ -25,7 +29,7 @@
 
     \image qtcreator-filesystem-view.webp {File System view in the sidebar}
     \else
-    \image qtcreator-filesystem-view-design.png {File System view}
+    \image filesystem-view-design.webp {File System view}
     \endif
 
     To move to the root directory of the file system, select \uicontrol Computer
@@ -52,6 +56,7 @@
     The view displays the path to the active file as bread crumbs. You can move
     to any directory along the path by clicking it.
 
+    \if defined(qtcreator)
     \section1 File System Context Menu
 
     Use the context menu functions to:
@@ -64,34 +69,24 @@
             that has the file. To specify the terminal to use on Linux and
             \macos, select \preferences > \uicontrol Environment >
             \uicontrol System.
-            \if defined(qtcreator)
             To use an \l{Terminal} {internal terminal}, select \preferences >
             \uicontrol Terminal > \uicontrol {Use internal terminal}.
-            \endif
         \li Search in the selected directory.
         \li View file properties, such as name, path, MIME type, default editor,
             line endings, indentation, owner, size, last read and modified
             dates, and permissions.
-        \li Create new files. For more information, see
-            \if defined(qtdesignstudio)
-            \l{Adding Files to Projects}.
-            \else
-            \l{Create files}.
-            \endif
+        \li Create new files. For more information, see {Create files}.
         \li Rename existing files. To move the file to another directory, enter
             the relative or absolute path to its new location in addition to the
             new filename.
         \li Remove existing files.
         \li Create new folders.
-        \if defined(qtcreator)
         \li Compare the selected file with the currently open file in the diff
             editor. For more information, see \l{Compare files}.
-        \endif
         \li Display the contents of a particular directory in the view.
         \li Collapse all open folders.
     \endlist
 
-    \if defined(qtcreator)
     \section1 File System View Toolbar
 
     The toolbar in the \uicontrol {File System} view has additional

doc/qtcreator/src/user-interface/creator-open-documents-view.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
 
 /*!
@@ -16,13 +16,26 @@
 
     \title Open Documents
 
+    \if defined(qtdesignstudio)
+    \brief View currently open files.
+    \else
     \brief Shows currently open files.
+    \endif
 
+    \if defined(qtdesignstudio)
+    \image open-documents-view.webp {Open Documents view}
+    \else
     \image qtcreator-open-documents-view.png {Open Documents view}
+    \endif
 
     You can use the context menu to apply some of the functions also available
-    in the \uicontrol File menu and in the \l {File System Context Menu}
-    {File System} view to the file that you select in the view.
+    in the \uicontrol File menu and in the
+    \if defined(qtcreator)
+    \l {File System Context Menu}{File System}
+    \else
+    \uicontrol {File System}
+    \endif
+    view to the file that you select in the view.
 
     In addition, you can:
 

doc/qtcreator/src/user-interface/creator-projects-view.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
 
 /*!
@@ -15,7 +15,11 @@
 
     \title Projects
 
+    \if defined(qtdesignstudio)
+    \brief View a list of the files contained within the open project.
+    \else
     \brief Shows a list of projects in a project tree.
+    \endif
 
     \if defined(qtcreator)
     The project tree has a list of all projects open in the current
@@ -29,7 +33,7 @@
     is the fastest way to find a particular project, file, class, or function,
     or almost anything else in your project.
     \else
-    \image qtcreator-projects-view-design.png {Projects view}
+    \image projects-view-design.webp {Projects view}
     \endif
 
     You can use the project tree in the following ways:
@@ -43,14 +47,19 @@
             Use the \l{Switch between modes} {mode selector} to open the current
             file in another editor.
             \endif
-        \li To bring up a \l{Projects View Context Menu}{context menu}
+        \li To open a
+            \if defined(qtcreator)
+            \l{Projects View Context Menu}{context menu}
+            \else
+            context menu
+            \endif
             that has the actions most commonly needed, right-click an
             item in the project tree. For example, through the menu of
             the project root directory you can, among other actions, run
             and close the project.
         \li To see the absolute path of a file, move the mouse pointer over the
             file name.
-        \li To move files from one project to another, drag-and-drop them
+        \li To move files from one project to another, drag them
             in the project tree. \QC makes the necessary changes to project
             configuration files.
     \endlist
@@ -58,6 +67,7 @@
     \note If you cannot see a file in the \l Projects view, switch to the
     \uicontrol {File System} view, which shows all the files in the file system.
 
+    \if defined(qtcreator)
     \section1 Projects View Context Menu
 
     The \uicontrol Projects view has context menus for managing projects,
@@ -65,22 +75,15 @@
     projects and subprojects:
 
     \list
-        \if defined(qtcreator)
         \li Set a project as the active project.
-        \endif
         \li Execute \uicontrol Build menu commands.
         \li Create new files. For more information, see
-            \if defined(qtdesignstudio)
-            \l{Adding Files to Projects}.
-            \else
             \l{Create files}.
-            \endif
         \li Rename existing files. If you change the base name of a
             file, \QC displays a list of other files with the same base name
             and offers to rename them as well. If you rename a UI file (.ui),
             \QC also changes corresponding include statements accordingly.
         \li Remove existing files.
-        \if defined(qtcreator)
         \li Remove existing directories from \l{Import an existing project}
             {generic projects}.
         \li Add existing files and directories.
@@ -88,16 +91,13 @@
             \l{Add libraries to qmake projects}.
         \li Add and remove subprojects.
         \li Find unused functions.
-        \endif
         \li Search in the selected directory.
 
         \li Open a terminal window in the project directory. To specify the
             terminal to use on Linux and \macos, select \preferences >
             \uicontrol Environment > \uicontrol System.
-            \if defined(qtcreator)
             To use an \l{Terminal}{internal terminal}, select \preferences >
             \uicontrol Terminal > \uicontrol {Use internal terminal}.
-            \endif
         \li Open a terminal window in the project directory that you configured
             for building or running the project.
         \li Expand or collapse the tree view to show or hide all files and
@@ -114,7 +114,6 @@
     the \l {File System} view. To view a project in it, select
     \uicontrol {Show in File System View}.
 
-    \if defined(qtcreator)
     \section1 Projects View Toolbar
 
     The toolbar in the \uicontrol Projects view has additional options.

doc/qtdesignstudio/src/components/qtquick-component-context-menu.qdocinc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -26,7 +26,7 @@
         \li Group
         \li \l{Organizing Components}
     \row
-        \li Position
+        \li Positioner
         \li \l{Using Positioners}
     \row
         \li Layout

doc/qtdesignstudio/src/overviews/qtquick-production-quality-animation.qdoc

@@ -28,7 +28,7 @@
     to upload the draw primitives to the graphics hardware.
 
     The frames-per-second (FPS) refresh rate of animations is displayed in the
-    \uicontrol FPS field on the \l{Summary of Main Toolbar Actions}{toolbar}
+    \uicontrol FPS field on the toolbar
     in the \uicontrol Design mode.
 
     To improve the FPS rate, application developers should:

doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc

@@ -30,7 +30,7 @@
     An \e asset is an image, font file, 3D model, or other supported file that
     you add to your \l{glossary-project}{project}.
 
-    \image qtquick-assets-tab.png "Assets"
+    \image qtquick-assets-tab.webp "Assets"
 
     Assets are packaged with \l{glossary-component}{components} for delivery
     to users.
@@ -187,7 +187,7 @@
     also be modified by another component, unless a particular component
     type has explicitly disallowed this for a specific property.
 
-    \image qtquick-item-properties-common.png "Properties view"
+    \image qtquick-item-properties-common.webp "Properties view"
 
     Read more about properties:
 

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -16,30 +16,30 @@
                             \list
                                 \li \l{2D}
                                 \li \l{3D}
-                                \li \l{Material Editor and Browser}
-                                \li \l{Components}
                                 \li \l{Assets}
-                                \li \l{Navigator}
-                                \li \l{Properties}
-                                \li \l{Connections}
-                                \li \l{States}
-                                \li \l{Translations}
-                                \li \l{Transitions}
-                                \li \l{Timeline}
-                                \li \l{Curves}
                                 \li \l{Code}
                                     \generatelist studio-how-to-code
                                     \generatelist studio-how-to-refactor-code
                                     \generatelist studio-how-to-search
                                     \generatelist studio-preferences-code
-                                \li \l{Projects}
-                                \li \l{File System}
-                                \li \l{Open Documents}
+                                \li \l{Components}
+                                \li \l{Connections}
                                 \li \l{Content Library}
-                                \li \l{Texture Editor}
-                                \li \l{Qt Insight}
+                                \li \l{Curves}
                                 \li \l{Effect Composer}
+                                \li \l{File System}
+                                \li \l{Material Editor and Browser}
                                 \li \l{Model Editor}
+                                \li \l{Navigator}
+                                \li \l{Open Documents}
+                                \li \l{Projects}
+                                \li \l{Properties}
+                                \li \l{Qt Insight}
+                                \li \l{States}
+                                \li \l{Texture Editor}
+                                \li \l{Timeline}
+                                \li \l{Transitions}
+                                \li \l{Translations}
                            \endlist
                         \li \l{Managing Workspaces}
                         \li \l{Manage sessions}

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2022 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,8 +6,12 @@
     \page studio-3d-editor.html
     \nextpage studio-material-editor.html
 
+    \ingroup studio-views
+
     \title 3D
 
+    \brief Edit a 3D scene.
+
     When editing a 3D scene, you view the scene in the \uicontrol{3D}
     view. You can change the projection of the view by switching between
     \e {perspective camera} and \e {orthographic camera} modes. When using the
@@ -25,7 +29,7 @@
     components from \uicontrol Components > \inlineimage icons/plus.png
     > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
 
-    You can use the \l{Summary of the 3D View Toolbar Buttons}{toolbar buttons}
+    You can use the toolbar buttons
     to \e transform 3D components and manipulate the 3D scene. Transformation
     refers to moving, rotating, or scaling of a component. The \e pivot of the
     component is used as the origin for transformations. You can set a
@@ -56,7 +60,7 @@
       \li Delete components
     \endlist
 
-    \image 3d-view-context-menu.png
+    \image 3d-view-context-menu.webp "The context menu in the 3D view"
 
     To refresh the contents of the \uicontrol{3D} view, press \key P or
     select the \inlineimage icons/reset.png
@@ -468,125 +472,4 @@
     Select \uicontrol{Reset All Viewports} to reset the shading of the scene in all of the
     splits.
 
-    \section1 Summary of the 3D View Toolbar Buttons
-
-    The \uicontrol{3D} view toolbar contains the following buttons:
-
-    \table
-    \header
-        \li Button
-        \li Tooltip
-        \li Keyboard Shortcut
-        \li Read More
-    \row
-        \li \inlineimage icons/select_group.png
-            \inlineimage icons/select_item.png
-        \li Toggle Group/Single Selection Mode
-        \li \key Q
-        \li \l{Selecting Components}
-    \row
-        \li \inlineimage icons/move_off.png
-        \li Activate the Move Tool
-        \li \key W
-        \li \l{moving components 3d view}{Moving Components}
-    \row
-        \li \inlineimage icons/rotate_off.png
-        \li Activate Rotate Tool
-        \li \key E
-        \li \l{Rotating Components}
-    \row
-        \li \inlineimage icons/scale_off.png
-        \li Activate Scale Tool
-        \li \key R
-        \li \l{Scaling Components}
-    \row
-        \li \inlineimage icons/fit_selected.png
-        \li Fit Selected Object to View
-        \li \key F
-        \li \l{Controlling the 3D View Camera}
-    \row
-        \li  \inlineimage icons/perspective_camera.png
-             \inlineimage icons/orthographic_camera.png
-        \li Toggle Perspective/Orthographic Edit Camera
-        \li \key T
-        \li \l{Controlling the 3D View Camera}
-    \row
-        \li \inlineimage icons/global.png
-        \li Toggle Global/Local Orientation
-        \li \key Y
-        \li \l{Using Global and Local Orientation}
-    \row
-        \li \inlineimage icons/edit_light_off.png
-            \inlineimage icons/edit_light_on.png
-        \li Toggle Edit Light On/Off
-        \li \key U
-        \li \l{Using Edit Light}
-    \row
-        \li \inlineimage icons/snapping-3d.png
-        \li Toggle Snapping During Node Drag
-        \li \key Shift + \key Tab
-        \li \l{Snapping}
-    \row
-        \li \inlineimage icons/snapping-3d-conf.png
-        \li Open Snap Configuration Dialog
-        \li
-        \li \l{Configuring Snapping}
-    \row
-        \li \inlineimage icons/align-camera-on.png
-        \li Align Selected Cameras to View
-        \li
-        \li\l{Aligning Views and Cameras}
-    \row
-        \li \inlineimage icons/align-view-on.png
-        \li Align View to Selected Camera
-        \li
-        \li \l{Aligning Views and Cameras}
-    \row
-        \li \inlineimage icons/camera_speed.png
-        \li Open camera speed configuration dialog
-        \li
-        \li\l{Using Fly Mode}
-    \row
-        \li \inlineimage icons/visibilityon.png
-        \li Visibility Toggles
-        \li
-        \li \l{Toggling Visibility}
-    \row
-        \li \inlineimage icons/3d-background-color.png
-        \li Background Color Actions
-        \li
-        \li \l{Changing Colors}
-    \row
-        \li \inlineimage icons/split-view.png
-        \li Toggle Split View On/Off
-        \li \key Ctrl + \key Alt + \key Q
-        \li \l{Using Split View}
-    \row
-        \li \inlineimage icons/particles-seek.png
-        \li Seek Particle System Time
-        \li
-        \li \l{Particle Editor}
-    \row
-        \li \inlineimage icons/particle-animation-on.png
-        \li Toggle Particle Animation
-        \li \key V
-        \li \l{Particle Editor}
-    \row
-        \li \inlineimage icons/particle-play.png
-            \inlineimage icons/particle-pause.png
-        \li Play/Pause Particles
-        \li \key ,
-        \li \l{Particle Editor}
-    \row
-        \li \inlineimage icons/particle-restart.png
-        \li Restart Particles
-        \li \key /
-        \li \l{Particle Editor}
-    \row
-        \li \inlineimage icons/reset.png
-        \li Reset View
-        \li \key P
-        \li
-    \endtable
-
 */

doc/qtdesignstudio/src/reference/qtdesignstudio-keyboard-shortcuts.qdoc

@@ -204,7 +204,10 @@
             \li  Action
             \li  Keyboard shortcut
         \row
-            \li  Open the QML file that defines the selected component
+            \li  Open the project with \uicontrol {Live Preview}.
+            \li  \key{Alt+P} (\key{Opt+P} on \macos)
+        \row
+            \li  Open the QML file that defines the selected component.
             \li  \key{F2}
         \row
             \li  Jump to the \uicontrol {Code} view.

doc/qtdesignstudio/src/views/qtquick-assets.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2022 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,43 +6,31 @@
     \previouspage quick-components-view.html
     \nextpage qtquick-navigator.html
 
+    \ingroup studio-views
+
     \title Assets
 
+    \brief Select assets such as images and fonts to use in your application.
+
     The \uicontrol Assets view lists available assets.
 
     \uicontrol {Assets} displays the images and other files
-    that you add to the project folder by dragging-and-dropping external asset
+    that you add to the project folder by dragging external asset
     files to \QDS or by selecting \inlineimage icons/plus.png
     . For more information about importing assets to \QDS, see
     \l {Importing 2D Assets} and \l {Importing 3D Assets}.
 
-    To add assets to your UI, drag-and-drop them from
+    To add assets to your UI, drag them from
     \uicontrol Assets to the \l Navigator, \l {2D}, or \l {3D} view.
 
     To add multiple assets to your UI simultaneously, multiselect them first by
     holding \key Ctrl and clicking the asset files you wish to select.
 
-    \image qtquick-assets-tab.png "Assets view"
+    \image qtquick-assets-tab.webp "Assets view"
 
-    When you drag-and-drop assets from \uicontrol Assets to the \l Navigator
+    When you drag assets from \uicontrol Assets to the \l Navigator
     or \l {2D} view, component instances with a suitable type are
     automatically created for you. For example, instances of the
     \l{Images}{Image} component will be created for graphics files.
 
-    \section1 Context Menu Commands
-
-    \image qtquick-library-context-menu.png "Context menu commands in Assets"
-
-    To use the context menu commands in \uicontrol Assets, right-click the
-    name of a folder and select one of the following commands:
-
-    \list
-        \li \uicontrol {Expand All}: expands all folders.
-        \li \uicontrol {Collapse All}: collapses all folders.
-        \li \uicontrol {Rename Folder}: prompts you to enter a new name
-            for the folder.
-        \li \uicontrol {New Folder}: creates a new folder.
-        \li \uicontrol {Delete Folder}: deletes the folder.
-    \endlist
-
 */

doc/qtdesignstudio/src/views/qtquick-components-view.qdoc

@@ -1,13 +1,18 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
     \page quick-components-view.html
     \previouspage studio-material-editor.html
     \nextpage quick-assets.html
+    \sa {Using Components}
+
+    \ingroup studio-views
 
     \title Components
 
+    \brief Select preset components and your own components to use in your application.
+
     The \uicontrol Component view lists the available components.
 
     \image qtquick-components-tab.png "Components view"
@@ -86,27 +91,4 @@
     final application package, it is recommended that you select
     \uicontrol {Remove Module} to remove the ones you don't use in the project.
 
-    \section1 Context Menu Commands
-
-    \image qtquick-components-context-menu.png "Context menu commands in Components"
-    \image qtquick-components-context-menu-hide.png "Context menu command Hide Category"
-
-    To use the context menu commands in \uicontrol Components, right-click the
-    name of a module or category and select one of the following commands:
-
-    \list
-        \li \uicontrol {Remove Module}: removes the module and all of its
-            components from \uicontrol Components.
-        \li \uicontrol {Expand All}: expands all the modules.
-        \li \uicontrol {Collapse All}: collapses all the modules.
-        \li \uicontrol {Hide Category}: hides the category from the module.
-        \li \uicontrol {Show Module Hidden Categories}: shows the hidden
-            categories of the module.
-        \li \uicontrol {Show All Hidden Categories}: shows the hidden
-            categories in all of the modules.
-    \endlist
-
-    \note The context menu commands for the \uicontrol Components categories do
-    not function if you have entered something into the \uicontrol Search field.
-    Clear the \uicontrol Search field to resume using the context menu commands.
 */

doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc

@@ -1,13 +1,19 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
     \page qtquick-connection-view.html
     \previouspage qtquick-properties-view.html
     \nextpage qtquick-states-view.html
+    \sa {Working with Connections}
+
+    \ingroup studio-views
 
     \title Connections
 
+    \brief Add functionality to the UI by creating connections between components,
+    signals, and component properties.
+
     The \uicontrol {Connections} view is a collection of views that enable you
     to create connections between components and the application, to bind
     component properties together, and to add custom properties for components.
@@ -36,29 +42,4 @@
     {preset properties} that you can specify values for. You can add
     custom properties that would not otherwise exist for a particular
     \l{Component Types}{component type}.
-
-    \section1 Summary of the Connections View Tabs
-
-    \table
-    \header
-        \li Tab
-        \li Purpose
-        \li Read More
-    \row
-        \li \uicontrol Connections
-        \li Create connections between components and the application logic
-            by accessing signals outside of the components that emit them.
-        \li \l{Connecting Components to Signals}
-    \row
-        \li \uicontrol Bindings
-        \li Dynamically change the behavior of a component by creating a
-            binding between the properties of two components.
-        \li \l{Adding Bindings Between Properties}
-        \row
-        \li \uicontrol Properties
-        \li Add custom properties that would not otherwise exist for a
-            particular preset component or your own custom component.
-        \li \l{Specifying Custom Properties}
-
-    \endtable
 */

doc/qtdesignstudio/src/views/qtquick-curve-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,12 +6,16 @@
     \previouspage qtquick-timeline-view.html
     \nextpage qtquick-text-editor.html
 
+    \ingroup studio-views
+
     \title Curves
 
+    \brief View and modify the animation curve.
+
     The \uicontrol {Curves} view shows the interpolated values of an animated
     property over the animation range.
 
-    \image studio-curve-editor.png "Curves"
+    \image studio-curve-editor.webp "Curves"
 
     When you edit an animation curve, you implicitly edit the
     \l{Editing Easing Curves}{easing curves} that the underlying system uses
@@ -40,45 +44,6 @@
     and then select \inlineimage icons/pin.png
     .
 
-    \section1 Curves Toolbar
-
-    The \uicontrol {Curves} toolbar contains the following buttons and
-    fields.
-
-    \table
-    \header
-        \li Button/Field
-        \li Action
-    \row
-        \li \inlineimage icons/easing-curve-linear-icon.png
-        \li \uicontrol Linear specifies that the interpolation between
-            keyframes is linear.
-    \row
-        \li \inlineimage icons/easing-curve-step-icon.png
-        \li \uicontrol Step uses steps for interpolation between keyframes.
-    \row
-        \li \inlineimage icons/easing-curve-spline-icon.png
-        \li \uicontrol Spline uses bezier spline curves for interpolation
-            between keyframes and displays handles for managing them.
-    \row
-        \li \uicontrol {Set Default}
-        \li Currently not used.
-    \row
-        \li \uicontrol Unify
-        \li For \uicontrol Spline curves, locks the handle on the left of a
-            keyframe to the one on the right.
-    \row
-        \li Start Frame
-        \li Specifies the first frame of the curve.
-    \row
-        \li End Frame
-        \li Specifies the last frame of the curve.
-    \row
-        \li Current Frame
-        \li Displays the frame that the playhead is currently on. Enter a
-            number in the field to move the playhead to the respective frame.
-    \endtable
-
     \section1 Editing Animation Curves
 
     To edit animation curves:

doc/qtdesignstudio/src/views/qtquick-designer.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 // **********************************************************************
@@ -27,218 +27,8 @@
 
     \section1 Summary of Design Views
 
-    In addition to the summary of design views, the table below includes an MCU
-    column that indicates the views which are fully supported on MCU projects.
-    For more information, see  \l {\QDS Features on MCU Projects}.
+    The following table provides a summary of the design views. For information on
+    MCU support, see \l {\QDS Features on MCU Projects}.
 
-    \table
-    \header
-        \li View
-        \li Purpose
-        \li MCU
-        \li Read More
-    \row
-        \li \l {2D}
-        \li Provides a working area for designing 2D UIs.
-            When you are editing 3D scenes, the \uicontrol {2D} view is
-            used as a canvas for the 3D scene projected by the camera.
-        \li \image ok.png
-        \li \l {2D}
-    \row
-        \li \l {3D}
-        \li Provides an editor for files you created using 3D graphics
-            applications and stored in one of the supported formats.
-        \li
-        \li \l {3D}
-    \row
-        \li \l {Material Editor and Browser}
-        \li In the \uicontrol {Material Editor} and
-        \uicontrol {Material Browser} views, you create and manage materials and
-        textures.
-        \li
-        \li \l {Material Editor and Browser}
-   \row
-        \li \l Components
-        \li Contains preset components and your own components, that you can use
-            to design you application.
-        \li \image ok.png
-        \li \l{Using Components}
-   \row
-        \li \l Assets
-        \li Contains assets such as images and fonts that you can use in your
-            application.
-        \li \image ok.png
-        \li \l Assets
-    \row
-        \li \l Navigator
-        \li Displays the composition of the current component file as
-            a tree structure. A component file can contain references
-            to other components and assets.
-        \li \image ok.png
-        \li \l Navigator
-    \row
-        \li \l Properties
-        \li Enables you to modify the properties of the selected component.
-        \li \image ok.png
-        \li \l {Specifying Component Properties}
-    \row
-        \li \l{Connections}
-        \li Enables you to add functionality to the UI by creating
-            connections between components, signals, and component properties.
-        \li \image ok.png
-        \li \l{Working with Connections}
-    \row
-        \li \l States
-        \li Displays the different states that can be applied to a component.
-            Typically, states describe UI configurations, such as the
-            visibility and behavior of components and the available user
-            actions.
-        \li \image ok.png
-        \li \l{Working with States}
-    \row
-        \li \l{Transitions}
-        \li Enables you to make movement between states smooth by animating
-            the changes between states.
-        \li \image ok.png
-        \li \l{Animating Transitions Between States}
-    \row
-        \li \l Translations
-        \li Provides functionality to add multi-language support to your
-        project.
-        \li
-        \li \l{Translations}
-    \row
-        \li \l Timeline
-        \li Provides a timeline and keyframe based editor for animating
-            the properties of components.
-        \li \image ok.png
-        \li \l{Creating Timeline Animations}
-    \row
-        \li \l{Curves}
-        \li Enables you to view and modify the whole animation curve by
-            inserting keyframes to the curve and dragging them and the point
-            handlers to modify the curve.
-        \li
-        \li \l {Editing Animation Curves}
-    \row
-        \li \l{Code}
-        \li Provides a code editor for viewing and modifying the code
-            generated by the visual editors.
-        \li \image ok.png
-        \li \l {Code}
-    \row
-        \li \l Projects
-        \li Shows a list of open projects and the files they contain.
-        \li \image ok.png
-        \li \l Projects
-     \row
-        \li \l{File System}
-        \li Shows all files in the currently selected directory.
-        \li \image ok.png
-        \li \l{File System}
-    \row
-        \li \l{Open Documents}
-        \li Shows currently open files.
-        \li \image ok.png
-        \li \l{Open Documents}
-    \row
-        \li \l{Content Library}
-        \li The \uicontrol {Content Library} view contains material, texture,
-        and environment bundles with assets that you can use in your project.
-        \li
-        \li \l{Content Library}
-    \row
-        \li \l{Texture Editor}
-        \li In the \uicontrol {Texture Editor} view, you create and manage
-        textures.
-        \li
-        \li \l{Texture Editor}
-    \row
-        \li \l{Effect Composer}
-        \li Use \uicontrol {Effect Composer} to compose custom effects.
-        \li
-        \li \l{Effect Composer}
-    \endtable
-
-    \section1 Summary of Main Toolbar Actions
-
-    The top level toolbar in the \uicontrol  Design mode contains shortcuts to
-    widely used actions.
-
-    \table
-    \header
-        \li Button/Field
-        \li Action
-        \li Keyboard Shortcut
-        \li Read More
-
-    \row
-        \li \inlineimage icons/home.png
-        \li \uicontrol {Home}: opens the welcome page.
-        \li
-        \li
-    \row
-      \li \inlineimage icons/start_playback.png
-      \li \uicontrol {Play}: runs the application.
-      \li
-      \li
-    \row
-      \li \uicontrol {Live Preview}
-      \li Shows a preview of the current file or the entire UI. The changes you
-          make to the UI are instantly visible to you in the preview.
-      \li \key Alt+P (\key Opt+P on \macos)
-      \li \l{Validating with Target Hardware}
-
-    \row
-        \li Currently open file
-        \li Displays the location and filename of the currently open file. You
-            can select another file in the list of open files to view it in
-            the \uicontrol {2D} and \uicontrol Navigator views.
-        \li
-        \li \l{Open Documents}
-    \row
-        \li \inlineimage icons/prev.png
-        \li \uicontrol {Go Back}: moves a step backwards in your location history.
-            That is, returns the focus to the last location in the last file it
-            was on.
-        \li \key Alt+< (\key Opt+Cmd+< on \macos)
-        \li
-    \row
-        \li \inlineimage icons/next.png
-        \li \uicontrol {Go Forward}: moves a step forward in your location history.
-        \li \key Alt+> (\key Opt+Cmd+> on \macos)
-        \li
-    \row
-        \li \inlineimage icons/close.png
-        \li \uicontrol {Close Document}: closes the current file.
-        \li \key Ctrl+W (\key Cmd+W on \macos)
-        \li
-    \row
-        \li \inlineimage icons/create_component.png
-        \li Creates a custom component from the selected item.
-        \li
-        \li \l{Creating Custom Components}
-    \row
-        \li \inlineimage icons/edit_component.png
-        \li Edits the selected custom component.
-        \li
-        \li \l{Creating Custom Components}
-    \row
-        \li Workspace
-        \li Displays the currently selected workspace. To switch to another
-            workspace, select it in the list.
-        \li
-        \li \l{Managing Workspaces}
-    \row
-        \li \inlineimage icons/lockoff.png
-        / \inlineimage icons/lockon.png
-        \li Toggles the views to locked or movable in \QDS.
-        \li
-        \li \l{Managing Workspaces}
-    \row
-        \li \uicontrol Share
-        \li Shares the application online using Qt Design Viewer.
-        \li
-        \li \l{Sharing Applications Online}
-    \endtable
+    \annotatedlist studio-views
 */

doc/qtdesignstudio/src/views/qtquick-easing-curve-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -79,7 +79,7 @@
     \endlist
 
     When you attach easing curves to keyframes, the shape of the
-    \l{keyframe_marker}{keyframe marker} on a keyframe track in
+    keyframe marker on a keyframe track in
     \l Timeline changes from \inlineimage icons/keyframe_linear_active.png
     to a marker that describes the type of the selected easing curve.
 

doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc

@@ -6,8 +6,12 @@
     \previouspage studio-qt-insight.html
     \nextpage studio-model-editor.html
 
+    \ingroup studio-views
+
     \title Effect Composer
 
+    \brief Compose custom effects.
+
     Use \uicontrol {Effect Composer} to create post-processing effects that
     can be applied to 2D or 3D components. The effects created with \uicontrol {Effect Composer}
     are shader effects, which can be used in any \QDS projects.

doc/qtdesignstudio/src/views/qtquick-form-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,13 +6,17 @@
     \previouspage creator-using-qt-quick-designer.html
     \nextpage studio-3d-editor.html
 
+    \ingroup studio-views
+
     \title 2D
 
+    \brief Design 2D UIs.
+
     You design applications in the \uicontrol {2D} view by opening
     component files and placing instances of \l{Component Types}{2D components}
     and \l{Assets}{assets} into them.
 
-    \image qmldesigner-form-editor.png "The 2D view"
+    \image qmldesigner-form-editor.webp "The 2D view"
 
     When you select component instances in the \uicontrol {2D} view, markers
     appear around their edges and in their corners. Depending on the shape of
@@ -25,60 +29,12 @@
         \li \l{Rotating 2D Components}{Rotate}
     \endlist
 
-    \section1 Summary of 2D View Buttons
-
-    The \uicontrol {2D} view toolbar contains the following buttons and
-    fields.
-
-    \table
-    \header
-        \li Button/Field
-        \li Tooltip
-        \li Read More
-    \row
-        \li \uicontrol {Override Width}
-        \li Shows a preview of the component using the specified width.
-        \li \l{Previewing Component Size}
-    \row
-        \li \uicontrol {Override Height}
-        \li Shows a preview of the component using the specified height.
-        \li \l{Previewing Component Size}
-    \row
-        \li \inlineimage icons/canvas-color.png
-        \li Sets the color of the \uicontrol {2D} view working area.
-        \li \l{Setting Canvas Color}
-    \row
-        \li \inlineimage icons/zoomIn.png
-        \li Zooms in.
-        \li \l{Zooming}
-    \row
-        \li \inlineimage icons/zoomOut.png
-        \li Zooms out.
-        \li \l{Zooming}
-    \row
-        \li Zoom level
-        \li Sets the zoom level that you select from the list.
-        \li \l{Zooming}
-    \row
-        \li \inlineimage icons/zoomAll.png
-        \li Zooms to fit all content.
-        \li \l{Zooming}
-    \row
-        \li \inlineimage icons/zoomSelection.png
-        \li Zooms to fit the current selection.
-        \li \l{Zooming}
-    \row
-        \li \inlineimage icons/reset.png
-        \li Refreshes the contents of the \uicontrol {2D} view.
-        \li \l{Refreshing 2D View Contents}
-    \endtable
-
     \section1 Moving Components
 
     When the move cursor is displayed, you can move the selected component
     instance to any position in the \uicontrol {2D} view.
 
-    \image qmldesigner-form-editor-move-cursor.png "Move cursor in the 2D view"
+    \image qmldesigner-form-editor-move-cursor.webp "Move cursor in the 2D view"
 
     For more information about alternative ways of positioning component
     instances in UIs, see \l{Scalable Layouts}.
@@ -88,7 +44,7 @@
     When the resize cursor is displayed, you can drag the markers to resize
     component instances.
 
-    \image qtquick-designer-scaling-items.png "The 2D view"
+    \image qtquick-designer-scaling-items.webp "The 2D view"
 
     To have the resizing done from the center of the selected component instance
     rather than from its edges, press \key Alt (or \key Opt on \macos).
@@ -110,7 +66,7 @@
     clockwise or counter-clockwise to freely rotate the component instance
     around its origin.
 
-    \image qtquick-designer-rotating-items.png "2D rotation tool"
+    \image qtquick-designer-rotating-items.webp "2D rotation tool"
 
     Additionally, press \key Shift or \key Alt (or \key Opt on \macos)
     to rotate component instances in steps of 5 or 45 degrees, respectively.
@@ -152,9 +108,9 @@
     \image qtquick-designer-options.png "Qt Quick Designer preferences"
 
     The following image shows the snapping lines (1) when
-    \uicontrol {Parent component padding} is set to 5 pixels.
+    \uicontrol {Parent component padding} is set to 10 pixels.
 
-    \image qmldesigner-snap-margins.png "Snapping lines on canvas"
+    \image qmldesigner-snap-margins.webp "Snapping lines on canvas"
 
     For alternative ways of aligning and distributing component instances by
     using the \l Properties view, see \l{Aligning and Distributing Components}.
@@ -181,7 +137,7 @@
     values are not changed permanently in the UI file. You can permanently
     change the property values in the \uicontrol Properties view (4).
 
-    \image qmldesigner-preview-size.png "Component width and height"
+    \image qmldesigner-preview-size.webp "Component width and height"
 
     To set the initial size of the root component, select \uicontrol Edit >
     \uicontrol Preferences > \uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer}
@@ -204,7 +160,7 @@
     not affect the background color of your root component or component
     instances in any way.
 
-    \image qmldesigner-canvas-color.png "Transparent canvas color for a transparent component instance"
+    \image qmldesigner-canvas-color.webp "Transparent canvas color for a transparent component instance"
 
     \section1 Refreshing 2D View Contents
 
@@ -219,6 +175,4 @@
     To refresh the contents of the \uicontrol {2D} view, press \key R or
     select the \inlineimage icons/reset.png
     (\uicontrol {Reset View}) button.
-
-    \include qtquick-component-context-menu.qdocinc context-menu
 */

doc/qtdesignstudio/src/views/qtquick-navigator.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,8 +6,12 @@
     \previouspage quick-assets.html
     \nextpage qtquick-properties-view.html
 
+    \ingroup studio-views
+
     \title Navigator
 
+    \brief View the composition of the current component file as a tree structure.
+
     The \uicontrol Navigator view displays the components in the current
     component file and their relationships. \l{glossary-component}{Components}
     (1) are listed in a tree structure, below their parent (2). You can preview
@@ -36,57 +40,11 @@
     you can change the source of an Image component by selecting
     \uicontrol {Change Source URL} in the context menu.
 
-    \section1 Summary of Navigator Buttons
-
-    The following table lists the \uicontrol Navigator buttons:
-
-    \table
-    \header
-        \li Icon
-        \li Tooltip
-        \li Read More
-    \row
-        \li \inlineimage icons/arrowleft.png
-        \li Moves the component one level up in the component tree, so that
-            it becomes the last sibling of its current parent.
-        \li \l{Arranging Components}
-    \row
-        \li \inlineimage icons/arrowright.png
-        \li Moves the component one level down in the component tree, so that it
-            becomes the child of its last sibling.
-        \li \l{Arranging Components}
-    \row
-        \li \inlineimage icons/navigator-arrowdown.png
-        \li Moves the component down within its parent.
-        \li \l{Arranging Components}
-    \row
-        \li \inlineimage icons/navigator-arrowup.png
-        \li Moves the component up within its parent.
-        \li \l{Arranging Components}
-    \row
-        \li \inlineimage icons/filtericon.png
-        \li Shows and hides invisible components in \uicontrol Navigator.
-        \li \l{Showing and Hiding Components}
-    \row
-        \li \inlineimage icons/alias.png
-        \li Adds a property alias that you can use from outside of the
-            component.
-        \li \l{Adding Property Aliases}
-    \row
-        \li \inlineimage icons/visibilityon.png
-        \li Shows and hides components in the \uicontrol {2D} view.
-        \li \l{Showing and Hiding Components}
-    \row
-        \li \inlineimage icons/lockon.png
-        \li Locks components in all views.
-        \li \l{Locking Components}
-    \endtable
-
     \section1 Showing and Hiding Components
 
     To show and hide components in the \uicontrol {2D} view when focusing on
-    specific parts of the application, click \inlineimage icons/visibilityon.png
-    in \uicontrol Navigator.
+    specific parts of the application, select \inlineimage icons/eye_open.png and
+    \inlineimage icons/visibility-off.png in \uicontrol Navigator.
 
     To change the visibility of a component in the application code, select the
     \uicontrol Visibility check box in the \uicontrol Properties view or select
@@ -99,10 +57,8 @@
     component. To hide or show child components, edit the properties of the
     parent component.
 
-    To hide invisible components in \uicontrol Navigator, click
-    \inlineimage icons/filtericon.png
-    (\uicontrol {Filter Tree}) and select
-    \uicontrol {Show Only Visible Components}.
+    To show and hide invisible components in \uicontrol Navigator, select
+    \inlineimage {icons/visibilityon.png}.
 
     \section1 Locking Components
 
@@ -141,9 +97,8 @@
     By default, components that are located at the top of the file are listed at
     the bottom of the \uicontrol Navigator tree and behind overlapping
     components in the \uicontrol {2D} view. To list the components in the order
-    in which they appear in the file, as some other tools do, click
-    \inlineimage icons/filtericon.png
-    (\uicontrol {Filter Tree}), and select \uicontrol {Reverse Component Order}.
+    in which they appear in the file, as some other tools do, select
+    \inlineimage {icons/reverse_order.png}.
 
     To move a component to the top or bottom of the tree within its parent,
     right-click it in the \uicontrol Navigator or \uicontrol {2D} view
@@ -156,20 +111,18 @@
 
     \image qtquick-designer-navigator-arrange.gif "Reversing component order"
 
-    You can also drag-and-drop the component to another position in the tree or
-    use the arrow buttons to move the component in the tree. You can use the
-    left and right arrow buttons to change the parent of the component.
+    You can also drag the component to another position in the tree or use the
+    \inlineimage {icons/navigator-arrowup.png} and \inlineimage {icons/navigator-arrowdown.png}
+    buttons to move the component in the tree. You can use the \inlineimage {icons/arrowleft.png}
+    and \inlineimage {icons/arrowright.png} buttons to change the parent of the component.
 
     \image qmldesigner-navigator-arrows.png "Navigator buttons"
 
-    When you drag-and-drop instances of components to the \uicontrol {2D} view,
+    When you drag instances of components to the \uicontrol {2D} view,
     the new component is added as a child of the component
     beneath it. When you move the components, it is not possible to determine
     whether you want to adjust their position or attach them to a new parent component.
-    Therefore, the parent component is not automatically changed. To change the
-    parent of the component, press down the \key Shift key before you drag-and-drop
-    the component into a new position. The topmost component under the cursor becomes the
-    new parent of the component.
+    Therefore, the parent component is not automatically changed.
 
     \section1 Adding Property Aliases
 
@@ -236,5 +189,4 @@
 
     \image qmldesigner-breadcrumbs.png "Component hierarchy"
 
-    \include qtquick-component-context-menu.qdocinc context-menu
 */

doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,21 +6,25 @@
     \previouspage qtquick-navigator.html
     \nextpage qtquick-connection-view.html
 
+    \ingroup studio-views
+
     \title Properties
 
+    \brief Modify the properties of the selected component.
+
     The \uicontrol Properties view displays all the properties of the selected
     \l{glossary-component}{component}. The properties are grouped by type. The
     top part of the view displays properties that are common to all components,
     such as component type, ID, name, geometry, and visibility.
 
-    \image qtquick-item-properties-common.png "Basic component properties"
+    \image qtquick-item-properties-common.webp "Basic component properties"
 
     The bottom part of the view displays properties that have been defined for
     the component type. For example, the following image displays the predefined
     properties you can set for \l{basic-rectangle}{Rectangle} and \l Text
     components.
 
-    \image qmldesigner-element-properties.png "Rectangle and Text properties"
+    \image qmldesigner-element-properties.webp "Rectangle and Text properties"
 
     \section1 Custom Properties
 
@@ -42,46 +46,6 @@
 
     \image custom-properties.png
 
-    \section1 Summary of Properties View Buttons
-
-    The following table lists the \uicontrol Properties view buttons:
-
-    \table
-    \header
-        \li Icon
-        \li Tooltip
-        \li Read More
-    \row
-        \li \inlineimage icons/alias.png
-        \li Adds a property alias that you can use from outside of the
-            component for the root component. You can use a menu item
-            in the actions menu to add property aliases for property
-            values of child components.
-        \li \l{Adding Property Aliases}
-    \row
-        \li \inlineimage icons/action-icon.png
-        \li Opens a menu with actions for:
-            \list
-                \li Resetting property values to their default values
-                \li Setting property bindings
-                \li Creating property aliases
-                \li Inserting keyframes for timeline animations
-            \endlist
-        \li
-        \list
-                \li \l{Viewing Changes in Properties}
-                \li \l{Adding Bindings Between Properties}
-                \li \l{Adding Property Aliases}
-                \li \l{Setting Keyframe Values}
-        \endlist
-    \row
-        \li \inlineimage icons/action-icon-binding.png
-        \li Indicates that the value of the property is bound to the value
-            of another property. Opens the same menu as the action icon.
-        \li \l{Adding Bindings Between Properties}
-
-    \endtable
-
     \section1 Viewing Changes in Properties
 
     The default values of properties are displayed in white color, while the

doc/qtdesignstudio/src/views/qtquick-properties.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -17,7 +17,7 @@
     All components share a set of properties that you can specify in the
     \uicontrol Properties view.
 
-    \image qtquick-item-properties-common.png "Basic component properties"
+    \image qtquick-item-properties-common.webp "Basic component properties"
 
     \section2 Type
 

doc/qtdesignstudio/src/views/qtquick-states-view.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -7,12 +7,16 @@
     \nextpage studio-translations.html
     \sa {Working with States}
 
+    \ingroup studio-views
+
     \title States
 
+    \brief Apply states to a component.
+
     The \uicontrol States view displays the different
     \l{Working with States}{states} of a UI.
 
-    \image qmldesigner-transitions.png "States view"
+    \image qmldesigner-transitions.webp "States view"
 
     To open the \uicontrol States view, select \uicontrol View >
     \uicontrol Views > \uicontrol States.

doc/qtdesignstudio/src/views/qtquick-text-editor.qdoc

@@ -6,8 +6,12 @@
     \previouspage qtquick-curve-editor.html
     \nextpage creator-projects-view.html
 
+    \ingroup studio-views
+
     \title Code
 
+    \brief View and modify the code generated by the visual editors.
+
     To view and modify the code in a \l{UI Files}{UI file} (.ui.qml) or
     component file (.qml), go to \uicontrol View and select \uicontrol Views >
     \uicontrol Code. \QDS generates the code when you create components in the

doc/qtdesignstudio/src/views/qtquick-timeline-view.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,14 +6,18 @@
     \previouspage qtquick-transition-editor.html
     \nextpage qtquick-curve-editor.html
 
+    \ingroup studio-views
+
     \title Timeline
 
+    \brief Animate the properties of components.
+
     You can use the timeline and keyframe based editor in the
     \uicontrol Timeline view to animate the properties of
     \l{glossary_component}{components}. The view is empty until
     you create a timeline.
 
-    \image studio-timeline-empty.png "Empty Timeline view"
+    \image studio-timeline-empty.webp "Empty Timeline view"
 
     Select the \inlineimage icons/plus.png
     (\uicontrol {Add Timeline}) button to
@@ -23,7 +27,7 @@
     \image studio-timeline-settings.png "Timeline Settings dialog"
 
     When you select \uicontrol Close, the \uicontrol Timeline view appears.
-    It now displays a \l{Timeline Toolbar}{toolbar} and a ruler but no
+    It now displays a toolbar and a ruler but no
     keyframe tracks.
 
     \image studio-timeline-no-tracks.webp "Timeline view without keyframe tracks"
@@ -86,171 +90,4 @@
 
     \image studio-timeline-keyframe-track-colors.webp "Keyframe track colors in Timeline"
 
-    \section1 Timeline Toolbar
-
-    The \uicontrol Timeline toolbar contains the following buttons and fields.
-
-    \table
-    \header
-        \li Button/Field
-        \li Action
-        \li Read More
-    \row
-        \li \inlineimage icons/settings.png
-        \li Opens the \uicontrol {Timeline Settings} dialog for editing
-            timeline settings.
-        \li \l{Creating a Timeline}
-    \row
-        \li Timeline ID
-        \li Displays the ID of the current timeline.
-        \li \l{Creating a Timeline}
-    \row
-        \li \inlineimage icons/to_first_frame.png
-        \li \uicontrol {To Start (Home)} moves to the first frame on the
-            timeline.
-        \li \l{Navigating in Timeline}
-    \row
-        \li \inlineimage icons/back_one_frame.png
-        \li \uicontrol {Previous (,)} moves to the previous frame on the
-            timeline.
-        \li \l{Navigating in Timeline}
-    \row
-        \li \inlineimage icons/start_playback.png
-        \li \uicontrol {Play (Space)} previews the animation.
-        \li \l{Viewing the Animation}
-    \row
-        \li \inlineimage icons/forward_one_frame.png
-        \li \uicontrol {Next (.)} moves to the next frame on the timeline.
-        \li \l{Navigating in Timeline}
-    \row
-        \li \inlineimage icons/to_last_frame.png
-        \li \uicontrol {To End (End)} moves to the last frame on the timeline.
-        \li \l{Navigating in Timeline}
-    \row
-        \li Current Keyframe
-        \li Displays the frame that the playhead is currently on. Enter a
-            number in the field to move the playhead to the respective frame.
-        \li \l{Navigating in Timeline}
-    \row
-        \li \inlineimage icons/global_record_keyframes.png
-        \li Records changes in keyframe values.
-        \li \l {Setting Keyframe Values}
-    \row
-        \li \inlineimage icons/curve_editor.png
-        \li Opens \uicontrol {Easing Curve Editor} for attaching an easing
-            curve to the selected transition.
-        \li \l{Editing Easing Curves}
-    \row
-        \li Start Frame
-        \li Specifies the first frame of the timeline. Negative values are
-            allowed. The difference between the start frame and the end frame
-            determines the duration of the animation.
-        \li \l{Creating a Timeline}
-    \row
-        \li \inlineimage icons/zoomOut.png
-        \li \uicontrol {Zoom Out} (\key Ctrl+-) zooms out of the view.
-        \li \l{Zooming in Timeline}
-    \row
-        \li Slider
-        \li Sets the zooming level.
-        \li \l{Zooming in Timeline}
-    \row
-        \li \inlineimage icons/zoomIn.png
-        \li \uicontrol {Zoom In} (\key Ctrl++) zooms into the view.
-        \li \l{Zooming in Timeline}
-    \row
-        \li End Frame
-        \li Specifies the last frame of the timeline. The difference between
-            the start frame and the end frame determines the duration of the
-            animation, so if the start frame is 0, the end frame equals the
-            duration.
-        \li \l{Creating a Timeline}
-    \row
-        \li State Name
-        \li Displays the name of the current state.
-        \li \l{Binding Animations to States}
-    \endtable
-
-    \section1 Keyframe Track Icons
-
-    Each keyframe track can contain the following buttons and markers.
-
-    \table
-    \header
-        \li Button/Icon
-        \li Action
-        \li Read More
-    \row
-        \li \inlineimage icons/previous_keyframe.png
-        \li Jumps to the previous frame on the timeline.
-        \li \l{Setting Keyframe Values}
-    \row
-        \li \inlineimage icons/next_keyframe.png
-        \li Jumps to the next frame on the timeline.
-        \li \l{Setting Keyframe Values}
-    \row
-        \li \inlineimage icons/local_record_keyframes.png
-        \li Records changes in keyframe values for a particular property.
-        \li \l {Setting Keyframe Values}
-    \target keyframe_marker
-    \row
-        \li \inlineimage icons/keyframe.png
-        \li Indicates the type of easing curve attached to the keyframe.
-            When a keyframe track is selected, the keyframe markers on it turn
-            gray, and when a keyframe itself is selected, its marker turns
-            brown:
-            \list
-                \li \inlineimage icons/keyframe_linear_active.png
-                    - linear easing curve
-                \li \inlineimage icons/keyframe_manualbezier_active.png
-                    - manually set Bezier curve
-                \li \inlineimage icons/keyframe_autobezier_active.png
-                    - automatically set Bezier curve
-                \li \inlineimage icons/keyframe_lineartobezier_active.png
-                    - linear-to-Bezier curve
-            \endlist
-        \li \l {Editing Easing Curves}
-    \endtable
-
-    \section1 Timeline Context Menu
-
-    The following table summarizes the context menu items available for each
-    keyframe track for a component, property, or keyframe marker and provides
-    links to more information about them.
-
-    \table
-    \header
-        \li To Learn About
-        \li Go To
-    \row
-        \li Delete All Keyframes
-        \li \l{Deleting Keyframes}
-    \row
-        \li Add Keyframes at Current Frame
-        \li \l{Setting Keyframe Values}
-    \row
-        \li Copy All Keyframes
-        \li \l{Copying Keyframes}
-    \row
-        \li Paste Keyframes
-        \li \l{Copying Keyframes}
-    \row
-        \li Remove Property
-        \li \l{Setting Keyframe Values}
-    \row
-        \li Delete Keyframe
-        \li \l{Deleting Keyframes}
-    \row
-        \li Edit Easing Curve
-        \li \l{Editing Easing Curves}
-    \row
-        \li Edit Keyframe
-        \li \l{Editing Keyframe Values}
-    \row
-        \li Override Color
-        \li \l{Setting Keyframe Track Color}
-    \row
-        \li Reset Color
-        \li \l{Setting Keyframe Track Color}
-    \endtable
 */

doc/qtdesignstudio/src/views/qtquick-timeline.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -191,7 +191,7 @@
     position of the playhead, right-click the component name on the timeline and
     select \uicontrol {Add Keyframes at Current Frame}.
 
-    Keyframes are marked on the timeline by using \l{keyframe_marker}{markers}
+    Keyframes are marked on the timeline by using markers
     of different colors and shapes, depending on whether they are active or
     inactive or whether you have applied \l{Editing Easing Curves}
     {easing curves} to them.

doc/qtdesignstudio/src/views/qtquick-transition-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,8 +6,12 @@
     \previouspage studio-translations.html
     \nextpage qtquick-timeline-view.html
 
+    \ingroup studio-views
+
     \title Transitions
 
+    \brief Make movement between states smooth.
+
     To make movement between states smooth, you can use
     \uicontrol {Transitions} to animate the changes between
     states.
@@ -17,7 +21,7 @@
     animated, such as colors or numbers, in the \l Properties view. For example,
     you can animate the changes in the position of a component.
 
-    \image qtquick-transition-editor-view.png "Transitions view"
+    \image qtquick-transition-editor-view.webp "Transitions view"
 
     In \uicontrol {Transitions}, you can set the start frame, end
     frame, and duration for the transition of each property. You can also
@@ -31,46 +35,6 @@
     and \inlineimage icons/zoom_big.png
     buttons to zoom out of or into the view.
 
-    \section1 Summary of Transitions Toolbar Actions
-
-    \table
-    \header
-        \li Button/Field
-        \li Action
-        \li Read More
-    \row
-        \li \inlineimage icons/settings.png
-        \li Opens \uicontrol {Transition Settings} dialog for editing
-            transition settings.
-        \li \l{Specifying Transition Settings}
-    \row
-        \li Transition ID
-        \li Displays a list of transitions that you can open in
-            \uicontrol {Transitions}.
-        \li \l{Animating Transitions Between States}
-    \row
-        \li \inlineimage icons/curve_editor.png
-        \li Opens \uicontrol {Easing Curve Editor} for attaching an easing
-            curve to the selected transition.
-        \li \l{Editing Easing Curves}
-    \row
-        \li \inlineimage icons/zoomOut.png
-        \li \uicontrol {Zoom Out} (\key Ctrl+-): zooms out of the view.
-        \li \l{Zooming in Transitions}
-    \row
-        \li Slider
-        \li Sets the zooming level.
-        \li \l{Zooming in Transitions}
-    \row
-        \li \inlineimage icons/zoomIn.png
-        \li \uicontrol {Zoom In} (\key Ctrl++): zooms into the view.
-        \li \l{Zooming in Transitions}
-    \row
-        \li Maximum Duration
-        \li Specifies the maximum duration of the transition.
-        \li
-    \endtable
-
     \section1 Animating Transitions Between States
 
     To animate transitions:
@@ -78,12 +42,12 @@
     \list 1
         \li Select \uicontrol View > \uicontrol Views >
             \uicontrol {Transition Editor}.
-            \image qmldesigner-transition-editor-startup.png "Empty Transitions view"
+            \image qmldesigner-transition-editor-startup.webp "Empty Transitions view"
         \li Select the \inlineimage icons/plus.png
             (\uicontrol {Add Transition}) button to add a transition. This
             works only if you have added at least one state and modified at
             least one property in it.
-            \image qtquick-transition-editor-view.png "Transitions view"
+            \image qtquick-transition-editor-view.webp "Transitions view"
         \li Move the blue bar next to the component or property name to set
             the start and end frame of the animation of the property. Pull its
             left and right edges to set the duration of the animation.
@@ -98,7 +62,7 @@
     (\uicontrol {Transition Settings (S)}) button in
     \uicontrol {Transition Editor}.
 
-    \image qtquick-transition-editor-settings.png "Transitions settings"
+    \image qtquick-transition-editor-settings.webp "Transitions settings"
 
     To add transitions:
 

doc/qtdesignstudio/src/views/studio-content-library.qdoc

@@ -6,8 +6,13 @@
     \previouspage creator-open-documents-view.html
     \nextpage studio-texture-editor.html
 
+    \ingroup studio-views
+
     \title Content Library
 
+    \brief Select material, texture, and environment bundles with assets to
+    use in your application.
+
     \note The \uicontrol {Content Library} view is included in the
     \l{https://www.qt.io/pricing}{Qt Design Studio Enterprise license}.
 

doc/qtdesignstudio/src/views/studio-material-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2022 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,9 +6,12 @@
     \previouspage studio-3d-editor.html
     \nextpage quick-components-view.html
 
+    \ingroup studio-views
 
     \title Material Editor and Browser
 
+    \brief Create and manage materials and textures.
+
     In the \uicontrol {Material Editor} and \uicontrol {Material Browser} views,
     you create and manage materials and textures.
 
@@ -21,7 +24,8 @@
     To create a new material, do one of the following:
 
     \list
-      \li In \uicontrol {Material Browser}, select \inlineimage icons/plus.png
+      \li In \uicontrol {Material Browser}, select \inlineimage icons/add_material.png
+      \inlineimage icons/plus.png
       .
       \li In \uicontrol {Material Editor}, select \inlineimage icons/plus.png
       .
@@ -67,7 +71,7 @@
       \li In \uicontrol{Properties}, select
       \inlineimage icons/close.png
       next to the material.
-      \image materials-remove-material.png
+      \image materials-remove-material.webp "Remove a material in model properties"
     \endlist
 
    \section2 Copying and Pasting Material Properties
@@ -82,7 +86,7 @@
       want to copy properties from.
       \li Select \uicontrol {Copy properties} and then
       \uicontrol All or a property group.
-      \image material-copy-properties.png
+      \image material-copy-properties.png "Copy material properties in Material Browser"
       \li Right-click the material that you want to copy the properties to.
       \li Select \uicontrol {Paste properties}.
     \endlist
@@ -114,11 +118,10 @@
       \li From \uicontrol{Assets}, drag an image to
       \uicontrol{Reflection Map}.
       \li In \uicontrol {Navigator}, select
-      \inlineimage icons/filtericon.png
-      and then clear \uicontrol {Show Only Visible Components}. Now the
+      \inlineimage {icons/visibilityon.png}. Now the
       texture you just added to the material is visible in
       \uicontrol {Navigator}.
-      \image navigator-material-texture.png
+      \image navigator-material-texture.webp "Materials visible in Navigator"
       \li In \uicontrol {Navigator}, select the texture.
       \li In \uicontrol {Properties}, set \uicontrol {Texture Mapping} to
       \uicontrol {Environment}.
@@ -276,8 +279,8 @@
     To create a new texture, do one of the following in
     \uicontrol {Material Browser}:
     \list
-      \li Select \inlineimage icons/plus.png
-      in the \uicontrol Textures section.
+      \li Select \inlineimage icons/add_texture.png \inlineimage icons/plus.png
+      .
       \li Right-click anywhere in the \uicontrol Textures section and select
       \uicontrol {Create new texture}.
     \endlist

doc/qtdesignstudio/src/views/studio-model-editor.qdoc

@@ -6,8 +6,12 @@
     \previouspage qtquick-effect-composer-view.html
     \nextpage creator-project-managing-workspaces.html
 
+    \ingroup studio-views
+
     \title Model Editor
 
+    \brief Create, manage, import, and export data models.
+
     In the \uicontrol {Model Editor} view, you can create, manage, import, and export
     data models. With data models, you can, for example, populate views with data.
 

doc/qtdesignstudio/src/views/studio-qtinsight.qdoc

@@ -6,8 +6,12 @@
     \previouspage studio-texture-editor.html
     \nextpage qtquick-effect-composer-view.html
 
+    \ingroup studio-views
+
     \title Qt Insight
 
+    \brief Manage your Qt Insight.
+
     In the \uicontrol {Qt Insight} view, you manage your Qt Insight.
 
     Qt Insight is an analytics solution that provides real user insights on the usage of Qt

doc/qtdesignstudio/src/views/studio-texture-editor.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2022 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,11 +6,15 @@
     \previouspage studio-content-library.html
     \nextpage studio-qt-insight.html
 
+    \ingroup studio-views
+
     \title Texture Editor
 
+    \brief Create and manage textures.
+
     In the \uicontrol {Texture Editor} view, you create and manage textures.
 
-    \image texture-editor.png
+    \image texture-editor.webp "Texture Editor"
 
     \section1 Creating a Texture
 
@@ -38,7 +42,7 @@
       \li Select \inlineimage icons/apply.png
       .
       \li Select the material and property that you want to add the texture to.
-      \image select-material-property.png
+      \image select-material-property.png "Select a material property"
     \endlist
 
     \note You can also apply textures to materials in the

doc/qtdesignstudio/src/views/studio-translations.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -6,8 +6,12 @@
     \previouspage qtquick-states-view.html
     \nextpage qtquick-timeline-view.html
 
+    \ingroup studio-views
+
     \title Translations
 
+    \brief Handle translations and multi-language support.
+
     The \uicontrol Translations view is included in the
     \l{https://www.qt.io/pricing}{Qt Design Studio Enterprise license}.
 
@@ -16,49 +20,6 @@
 
     \image studio-translations-view.png "Translations view"
 
-    \section1 Summary of Translations View Buttons
-
-    The \uicontrol {Translations} view contains the following buttons.
-
-    \table
-    \header
-        \li Button
-        \li Function
-        \li Read More
-    \row
-        \li \inlineimage icons/select-languages.png
-        \li Select which languages you want your project to support.
-        \li
-    \row
-        \li \inlineimage icons/export-json-translations.png
-        \li Export all your translations to a JSON file.
-        \li \l{Importing and Exporting Translations}
-    \row
-        \li \inlineimage icons/import-json-translations.png
-        \li Import translations from a JSON file.
-        \li \l{Importing and Exporting Translations}
-    \row
-        \li \inlineimage icons/generate-translation-files.png
-        \li Generate Qt compiled translation source files (\e{.qm})
-        and Qt translation source files (\e{.ts}).
-        \li \l{Generating Qt Translation Source Files}
-    \row
-        \li \inlineimage icons/project-translation-test.png
-        \li Run translation test for several documents and create a test report.
-        \li \l{Running Translation Test for Several Documents}
-    \row
-        \li \inlineimage icons/qml-translation-test.png
-        \li Run translation test for the currently open document. This test
-        shows translation warnings in the \uicontrol{2D} view and creates a
-        test report.
-        \li \l{Running Translation Test for a Single Document}
-    \row
-        \li \inlineimage icons/export-translations.png
-        \li Export all translations used in your project or all translations
-        currently visible in your UI.
-        \li \l{Exporting Translations in Other Ways}
-    \endtable
-
     \section1 Importing and Exporting Translations
 
     You can import and export translations using JSON files.