Merge remote-tracking branch 'origin/qds/dev' into HEAD

Change-Id: I9d13aa050b1c7fb0954e2b63d13da2922d8f7218

CMakeLists.txt

@@ -1,5 +1,10 @@
 cmake_minimum_required(VERSION 3.16)
 
+option(BUILD_DESIGNSTUDIO "Build and install design studio plugins, examples and settings." OFF)
+if (BUILD_DESIGNSTUDIO)
+    list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/dist/branding/qtdesignstudio")
+endif()
+
 ## Add paths to check for cmake modules:
 list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake")
 include(Utils)

dist/branding/qtdesignstudio/CMakeLists.txt

@@ -1 +0,0 @@
-install(DIRECTORY QtProject DESTINATION "${IDE_DATA_PATH}")

dist/branding/qtdesignstudio/QtCreatorIDEBranding.cmake

@@ -1,7 +1,7 @@
-set(IDE_VERSION "4.4.0")                              # The IDE version.
+set(IDE_VERSION "4.5.0")                              # The IDE version.
-set(IDE_VERSION_COMPAT "4.4.0")                       # The IDE Compatibility version.
+set(IDE_VERSION_COMPAT "4.5.0")                       # The IDE Compatibility version.
-set(IDE_VERSION_DISPLAY "4.4.0")                      # The IDE display version.
+set(IDE_VERSION_DISPLAY "4.5.0")                      # The IDE display version.
-set(IDE_COPYRIGHT_YEAR "2023")                        # The IDE current copyright year.
+set(IDE_COPYRIGHT_YEAR "2024")                        # The IDE current copyright year.
 
 set(IDE_SETTINGSVARIANT "QtProject")                  # The IDE settings variation.
 set(IDE_COPY_SETTINGSVARIANT "Nokia")                 # The IDE settings to initially import.
@@ -16,3 +16,48 @@ set(IDE_DOC_FILE_ONLINE "qtdesignstudio/qtdesignstudio-online.qdocconf")
 
 set(IDE_ICON_PATH "${CMAKE_CURRENT_LIST_DIR}")
 set(IDE_LOGO_PATH "${CMAKE_CURRENT_LIST_DIR}")
+
+set(DESIGNSTUDIO_PLUGINS
+    Android
+    BareMetal
+    Boot2Qt
+    CMakeProjectManager
+    CodePaster
+    Core
+    CppEditor
+    Debugger
+    Designer
+    DiffEditor
+    EffectComposer
+    Help
+    Insight
+    LanguageClient
+    McuSupport
+    ProjectExplorer
+    QmakeProjectManager
+    QmlDesigner
+    QmlDesignerBase
+    QmlJSEditor
+    QmlJSTools
+    QmlPreview
+    QmlProjectManager
+    QtSupport
+    RemoteLinux
+    ResourceEditor
+    StudioPlugin
+    StudioWelcome
+    Texteditor
+    UpdateInfo
+    VcsBase
+    assetexporterplugin
+    componentsplugin
+    qmlpreviewplugin
+    qtquickplugin)
+
+if(DESIGNSTUDIO_EXTRAPLUGINS)
+  list(APPEND DESIGNSTUDIO_PLUGINS ${DESIGNSTUDIO_EXTRAPLUGINS})
+endif()
+
+if(NOT BUILD_PLUGINS)
+    set(BUILD_PLUGINS "${DESIGNSTUDIO_PLUGINS}" CACHE STRING "Build plugins" FORCE)
+endif()

dist/branding/qtdesignstudio/QtProject/QtDesignStudio.ini

@@ -1,6 +1,6 @@
 [Plugins]
-Ignored=AutoTest, Bazaar, ClangCodeModel, ClangTools, CMakeProjectManager, CVS, ClassView, CodePaster, CppEditor, CtfVisualizer, Designer, FakeVim, GLSLEditor, GenericProjectManager, IncrediBuild, Ios, Macros, Mercurial, ModelEditor, Perforce, PerfProfiler, ScxmlEditor, QbsProjectManager, Qnx, Subversion, Valgrind, VcsBase, Welcome, WinRt, Python
+Ignored=
-ForceEnabled=Boot2Qt, StudioWelcome, QmlDesigner, ModuleTools, McuSupport
+ForceEnabled=Boot2Qt, StudioWelcome, QmlDesigner, ModuleTools, McuSupport, EffectComposer
 
 [Core]
 NewDialog\LastCategory=H.StudioProject
@@ -52,6 +52,7 @@ flashActionDisabled=true
 OverrideLanguage=C
 [General]
 HideOptionCategories=C++, Debug, Designer, Kits, BuildAndRun, CPaster, LanguageClient, Version Control
+SuppressedWarnings=LinkWithQtInstallation
 
 [Help]
 ContextHelpOption=3

doc/config/macros.qdocconf

@@ -35,6 +35,7 @@ macro.QMLD              = "Qt Quick Designer"
 macro.QQV               = "Qt QML Viewer"
 macro.QSDK              = "Qt"
 macro.QUL               = "Qt Quick Ultralite"
+macro.QUV               = "Qt UI Viewer"
 macro.QOI               = "Qt Online Installer"
 macro.QMT               = "Qt Maintenance Tool"
 macro.qtcversion        = $QTC_VERSION

doc/qtcreator/src/external-resources/external-resources-qds.qdoc

@@ -22,8 +22,8 @@
     \title \QMCU documentation
 */
 /*!
-    \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-traveoii-designui.html
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-traveot2g-designui.html
-    \title Designing a UI for Infineon Traveo II
+    \title Designing a UI for Infineon Traveo T2G
 */
 /*!
     \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-miimxrt1170-designui.html
@@ -61,3 +61,11 @@
     \externalpage https://doc.qt.io/QtForMCUs/qtul-known-issues.html
     \title \QMCU Known Issues or Limitations
 */
+/*!
+    \externalpage https://doc.qt.io/qt/qt-edu-for-designers.html
+    \title Qt Edu for Designers
+*/
+/*!
+    \externalpage https://www.qt.io/download
+    \title Try Qt
+*/

doc/qtcreator/src/howto/creator-keyboard-preferences.qdoc

@@ -0,0 +1,137 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+// **********************************************************************
+// NOTE: the sections are not ordered by their logical order to avoid
+// reshuffling the file each time the index order changes (i.e., often).
+// Run the fixnavi.pl script to adjust the links to the index order.
+// **********************************************************************
+
+/*!
+    \page creator-how-to-assign-keyboard-shortcuts.html
+    \if defined(qtdesignstudio)
+    \previouspage studio-keyboard-shortcuts.html
+    \nextpage studio-projects.html
+    \else
+    \previouspage creator-how-tos.html
+
+    \endif
+
+    \ingroup creator-how-to-ui
+
+    \title Assign keyboard shortcuts
+
+    If your favorite keyboard shortcut is missing, you can add it. Also, you can
+    assign your own keyboard shortcuts for functions that you can easily perform
+    with a mouse, and that therefore do not appear in menus or have default
+    keyboard shortcuts. For example, selecting and deleting words or lines in an
+    editor.
+
+    To change an existing keyboard shortcut or assign a new one:
+
+    \list 1
+
+        \li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
+            \image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
+
+        \li Select a command from the list.
+
+        \li In the \uicontrol{Key Sequence} field, you have the following
+            options:
+
+            \list
+
+                \li Enter the shortcut key you want to associate with the
+                    selected command.
+
+                \li Record a key sequence.
+
+            \endlist
+
+        \li To assign multiple keyboard shortcuts to a function, select
+            \uicontrol Add, and enter or record an additional key combination.
+
+        \li To revert to the default shortcut, select \uicontrol Reset.
+
+    \endlist
+
+    \section1 Record key sequences
+
+    \list 1
+        \li Select \uicontrol Record.
+        \li Press the keys to use as the keyboard shortcut.
+        \li Select \uicontrol {Stop Recording} when you are done.
+    \endlist
+
+    \sa {Keyboard Shortcuts}, {Find keyboard shortcuts},
+        {Import and export keyboard shortcuts}
+*/
+
+/*!
+    \page creator-how-to-find-keyboard-shortcuts.html
+    \if defined(qtdesignstudio)
+    \previouspage studio-keyboard-shortcuts.html
+    \nextpage studio-projects.html
+    \else
+    \previouspage creator-how-tos.html
+
+    \endif
+
+    \ingroup creator-how-to-ui
+
+    \title Find keyboard shortcuts
+
+    \QC has many useful keyboard shortcuts. You can see the keyboard shortcut for
+    a menu command in the menu or the tooltip for a button or in the keyboard
+    preferences.
+
+    To look up keyboard shortcuts:
+
+    \list 1
+        \li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
+            \image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
+        \li Start typing the name of a function or shortcut in the
+            \uicontrol Filter field.
+    \endlist
+
+    You can change the existing keyboard shortcuts or import and export them.
+
+    \sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
+        {Import and export keyboard shortcuts}
+*/
+
+/*!
+    \page creator-how-to-change-keyboard-shortcuts.html
+    \if defined(qtdesignstudio)
+    \previouspage studio-keyboard-shortcuts.html
+    \nextpage studio-projects.html
+    \else
+    \previouspage creator-how-tos.html
+
+    \endif
+
+    \title Import and export keyboard shortcuts
+
+    You can use different keyboard shortcut mapping schemes that are stored as
+    .kms files.
+
+    To import and export keyboard shortcut mapping schemes:
+
+    \list 1
+
+        \li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
+            \image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
+
+        \li To import a keyboard shortcut mapping scheme, click \uicontrol Import
+            and select the .kms file that has the keyboard shortcut mapping scheme
+            you want to import.
+
+        \li To export the current keyboard shortcut mapping scheme, click
+            \uicontrol Export and select the location where you want to save the
+            exported .kms file.
+
+    \endlist
+
+    \sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
+        {Find keyboard shortcuts}
+*/

doc/qtcreator/src/howto/creator-sessions.qdoc

@@ -11,9 +11,10 @@
     \page creator-project-managing-sessions.html
     \if defined(qtdesignstudio)
     \previouspage creator-project-managing-workspaces.html
-    \nextpage creator-keyboard-shortcuts.html
+    \nextpage studio-keyboard-shortcuts.html
     \else
     \previouspage creator-how-tos.html
+    \nextpage creator-keyboard-shortcuts.html
     \endif
 
     \ingroup creator-how-to-use

doc/qtcreator/src/overview/creator-only/creator-keyboard-shortcuts.qdoc

@@ -9,12 +9,7 @@
 
 /*!
     \page creator-keyboard-shortcuts.html
-    \if defined(qtdesignstudio)
-    \previouspage creator-project-managing-sessions.html
-    \nextpage studio-projects.html
-    \else
     \previouspage creator-reference.html
-    \endif
 
     \ingroup creator-reference
 
@@ -33,15 +28,14 @@
     context. If several functions are available for the same shortcut at a
     time, there is a conflict and \QC cannot execute any function.
 
-    A keyboard shortcut might also conflict with a shortcut that a Window
+    A keyboard shortcut might also conflict with a shortcut that a window
     manager uses for its own purposes. In that case, \QC shortcuts do not work.
     Typically, you can configure the shortcuts in the window manager, but if
     that is not allowed, you can change the \QC shortcuts.
-    \if defined(qtcreator)
+
     For example, Unity on
     Ubuntu 11.10 uses \key F10 in its window manager, and therefore the default
     \QC keyboard shortcut \key F10 (Step Over) does not work on that system.
-    \endif
 
 
     To override the platform default value that determines whether
@@ -128,11 +122,9 @@
         \row
             \li  Previous open document in history
             \li  Ctrl+Tab
-    \if defined(qtcreator)
         \row
             \li  Activate \uicontrol Locator
             \li  Ctrl+K
-    \endif
         \row
             \li  Switch to \uicontrol Welcome mode
             \li  Ctrl+1
@@ -168,11 +160,9 @@
             \li  Alt+number (Cmd+number on \macos)
 
             Where the number is the number of the view.
-        \if defined(qtcreator)
         \row
             \li  Activate \uicontrol Bookmarks view
             \li  Alt+M
-        \endif
         \row
             \li  Activate \uicontrol{File System} view
             \li  Alt+Y
@@ -200,7 +190,6 @@
         \row
             \li  Undo
             \li  Ctrl+Z
-        \if defined(qtcreator)
         \row
             \li  Move to \uicontrol Edit mode
 
@@ -210,7 +199,6 @@
                 \li  The second press closes secondary windows
                \endlist
             \li  Esc
-        \endif
         \row
             \li  Exit \QC
 
@@ -343,7 +331,6 @@
         \row
             \li  Visualize whitespace
             \li  Ctrl+E, Ctrl+V
-        \if defined(qtcreator)
         \row
             \li  Toggle bookmark
             \li  Ctrl+M
@@ -359,24 +346,19 @@
         \row
             \li  Paste snippet
             \li  Alt+C, Alt+P
-        \endif
         \row
             \li  Find references to symbol under cursor
             \li  Ctrl+Shift+U
-                 \if defined(qtcreator)
                  \note If this keyboard shortcut does not work on Linux, see
                  \l {Editing Issues}.
-                 \endif
         \row
             \li  Follow symbol under cursor
 
                Works with namespaces, classes, functions, variables, include
                statements, and macros, as well as CMake functions, macros,
                targets, and packages. Also, opens URLs in the default browser
-               \if defined(qtcreator)
                and Qt resource files (.qrc) in the \l{Resource Files}
                {resource editor}
-               \endif
             \li  F2
         \row
             \li  Rename symbol under cursor
@@ -387,11 +369,9 @@
         \row
             \li  Open type hierarchy
             \li  Ctrl+Shift+T
-            \if defined(qtcreator)
         \row
             \li  Switch between header and source file
             \li  F4
-        \endif
         \row
             \li Add a cursor at the next occurrence of selected text for
                 multi-cursor editing
@@ -429,7 +409,6 @@
         \row
             \li  Open advanced find
             \li  Ctrl+Shift+F
-        \if defined(qtcreator)
         \row
             \li  Record a text-editing macro
             \li  Alt+[
@@ -445,10 +424,8 @@
         \row
             \li  Execute user actions in FakeVim mode
             \li  Alt+Y, n, where n is the number of the user action, from 1 to 9
-        \endif
     \endtable
 
-    \if defined(qtcreator)
     \section1 Emacs Shortcuts
 
     You can specify shortcuts for executing actions in a way that is familiar to
@@ -535,35 +512,7 @@
             \li  Original size
             \li  Ctrl+0
     \endtable
-    \endif
 
-    \if defined(qtdesignstudio)
-    \section1 Design Mode Keyboard Shortcuts
-
-    You can use the following keyboard shortcuts when editing QML files in the
-    \uicontrol Design mode.
-
-    \table
-        \header
-            \li  Action
-            \li  Keyboard shortcut
-        \row
-            \li  Open the QML file that defines the selected component
-            \li  F2
-        \row
-            \li  Move between \uicontrol the {Code} and
-                 \uicontrol {2D} views
-            \li  F4
-        \row
-            \li  Toggle left sidebar
-            \li  Ctrl+Alt+0
-        \row
-            \li  Toggle right sidebar
-            \li  Ctrl+Alt+Shift+0
-    \endtable
-    \endif
-
-    \if defined(qtcreator)
     \section1 Debugging Keyboard Shortcuts
 
     \table
@@ -601,7 +550,6 @@
             \li  Reverse direction
             \li  F12
     \endtable
-    \endif
 
     \section1 Project Keyboard Shortcuts
 
@@ -609,25 +557,21 @@
         \header
             \li  Action
             \li  Keyboard shortcut
-        \if defined(qtcreator)
         \row
             \li  Build project
             \li  Ctrl+B
         \row
             \li  Build all
             \li  Ctrl+Shift+B
-        \endif
         \row
             \li  New project
             \li  Ctrl+Shift+N
         \row
             \li  Open project
             \li  Ctrl+Shift+O
-        \if defined(qtcreator)
         \row
             \li  Select the \l{glossary-buildandrun-kit}{kit} to build and run your project with
             \li  Ctrl+T
-        \endif
         \row
             \li  Run
             \li  Ctrl+R
@@ -661,7 +605,6 @@
 
     \section1 Version Control Keyboard Shortcuts
 
-    \if defined(qtcreator)
     \table
         \header
             \li  {1,2} Action
@@ -762,171 +705,7 @@
             \li  Alt+P, Alt+O
             \li
     \endtable
-    \else
-    \table
-        \header
-            \li Action
-            \li Keyboard shortcut
-        \row
-            \li Stage file for commit
-            \li Alt+G, Alt+A
-        \row
-            \li Commit
-            \li Alt+G, Alt+C
-        \row
-            \li Diff current file
-            \li Alt+G, Alt+D
-        \row
-            \li Diff project
-            \li Alt+G, Alt+Shift+D
-        \row
-            \li Blame
-            \li Alt+G, Alt+B
-        \row
-            \li Log current file
-            \li Alt+G, Alt+L
-        \row
-            \li Log project
-            \li Alt+G, Alt+K
-        \row
-            \li Reset
-            \li Alt+G, Alt+U
-    \endtable
-    \endif
 
     \sa {Assign keyboard shortcuts}, {Find keyboard shortcuts},
-    {Import and export keyboard shortcuts}
+    {Import and export keyboard shortcuts}, {Enable and disable plugins}
-
-    \if defined(qtcreator)
-    \sa {Enable and disable plugins}
-    \endif
-*/
-
-/*!
-    \page creator-how-to-assign-keyboard-shortcuts.html
-    \if defined(qtdesignstudio)
-    \previouspage creator-keyboard-shortcuts.html
-    \nextpage studio-projects.html
-    \else
-    \previouspage creator-how-tos.html
-
-    \endif
-
-    \ingroup creator-how-to-ui
-
-    \title Assign keyboard shortcuts
-
-    If your favorite keyboard shortcut is missing, you can add it. Also, you can
-    assign your own keyboard shortcuts for functions that you can easily perform
-    with a mouse, and that therefore do not appear in menus or have default
-    keyboard shortcuts. For example, selecting and deleting words or lines in an
-    editor.
-
-    To change an existing keyboard shortcut or assign a new one:
-
-    \list 1
-
-        \li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
-            \image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
-
-        \li Select a command from the list.
-
-        \li In the \uicontrol{Key Sequence} field, you have the following
-            options:
-
-            \list
-
-                \li Enter the shortcut key you want to associate with the
-                    selected command.
-
-                \li Record a key sequence.
-
-            \endlist
-
-        \li To assign multiple keyboard shortcuts to a function, select
-            \uicontrol Add, and enter or record an additional key combination.
-
-        \li To revert to the default shortcut, select \uicontrol Reset.
-
-    \endlist
-
-    \section1 Record key sequences
-
-    \list 1
-        \li Select \uicontrol Record.
-        \li Press the keys to use as the keyboard shortcut.
-        \li Select \uicontrol {Stop Recording} when you are done.
-    \endlist
-
-    \sa {Keyboard Shortcuts}, {Find keyboard shortcuts},
-        {Import and export keyboard shortcuts}
-*/
-
-/*!
-    \page creator-how-to-find-keyboard-shortcuts.html
-    \if defined(qtdesignstudio)
-    \previouspage creator-keyboard-shortcuts.html
-    \nextpage studio-projects.html
-    \else
-    \previouspage creator-how-tos.html
-
-    \endif
-
-    \ingroup creator-how-to-ui
-
-    \title Find keyboard shortcuts
-
-    \QC has many useful keyboard shortcuts. You can see the keyboard shortcut for
-    a menu command in the menu or the tooltip for a button or in the keyboard
-    preferences.
-
-    To look up keyboard shortcuts:
-
-    \list 1
-        \li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
-            \image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
-        \li Start typing the name of a function or shortcut in the
-            \uicontrol Filter field.
-    \endlist
-
-    You can change the existing keyboard shortcuts or import and export them.
-
-    \sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
-        {Import and export keyboard shortcuts}
-*/
-
-/*!
-    \page creator-how-to-change-keyboard-shortcuts.html
-    \if defined(qtdesignstudio)
-    \previouspage creator-keyboard-shortcuts.html
-    \nextpage studio-projects.html
-    \else
-    \previouspage creator-how-tos.html
-
-    \endif
-
-    \title Import and export keyboard shortcuts
-
-    You can use different keyboard shortcut mapping schemes that are stored as
-    .kms files.
-
-    To import and export keyboard shortcut mapping schemes:
-
-    \list 1
-
-        \li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
-            \image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
-
-        \li To import a keyboard shortcut mapping scheme, click \uicontrol Import
-            and select the .kms file that has the keyboard shortcut mapping scheme
-            you want to import.
-
-        \li To export the current keyboard shortcut mapping scheme, click
-            \uicontrol Export and select the location where you want to save the
-            exported .kms file.
-
-    \endlist
-
-    \sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
-        {Find keyboard shortcuts}
 */

doc/qtcreator/src/qtquick/qtquick-live-preview-devices.qdoc

@@ -4,11 +4,8 @@
 /*!
     \previouspage creator-live-preview-desktop.html
     \page creator-live-preview-devices.html
-    \if defined(qtdesignstudio)
-    \nextpage creator-live-preview-android.html
-    \else
     \nextpage qt-design-viewer.html
-    \endif
+
     \title Previewing on Devices
 
     To preview UIs on Android devices, you need to enable USB debugging on them
@@ -47,6 +44,7 @@
 
     \section2 Previewing on Android Devices
 
+    \if defined(qtcreator)
     The USB debugging feature on Android devices enables creating connections
     to the devices from \QDS and running the preview utility on them.
 
@@ -63,6 +61,12 @@
     is copied to them. This might take some time. Thereafter, previewing will
     get faster because only the UI files need to be copied to the
     device.
+    \else
+    Preview your \QDS projects with \QUV. It is an application
+    that runs on your Android device.
+    Learn more about \l{Viewing Applications on Android}.
+    \endif
+
 
     \section2 Previewing on Boot2Qt Devices
 

doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc

@@ -49,14 +49,14 @@
             \endif
 
         \if defined(qtdesignstudio)
-        \li \l{Previewing Android applications}
-
-            Preview Android applications live using an Android emulator.
-
         \li \l{Sharing Applications Online}
 
             Share applications online and view them in a web browser.
 
+        \li \l{Viewing Applications on Android}
+
+           Preview your \QDS projects with \QUV. It is an application
+           that runs on your Android device.
         \else
         \li \l{Previewing in Browsers}
 

doc/qtcreator/src/qtquick/qtquick-modules-with-plugins.qdoc

@@ -120,27 +120,12 @@
     the emulation layer must be built with the same Qt version and compiler
     as the QML modules.
 
-    On Windows, select \uicontrol Help > \uicontrol {About Qt Design Studio} to
+   \include qtdesignstudio-qt-runtime-version.qdocinc qt-runtime-version
-    check the Qt version and compiler that you need to use to build your plugin.
-    For example: \c {Based on Qt 5.15.2 (MSVC 2019, 64 bit)}.
-
-    On macOS, select \uicontrol {Qt Design Studio} >
-    \uicontrol {About Qt Design Studio} to see something like:
-    \c {Based on Qt 5.15.2 (Clang 10.0 (Apple), 64 bit)}.
 
     A plugin should behave differently depending on whether it is run by the
     emulation layer or an application. For example, animations should not be run
     in the \uicontrol Design mode. You can use the value of the \c QML_PUPPET_MODE
     environment variable to check whether the plugin is currently being run
     by an application or edited in the \uicontrol Design mode.
-
-    If you want to use a different module in the \uicontrol Design mode
-    than in your actual application for example to mockup C++ items,
-    you can use \c{QML_DESIGNER_IMPORT_PATH}
-    in the \c{.pro} file (for qmake projects), or declare and set the property
-    \c qmlDesignerImportPaths in your product (for Qbs projects).
-    Modules in the import paths defined in \c{QML_DESIGNER_IMPORT_PATH} will be
-    used only in the \uicontrol Design mode.
-    For an example, see \l {Qt Quick Controls - Contact List}.
     \endif
 */

doc/qtcreator/src/vcs/creator-vcs-git.qdoc

@@ -10,7 +10,7 @@
 /*!
     \page creator-vcs-git.html
     \if defined(qtdesignstudio)
-    \previouspage studio-developer-topics.html
+    \previouspage studio-finding-the-qt-runtime-version.html
     \nextpage studio-porting-projects.html
 
     \title Using Git

doc/qtcreatordev/src/qtcreator-documentation.qdoc

@@ -387,8 +387,7 @@
     separate doc build folder, not in the project folder.
 
     To get the correct product name and version when building \QDS Manual, you
-    must run CMake with the branding option. The branding data is located in
+    must run CMake with the BUILD_DESIGNSTUDIO option.
-    the \QDS (private) repository, \c tqtc-plugin-qtquickdesigner.
 
     To build docs with CMake in a separate doc build folder:
 
@@ -408,12 +407,12 @@
         \li To also build Extending \QC Manual, add the following option:
             \c {-DBUILD_DEVELOPER_DOCS=ON}
         \li To also build the \QDS Manual, add the following option:
-            \c {"-DCMAKE_MODULE_PATH=<absolute_path_to_qtquickdesignerrepo>/studiodata/branding/"}
+            \c {-DBUILD_DESIGNSTUDIO=ON}
 
             For example:
             \badcode
             C:\dev\qtc-doc-build>cmake -DWITH_DOCS=ON -DBUILD_DEVELOPER_DOCS=ON
-                "-DCMAKE_MODULE_PATH=C:\dev\tqtc-plugin-qtquickdesigner\studiodata\branding"
+                -DBUILD_DESIGNSTUDIO=ON
                 "-DCMAKE_PREFIX_PATH=C:\Qt\6.4.0\msvc2019_64"
                 C:\dev\qtc-super\qtcreator
             \endcode
@@ -425,7 +424,7 @@
             \badcode
             C:\dev\qtc-doc-build>cmake -DWITH_ONLINE_DOCS=ON
                 -DBUILD_DEVELOPER_DOCS=ON
-                "-DCMAKE_MODULE_PATH=C:\dev\tqtc-plugin-qtquickdesigner\studiodata\branding"
+                -DBUILD_DESIGNSTUDIO=ON
                 "-DCMAKE_PREFIX_PATH=C:\Qt\6.4.0\msvc2019_64"
                 C:\dev\qtc-super\qtcreator
             \endcode

doc/qtdesignstudio/README.md

@@ -7,22 +7,4 @@ separate table of contents files for each Manual and by using defines
 to hide and show information depending on which Manual is being built.
 
 Because branding information is needed to use the correct product name and
-version, you must run `qmake -r` on `qtcreator.pro` with the `IDE_BRANDING_PRI`
+version.
-option set to the absolute path of `ide_branding.pri` in the Qt Design Studio
-repository.
-
-For example, on Windows enter (all on one line):
-
-`C:\dev\qtc-super\qtcreator>..\..\..\Qt\5.14.1\msvc2017_64\bin\qmake.exe
-    qtcreator.pro -r
-    IDE_BRANDING_PRI=C:\dev\tqtc-plugin-qtquickdesigner\studiodata\branding\ide_branding.pri`
-
-## Building the Qt Design Studio Manual
-
-1. Run `qmake` from Qt 5.14.0, or later with the path to the branding
-   information as a parameter:
-   `<relative_path_to>\qmake.exe qtcreator.pro -r IDE_BRANDING_PRI=<absolute_path_to>\tqtc-plugin-qtquickdesigner\studiodata\branding\ide_branding.pri`
-5. Run `make docs` on Linux and macOS or `nmake docs` on Windows.
-
-The docs are generated in `qtcreator\doc\html\qtdesignstudio` with the
-Qt Design Studio branding.

doc/qtdesignstudio/examples/doc/3DsceneTutorial.qdoc

@@ -22,7 +22,7 @@
       \li Background images
     \endlist
 
-    The assets you use in this tutorial are available in \uicontrol {Content Library}.
+    The assets you use in this tutorial are available in the \uicontrol {Content Library} view.
 
     To follow this tutorial, you need to first download the starting project from
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/3Dscene%20tutorial/Start}{here}.
@@ -45,14 +45,14 @@
 
     \section1 Adding Materials to the 3D Models
 
-    First, use materials from \uicontrol {Content Library} on the ball bearing.
+    First, use materials from the \uicontrol {Content Library} view on the ball bearing.
 
     \list 1
       \li In the \uicontrol 3D view, right-click the ball bearing and select
         \uicontrol {Edit Component}.
         \image 3d-scene-edit-component-menu.png
-      \li From \uicontrol {Content Library}, drag materials to the different parts of the ball
+      \li From the \uicontrol {Content Library} view, drag materials to the different parts of
-        bearing in the \uicontrol Navigator view.
+          the ball bearing in the \uicontrol Navigator view.
         Drag the following materials to the following parts:
         \list
           \li Chrome to \e inner_race and \e outer_race.
@@ -60,8 +60,8 @@
           \li Gold to \e retainer.
           \li Carbon Fiber to \e shield_left and \e shield_right.
         \endlist
-        \note The first time you use an asset from \uicontrol {Content Library}, you need to
+        \note The first time you use an asset from the \uicontrol {Content Library} view, you
-        download it.
+              need to download it.
         \image 3d-scene-drag-material.png
       \li Select \e {Screen01.ui.qml} in the breadcrumb in the top menu bar to return to the 3D
         scene.
@@ -75,7 +75,7 @@
     Environmental lighting is a good way to create a realistic light for your scene.
 
     \list 1
-      \li In \uicontrol {Content Library}, go to the \uicontrol Environments tab.
+      \li In the \uicontrol {Content Library} view, go to the \uicontrol Environments tab.
       \li Right-click the image \e BasicLights3_4k.hdr and select \uicontrol {Add Light Probe}.
       \image 3d-scene-add-light-probe.webp
       Setting an image as a light probe for a scene adds the image as the source for the image-based
@@ -89,20 +89,20 @@
     you don't want to use the skybox.
     \list 1
       \li In the \uicontrol Navigator view, select \e sceneEnvironment.
-      \li In the \uicontrol Properties view, set \uicontrol {Background Mode} to
+      \li Go to the \uicontrol {Scene Environment} tab in \uicontrol Properties and set \uicontrol
-      \uicontrol Transparent.
+      {Background Mode} to \uicontrol Transparent.
     \endlist
 
-    You also want to increase the brightness of the light a bit. In the \uicontrol Properties view,
+    You also want to increase the brightness of the light a bit. Go to the \uicontrol {Image Based
-    set \uicontrol Exposure to 10.
+    Lighting} tab in \uicontrol Properties and set \uicontrol Exposure to \e 10.
 
     \section2 Adding a Background Image to the Scene
 
     In the final step of this tutorial, you add a background image to your scene.
 
     \list 1
-      \li Go to the \uicontrol Textures tab in \uicontrol {Content Library}.
+      \li Go to the \uicontrol Textures tab in the \uicontrol {Content Library} view.
-      \li Right-click the image \e 4kScratchySurface.png and select \uicontrol {Add Texture}
+      \li Right-click the image \e 4kScratchySurface.png and select \uicontrol {Add Texture}.
       \image 3d-scene-add-texture.webp
       This adds the image as a texture to the project. It is now available in the \uicontrol Assets
       view.

doc/qtdesignstudio/examples/doc/loginui1.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
 
 /*!
@@ -10,14 +10,14 @@
     \brief Illustrates how to use wizard templates to create a simple UI
     that contains a text label, images, and push buttons.
 
-    \image loginui1.jpg
+    \image loginui1.webp
 
     \e{Log In UI - Components} is the first tutorial in a series of tutorials
     that describes how to use the \QDS wizard templates to create a project and
     a button UI control, and how to modify the files generated by the wizard
     templates to design the UI.
 
-    You can donwnload the completed project from
+    You can download the completed project from
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}.
 
     \section1 Creating the UI Project
@@ -32,52 +32,50 @@
     \list 1
         \li Select \uicontrol File > \uicontrol {New Project}.
         \li In the \uicontrol Presets tab, select \uicontrol General >
-        \uicontrol {Empty}.
+        \uicontrol {Empty} (1).
         \li In the \uicontrol Details tab:
             \list
-                \li Enter \e Loginui1 as the name for the project. Keep in mind
+                \li Enter \e Loginui1 as the name (2) for the project. Keep in mind
                 that projects cannot be easily renamed later.
-                \li Select the path for the project files. You can move project
+                \li Select the path (3) for the project files. You can move project
                 folders later.
-                \li Set \uicontrol Width to 720 and \uicontrol Height to 1280.
+                \li Set \uicontrol Width (4) to 720 and \uicontrol Height (5) to 1280.
                 You can change the screen size later in \l Properties.
             \endlist
 
-        \li Select \uicontrol Create to create the project.
+        \li Select \uicontrol Create (6) to create the project.
+    \image loginui1-new-project.webp "New Project window in Qt Design Studio."
     \endlist
 
-    Your project should now look something like this in the \uicontrol Design
+    Your project should now look something like this in the \uicontrol Projects view:
-    mode:
 
-    \image loginui1-project.png "Log In UI project in the Design mode"
+    \image loginui1-project.webp "A new project."
 
     The wizard constructs the \e Screen01 \l{glossary-component}{component}
-    using instances of a \l{basic-rectangle}{Rectangle} component that forms
+    using instances of a \l{basic-rectangle}{rectangle} component that forms
     the background, a \l Button, and a \l Text component that displays some text.
 
     \note The visibility of views depends on the selected workspace,
     so your \QDS might look somewhat different from the above image.
-    To open hidden views, select \uicontrol View > \uicontrol Views
+    To open hidden views, select \uicontrol View > \uicontrol Views. For more
-    in the \uicontrol Design mode. For more information about moving
+    information about moving views around, see \l {Managing Workspaces}.
-    views around, see \l {Managing Workspaces}.
 
-    You should remove this \l Button for now from the UI
+    Remove the button and the text component from the UI to have a clean workspace. Later
-    to have a clean workspace. You'll add this later in the course of the tutorial.
+    in this tutorial, you will add and modify them as you need.
-    Then you shall know how to modify and adjust it as you need.
 
-    To remove this Button, just select it and press \key {Backspace}.
+    To remove this button, select it and press \key {Backspace}. Repeat for the
+    text component.
 
     Next, you will edit the values of the properties of the component instances
     to create the main page of the UI.
     \section1 Creating the Main Page
 
-    You will now change the values of the properties of the \l Text component
+    You will now add a text component instance to create a tag line using a custom font.
-    instance to create a tag line using a custom font. You will add the font
+    You will add the font as an asset and set it to be used in the properties of the component.
-    as an asset and set it to be used in the properties of the component.
     In addition, you will import a background image and logo as assets and
     add them to the page as instances of the \l{Images}{Image} component.
 
-    You can download the logo and the background image from here:
+    Download the logo and the background image from here:
 
     \list
         \li \l{https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/tutorial%20projects/Loginui1/content/images/qt_logo_green_128x128px.png}
@@ -89,70 +87,68 @@
             {Benjamin DeYoung} on \l{https://unsplash.com}{Unsplash}.
     \endlist
 
-    You can download the font from
+    Download the Titillium Web ExtraLight font from
     \l{https://fonts.google.com/specimen/Titillium+Web#standard-styles}
-    {Titillium Web ExtraLight font} or use Arial as a substitute.
+    {here} or use Arial as a substitute.
 
     To add the assets:
     \list 1
         \li Select \uicontrol Assets > \inlineimage icons/plus.png
         (Select \uicontrol View > \uicontrol Views > \uicontrol Assets to enable it,
             if you can't find it).
+        \image loginui1-add-assets.webp "The Assets view."
         \li Select the asset files, and then select \uicontrol Open.
         \li Select the location where the files will be saved in the
             \uicontrol {Add Resources} dialog.
         \li Select \uicontrol OK.
     \endlist
 
-    To preview the changes that you make to the UI while you make
+    To preview the changes that you make, select the \uicontrol {Live Preview} button
-    them, select the \inlineimage icons/live_preview.png
+    or press \key {Alt+P}.
-    (\uicontrol {Show Live Preview}) button on the \uicontrol {2D}
-    view toolbar or press \key {Alt+P}.
 
     The \e Screen01.ui.qml file that the wizard template created for you should
-    be open in the \uicontrol Design mode. If it is not, you can double-click it
+    be open. If it is not, you can double-click it in the \uicontrol Projects view
-    in the \uicontrol Projects view to open it.
+    to open it.
 
     To modify the \e Screen01 component in the \uicontrol {2D} view:
 
     \list 1
-        \li Drag-and-drop the background image (1) from \uicontrol Assets to the
+        \li Drag the background image (1) from \uicontrol Assets to the rectangle (2)
-            \l{basic-rectangle}{Rectangle} (2) in \l Navigator.
+            in \l Navigator.
-            \image loginui1-library-assets.jpg "Assets view"
+            \image loginui1-add-image.webp "The project with the new background image."
-        \li \QDS automatically creates an instance of the \l{Images}{Image}
+            \QDS automatically creates an instance of the \l{Images}{Image}
             component for you with the path to the image file set as the
-            value of \l Properties > \uicontrol Image > \uicontrol Source.
+            value of \uicontrol Properties > \uicontrol Image > \uicontrol Source.
-            \image loginui1-image-properties.png "Image properties"
+            \image loginui1-properties-image.webp "Image properties."
-        \li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle
+        \li Drag the Qt logo from \uicontrol Assets to the rectangle
-            in \uicontrol Navigator and move it to the top-center of the
+            in \uicontrol Navigator in the same way as in the previous step and
-            background image in the \uicontrol {2D} view.
+            move it to the top-center of the background image in the \uicontrol {2D} view.
-        \li Select \e Text in \uicontrol Navigator and drag it below the logo
+        \li Drag a \uicontrol Text component from \uicontrol Components >
-            in the \uicontrol {2D} view. If the text is hidden behind the
+            \uicontrol {Default Components} > \uicontrol Basic to the rectangle and move it
-            background, select \inlineimage icons/navigator-arrowdown.png
+            below the logo image in the \uicontrol {2D} view.
-            in \uicontrol Navigator to move the text as the last item in the
+        \li Select the instance of the text component to edit the text properties in the
-            component tree structure. The text should then appear on top
+            \uicontrol Properties view:
-            of the background.
+            \list
-        \li Edit text properties in \uicontrol Properties:
-            \list a
                 \li In \uicontrol Component > \uicontrol ID, enter the ID
                     \e tagLine.
                 \li In \uicontrol Character > \uicontrol Text, enter the tag
                     line: \e {Are you ready to explore?}.
-                    \image loginui1-text-properties.png "Text properties"
+                \li In \uicontrol Character > \uicontrol Font, select
-                \li In \uicontrol Font, select \e {Titillium Web ExtraLight}.
+                    \e {Titillium Web ExtraLight}.
-                \li In \uicontrol Size, first select the scale to pixels  (\uicontrol px),
+                \li In \uicontrol Character > \uicontrol Size, first select the scale to pixels
-                then set font size of the tag line to \e 50 (\uicontrol px).
+                (\uicontrol px), and then set font size of the tag line to \e 50 (\uicontrol px).
-                \li In \uicontrol {Text color}, set the text color to white
+                \li In \uicontrol Character > \uicontrol {Text color}, set the text color to
-                    (\e #ffffff).
+                    white (\e #ffffff).
+                    \image loginui1-properties-text.webp "Text properties."
             \endlist
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
     Your UI should now look something like this in the \uicontrol {2D} view
-    and live preview:
+    and \uicontrol {Live Preview}:
 
-    \image loginui1-main-page.jpg "Modified UI in the Design mode"
+    \image loginui1-project-main-page.webp "Modified UI with background image, logo, and text."
 
     You can resize the preview dialog to display the whole screen.
     \section1 Creating a Push Button
@@ -160,7 +156,7 @@
     You can use another wizard template to create a push button and to add it to
     the project. The wizard template creates a reusable button component that
     appears in \uicontrol Components > \uicontrol {My Components}.
-    You can drag-and-drop it to \l Navigator to create button instances and
+    You can drag it to \uicontrol Navigator to create button instances and
     modify their properties in the \uicontrol Properties view to change their
     appearance and functionality.
 
@@ -177,20 +173,16 @@
         \li Select \uicontrol File > \uicontrol {New File} >
             \uicontrol {Qt Quick Controls} >
             \uicontrol {Custom Button} > \uicontrol Choose.
+            \image loginui1-new-button.webp "New File window."
         \li In the \uicontrol {Component name} field, enter a name for your
             button component: \e {EntryField}.
         \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
             the button UI file, \e EntryField.ui.qml.
     \endlist
 
-    Your button should now look something like this in the \uicontrol Design
+    Your button should now look something like this:
-    mode:
 
-    \image loginui1-button.png "Button in the Design mode."
+    \image loginui1-button.webp "A new button."
-
-    \note To open the \uicontrol States view, select it from
-    \uicontrol View > \uicontrol Views > \uicontrol States, if
-    it is not available by default.
 
     Next, you will change the appearance of the EntryField component by
     modifying its properties.
@@ -217,30 +209,33 @@
         \li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
             width (\uicontrol W) to \e 500 and height (\uicontrol H)
             to \e 100, to match the width of the tag line.
-        \li In the \uicontrol Control section, deselect the \uicontrol Hover
+        \li In the \uicontrol Control section, clear the \uicontrol Hover
             checkbox because we don't want the hover effect for the button.
+            \image loginui1-button-control-properties.webp "Control properties."
         \li Select \e buttonBackground in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
-        \li In \uicontrol Rectangle > \uicontrol {Fill color}, set the color to
+        \li In \uicontrol Properties > \uicontrol Rectangle, set:
-            transparent light gray (\e #28e7e7e7) in \uicontrol Hex. You can
+            \list
-            also use the \l{Picking Colors}{color picker} to set the color.
+                \li \uicontrol {Fill color} to transparent light gray (\e #28e7e7e7).
-        \li In \uicontrol {Border Color}, select white (\e #ffffff).
+                    You can also use the \l{Picking Colors}{color picker} to set the color.
-        \li In \uicontrol Radius, enter \e 50 to give the button
+                \li \uicontrol {Border color} to white (\e #ffffff).
-            rounded corners.
+                \li \uicontrol Radius to \e 50 to give the button rounded corners.
-        \li Select \e textItem in \uicontrol Navigator to display its
+            \endlist
-            properties in \uicontrol Properties.
+            \image loginui1-button-background-properties-rectangle.webp "Background properties."
-        \li In \uicontrol Character > \uicontrol Font, select
+        \li Select \e textItem in \uicontrol Navigator to display its properties
-            \e {Titillium Web ExtraLight}.
+            in \uicontrol Properties.
-        \li In \uicontrol Size, first select the scale to pixels  (\uicontrol px),
+        \li In \uicontrol Properties > \uicontrol Character, set:
-                then set font size to \e 34 (\uicontrol px).
+            \list
-        \li In \uicontrol {Text color}, set the text color to white
+                \li \uicontrol Font to \e {Titillium Web ExtraLight}.
-            (\e #ffffff).
+                \li \uicontrol Size to \e 34 pixels (\uicontrol px).
-        \li In \uicontrol {Alignment H}, select the \uicontrol Left button to
+                \li \uicontrol {Text color} to white (\e #ffffff).
-            align the text horizontally to the left.
+                \li \uicontrol {Alignment H} to left to align the text horizontally to the left.
-        \li In \uicontrol Padding > \uicontrol Horizontal >
+                \li \uicontrol {Alignment V} to center to align the text vertically to the center.
+            \endlist
+        \li In \uicontrol Properties > \uicontrol Padding > \uicontrol Horizontal >
             \uicontrol Left, set the padding in the field between background
             border and text to \e 50.
-            \image loginui1-text-properties-button.png "Text properties"
+            \image loginui1-button-text-properties.webp "Text properties."
         \li In the \uicontrol States view, select the \e normal state and
             repeat the changes in the background color and text properties,
             as necessary. Repeat for the \e down state.
@@ -250,10 +245,10 @@
 
     Your button should now look something like this:
 
-    \image loginui1-entry-field-styled.jpg "Modified button in the 2D view"
+    \image loginui1-entry-field-styled.webp "Modified button in the 2D view."
 
     \note Do not edit the value of \uicontrol Text in the \uicontrol Character
-    property, because this will break the connection, and later you won't be able
+    property because this will break the connection, and later you won't be able
     to change the text in \uicontrol {Button Content} > \uicontrol Text.
 
     Next, you will add instances of the \e EntryField component to the
@@ -266,16 +261,17 @@
     \list 1
         \li Double-click \e Screen01.ui.qml in \uicontrol Projects
             to open it in the \uicontrol {2D} view.
-        \li Drag-and-drop two instances of the EntryField component from
+        \li Drag two instances of the EntryField component (1) from
-            \uicontrol Components > \uicontrol {My Components} to the rectangle
+            \uicontrol Components > \uicontrol {My Components} to the rectangle (2)
             in \uicontrol Navigator.
-            \image loginui1-library.jpg "My Components tab of Components view"
+            \image loginui1-add-entry-fields.webp "Adding entry fields from the Components view."
         \li Select the first EntryField instance in \uicontrol Navigator
             to modify its ID and text in \uicontrol Properties.
         \li In \uicontrol Component > \uicontrol ID, enter \e username.
         \li In \uicontrol {Button Content} > \uicontrol Text, enter
             \e {Username or Email} and select \uicontrol tr to mark the text
             \l {Mark Strings for Translation}{translatable}.
+            \image loginui1-entry-field-properties.webp "Entry field properties."
         \li Select the second EntryField instance, and change its ID to
             \e password and text to \e Password. Again, mark the text
             translatable.
@@ -283,7 +279,7 @@
             selection icon appear. You can now drag the button instance
             to another position in the \uicontrol {2D} view. Use the
             guidelines to align the button instances below the tag line:
-            \image loginui1-align-buttons.jpg
+            \image loginui1-align-entry-fields.webp "Aligned entry fields."
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -306,21 +302,26 @@
         \li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
             width (\uicontrol W) to \e 500 and height (\uicontrol H)
             to \e 100.
-        \li In the \uicontrol Control section, deselect the \uicontrol Hover
+        \li In the \uicontrol Control section, clear the \uicontrol Hover
             checkbox because we don't want the hover effect for the button.
+            \image loginui1-button-control-properties.webp "Control properties."
         \li Select \e buttonBackground in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
-        \li In \uicontrol Rectangle > \uicontrol {Border color}, select the
+        \li In \uicontrol Properties > \uicontrol Rectangle, set:
-            green used in the logo (\e #41cd52).
+            \list
-        \li In \uicontrol Radius, enter \e 50 to give the button rounded
+                \li \uicontrol {Border color} to the green used in the logo (\e #41cd52).
-            corners.
+                \li \uicontrol Radius to \e 50 to give the button rounded corners.
+            \endlist
+            \image loginui1-button2-background-properties-rectangle.webp "Background properties."
         \li Select \e textItem in \uicontrol Navigator to display
             its properties in \uicontrol Properties.
-        \li In \uicontrol Character > \uicontrol Font, select
+        \li In \uicontrol Properties > \uicontrol Character, set:
-            \e {Titillium Web ExtraLight}.
+            \list
-        \li In \uicontrol Size, first select the scale to pixels  (\uicontrol px),
+                \li \uicontrol Font to \e {Titillium Web ExtraLight}.
-                then set font size to \e 34 (\uicontrol px).
+                \li \uicontrol Size to \e 34 pixels (\uicontrol px).
-        \li In \uicontrol {Text color}, set the text color to \e #41cd52.
+                \li \uicontrol {Text color} to (\e #41cd52).
+            \endlist
+            \image loginui1-button2-background-properties-character.webp "Text properties."
         \li In the \uicontrol States view, select the \e normal state and repeat
             the changes, as necessary.
         \li Repeat for the \e down state. However, in \uicontrol Rectangle >
@@ -332,6 +333,10 @@
             to save your changes.
     \endlist
 
+    Your button should now look something like this:
+
+    \image loginui1-button-styled.webp "Modified push button in the 2D view."
+
     \section1 Adding Push Buttons to the UI
 
     You will now add PushButton instances to the UI and modify their properties.
@@ -339,18 +344,21 @@
     \list 1
         \li Double-click \e Screen01.ui.qml in \uicontrol Projects
             to open it in the \uicontrol {2D} view.
-        \li Drag-and-drop two instances of the PushButton component from
+        \li Drag two instances of the PushButton component (1) from
-            \uicontrol Components > \uicontrol {My Components} to the rectangle
+            \uicontrol Components > \uicontrol {My Components} to the rectangle (2)
             in \uicontrol Navigator.
+            \image loginui1-add-push-buttons.webp "Adding push buttons from the Components view."
         \li Drag the button instances to the bottom of the background image in
             the \uicontrol {2D} view. Use the guidelines to align the button
             instances horizontally with the entry fields.
+            \image loginui1-align-push-buttons.webp "Aligned push buttons."
         \li Select the first PushButton instance in \uicontrol Navigator
             to modify its ID and text label in \uicontrol Properties.
         \li In \uicontrol Component > \uicontrol ID, enter \e login.
         \li In \uicontrol {Button Content} > \uicontrol Text, enter
             \e Continue and select \uicontrol tr to mark the text
             translatable.
+            \image loginui1-push-button-properties.webp "Push button properties."
         \li Select the second PushButton instance, and change its ID to
             \e createAccount and text label to \e {Create Account}. Again,
             mark the text translatable.
@@ -359,9 +367,9 @@
     \endlist
 
     The first iteration of your UI is now ready and should now look something
-    like this in the \uicontrol {2D} view and live preview:
+    like this in the \uicontrol {2D} view and \uicontrol {Live Preview}:
 
-    \image loginui1-ready.jpg "The finished UI in the 2D view"
+    \image loginui1-ready.webp "The finished UI in the 2D view and live preview."
 
     \section1 Learn More
     The \e {Learn More} sections provide additional information about the
@@ -462,7 +470,7 @@
         weight, style, and spacing.
 
         If you want to create a label with a background, use the \l Label component
-        from the \uicontrol {Qt Quick Controls} module instead of the Text component.
+        from the \uicontrol {Qt Quick Controls} module instead of the text component.
 
     \section3 Image Properties
 

doc/qtdesignstudio/examples/doc/loginui2.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
 
 /*!
@@ -11,7 +11,7 @@
     \brief Illustrates how to position UI components on pages using anchors and
     positioners.
 
-    \image loginui1.jpg "Log In UI"
+    \image loginui2.webp "Log In UI"
 
     \e{Log In UI - Positioning} is the second in a series of tutorials that build
     on each other to illustrate how to use \QDS to create a simple UI with
@@ -24,10 +24,10 @@
     with different screen sizes, you will use anchors and positioners.
 
     The starting point for this tutorial is the completed
-    \l{Log In UI - Components} project. You can download the project from
+    \l{Log In UI - Components} project. You can download the project
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}.
 
-    Additionally, you can download the completed project of this tutorial from
+    Additionally, you can download the completed project of this tutorial
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
 
     The \e {Learn More} sections provide additional information about the
@@ -39,22 +39,14 @@
     static page elements, background image (\e adventurePage), logo
     (\e qt_logo_green_128x128px), and tag line (\e tagLine), to the page.
 
-    When you created the project using the project wizard template
+    To preview the changes that you make, select the \uicontrol {Live Preview} button
-    in \l {Log In UI - Components}, the wizard template anchored \e tagLine to
+    or press \key {Alt+P}.
-    the vertical and horizontal center of the page. Therefore, you will only
-    need to replace the vertical anchor of \e tagLine with a top anchor and
-    adjust the margins to align it with \e qt_logo_green_128x128px on the page.
-
-    To preview the changes that you make to the UI while you make
-    them, select the \inlineimage icons/live_preview.png
-    (\uicontrol {Show Live Preview}) button on the \l {2D} view
-    toolbar or press \key {Alt+P}.
 
     To anchor component instances on a page:
 
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the
-            \uicontrol {2D} view.
+            \l {2D} view.
         \li Select \e adventurePage in the \l Navigator view to display its
             properties in the \l Properties view.
         \li In \uicontrol Properties > \uicontrol Layout, select
@@ -62,27 +54,38 @@
             anchor button to anchor \e adventurePage to its
             parent in the \uicontrol Target field. This attaches the background
             image to the rectangle on all sides.
-            Note: Selecting the anchor button should automatically select the
+            \note Selecting the anchor button should automatically select the
-            four buttons on the left side of it. If it doesn't, refresh the
+            four buttons on the left side of it. If it doesn't, select
+            \inlineimage icons/reset.png on the \uicontrol {2D} view toolbar to refresh the
             \uicontrol{2D} view.
             \image loginui2-layout.png "Layout properties"
-        \li Select \e qt_logo_green_128x128px in \l Navigator.
+        \li Select \e qt_logo_green_128x128px in \uicontrol Navigator.
-        \li In \uicontrol Properties > \uicontrol Layout, select the
+        \li In \uicontrol Properties > \uicontrol Layout, set:
-            \inlineimage icons/anchor-top.png
+            \list
-            and \inlineimage icons/anchor-center-horizontal.png
+                \li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
-            anchor buttons to anchor \e qt_logo_green_128x128px to the top of
+                    \inlineimage icons/anchor-center-horizontal.png.
-            its parent in the \uicontrol Target field with a 40-pixel margin
+                \li \uicontrol Target \inlineimage icons/anchor-top.png to \e parent to anchor
-            and to center it horizontally. This attaches the logo to the
+                    the logo to its parent.
-            rectangle at the top, while keeping its horizontal center aligned
+                \li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 40 and
-            with that of the rectangle.
+                    select \inlineimage icons/anchor-top.png to anchor the logo to the top of
+                    the target.
+            \endlist
+            This attaches the logo to the rectangle at the top while keeping its horizontal
+            center aligned with that of the rectangle.
+            \image loginui2-logo-properties.webp "Logo Layout properties"
         \li Select \e tagLine in \uicontrol Navigator.
-        \li In \uicontrol Properties > \uicontrol Layout,
+        \li In \uicontrol Properties > \uicontrol Layout, set:
-            select the \inlineimage icons/anchor-top.png
+            \list
-            button and then select \e qt_logo_green_128x128px
+                \li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
-            as \uicontrol Target to anchor \e tagLine with a 40-pixel margin.
+                    \inlineimage icons/anchor-center-horizontal.png.
-            This attaches the top of the tag line to the
+                \li \uicontrol Target \inlineimage icons/anchor-top.png to
-            bottom of the logo, while keeping its horizontal center aligned
+                    \e qt_logo_green_128x128px to anchor the tag line to the logo.
-            with that of the rectangle.
+                \li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 40 and
+                    select \inlineimage icons/anchor-bottom.png to anchor the tag line to the
+                    bottom of the target.
+            \endlist
+                This attaches the tag line to the bottom of the logo while keeping its horizontal
+                center aligned with that of the rectangle.
             \image loginui2-layout-text.png "Text Layout properties"
             \note You can anchor component instances to their parent and sibling
             components. If a component instance is not listed in the
@@ -94,10 +97,10 @@
             to save your changes.
     \endlist
 
-    Your page now should look something like this in the \uicontrol Design mode
+    Your page should now look something like this in the \uicontrol {2D} view
-    and live preview:
+    and \uicontrol {Live Preview}:
 
-    \image loginui2-loginpage.jpg "Login page in the Design mode and live preview"
+    \image loginui2-loginpage.webp "Login page in the 2D view and live preview"
 
     \section1 Using Column Positioners
 
@@ -113,46 +116,60 @@
             (press and hold the \key Shift or \key Ctrl key for
             \l {Multiselection}{multiple selection}), and right-click
             either of them to open a context menu.
-        \li Select \uicontrol Position > \uicontrol {Position in Column}
+        \li Select \uicontrol Positioner > \uicontrol {Column Positioner}
             to position the fields on top of each other in the
             \uicontrol {2D} view.
         \li Select the column in \uicontrol Navigator and change its ID
             to \e fields in \uicontrol Properties.
         \li In \uicontrol Column > \uicontrol Spacing, set the spacing between
-            the fields to 20 pixels.
+            the fields to \e 20.
-            \image loginui2-column-properties.png "Column properties"
+            \image loginui2-column-properties.webp "Column properties"
         \li Select \e login and \e createAccount, and then select
-            \uicontrol Position > \uicontrol {Position in Column} to position
+            \uicontrol Positioner > \uicontrol {Column Positioner} to position
             them in a column.
         \li Select the button column, change its ID to \e buttons, and
-            set the spacing between the buttons to 20 pixels, as above.
+            set the spacing between the buttons to \e 20, as above.
     \endlist
 
     You will now anchor the field and button columns to the page:
 
     \list 1
         \li Select \e fields in \uicontrol Navigator.
-        \li In \uicontrol Properties > \uicontrol Layout, select the
+        \li In \uicontrol Properties > \uicontrol Layout, set:
-            \inlineimage icons/anchor-top.png
+            \list
-            button to anchor the top of the fields column to
+                \li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
-            the bottom of \e tagLine with a 170-pixel margin.
+                    \inlineimage icons/anchor-center-horizontal.png.
-        \li Select the \inlineimage icons/anchor-center-horizontal.png
+                \li \uicontrol Target \inlineimage icons/anchor-top.png to
-            button to anchor the column horizontally to its parent.
+                    \e tagLine to anchor the entry fields to the tag line.
+                \li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 170 and
+                    select \inlineimage icons/anchor-bottom.png to anchor the entry fields to the
+                    bottom of the target.
+            \endlist
+                This attaches the entry fields to the bottom of the tag line while keeping its
+                horizontal center aligned with that of the rectangle.
+            \image loginui2-fields-properties.webp "Properties of fields"
         \li Select \e buttons in \uicontrol Navigator.
-        \li In \uicontrol Properties > \uicontrol Layout, select the
+        \li In \uicontrol Properties > \uicontrol Layout, set:
-            \inlineimage icons/anchor-bottom.png
+            \list
-            button to anchor the button column to the bottom of its parent
+                \li \uicontrol Anchors to \inlineimage icons/anchor-bottom.png and
-            with a 50-pixel margin.
+                    \inlineimage icons/anchor-center-horizontal.png.
-        \li Select the \inlineimage icons/anchor-center-horizontal.png
+                \li \uicontrol Target \inlineimage icons/anchor-bottom.png to
-            button to anchor the column horizontally to its parent.
+                    \e parent to anchor the entry fields to the rectangle.
+                \li \uicontrol Margin \inlineimage icons/anchor-bottom.png to \e 50 and
+                    select \inlineimage icons/anchor-bottom.png to anchor the entry fields to the
+                    bottom of the target.
+            \endlist
+                This attaches the buttons to the bottom of the rectangle while keeping its
+                horizontal center aligned with that of the rectangle.
+            \image loginui2-buttons-properties.webp "Properties of buttons"
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
     The second iteration of your UI is now ready and should look something like
-    this in the \uicontrol Design mode and live preview:
+    this in the \uicontrol {2D} view and \uicontrol {Live Preview}:
 
-    \image loginui2-loginpage-ready.jpg "Login page in the Design mode and live preview"
+    \image loginui2-loginpage-ready.webp "Login page in the 2D view and live preview"
 
     \section1 Learn More
     \section2 Anchors

doc/qtdesignstudio/examples/doc/loginui3.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 @@
     some basic UI components, such as pages, buttons, and entry fields. The
     third tutorial in the series describes how to use \e states to add a
     second page to the UI. On the first page, users can enter a username
-    and password to log in. On the second page, they can register if they
+    and password to log in. On the second page, they can register as users if they
     do not already have an account.
 
     Because the second page will contain most of the same UI components as the
@@ -25,25 +25,22 @@
     when a user selects the \e {Create Account} button.
 
     The starting point for this tutorial is the completed
-    \l{Log In UI - Positioning} project. You can download the project from
+    \l{Log In UI - Positioning} project. You can download the project
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
 
-    Additionally, you can download the completed project of this tutorial from
+    Additionally, you can download the completed project of this tutorial
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
 
-    The \e {Learn More} sections provide additional information relevant to the
+    For more information, see \l{Working with states} and \l{Signal and Handler Event System}.
-    task at hand.
 
     \section1 Adding UI Components
 
     You will add another entry field for verifying the password that users
     enter to create an account. You are already familiar with the tasks in
-    this section from previous parts of the tutorial.
+    this section from the previous \e {Login UI} tutorials.
 
-    To preview the changes that you make to the UI while you make
+    To preview the changes that you make, select the \uicontrol {Live Preview} button
-    them, select the \inlineimage icons/live_preview.png
+    or press \key {Alt+P}.
-    (\uicontrol {Show Live Preview}) button on the \l {2D} view
-    toolbar or press \key {Alt+P}.
 
     To add the entry field needed on the second page to the \e Screen01
     component:
@@ -51,16 +48,17 @@
     \list 1
         \li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
             in the \uicontrol {2D} view.
-        \li Drag-and-drop an instance of the EntryField component from
+        \li Drag an instance of the EntryField component from
             \uicontrol Components > \uicontrol {My Components} to \e fields in
             \l Navigator.
         \li Select the EntryField instance in \uicontrol Navigator to modify
             its ID and text in \uicontrol Properties.
         \li In \uicontrol Component > \uicontrol ID, enter
             \e repeatPassword.
-        \li In \uicontrol {Button Content} > \uicontrol Text, enter
+        \li In \uicontrol {EntryField} > \uicontrol {Button Content} > \uicontrol Text,
-            \e {Repeat Password} and select \uicontrol tr to mark the text
+            enter \e {Repeat Password} and select \uicontrol tr to mark the text
             translatable.
+            \image loginui3-new-entryfield-properties.webp "Entryfield properties"
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -68,10 +66,10 @@
     \e Screen01 should now look something like this in the
     \uicontrol {2D} view:
 
-    \image loginui3-base-state.jpg "Login page with a Repeat Password field"
+    \image loginui3-base-state.webp "Login page with a Repeat Password field"
 
     Next, you will add states for the login page and the account creation page,
-    where you use the visibility property to hide the repeat password field on
+    where you use the visibility property to hide the \e {Repeat Password} field on
     the login page and the \e {Create Account} button on the account creation
     page.
 
@@ -84,23 +82,20 @@
         \li In the \l States view, select \inlineimage icons/plus.png
         .
         \li Enter \e login as the state name.
-            \image loginui3-login-state.jpg "States view"
+            \image loginui3-login-state.webp "States view"
         \li Select \e repeatPassword in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
-        \li In the \uicontrol Visibility section, deselect the
+        \li In the \uicontrol Visibility section, clear the
-            \uicontrol Visible check box to hide the repeat
+            \uicontrol Visible checkbox to hide the \e {Repeat Password} field in the login state.
-            password field in the login state.
             \image loginui3-visibility.png
-        \li In \uicontrol States, select \inlineimage icons/action-icon.png
+        \li In \uicontrol States, select \uicontrol Default for \e login to determine that the
-            for \e login to open the \uicontrol Actions menu, and then
+            \e login state is applied when the application starts.
-            select \uicontrol {Set as Default} to determine that the \e login
-            state is applied when the application starts.
         \li With the base state selected, add another state and name it
             \e createAccount. This state should now look identical to the base
             state.
-        \li Select \e createAccount in the \uicontrol Navigator to display its
+        \li Select the \e createAccount button in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
-        \li In \uicontrol Visibility, deselect the \uicontrol Visible check box
+        \li In \uicontrol Visibility, clear the \uicontrol Visible checkbox
             to hide the \e {Create Account} button in the account creation
             state.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
@@ -109,14 +104,14 @@
 
     You can now see all the states in the \uicontrol States view:
 
-    \image loginui3-states.jpg "All states in the States view"
+    \image loginui3-states.webp "All states in the States view"
 
     The live preview displays the default state, \e login:
 
-    \image loginui3-login-state-preview.jpg "Preview of the login state"
+    \image loginui3-login-state-preview.webp "Preview of the login state"
 
     Next, you will create connections to specify that clicking the
-    \uicontrol {Create Account} button on the login page triggers a
+    \e {Create Account} button on the login page triggers a
     transition to the account creation page.
 
     \section1 Connecting Buttons to States
@@ -137,7 +132,7 @@
         \li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png
             button to open the connection setup options.
         \li Set \uicontrol Signal to \c clicked, \uicontrol Action to
-            \c {Change State}, \uicontrol {State Group} to \c rectangle and
+            \c {Change State}, \uicontrol {State Group} to \c rectangle, and
             \uicontrol State to \c createAccount in the respective
             drop-down menus.
         \li Select the \inlineimage icons/close.png
@@ -148,60 +143,19 @@
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
 
-        \note Or, you can right-click the \e createAccount button in \l Navigator.
+            \note Alternatively, right-click the \e createAccount button in
-              Then select \uicontrol {Connections} > \uicontrol {Add signal handler} >
+            \uicontrol Navigator. Then select \uicontrol {Connections} >
-              \uicontrol {clicked} > \uicontrol {Change State to createAccount}.
+            \uicontrol {Add new Connection} > \uicontrol {clicked} >
+            \uicontrol {Change State to createAccount}.
     \endlist
 
-    In the live preview, you can now click the \uicontrol {Create Account}
+    In the live preview, you can now click the \e {Create Account}
     button to go to the account creation page.
 
     \image loginui3.gif "Moving between login page and account creation page"
 
-    \section1 Learn More
-    \section2 States
-    The \l{Working with States}{state} of a particular visual component is the set of
-    information which describes how and where the individual parts of the visual
-    component are displayed within it, and all the data associated with that
-    state. Most visual components in a UI will have a limited number of states,
-    each with well-defined properties.
-
-    For example, a list item may be either selected or not, and if
-    selected, it may either be the currently active single selection or it
-    may be part of a selection group. Each of those states may have certain
-    associated visual appearance (neutral, highlighted, expanded, and so on).
-
-    Youn can apply states to trigger behavior or animations. UI components
-    typically have a default state that contains all of a component's initial
-    property values and is therefore useful for managing property values before
-    state changes.
-
-    You can specify additional states by adding new states. Each state within a
-    component has a unique name. To change the current state of an component,
-    the state property is set to the name of the state. State changes can be
-    bound to conditions by using the \c when property.
-
-    \section2 Signal and Event Handlers
-
-    UI components need to communicate with each other. For example, a button
-    needs to know that the user has clicked on it. In response, the button may
-    change color to indicate its state and perform an action.
-
-    To accomplish this, a \e {signal-and-handler} mechanism is used, where the
-    \e signal is the event that is responded to through a \e {signal handler}.
-    When a signal is emitted, the corresponding signal handler is invoked.
-    Placing logic, such as a script or other operations, in the handler allows
-    the component to respond to the event.
-
-    For more information, see \l{Signal and Handler Event System}.
-
     \section1 Next Steps
 
-    For a more complicated UI, you would typically use components that specify
-    a view of items provided by a model, such as a \l{List and Grid Views}
-    {List View} or \l StackView. For more information, see
-    \l{Lists and Other Data Models}.
-
     To learn how to use a timeline to animate the transition between the login
     and account creation pages, see the next tutorial in the series,
     \l {Log In UI - Timeline}.

doc/qtdesignstudio/examples/doc/loginui4.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
 
 /*!
@@ -16,7 +16,9 @@
     on each other to illustrate how to use \QDS to create a simple UI with
     some basic UI components, such as pages, buttons, and entry fields. The
     fourth part of the tutorial describes how to use the timeline and states
-    to animate UI components.
+    to animate UI components. The result of this final tutorial is a UI similar
+    to the preceding animation, where you can navigate to the account creation
+    page by clicking the \e {Create Account} button.
 
     In \l {Log In UI - States}, you learned how to use states to simulate page
     changes in a UI and connections to provide user interaction with it. In
@@ -25,15 +27,14 @@
     to states.
 
     The starting point for this tutorial is the completed
-    \l{Log In UI - States} project. You can download the project from
+    \l{Log In UI - States} project. You can download the project
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
 
-    Additionally, you can download the completed project of this tutorial from
+    Additionally, you can download the completed project of this tutorial
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui4}{here}.
 
 
-    The \e {Learn More} sections provide additional information relevant to the
+    For more information, see \l {Creating Timeline Animations}.
-    task at hand.
 
     \section1 Animating UI Components
 
@@ -43,76 +44,80 @@
     will first remove the states.
 
     Then, you will add a timeline and insert keyframes for the opacity property
-    to hide the \e {Retype Password} field on the login page and the
+    to hide the \e {Repeat Password} field on the login page and the
     \e {Create Account} button on the account creation page. Because we want the
-    retype password field to appear to slide down from the password field, you
+    \e {Repeat Password} field to appear to slide down from the \e Password field, you
     will also need to insert a keyframe for its anchor margin property. To be
     able to animate the anchor, you also need to pull out the fields from the
     column component and anchor them to the rectangle and to each other instead.
 
-    To preview the changes that you make to the UI while you make
+    To preview the changes that you make, select the \uicontrol {Live Preview} button
-    them, select the \inlineimage icons/live_preview.png
+    or press \key {Alt+P}.
-    (\uicontrol {Show Live Preview}) button on the \uicontrol Design
-    mode \l {Summary of Main Toolbar Actions}{toolbar} or press \key {Alt+P}.
 
     \section2 Replacing Columns with Anchors
 
-    First, you will prepare the \e Screen01 component for adding animation:
+    First, prepare the \e Screen01 component for adding animation:
 
     \list 1
         \li Double-click \e Screen01.ui.qml in \l Projects to open it
             in the \l {2D} view.
-        \li In the \l States view, select \e login, and then select
+        \li In the \l States view, select \e login > \inlineimage icons/more-button.png
-            \inlineimage icons/close.png
+            > \uicontrol Delete to remove the state. Repeat for the \e createAccount state.
-            to remove the state. Repeat for the \e createAccount state.
+        \li Select \e username in \l Navigator, and then select:
-        \li Select \e username in \l Navigator, and then select
+            \list
-            \inlineimage icons/arrowleft.png
+                \li \inlineimage icons/arrowleft.png to move \e username into the parent
-            to move it into the parent rectangle to prepare for
+                    rectangle.
-            deleting the \e fields column component instance.
+                \li \inlineimage icons/navigator-arrowup.png to move \e username below
-        \li Select \inlineimage icons/navigator-arrowup.png
+                    \e tagLine in \uicontrol Navigator to preserve the
-            to move \e username below \e tagLine in \uicontrol Navigator
+                    \l{Arranging Components}{component hierarchy}.
-            to preserve the \l{Arranging Components}{component hierarchy}.
+            \endlist
-        \li Repeat step 3 and 4 for \e password and \e repeatPassword.
+        \li Repeat the previous step for \e password and \e repeatPassword.
         \li Select \e fields in \uicontrol Navigator and press \key Delete to
             delete it.
-        \li Select \e username in \uicontrol Navigator to display its properties
+            \image loginui4-hierarchy.webp "The hierarchy of the components."
-            in \l Properties.
+        \li Select \e username in \uicontrol Navigator.
-        \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
+        \li In \uicontrol Properties > \uicontrol Layout, set:
-            to anchor the top of \e username to the bottom of \e tagLine in the
+            \list
-            \uicontrol Target field. \QDS will suggest an appropriate margin
+                \li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
-            based on the current position of the field on the y axis, 170
+                    \inlineimage icons/anchor-center-horizontal.png.
-            pixels.
+                \li \uicontrol Target \inlineimage icons/anchor-top.png to
-        \li Select \inlineimage icons/anchor-center-horizontal.png
+                    \e tagLine to anchor \e username to the tag line.
-            to anchor \e username horizontally to its parent in the
+                \li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 170 and
-            \uicontrol Target field.
+                    select \inlineimage icons/anchor-bottom.png to anchor \e username to the
-        \li Select \e password in \uicontrol Navigator to display its properties
+                    bottom of the target.
-            in \uicontrol Properties.
+                    \note Selecting the anchor button should automatically update the
-        \li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
+                    \uicontrol {2D} view. If it doesn't, select \inlineimage icons/reset.png
-            to anchor the top of \e password to the bottom of \e username in
+                    on the \uicontrol {2D} view toolbar to refresh the \uicontrol{2D} view.
-            the \uicontrol Target field with a 20-pixel margin.
+            \endlist
-        \li Select \inlineimage icons/anchor-center-horizontal.png
+            This attaches \e username to the bottom of the tag line while keeping its
-            to anchor \e password horizontally to its parent in the
+            horizontal center aligned with that of the rectangle.
-            \uicontrol Target field.
+            \image loginui4-username-layout.webp "The layout of username entry field."
-        \li Repeat the above steps to anchor the top of \e repeatPassword
+        \li Select \e password in \uicontrol Navigator.
-            to the bottom of \e password with a 20-pixel margin and to
+        \li In \uicontrol Properties > \uicontrol Layout, set:
+            \list
+                \li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
+                    \inlineimage icons/anchor-center-horizontal.png.
+                \li \uicontrol Target \inlineimage icons/anchor-top.png to
+                    \e username to anchor \e password to \e username.
+                \li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 20 and
+                    select \inlineimage icons/anchor-bottom.png to anchor \e password to the
+                    bottom of the target.
+            \endlist
+            This attaches \e password to the bottom of \e username while keeping its
+            horizontal center aligned with that of the rectangle.
+            \image loginui4-password-layout.webp "The layout of password entry field."
+        \li Repeat the previous step to anchor the top of \e repeatPassword
+            to the bottom of \e password with a margin of \e 20 and to
             anchor it horizontally to its parent.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    You could also animate the y-position property of the repeat password
-    field for a similar effect. In that case, you would need to use absolute
-    positioning for the field. This is less flexible if you export your
-    design from a design tool, such as Adobe Photoshop, and decide to change
-    your design and export it again at some point. In that case, the margins
-    would probably stay the same, even if the positions of the fields on the
-    page would change.
-
     \e Screen01 should not display visible changes in the \uicontrol {2D} view:
 
-    \image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode"
+    \image loginui4-base-state.webp "UI with all the buttons and fields"
 
-    \section2 Adding a Timeline and Animation Settings
+    \section2 Adding a Timeline
 
     You are now ready to add the \l{Creating Timeline Animations}{timeline}.
 
@@ -122,24 +127,23 @@
             \li Select \uicontrol View > \uicontrol Views >
             \uicontrol Timeline to open the \l Timeline view.
         \li In \uicontrol Timeline, select \inlineimage icons/plus.png
-            to add a 1000-frame timeline and settings for running the animation.
+            to add a 1000-frame timeline and define settings for running the animation.
-            \image loginui4-timeline-settings.png
         \li In the \uicontrol {Animation ID} field, enter
             \e toCreateAccountState.
-        \li Deselect the \uicontrol {Running in base state} check box because
+        \li Clear the \uicontrol {Running in base state} checkbox because
             you want the animation to run only after the user clicks the
-            \uicontrol {Create Account} button. You can use the default settings
+            \e {Create Account} button. Use the default settings
             for the other fields.
         \li Select \uicontrol Close in the \uicontrol {Timeline Settings} view
             to save the timeline and the animation settings.
+            \image loginui4-timeline-settings.png
     \endlist
 
     Next, you will record the animation in \uicontrol Timeline.
 
     \section2 Inserting Keyframes
 
-    You will now insert keyframes and record property changes in
+    To insert keyframes and record property changes in \uicontrol Timeline:
-    \uicontrol Timeline:
 
     \list 1
         \li Select \e repeatPassword in \uicontrol Navigator to display its
@@ -150,39 +154,41 @@
             opacity property of the component.
             \image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property"
         \li In \uicontrol Timeline, check that the playhead is in
-            frame 0, and select the \inlineimage icons/recordfill.png
+            frame \e 0, select the small arrow next to \e repeatPassword
+            keyframe to expand it, and then select the \inlineimage icons/recordfill.png
             (\uicontrol {Per Property Recording}) button for the
             \uicontrol opacity property of \e repeatPassword to start
             recording property changes.
-            \image loginui4-timeline-opacity.png "Record button for the opacity property"
+        \li In \uicontrol Visibility > \uicontrol Opacity, type \e 0 to hide the button, and press
-        \li In the field next to the opacity property name on that same line,
+            \key Enter to save the value.
-            type 0 to hide the button, and press \key Enter to save the value.
+        \li Move the playhead to frame \e 1000 and change the opacity value to \e 1
-        \li Move the playhead to frame 1000 and change the opacity value to 1
             to show the button.
 
-            To fine-tune the value of a keyframe, you can also right-click the
+            Alternatively, you can fine-tune the value of a keyframe by right-clicking the
             keyframe marker \inlineimage icons/keyframe_linear_active.png
-            , and select \uicontrol {Edit Keyframe}.
+            , and selecting \uicontrol {Edit Keyframe}.
+            \image loginui4-timeline.webp "Recording the opacity property"
         \li Select the record button again to stop recording property changes.
             If you forget this, all the following changes will be recorded, and
             the results will be unpredictable.
         \li Select \e createAccount in \uicontrol Navigator, and repeat
             the above steps to insert a keyframe for the \uicontrol Opacity
             property of the button and to record changes for it. However, this
-            time the opacity value needs to be 1 in frame 0 and 0 in frame 1000.
+            time the opacity value needs to be \e 1 in frame \e 0 and \e 0 in frame \e 1000.
+            \image loginui4-timeline-opacity.webp "Recorded timeline for the opacity properties"
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    When you move the playhead along the timeline, you can see how the create
+    When you move the playhead along the timeline, you can see how the \e {Create Account}
-    account button fades out while the repeat password field fades in.
+    button fades out while the \e {Repeat Password} field fades in.
 
-    You will now animate the top anchor margin of the repeat password field
+    You will now animate the top anchor margin of the \e {Repeat Password} field
-    to make it appear to slide down from the password field.
+    to make it appear to slide down from the \e Password field.
 
     \section2 Animating Anchors
 
-    To animate the top anchor margin of the repeat password field:
+    To animate the top anchor margin of the \e {Repeat Password} field:
 
     \list 1
         \li Select \e repeatPassword in \uicontrol Navigator to display its
@@ -194,16 +200,17 @@
             anchor margin of \e repeatPassword.
             \image loginui4-keyframe-top-anchor-margin.png "Inserting keyframe for top anchor margin"
         \li In \uicontrol Timeline, check that the playhead is in
-            frame 0, and select the record button for the \e anchors.topMargin
+            frame \e 0, and select the record button for the \e anchors.topMargin
             property of \e repeatPassword.
-        \li In the field next to the property, set a negative value for the
+        \li In \uicontrol Layout > \uicontrol Margin (under \inlineimage icons/anchor-top.png),
-            top anchor margin, -100, to place \e repeatPassword on top of
+            set a negative value for the top anchor margin, \e -100, to place \e repeatPassword
-            \e password.
+            on top of \e password.
-        \li Move the playhead to frame 1000 and change the top anchor margin
+        \li Move the playhead to frame \e 1000 and change the top anchor margin
-            to 20, so that, combined with the change in the \uicontrol Opacity
+            to \e 20, so that, combined with the change in the \uicontrol Opacity
             value, \e repeatPassword appears to slide down and settle below
             \e password.
         \li Select the record button again to stop recording property changes.
+        \image loginui4-timeline-all.webp "Recorded timeline for repeatPassword and createAccount."
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -215,9 +222,9 @@
 
     \list 1
         \li Click the keyframe marker \inlineimage icons/keyframe_linear_active.png
-            for the \e anchors.topMargin property at frame 1000 on the
+            for the \e anchors.topMargin property at frame \e 1000 on the
             timeline to select it.
-            \image loginui4-easing-curve-top-anchor-margin.png "Top anchor margin keyframe marker"
+            \image loginui4-easing-curve-top-anchor-margin.webp "Top anchor margin keyframe marker"
         \li Right-click the keyframe marker to open a context menu, and
             select \uicontrol {Edit Easing Curve} to add an easing curve
             to the animation.
@@ -233,73 +240,46 @@
 
     Your timeline should now look something like this:
 
-    \image loginui4-timeline.png "Timeline view with the recorded property changes"
+    \image loginui4-timeline-final.webp "Timeline view with the recorded property changes"
 
-    Next, you'll create states for the login and account creation pages and bind
+    Next, you will create states for the login and account creation pages and bind
     them to the animation settings.
 
     \section1 Binding Animation to States
 
-    You will now bring back the \l{Working with States}{states} in the
+    To bring back the \l{Working with States}{states} in the
     \uicontrol States view and bind them to the animation settings
     in \uicontrol Timeline:
 
     \list 1
         \li In \uicontrol States, select \inlineimage icons/plus.png
-            twice to add two states called \e login and \e createAccount. You
+            twice to add two states and name them \e login and \e createAccount. You
             don't need to make any property changes this time because you'll
             bind the states to property animations.
-       \li In \uicontrol States, select \inlineimage icons/action-icon.png
+        \li In \uicontrol States, select \uicontrol Default for \e login to determine that
-            for \e login to open the \uicontrol Actions menu, and then
+            the \e login state is applied when the application starts.
-            select \uicontrol {Set as Default} to determine that the \e login
+            \image loginui4-states.webp "Created states in the States view."
-            state is applied when the application starts.
+        \li With the base state selected, select \uicontrol Timeline >
-        \li In \uicontrol Timeline, select the \inlineimage icons/animation.png
+            \inlineimage icons/settings.png (\uicontrol {Timeline Settings (S)}) on the toolbar
-            (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
+            (or press \key S) to open the \uicontrol {Timeline Settings} dialog.
-            \key S) to open the \uicontrol {Timeline Settings} dialog.
+        \li Double-click the cell in the \uicontrol Timeline column on the
-            \image loginui4-timeline-settings-states.png
+            \e login row, and select \e timeline in the list.
         \li Double-click the cell in the \uicontrol Timeline column on the
             \e createAccount row, and select \e timeline in the list.
         \li Double-click the cell in the \uicontrol Animation column on the
             \e createAccount row, and select \e toCreateAccountState.
+            \image loginui4-timeline-settings-states.png
         \li Click \uicontrol Close to save the timeline settings.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    In the live preview, you can now click the \uicontrol {Create Account}
+    In the live preview, you can now click the \e {Create Account}
     button to go to the account creation page.
 
     \image loginui4.gif "Moving between login page and account creation page"
 
-    \section2 Learn More - Timeline
-
-    The Qt Quick Timeline module provides components to use timelines and
-    keyframes to animate component properties in UIs. Animating properties
-    enables their values to move through intermediate values instead of
-    immediately changing to the target value.
-
-    The Keyframe component specifies the value of a keyframe on a timeline. \QDS
-    automatically adds keyframes between two keyframes, and sets their values
-    evenly to create an appearance of movement or transformation.
-
-    An easing curve can be attached to the keyframe to change the appearance
-    of the animation. For more information about easing curve types, see the
-    documentation for \l [QML] {PropertyAnimation}{easing curves}.
-
-    To be able to use the functionality of Timeline components, \QDS adds
-    the following \e import statement to the UI files where it uses the
-    components:
-
-    \quotefromfile Loginui4/content/Screen01.ui.qml
-    \skipto QtQuick.Timeline
-    \printuntil 1.0
-
-    All the properties and functions of the components from this module are
-    available in the \uicontrol Design mode, and therefore it is enough to
-    learn how to use \uicontrol Timeline, as described in
-    \l {Creating Timeline Animations}.
-
     \section1 Next Steps
 
-    For more examples about using timelines, see \l{Examples}.
+    To continue learning about \QDS, see \l{Examples} and other \l{Tutorials}.
 */