Merge "Merge remote-tracking branch 'origin/qds/dev'"

CMakeLists.txt

@@ -11,7 +11,6 @@ include(Utils)
 
 env_with_default("QTC_BUILD_WITH_PCH" ENV_QTC_BUILD_WITH_PCH ON)
 env_with_default("QTC_WITH_TESTS" ENV_QTC_WITH_TESTS OFF)
-env_with_default("QTC_WITH_QMLDESIGNER" ENV_QTC_WITH_QMLDESIGNER ON)
 
 option(BUILD_WITH_PCH "Build with precompiled headers" "${ENV_QTC_BUILD_WITH_PCH}")
 
@@ -78,12 +77,9 @@ find_package(Qt6
   REQUIRED
 )
 
-if (Qt6_VERSION VERSION_GREATER_EQUAL 6.5.4)
+# depending on Qt version and compiler version enable or disable Qml Designer
-    option(WITH_QMLDESIGNER "Build QmlDesigner" ${ENV_QTC_WITH_QMLDESIGNER})
+# can be overwritten by variable WITH_QMLDESIGNER / QTC_WITH_QMLDESIGNER (env)
-else()
+configure_qml_designer(${Qt6_VERSION})
-    option(WITH_QMLDESIGNER "Build QmlDesigner" OFF)
-endif()
-add_feature_info("Build QmlDesigner and related code (only if Qt is 6.5.4 or newer)" ${WITH_QMLDESIGNER} "")
 
 # hack for Qbs which still supports Qt5 and Qt6
 if (TARGET Qt6::Core5CompatPrivate)

cmake/QtCreatorAPI.cmake

@@ -126,7 +126,7 @@ endfunction()
 function(add_qtc_library name)
   cmake_parse_arguments(_arg "STATIC;OBJECT;SHARED;SKIP_TRANSLATION;ALLOW_ASCII_CASTS;FEATURE_INFO;SKIP_PCH;EXCLUDE_FROM_INSTALL"
     "DESTINATION;COMPONENT;SOURCES_PREFIX;BUILD_DEFAULT"
-    "CONDITION;DEPENDS;PUBLIC_DEPENDS;DEFINES;PUBLIC_DEFINES;INCLUDES;SYSTEM_INCLUDES;PUBLIC_INCLUDES;PUBLIC_SYSTEM_INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PROPERTIES" ${ARGN}
+    "CONDITION;DEPENDS;PUBLIC_DEPENDS;DEFINES;PUBLIC_DEFINES;INCLUDES;SYSTEM_INCLUDES;PUBLIC_INCLUDES;PUBLIC_SYSTEM_INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PROPERTIES;PRIVATE_COMPILE_OPTIONS;PUBLIC_COMPILE_OPTIONS" ${ARGN}
   )
 
   get_default_defines(default_defines_copy ${_arg_ALLOW_ASCII_CASTS})
@@ -209,6 +209,8 @@ function(add_qtc_library name)
     EXPLICIT_MOC ${_arg_EXPLICIT_MOC}
     SKIP_AUTOMOC ${_arg_SKIP_AUTOMOC}
     EXTRA_TRANSLATIONS ${_arg_EXTRA_TRANSLATIONS}
+    PRIVATE_COMPILE_OPTIONS ${_arg_PRIVATE_COMPILE_OPTIONS}
+    PUBLIC_COMPILE_OPTIONS ${_arg_PUBLIC_COMPILE_OPTIONS}
   )
 
   if (QTC_STATIC_BUILD)
@@ -330,7 +332,7 @@ function(add_qtc_plugin target_name)
   cmake_parse_arguments(_arg
     "SKIP_INSTALL;INTERNAL_ONLY;SKIP_TRANSLATION;EXPORT;SKIP_PCH"
     "VERSION;COMPAT_VERSION;PLUGIN_PATH;PLUGIN_NAME;OUTPUT_NAME;BUILD_DEFAULT;PLUGIN_CLASS"
-    "CONDITION;DEPENDS;PUBLIC_DEPENDS;DEFINES;PUBLIC_DEFINES;INCLUDES;SYSTEM_INCLUDES;PUBLIC_INCLUDES;PUBLIC_SYSTEM_INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PLUGIN_DEPENDS;PLUGIN_RECOMMENDS;PLUGIN_TEST_DEPENDS;PLUGIN_MANUAL_DEPENDS;PROPERTIES"
+    "CONDITION;DEPENDS;PUBLIC_DEPENDS;DEFINES;PUBLIC_DEFINES;INCLUDES;SYSTEM_INCLUDES;PUBLIC_INCLUDES;PUBLIC_SYSTEM_INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PLUGIN_DEPENDS;PLUGIN_RECOMMENDS;PLUGIN_TEST_DEPENDS;PLUGIN_MANUAL_DEPENDS;PROPERTIES;PRIVATE_COMPILE_OPTIONS;PUBLIC_COMPILE_OPTIONS"
     ${ARGN}
   )
 
@@ -498,6 +500,8 @@ function(add_qtc_plugin target_name)
     EXPLICIT_MOC ${_arg_EXPLICIT_MOC}
     SKIP_AUTOMOC ${_arg_SKIP_AUTOMOC}
     EXTRA_TRANSLATIONS ${_arg_EXTRA_TRANSLATIONS}
+    PRIVATE_COMPILE_OPTIONS ${_arg_PRIVATE_COMPILE_OPTIONS}
+    PUBLIC_COMPILE_OPTIONS ${_arg_PUBLIC_COMPILE_OPTIONS}
   )
 
   if (QTC_STATIC_BUILD)
@@ -635,7 +639,7 @@ endfunction()
 function(add_qtc_executable name)
   cmake_parse_arguments(_arg "SKIP_INSTALL;SKIP_TRANSLATION;ALLOW_ASCII_CASTS;SKIP_PCH;QTC_RUNNABLE"
     "DESTINATION;COMPONENT;BUILD_DEFAULT"
-    "CONDITION;DEPENDS;DEFINES;INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PROPERTIES" ${ARGN})
+    "CONDITION;DEPENDS;DEFINES;INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PROPERTIES;PRIVATE_COMPILE_OPTIONS;PUBLIC_COMPILE_OPTIONS" ${ARGN})
 
   if (${_arg_UNPARSED_ARGUMENTS})
     message(FATAL_ERROR "add_qtc_executable had unparsed arguments!")
@@ -711,6 +715,8 @@ function(add_qtc_executable name)
     EXPLICIT_MOC ${_arg_EXPLICIT_MOC}
     SKIP_AUTOMOC ${_arg_SKIP_AUTOMOC}
     EXTRA_TRANSLATIONS ${_arg_EXTRA_TRANSLATIONS}
+    PRIVATE_COMPILE_OPTIONS ${_arg_PRIVATE_COMPILE_OPTIONS}
+    PUBLIC_COMPILE_OPTIONS ${_arg_PUBLIC_COMPILE_OPTIONS}
   )
 
   set(skip_translation OFF)
@@ -838,7 +844,7 @@ endfunction()
 
 function(add_qtc_test name)
   cmake_parse_arguments(_arg "GTEST;MANUALTEST;EXCLUDE_FROM_PRECHECK;NEEDS_GUI" "TIMEOUT"
-      "DEFINES;DEPENDS;INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;SKIP_PCH;CONDITION;PROPERTIES" ${ARGN})
+      "DEFINES;DEPENDS;INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;SKIP_PCH;CONDITION;PROPERTIES;PRIVATE_COMPILE_OPTIONS;PUBLIC_COMPILE_OPTIONS" ${ARGN})
 
   if (${_arg_UNPARSED_ARGUMENTS})
     message(FATAL_ERROR "add_qtc_test had unparsed arguments!")
@@ -890,6 +896,8 @@ function(add_qtc_test name)
     DEFINES ${_arg_DEFINES} ${TEST_DEFINES} ${default_defines_copy}
     EXPLICIT_MOC ${_arg_EXPLICIT_MOC}
     SKIP_AUTOMOC ${_arg_SKIP_AUTOMOC}
+    PRIVATE_COMPILE_OPTIONS ${_arg_PRIVATE_COMPILE_OPTIONS}
+    PUBLIC_COMPILE_OPTIONS ${_arg_PUBLIC_COMPILE_OPTIONS}
   )
 
   set_target_properties(${name} PROPERTIES

cmake/QtCreatorAPIInternal.cmake

@@ -484,7 +484,7 @@ function(extend_qtc_target target_name)
   cmake_parse_arguments(_arg
     ""
     "SOURCES_PREFIX;SOURCES_PREFIX_FROM_TARGET;FEATURE_INFO"
-    "CONDITION;DEPENDS;PUBLIC_DEPENDS;DEFINES;PUBLIC_DEFINES;INCLUDES;SYSTEM_INCLUDES;PUBLIC_INCLUDES;PUBLIC_SYSTEM_INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PROPERTIES;SOURCES_PROPERTIES"
+    "CONDITION;DEPENDS;PUBLIC_DEPENDS;DEFINES;PUBLIC_DEFINES;INCLUDES;SYSTEM_INCLUDES;PUBLIC_INCLUDES;PUBLIC_SYSTEM_INCLUDES;SOURCES;EXPLICIT_MOC;SKIP_AUTOMOC;EXTRA_TRANSLATIONS;PROPERTIES;SOURCES_PROPERTIES;PRIVATE_COMPILE_OPTIONS;PUBLIC_COMPILE_OPTIONS"
     ${ARGN}
   )
 
@@ -572,6 +572,16 @@ function(extend_qtc_target target_name)
   if (_arg_SOURCES_PROPERTIES)
     set_source_files_properties(${_arg_SOURCES} PROPERTIES ${_arg_SOURCES_PROPERTIES})
   endif()
+
+
+  if (_arg_PRIVATE_COMPILE_OPTIONS)
+      target_compile_options(${target_name} PRIVATE ${_arg_PRIVATE_COMPILE_OPTIONS})
+  endif()
+
+  if (_arg_PUBLIC_COMPILE_OPTIONS)
+      target_compile_options(${target_name} PUBLIC ${_arg_PUBLIC_COMPILE_OPTIONS})
+  endif()
+
 endfunction()
 
 function (qtc_env_with_default envName varToSet default)

cmake/QtCreatorIDEBranding.cmake

@@ -8,6 +8,8 @@ set(IDE_DISPLAY_NAME "Qt Creator")                    # The IDE display name.
 set(IDE_ID "qtcreator")                               # The IDE id (no spaces, lowercase!)
 set(IDE_CASED_ID "QtCreator")                         # The cased IDE id (no spaces!)
 set(IDE_BUNDLE_IDENTIFIER "org.qt-project.${IDE_ID}") # The macOS application bundle identifier.
+set(IDE_APP_ID "org.qt-project.${IDE_ID}")            # The free desktop application identifier.
+
 
 set(PROJECT_USER_FILE_EXTENSION .user)
 set(IDE_DOC_FILE "qtcreator/qtcreator.qdocconf")
@@ -17,5 +19,5 @@ set(IDE_DOC_FILE_ONLINE "qtcreator/qtcreator-online.qdocconf")
 # Should contain qtcreator.ico, qtcreator.xcassets
 set(IDE_ICON_PATH "")
 # Absolute, or relative to <qtcreator>/src/app
-# Should contain images/logo/(16|24|32|48|64|128|256|512)/QtProject-qtcreator.png
+# Should contain images/logo/(16|24|32|48|64|128|256|512)/QtProject-${IDE_ID}.png
 set(IDE_LOGO_PATH "")

cmake/Utils.cmake

@@ -59,3 +59,45 @@ function(setup_dependencies_component)
     )
   endif()
 endfunction()
+
+function(configure_qml_designer Qt6_VERSION)
+    set(QMLDESIGNER_QT6_REQUIRED_VERSION 6.5.4)
+    set(QMLDESIGNER_GCC_REQUIRED_VERSION 10.0)
+    set(QMLDESIGNER_CLANG_REQUIRED_VERSION 13.0)
+    set(QMLDESIGNER_APPLECLANG_REQUIRED_VERSION 15.0)
+
+    string(CONCAT QMLDESIGNER_FEATURE_DESC
+           "Needs a Qt ${QMLDESIGNER_QT6_REQUIRED_VERSION} or newer")
+
+    if (Qt6_VERSION VERSION_GREATER_EQUAL ${QMLDESIGNER_QT6_REQUIRED_VERSION})
+        if (CMAKE_CXX_COMPILER_ID STREQUAL "GNU" AND
+            CMAKE_CXX_COMPILER_VERSION VERSION_LESS ${QMLDESIGNER_GCC_REQUIRED_VERSION})
+            set(QTC_WITH_QMLDESIGNER_DEFAULT OFF)
+            string(APPEND QMLDESIGNER_FEATURE_DESC " and at least GCC ${QMLDESIGNER_GCC_REQUIRED_VERSION}")
+        elseif (CMAKE_CXX_COMPILER_ID STREQUAL "AppleClang" AND
+                CMAKE_CXX_COMPILER_VERSION VERSION_LESS ${QMLDESIGNER_APPLECLANG_REQUIRED_VERSION})
+            set(QTC_WITH_QMLDESIGNER_DEFAULT OFF)
+            string(APPEND QMLDESIGNER_FEATURE_DESC " and at least AppleClang ${QMLDESIGNER_APPLECLANG_REQUIRED_VERSION}")
+        elseif (CMAKE_CXX_COMPILER_ID STREQUAL "Clang" AND
+                CMAKE_CXX_COMPILER_VERSION VERSION_LESS ${QMLDESIGNER_CLANG_REQUIRED_VERSION})
+            set(QTC_WITH_QMLDESIGNER_DEFAULT OFF)
+            string(APPEND QMLDESIGNER_FEATURE_DESC " and at least Clang ${QMLDESIGNER_CLANG_REQUIRED_VERSION}")
+        else()
+            set(QTC_WITH_QMLDESIGNER_DEFAULT ON)
+        endif()
+    else()
+        set(QTC_WITH_QMLDESIGNER_DEFAULT OFF)
+    endif()
+
+    env_with_default("QTC_WITH_QMLDESIGNER" ENV_QTC_WITH_QMLDESIGNER ${QTC_WITH_QMLDESIGNER_DEFAULT})
+    option(WITH_QMLDESIGNER "Build QmlDesigner" ${ENV_QTC_WITH_QMLDESIGNER})
+    add_feature_info("WITH_QMLDESIGNER" ${WITH_QMLDESIGNER} "${QMLDESIGNER_FEATURE_DESC}")
+
+    set(QTC_IS_SUPPORTED_PROJECTSTORAGE_QT_DEFAULT OFF)
+    if(Qt6_VERSION VERSION_GREATER_EQUAL 6.7.3 AND Qt6_VERSION VERSION_LESS 6.8.0)
+        set(QTC_IS_SUPPORTED_PROJECTSTORAGE_QT_DEFAULT ON)
+    endif()
+    env_with_default("QTC_IS_SUPPORTED_PROJECTSTORAGE_QT" ENV_QTC_IS_SUPPORTED_PROJECTSTORAGE_QT ${QTC_IS_SUPPORTED_PROJECTSTORAGE_QT_DEFAULT})
+    option(IS_SUPPORTED_PROJECTSTORAGE_QT "IS_SUPPORTED_PROJECTSTORAGE_QT" ${ENV_QTC_IS_SUPPORTED_PROJECTSTORAGE_QT})
+    add_feature_info("IS_SUPPORTED_PROJECTSTORAGE_QT" ${IS_SUPPORTED_PROJECTSTORAGE_QT} "is ${IS_SUPPORTED_PROJECTSTORAGE_QT}")
+endfunction()

dist/branding/qtdesignstudio/QtCreatorIDEBranding.cmake

@@ -1,6 +1,6 @@
 set(IDE_VERSION "4.6.0")                              # The IDE version.
 set(IDE_VERSION_COMPAT "4.6.0")                       # The IDE Compatibility version.
-set(IDE_VERSION_DISPLAY "4.6.0")                      # The IDE display version.
+set(IDE_VERSION_DISPLAY "4.6")                        # The IDE display version.
 set(IDE_COPYRIGHT_YEAR "2024")                        # The IDE current copyright year.
 
 set(IDE_SETTINGSVARIANT "QtProject")                  # The IDE settings variation.
@@ -9,6 +9,7 @@ set(IDE_DISPLAY_NAME "Qt Design Studio")              # The IDE display name.
 set(IDE_ID "qtdesignstudio")                          # The IDE id (no spaces, lowercase!)
 set(IDE_CASED_ID "QtDesignStudio")                    # The cased IDE id (no spaces!)
 set(IDE_BUNDLE_IDENTIFIER "org.qt-project.${IDE_ID}") # The macOS application bundle identifier.
+set(IDE_APP_ID "io.qt.${IDE_ID}")                     # The free desktop application identifier.
 
 set(PROJECT_USER_FILE_EXTENSION .qtds)
 set(IDE_DOC_FILE "qtdesignstudio/qtdesignstudio.qdocconf")

dist/branding/qtdesignstudio/QtProject/QtDesignStudio.ini

@@ -63,3 +63,6 @@ Settings\ShowRunOutput=0
 
 [KeyboardShortcutsV2]
 QtCreator.ReturnToEditor=
+
+[J.QtQuick]
+QmlJSEditor.UseQmlls=false

doc/config/macros.qdocconf

@@ -40,6 +40,7 @@ macro.QSDK              = "Qt"
 macro.QUL               = "Qt Quick Ultralite"
 macro.QUV               = "Qt UI Viewer"
 macro.QOI               = "Qt Online Installer"
+macro.QM                = "Qt Multimedia"
 macro.QMT               = "Qt Maintenance Tool"
 macro.qtcversion        = $QTC_VERSION
 macro.param             = "\\e"

doc/qtcreator/images/extraimages/qtdesignstudio-extraimages.qdocconf

@@ -11,4 +11,5 @@
     images/pEETxSxYazg.jpg \
     images/V3Po15bNErw.jpg \
     images/9MqUCP6JLCQ.jpg \
-    images/KDxnMQzgmIY.jpg
+    images/KDxnMQzgmIY.jpg \
+    images/h0p27_HScxc.jpg

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

@@ -105,3 +105,139 @@
     \externalpage https://doc.qt.io/qt/linguist-id-based-i18n.html
     \title Text ID based translations
 */
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.5.1-released
+    \title Qt Design Studio 4.5.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.5-released
+    \title Qt Design Studio 4.5 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.4-released
+    \title Qt Design Studio 4.4 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.3.2-released
+    \title Qt Design Studio 4.3.2 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.3.1-released
+    \title Qt Design Studio 4.3.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.3-released
+    \title Qt Design Studio 4.3 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.2-released
+    \title Qt Design Studio 4.2 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.1-released
+    \title Qt Design Studio 4.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.0.1-released
+    \title Qt Design Studio 4.0.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-4.0-released
+    \title Qt Design Studio 4.0 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.9-released
+    \title Qt Design Studio 3.9 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.8-released
+    \title Qt Design Studio 3.8 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.7-released
+    \title Qt Design Studio 3.7 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.6-released
+    \title Qt Design Studio 3.6 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.5-released
+    \title Qt Design Studio 3.5 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.4-released
+    \title Qt Design Studio 3.4 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.3-released
+    \title Qt Design Studio 3.3 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.2-released
+    \title Qt Design Studio 3.2 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.1-released
+    \title Qt Design Studio 3.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-3.0-released
+    \title Qt Design Studio 3.0 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-2.3-released
+    \title Qt Design Studio 2.3 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-2.2-released
+    \title Qt Design Studio 2.2 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-2.1-released
+    \title Qt Design Studio 2.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-2.0-released
+    \title Qt Design Studio 2.0 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-1.6.1-released
+    \title Qt Design Studio 1.6.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-1.6-released
+    \title Qt Design Studio 1.6 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-1.5-released
+    \title Qt Design Studio 1.5 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-1.4-released
+    \title Qt Design Studio 1.4 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-1.3.1-released
+    \title Qt Design Studio 1.3.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/qt-design-studio-1.3-released
+    \title Qt Design Studio 1.3 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/2019/06/03/qt-design-studio-1-2-released
+    \title Qt Design Studio 1.2 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/2019/04/12/qt-design-studio-1-1-1-released
+    \title Qt Design Studio 1.1.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/2019/02/19/qt-design-studio-1-1-released
+    \title Qt Design Studio 1.1 released
+*/
+/*!
+    \externalpage https://www.qt.io/blog/2018/10/25/qt-design-studio-1-0-released
+    \title Qt Design Studio 1.0 released
+*/

doc/qtdesignstudio/config/style/qt5-sidebar.html

@@ -3,6 +3,11 @@
             <li><a href="qtdesignstudio-toc.html">View All Topics</a></li>
     </ul>
 </div>
+<div class="sectionlist normallist">
+    <ul>
+            <li><a href="whats-new.html">What's New in Qt Design Studio</a></li>
+    </ul>
+</div>
 <div class="sectionlist normallist">
     <div class="heading">
         <h2>Getting Started</h2>

doc/qtdesignstudio/examples/doc/DesignEffect.qdoc

@@ -0,0 +1,152 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page design-effect-example.html
+    \ingroup studioexamples
+
+    \title Design Effect
+    \brief Illustrates how to use the \QDS design effect.
+
+    \image studio-design-effects-demo-gallery.webp
+
+    The \e{Design Effects Demo Gallery} example illustrates the use cases of the
+    design effects in \QDS. Learn more about design effects
+    \l {https://doc.qt.io/qtdesignstudio/quick-design-effects.html}{here}.
+
+    In this example, you see and interact with the implementation of the following design effect
+    principles:
+    \table
+      \header
+        \li Design Effect
+        \li Description
+      \row
+        \li Neumorphism
+        \li Creates a soft and light look with elements that appear to protrude from or dent
+            into the background rather than float on top of it.
+      \row
+        \li Skeuomorphism
+        \li Emulates the appearance of physical objects.
+      \row
+        \li Glassmorphism
+        \li Uses transparency and blur to emulate the appearance of frosted glass.
+    \endtable
+
+    You can also try the \uicontrol {Demo Project} in the example. This project
+    represents Neumorphism, Skeuomorphism, and Glassmorphism effects used in a digital calculator
+    environment.
+
+    Watch this video tutorial to learn how to create these effects using \QDS design effects:
+    \youtube h0p27_HScxc
+
+    \section1 Using Neumorphism Example
+
+    \image studio-neumorphism.webp
+
+    In the \e {Design Effects Demo Gallery}, go to the \uicontrol Intro,
+    \uicontrol {Design Studies}, or \uicontrol Animation to see the Neumorphism effects
+    created using design effects in \QDS. To access these sections:
+
+    \list 1
+      \li Select \uicontrol Neumorphism.
+      \li Select \uicontrol Intro, \uicontrol {Design Studies}, \uicontrol {Design Studies 2},
+          \uicontrol or \uicontrol Animation to see the corresponding section in display.
+    \endlist
+
+    \note These design studies show different Neumorphism effects achieved using Figma, and how
+          accurately they translate into \QDS design effects.
+          The animation gives a real-time animated Neumorphism design effect in \QDS.
+
+    \section1 Using Skeuomorphism Example
+
+    \image studio-skeuomorphism.webp
+
+    In the \e {Design Effects Demo Gallery}, go to the \uicontrol Intro,
+    \uicontrol {Design Studies}, or \uicontrol Interaction to see the Skeuomorphism effects
+    created using design effects in \QDS. To access these sections:
+
+    \list 1
+      \li Select \uicontrol Skeuomorphism.
+      \li Select \uicontrol Intro, \uicontrol {Design Studies}, or \uicontrol Interaction
+          to see the corresponding section in display.
+      \li To try the Skeuomorphism effects further, go to \uicontrol Skeuomorphism >
+          \uicontrol Interaction and select the \e{Actual Qt Quick Buttons}.
+    \endlist
+
+    \note The design study here shows the Skeuomorphism effects achieved using Figma, and how
+          accurately they translate into \QDS design effects. The \e{Actual Qt Quick Buttons} are
+          interactive buttons where Skeuomorphism design principles work. You can click
+          these buttons to test different stages of the Skeuomorphism effect.
+
+
+    \section1 Using Glassmorphism Example
+
+    \image studio-glassmorphism.webp
+
+    In the \e {Design Effects Demo Gallery}, go to the \uicontrol Intro,
+    \uicontrol {Design studies}, or \uicontrol Interaction to see the Glassmorphism effects
+    created using design effects in \QDS. To access these sections:
+
+    \list 1
+      \li Select \uicontrol Glassmorphism.
+      \li Select \uicontrol Intro, \uicontrol {Design Studies}, \uicontrol Animation, or
+          \uicontrol Interaction to see the corresponding section in the display area.
+      \li Try the Glassmorphism effects further in \uicontrol Interaction. Go to
+          \uicontrol Glassmorphism > \uicontrol Interaction, and drag the window with the
+          Glassmorphism effect where you want to move it. Due to the Glassmorphism effect, the
+          part of the image hidden behind it would become blurred.
+    \endlist
+
+    \section1 Using the Design Effect Demo Project
+
+    \image studio-design-effects-demo-project.webp
+
+    The \uicontrol {Demo Project} combines design effects, including \uicontrol Neumorphism,
+    \uicontrol Skeuomorphism, and \uicontrol Glassmorphism. It also includes sound effects using
+    \l {https://doc.qt.io/qt-6/qtmultimedia-index.html} {\QM}. In the \uicontrol {Demo Project},
+    you can interact with a Single Toggle Operation Integer Calculator.
+
+    To run the Single Toggle Operation Integer Calculator, go to \uicontrol {Demo Project},
+    and select \uicontrol {Run Demo}.
+
+    To remove the previous calculation data and make the calculator ready for a new
+    arithmetic operation, select \uicontrol CLR.
+
+    To change the theme of the calculator between light and dark, select \uicontrol DARK.
+
+    \section2 Using Shadow or Blur Effects
+
+      To change the direction of the shadows on the calculator, drag \uicontrol {SHADOW DIR}
+      up or down.
+
+      To control how much the shadow can spread on the calculator, go to \uicontrol SPREAD,
+      click and hold, and then move the mouse in a circular motion to the left or right.
+
+      To adjust the level of blur in the calculator control and display, go to \uicontrol BLUR,
+      click and hold, and then move the mouse in a circular motion to the left or right.
+
+      To turn the design effects on or off in the calculator, select \uicontrol FX.
+
+    \section2 Using Music or Sound Effects
+
+      To play sound or music in the calculator:
+      \list
+        \li To play music in a loop, select \uicontrol CHRD, \uicontrol TECH, or
+            \uicontrol DUB.
+        \li To play brief sounds, select \uicontrol KCK or \uicontrol WMP. You can also play these
+            sounds while one of the \uicontrol CHRD, \uicontrol TECH, or \uicontrol DUB music
+            is playing.
+        \li To play laughter, select \uicontrol {":)"}.
+
+        \note You cannot play \uicontrol CHRD, \uicontrol TECH, and \uicontrol DUB music together.
+              When you select one of them, the other stops immediately.
+      \endlist
+
+      To change the volume of the sound effects in the calculator, go to \uicontrol VOLUME,
+      and then move the mouse in a circular motion to the left or right.
+
+      To stop all the sounds and music, select \uicontrol MUTE. If the \uicontrol MUTE is inactive,
+      each button you select for the arithmetic operation also plays a brief sound.
+
+
+*/

doc/qtdesignstudio/src/components/qtquick-positioning.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
 
 /*!
@@ -8,7 +8,7 @@
 
     \title Scalable Layouts
 
-    The position of a \l{glossary-component}{component} in a UI can be either
+    The position of a \l{glossary-component}{component} in a UI is either
     absolute or relative to other components. The visual components exist at a
     particular location in the screen coordinate system at any instant in time.
     The x and y coordinates of a visual component are relative to those of its
@@ -17,32 +17,46 @@
     If you are designing a static UI,
     \l{Important Concepts In Qt Quick - Positioning#manual-positioning}
     {manual positioning} provides the most efficient form of positioning
-    components. For a dynamic UI, you can employ the following positioning
+    components. For a dynamic UI, use the following positioning
     methods:
 
-    \list
+    \table
+        \header
+            \li Action
+            \li Purpose
+        \row
             \li \l{Setting Bindings}
+            \li To connect the properties of components.
+        \row
             \li \l{Setting Anchors and Margins}
+            \li To set the rules for attaching the component to other components. You can define
+                the distance between the components and put margins on the components.
+        \row
             \li \l{Aligning and Distributing Components}
+            \li To align the unanchored components left, right, vertical, horizontal, top, and
+                bottom with respect to each other.
+        \row
             \li \l{Using Positioners}
+            \li To arrange components in rows, columns, grids, or flows.
+        \row
             \li \l{Using Layouts}
+            \li To place the components in columns, grids, rows and stacks in layouts.
+                The layouts adept the nature of dynamic and resizable UI.
+        \row
             \li \l {Organizing Components}
-    \endlist
+            \li To keep the components or controls collected with frames, groups,
+                group boxes, pages, and panes.
+    \endtable
 
     \section2 Setting Bindings
 
-    \l{Positioning with Bindings}{Property binding} is a declarative way of
+    Using \e {Property Binding}, you can connect the properties of components. So, change in
-    specifying the value of a property. Binding allows a property value to be
+    one can affect another. Once the binding is set, the property value is automatically
-    expressed as a JavaScript expression that defines the value relative to
+    kept up to date if the other properties or data values change.
-    other property values or data accessible in the application. The property
-    value is automatically kept up to date if the other properties or data
-    values change.
 
-    Property bindings are created implicitly whenever a property is assigned a
+    To set \e {Property Binding} to a component property:
-    JavaScript expression. To set JavaScript expressions as values of properties
-    in the \l Properties view:
     \list 1
-        \li Select the \inlineimage icons/action-icon.png
+        \li Go to the \uicontrol Properties view and select \inlineimage icons/action-icon.png
         (\uicontrol Actions) menu next to a property, and then select
         \uicontrol {Set Binding}.
 
@@ -55,86 +69,83 @@
     \endlist
 
     When a binding is set, the \uicontrol Actions menu icon changes to
-    \inlineimage icons/action-icon-binding.png
+    \inlineimage icons/action-icon-binding.png.
-    . To remove bindings, select \uicontrol Actions > \uicontrol Reset.
+    To remove bindings, select \uicontrol Actions > \uicontrol Reset.
 
-    You can set bindings also on the \uicontrol Bindings tab in the
+   See \l {Adding Bindings Between Properties} to learn how to set bindings using
-    \l Connections view.
+   the \uicontrol Bindings tab in the \l Connections view.
-    For more information, see \l {Adding Bindings Between Properties}.
 
-    For more information on the JavaScript environment provided, see
+    \note For better performance, set anchors and margins for binding
-    \l{Integrating QML and JavaScript}.
+    components. For example, instead of setting \c {parent.width} for a
-
+    component, anchor the component to its sibling components on the
-    Bindings are a black box for \QDS and using them might have a
-    negative impact on performance, so consider setting anchors and margins for
-    components, instead. For example, instead of setting \c {parent.width} for a
-    component, you could anchor the component to its sibling components on the
     left and the right.
 
     \section2 Setting Anchors and Margins
 
     In an \l{Important Concepts In Qt Quick - Positioning#anchors}
-    {anchor-based} layout, each component can be thought of as having a set of
+    {anchor-based} layout, each component has a set of
     invisible \e anchor lines: top, bottom, left, right, fill, horizontal
     center, vertical center, and baseline.
 
-    In \l Properties > \uicontrol Layout, you can set anchors and margins for
+    To set anchors and margins for components:
-    components. To set the anchors of a component, click the anchor buttons.
+
-    You can combine the top/bottom, left/right, and horizontal/vertical anchors
+    \list 1
-    to anchor components in the corners of the parent component or center them
+        \li Go to \l Properties > \uicontrol Layout > \uicontrol Anchors.
-    horizontally or vertically within the parent component.
+        \li Select the corresponding button for the anchor you want for the component.
+            You can combine multiple anchors. For each selected button, you can
+            choose the target component of that anchor from the corresponding dropdown.
+        \li To apply fill anchors to a component, select
+            \inlineimage icons/anchor-fill.png (\uicontrol {Fill to Parent}).
+        \li To reset the anchors to their saved state, select
+            \inlineimage icons/qtcreator-anchors-reset-icon.png (\uicontrol {Reset Anchors}).
+    \endlist
 
     \image qmldesigner-anchor-buttons.png "Anchor buttons"
 
-    For convenience, you can click the \inlineimage icons/anchor-fill.png
-    (\uicontrol {Fill to Parent}) toolbar button to apply fill anchors to a
-    component and the \inlineimage icons/qtcreator-anchors-reset-icon.png
-    (\uicontrol {Reset Anchors}) button to reset the anchors to their saved
-    state.
-
-    You can specify the baseline anchor in the \l{Code} view.
-
     For performance reasons, you can only anchor a component to its siblings
-    and direct parent. By default, a component is anchored to its parent when
+    or direct parent. By default, a component is anchored to its parent when
-    you use the anchor buttons. Select a sibling of the component in the
+    you use the anchor buttons. To anchor to a sibling of the component, select
-    \uicontrol Target field to anchor to it instead.
+    the sibling component as \uicontrol Target.
 
-    Arbitrary anchoring is not supported. For example, you cannot specify:
+    Arbitrary anchoring is not supported. For example, don't select:
-    \c {anchor.left: parent.right}. You have to specify:
+    \c {anchor.left: parent.right}. Select:
     \c {anchor.left: parent.left}. When you use the anchor buttons, anchors to
-    the parent component are always specified to the same side. However, anchors
+    the parent component are always set to the same side. However, anchors
-    to sibling components are specified to the opposite side:
+    to sibling components are set to the opposite side:
     \c {anchor.left: sibling.right}. This allows you to keep sibling components
     together.
 
-    In the following image, the left edge of \e rectangle1 is anchored to the
+    In the following image, the left edge of \e rectangle2 is anchored to the
-    right edge of the sibling on its left side, \e rectangle, while its top
+    right edge of the sibling on its left side, \e rectangle1, while its top
     edge is anchored to the top of its parent.
 
-    \image qmldesigner-anchors.png "Anchoring sibling components"
+    \image studio-qmldesigner-anchors.webp "Anchoring sibling components"
 
-    The anchors are specified as follows in code:
+    The anchors are set as follows in code:
 
     \qml
         Rectangle {
-        id: rectangle1
+            id: rectangle2
-        anchors.left: rectangle.right
+            width: 84
+            height: 84
+            color: "#967de7"
+            anchors.left: rectangle1.right
             anchors.top: parent.top
-        anchors.leftMargin: 5
+            anchors.leftMargin: 51
-        anchors.topMargin: 30
+            anchors.topMargin: 56
         }
     \endqml
 
-    Margins specify the amount of empty space to leave to the outside of a
+    To define the empty space outside of a component, set the
-    component. Margins only have meaning for anchors. They do not take any
+    \uicontrol Margin. Margins work for anchors. They do not take any
     effect when using layouts or absolute positioning.
 
     \section2 Aligning and Distributing Components
 
-    When you're working with a group of components, you can select them to align
+    For a group of components, select them to align
     and distribute them evenly. As the positions of the components are fixed,
     you cannot apply these functions to anchored components. For scalability,
-    you can anchor the aligned and distributed components when your design is
+    anchor the aligned and distributed components when your design is
     ready.
 
     \image qmldesigner-alignment.png "Aligning sibling components"
@@ -150,12 +161,12 @@
     that you select in the \uicontrol {Key object} field. The key component must
     be a part of the selection.
 
-    You can distribute either \e components or the \e spacing between them.
+    Distribute either \e components or the \e spacing between them.
     If the components or spacing cannot be distributed to equal pixel values
-    without ending up with half pixels, you receive a notification. You can
+    without ending up with half pixels, you receive a notification.
-    either allow \QDS to distribute components or spacing using the closest
+    Either allow \QDS to distribute components or spacing using the closest
     values possible or tweak your design so that the components and spacing
-    can be distributed perfectly.
+    is distributed perfectly.
 
     When distributing components, select the buttons in the
     \uicontrol {Distribute objects} field to determine whether the
@@ -166,11 +177,11 @@
     \uicontrol {Distribute spacing} field to determine whether
     it is distributed evenly within a target area or at
     specified distances, calculated from a starting point.
-    You can select the orientation in which the components are distributed
+    Select the orientation in which the components are distributed
     evenly within the target area: horizontally along the x axis or vertically
     along the y axis.
 
-    Alternatively, you can distribute spacing in pixels by selecting one of the
+    Alternatively, distribute spacing in pixels by selecting one of the
     starting point buttons: top/left or bottom/right edge of the target area or
     item, or its center. The edge to use depends on whether the items are
     distributed horizontally or vertically:
@@ -193,121 +204,52 @@
 
     \note Some components might end up outside the target area.
 
-    In the \uicontrol {Pixel spacing} field, you can set the space between
+    In the \uicontrol {Pixel spacing} field, set the space between
-    components in pixels. You can disable the distribution of spacing in
+    components in pixels. To disable the distribution of spacing in
-    pixels by clicking the \inlineimage icons/distribute-origin-none.png
+    pixels, click \inlineimage icons/distribute-origin-none.png
     button.
 
-    \section3 Summary of Aligment Buttons
-
-    The following table summarizes the buttons available in the
-    \uicontrol Alignment section.
-
-    \table
-    \header
-        \li Icon
-        \li Purpose
-    \row
-        \li \inlineimage icons/align-left.png
-        \li Aligns the left edges of the selected components to the one
-            farthest away from the center of the group.
-    \row
-        \li \inlineimage icons/align-center-horizontal.png
-        \li Aligns the horizontal centers of the selected components.
-    \row
-        \li \inlineimage icons/align-right.png
-        \li Aligns the right edges of the selected components.
-    \row
-        \li \inlineimage icons/align-top.png
-        \li Aligns the top edges of the selected components.
-    \row
-        \li \inlineimage icons/align-center-vertical.png
-        \li Aligns the verical centers of the selected components.
-    \row
-        \li \inlineimage icons/align-bottom.png
-        \li Aligns the bottom edges of the selected components.
-    \row
-        \li \inlineimage icons/distribute-left.png
-        \li Distributes the selected components and calculates the distance
-            between them from their left edges.
-    \row
-        \li \inlineimage icons/distribute-center-horizontal.png
-        \li Distributes the selected components and calculates the distance
-            between them from their horizontal centers.
-    \row
-        \li \inlineimage icons/distribute-right.png
-        \li Distributes the selected components and calculates the distance
-            between them from their right edges.
-    \row
-        \li \inlineimage icons/distribute-top.png
-        \li Distributes the selected components and calculates the distance
-            between them from their top edges.
-    \row
-        \li \inlineimage icons/distribute-center-vertical.png
-        \li Distributes the selected components and calculates the distance
-            between them from their vertical centers.
-    \row
-        \li \inlineimage icons/distribute-bottom.png
-        \li Distributes the selected components and calculates the distance
-            between them from their bottom edges.
-    \row
-        \li \inlineimage icons/distribute-spacing-horizontal.png
-        \li Distributes spacing between the selected components horizontally.
-    \row
-        \li \inlineimage icons/distribute-spacing-vertical.png
-        \li Distributes spacing between the selected components vertically.
-    \row
-        \li \inlineimage icons/distribute-origin-none.png
-        \li Disables the distribution of spacing in pixels.
-    \row
-        \li \inlineimage icons/distribute-origin-top-left.png
-        \li Sets the top or left edge of the target area or item as the
-            starting point for distributing spacing in pixels depending on
-            the distribution orientation.
-    \row
-        \li \inlineimage icons/distribute-origin-center.png
-        \li Sets the center of the target area as the starting point
-            for distributing spacing in pixels.
-    \row
-        \li \inlineimage icons/distribute-origin-bottom-right.png
-        \li Sets the bottom or right edge of the target area or item as the
-            starting point for distributing spacing in pixels, depending on
-            the distribution orientation.
-    \endtable
-
     \section2 Using Positioners
 
     Positioner components are containers that manage the positions of their
     child components. For many use cases, the best positioner to use is a simple
-    column, row, flow, or grid. You can use the components available in
+    column, row, flow, or grid. Use the components available in
     \uicontrol Components > \uicontrol {Default Components} >
     \uicontrol Positioner to position the children of a component in these
     formations in the most efficient manner possible.
 
-    To position several components in a \uicontrol Column, \uicontrol Row,
+    To position several components in a
-    \uicontrol Flow, or \uicontrol Grid, select the components in
+    \uicontrol Column \inlineimage column-positioner-icon-16px.png,
-    the \l {2D} view, and then select \uicontrol Position in
+    \uicontrol Row \inlineimage row-positioner-icon-16px.png,
-    the context menu.
+    \uicontrol Grid \inlineimage grid-positioner-icon-16px.png,
+    or \uicontrol Flow \inlineimage flow-positioner-icon-16px.png :
+
+    \list 1
+        \li Select the components in the \l {2D} view.
+        \li Right-click anywhere in the \uicontrol 2D view and
+            select \uicontrol Positioner > \uicontrol Row,
+            \uicontrol Column, \uicontrol Grid or \uicontrol {Flow Positioner}.
+    \endlist
 
     \section3 Column Positioner
 
     A \uicontrol Column positions its child components along a single column.
-    It can be used as a convenient way to vertically position a series of
+    It is used as a convenient way to vertically position a series of
     components without using anchors.
 
     \image qtquick-positioner-column-properties.png "Column properties"
 
-    For all positioners, you can specify the spacing between the child
+    For all positioners, set the spacing between the child
-    components that they contain in the \uicontrol Spacing field.
+    components in the \uicontrol Spacing field.
 
-    In addition, you can specify the vertical and horizontal padding between
+    In addition, set the vertical and horizontal padding between
-    content and the left, right, top, and bottom edges of components as values
+    content and the left, right, top, and bottom edges of components
-    of the fields in the \l Padding section.
+    in the \l Padding section.
 
     \section3 Row and Flow Positioners
 
-    A \uicontrol Row positions its child components along a single row. It can
+    A \uicontrol Row positions its child components along a single row. It is
-    be used as a convenient way to horizontally position a series of components
+    used as a convenient way to horizontally position a series of components
     without using anchors.
 
     The \uicontrol Flow component positions its child components like words on a
@@ -315,14 +257,14 @@
 
     \image qtquick-positioner-flow-properties.png "Flow properties"
 
-    For flow and row positioners, you can also set the direction of a flow to
+    For flow and row positioners, also set the direction of a flow to
     either left-to-right or top-to-bottom in the \uicontrol Flow field.
     Components are positioned next to to each other according to the value you
     set in the \uicontrol {Layout direction} field until the width or height of
     the \uicontrol Flow component is exceeded, then wrapped to the next row or
     column.
 
-    You can set the layout direction to either \uicontrol LeftToRight or
+    Set the layout direction to either \uicontrol LeftToRight or
     \uicontrol RightToLeft in the \uicontrol {Layout direction} field. If
     the width of the row is explicitly set, the left anchor remains to the
     left of the row and the right anchor remains to the right of it.
@@ -350,145 +292,120 @@
     To also mirror the horizontal alignment of components, select
     \uicontrol AlignRight in the \uicontrol {Alignment H} field.
 
-    \section3 Summary of Positioners
-
-    The following table lists the positioners that you can use to arrange
-    components in UIs. They are available in \uicontrol Components
-    > \uicontrol {Default Components} > \uicontrol Positioner.
-
-    \table
-    \header
-        \li Icon
-        \li Name
-        \li Purpose
-    \row
-        \li \inlineimage column-positioner-icon-16px.png
-        \li \l[QtQuick] {Column}
-        \li Arranges its child components vertically.
-    \row
-        \li \inlineimage row-positioner-icon-16px.png
-        \li \l[QtQuick] {Row}
-        \li Arranges its child components horizontally.
-    \row
-        \li \inlineimage grid-positioner-icon-16px.png
-        \li \l[QtQuick] {Grid}
-        \li Arranges its child components so that they are aligned in a grid and
-            are not overlapping.
-    \row
-        \li \inlineimage flow-positioner-icon-16px.png
-        \li \l[QtQuick] {Flow}
-        \li Arranges its child components side by side, wrapping as necessary.
-    \endtable
-
     \section2 Using Layouts
 
-    You can use the components available in \uicontrol Components
+    Use the components available in \uicontrol Components
     > \uicontrol {Qt Quick Layouts} to arrange components in UIs.
 
     Unlike positioners, layouts manage both the positions and sizes of their
     child components, and are therefore well suited for dynamic and resizable
-    UIs. However, this means that you should not specify fixed positions and
+    UIs. However, do not select fixed positions and
     sizes for the child components in the \l{2D Geometry}{Geometry - 2D} section
     in \l Properties, unless their implicit sizes are not satisfactory.
 
-    You can use anchors or the width and height properties of the layout itself
+    Use anchors or the width and height properties of the layout itself
-    to specify its size in respect to its non-layout parent component. However,
+    to select its size in respect to its non-layout parent component. However,
     do not anchor the child components within layouts.
 
-    To arrange several components in a column, row, grid, or
+    Follow the process to put components in the \uicontrol {Grid Layout}.
-    \uicontrol {Stack Layout}, select the components in the \l {2D} view,
+    \list 1
-    and then select \uicontrol Layout in the context menu.
+        \li Select all the components and right-click on one of them.
+        \li From the context menu, select \uicontrol Layout > \uicontrol {Grid Layout}.
+            \image qtquick-layout-context-menu.webp "Grid Layout in the context-menu"
+        \li After you assign them to \uicontrol {Grid Layout}, the components are arranged
+            in rows and columns.
+            \image qtquick-layout-in-grid.webp "Components in grid rows and columns"
 
-    To make a component within a layout as wide as possible while respecting the
+    \endlist
-    given constraints, select the component in the \uicontrol {2D} view, and
-    then select \uicontrol Layout > \uicontrol {Fill Width} in the context menu.
-    To make the component as high as possible, select \uicontrol {Fill Height}.
 
-    \section3 Layout Properties
+    To make the components adept the width and height within the grid, follow these steps:
-
+    \list 1
-    A \uicontrol {Grid Layout} component provides a way of dynamically
+        \li Select a \uicontrol Rectangle component in the \l {2D} view
-    arranging components in a grid. If the grid layout is resized, all
+            and go to \uicontrol Layout in the \l {Properties} view.
-    its child components are rearranged. If you want a layout with just
+        \li In the \uicontrol {Fill layout}, select both the \uicontrol Width and
-    one row or one column, use the \uicontrol {Row Layout} or
+            \uicontrol Height checkboxes.
-    \uicontrol {Column Layout} component.
+            \image qtquick-layout-grid-layout-properties.webp "Layout properties for the component"
-
+            \note Manipulate the \uicontrol {Row span} and the \uicontrol {Column span}
-    The child components of row and column layout components are automatically
+                  to allow the components to take more row and column spaces within the
-    positioned either horizontally from left to right as rows or vertically from
+                  \uicontrol {Grid Layout}.
-    top to bottom as columns. The number of the child components determines the
+        \li Repeat the previous steps for all the \uicontrol Rectangle components.
-    width of the row or the height of the column. You can specify the spacing
+        \li Select \uicontrol {Grid Layout} in the \uicontrol Navigator view.
-    between the child components in the \uicontrol Spacing field.
+        \li Go to \uicontrol {Geometry-2D} in the \uicontrol Properties view. In
-
+            \uicontrol Size, increase the \uicontrol Width and \uicontrol Height.
-    The child components of grid layout components are arranged according to the
+        \li All the \uicontrol Rectangle components follow the change accordingly.
-    \uicontrol Flow property. When the direction of a flow is set to
+            \image qtquick-layout-in-grid-enlarged.webp "Components follow the change in grid size"
-    \uicontrol LeftToRight, child components are positioned next to to each
+    \endlist
-    other until the number of columns specified in the
-    \uicontrol {Columns & Rows} field is reached. Then,
-    the auto-positioning wraps back to the beginning of the next row.
-
-    \image qtquick-layout-grid-properties.png "Grid Layout properties"
-
-    If you set the direction of the flow to \uicontrol TopToBottom, child
-    components are auto-positioned vertically using the number of rows set
-    in the \uicontrol {Columns & Rows} field to determine the maximum number
-    of rows.
-
-    You can set the layout direction to either \uicontrol LeftToRight or
-    \uicontrol RightToLeft in the \uicontrol {Layout direction} field.
-    When you select \uicontrol RightToLeft, the alignment of the components
-    will be mirrored.
-
-    You can specify the spacing between rows and columns in the
-    \uicontrol Spacing field.
 
     \section3 Stack Layout
 
-    \image qtquick-designer-stacked-view.png
+    To stack components on top of each other you can use \uicontrol {Stack Layout}.
 
-    To add components to a \uicontrol {Stack Layout}, select the
+    To use \uicontrol {Stack Layout}:
-    \inlineimage icons/plus.png
+    \list 1
-    button next to the component name in the \l {2D} view.
+        \li Drag the \uicontrol {Stack Layout} component to the \uicontrol 2D view
-    To move between components, select the \inlineimage icons/prev.png
+            or \uicontrol Navigator view.
+        \li Drag the components you want to stack from the \uicontrol Components view to
+            the \uicontrol 2D view or \uicontrol Navigator view, and place on the top of
+            the \uicontrol {Stack Layout} component.
+            \note Alternatively, you can add components to the \uicontrol {Stack Layout} by
+                selecting the \inlineimage icons/plus.png button next to the
+                \uicontrol {Stack Layout} component name in the \l {2D} view.
+        \li To move between components of \uicontrol {Stack Layout},
+            select the \uicontrol {Stack Layout} component in the \uicontrol 2D view. Then
+            select the \inlineimage icons/prev.png
             (\uicontrol Previous) and \inlineimage icons/next.png
-    (\uicontrol Next) buttons.
+            (\uicontrol Next) buttons. This updates the \uicontrol {Current index} of the
+            \uicontrol {Stack Layout} and brings the \uicontrol {Current index}
+            component on top of the stack.
+            \note Alternatively, select the \uicontrol {Stack Layout} component, then
+            go to the \uicontrol Properties view > \uicontrol {Stack Layout}, and
+            update the \uicontrol {Current index}. The index starts from "0" (zero).
 
-    To add a tab bar to a stack layout, right-click on the
+    \endlist
-    \uicontrol {Stack Layout} in \l Navigator to access the context menu, and
-    select \uicontrol {Stacked Container} > \uicontrol {Add Tab Bar}.
 
-    To raise or lower the stacking order of a component, select
+    Follow the example below to understand how the \uicontrol {Stack Layout} works:
-    \uicontrol {Stacked Container} > \uicontrol {Increase Index} or
-    \uicontrol {Decrease Index}.
 
-    \section3 Summary of Layouts
+    \list 1
+        \li Drag a \uicontrol {Stack Layout} from the \uicontrol Component view to
+            the \uicontrol Navigator or \uicontrol 2D view.
+        \li Drag three \uicontrol Rectangle components to the \uicontrol {Stack Layout} component
+            in the \uicontrol Navigator view.
 
-    The following table lists the layout components that you can use to arrange
+            \image studio-stack-layout-components.webp "Components in the Stack Layout"
-    components in UIs. They are available in \uicontrol Components
-    > \uicontrol {Qt Quick Layouts}.
 
-    \table
+        \li Select a rectangle component and go to the \uicontrol Properties view > Rectangle >
-    \header
+            \uicontrol {Fill color}, and change it to "#ff0000".
-        \li Icon
+        \li For the second rectangle, follow the previous process and change the
-        \li Name
+            \uicontrol {Fill color} to "0000ff".
-        \li Purpose
+        \li For the third rectangle, follow the previous process and change the
-    \row
+            \uicontrol {Fill color} to "00ff00".
-        \li \inlineimage column-layouts-icon-16px.png
+        \li Drag a \uicontrol Slider component from the \uicontrol Components view to the
-        \li \l{ColumnLayout}{Column Layout}
+            \uicontrol 2D view.
-        \li Provides a grid layout with only one column.
+        \li Select the \uicontrol Slider component and go to the \uicontrol Properties view
-    \row
+            > \uicontrol Slider. Set the \uicontrol Value to "0", \uicontrol From to "0",
-        \li\inlineimage row-layouts-icon-16px.png
+            \uicontrol To to "2", and \uicontrol {Step size} to "1".
-        \li \l{RowLayout}{Row Layout}
-        \li Provides a grid layout with only one row.
-    \row
-        \li \inlineimage grid-layouts-icon-16px.png
-        \li \l{GridLayout}{Grid Layout}
-        \li Provides a way of dynamically arranging components in a grid.
-    \row
-        \li \inlineimage stack-layouts-icon-16px.png
-        \li \l{StackLayout}{Stack Layout}
-        \li Provides a stack of components where only one component is
-            visible at a time.
-    \endtable
 
+            \image studio-slider-setup-for-stack-layout-components.webp "Adjusting the Slider"
+
+        \li Go to the \uicontrol Navigator view and select the \uicontrol {Stack Layout} component.
+        \li Go to the \uicontrol Properties view > \uicontrol {Stack Layout}. Select
+            \inlineimage icons/action-icon.png to access the context menu, then select
+            \uicontrol {Set Binding}.
+
+            \image studio-stack-layout-add-binding.webp "Getting the context menu to bind components"
+
+        \li In the \uicontrol {Binding Editor}, in the left dropdown, select \uicontrol Slider;
+            in the right dropdown, select \uicontrol Value. Select \uicontrol OK to accept
+            the binding.
+
+            \image studio-stack-layout-binding-setup.webp "Setting binding rules"
+
+        \li Select \uicontrol {Live Preview} or \uicontrol {Run Project} to run the application.
+        \li Drag the slider to change the color in the rectangle.
+
+            \image studio-stack-layout-example-output.webp "Stack Layout example output"
+
+    \endlist
 
     \section2 Organizing Components
 
@@ -533,4 +450,13 @@
         \li Qt Quick Controls
         \li A background that matches the application style and theme.
     \endtable
+
+    \note
+        \br
+        To access \uicontrol Frame, \uicontrol {Group Box}, \uicontrol Pane, and
+        \uicontrol Page controls, go to \uicontrol Components >
+        \uicontrol {Qt Quick Controls}.
+        \br
+        To access \uicontrol Group control,
+        go to \uicontrol Components > \uicontrol {Qt Quick Studio Components}.
 */

doc/qtdesignstudio/src/how-to/qtdesignstudio-live-preview-desktop.qdoc

@@ -43,4 +43,8 @@
         \li In \uicontrol {Override device QML viewer}, select the folder where
             the preview tool executable is located.
     \endlist
+
+    To preview the design on a device, see \l {Previewing on Devices}.
+
+    \endif
 */

doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc

@@ -72,6 +72,18 @@
     handle, such as gradient fill colors or a mixed radius, the frames are
     exported as images.
 
+    \section2 Using Variables
+    With \QDS 4.6, variables are exported as a QML module named \e DesignSystem. A QML singleton
+    is created for each collection. Modes of the collection are exported as theme objects.
+    A collection has a \e currentTheme property, updating the property changes the active theme.
+    
+    When a variable is bound to a property of a layer, the \e DesignSystem module import
+    is added to the generated code and the property binding is created accordingly.
+    
+    To export variables, select \uicontrol {Export Variables} from \l{Settings}.
+    
+    \note Remote variables are not supported. Setting the active mode on the page or
+    layer does not affect the generated code.
  
     \section2 Using Variants
     Figma variants are exported as a component with states. All variants
@@ -241,6 +253,9 @@
         \li \uicontrol {Create page hierarchy}
         \li Organize the generated UI in \QDS under the directory named after the
             parent page of the respective component.
+    \row
+        \li \uicontrol {Export Variables}
+        \li Enable exporting variables.
     \row
         \li \uicontrol {Reset plugin data}
         \li Resets all settings for all layers and groups (also in the

doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc

@@ -113,8 +113,8 @@
                 \li In \uicontrol {Target Qt Version}, select the Qt
                 version to use for developing the application. While you can
                 change the Qt version later in the \uicontrol {Run Settings}
-                of the project, keep in mind that the two versions are not fully
+                of the project, as described in \l {Overriding the Preview Tool},
-                compatible.
+                keep in mind that the two versions are not fully compatible.
             \endlist
         \li In the \uicontrol {Style} tab, select one of
             the predefined \l{Styling Qt Quick Controls}{UI styles} to use.
@@ -123,35 +123,94 @@
 
     \QDS creates the following files and folders:
 
-    \list
+    \image studio-project-files.webp "Qt Design Studio project files"
-        \li .qmlproject project file defines that all component, JavaScript, and
-            image files in the project folder belong to the project. Therefore,
-            you do not need to individually list all the files in the project.
-        \li .qml file defines the functionality and appearance of a component.
-        \li \e Screen01.ui.qml defines a custom component that you can edit in
-            the \l {2D} view. For more information, see \l {UI Files}.
 
-            By default, this is the main file in the project, but you can
+    \table
-            change that in the .qmlproject file. While the custom component
+        \header
-            is a good starting point for new users, you don't have to use it.
+            \li File/Folder
-            Specifically, if you export and import designs using \QB, your main
+            \li Description
-            file is most likely called something else. For more information,
+        \row
-            see \l {Exporting from Design Tools}.
+            \li ProjectName.qmlproject
-        \li \e CMakeLists.txt project configuration file allowing you to
+            \li This file defines that all components, JavaScript, and image files in the project
-            share your project as a fully working C++ application with
+                folder belong to the project. Therefore, you do not need to individually list all
-            developers.
+                the files in the project. Since \QDS 4.5, the default
-        \li qtquickcontrols2.conf file specifies the preferred style and some
+                \l {https://doc.qt.io/qt-6/qtqml-syntax-directoryimports.html} {QML import path}
-            style-specific arguments.
+                defined within the \c {.qmlproject} file is \c {"."}. However, you can add more
-        \li \e fonts folder contains font files that you have added in
+                import paths by editing the \c {.qmlproject} file.
-            \uicontrol Assets.
+        \row
-        \li \e imports folder contains a \e {Constants.qml} file that specifies
+            \li \c {ProjectName} (folder)
-            a font loader for the Arial font and the screen resolution. The size
+            \li This folder contains the essential QML files for the project.
-            of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should
+        \row
+            \li Constants.qml
+            \li This file defines a font loader for the Arial font and the screen resolution.
+                The size of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should
                 be set as \c {width: Constants.width & height: Constants.height} so
-            that it inherits the global resolution saved here.
+                that it inherits the global resolution saved here. This is the default
-        \li \e qmldir module definition file declares the Constant component.
+                QML singleton created by the wizard. You can add more singletons here. Afterward,
+                edit the qmldir file accordingly.
+        \row
+            \li EventListModel.qml
+            \li This file defines and triggers "Global Events" in a \QDS/QML application.
+        \row
+            \li EventListSimulator.qml
+            \li This file defines and triggers "Global Events" in a \QDS/QML application.
+        \row
+            \li qmldir
+            \li This is a module definition file that declares the Constant component.
                 For more information, see \l {Module Definition qmldir Files}.
-    \endlist
+        \row
+            \li \c {ProjectNameContent} (folder)
+            \li This folder contains the default content, such as QML files, images, and other
+                necessary files. It is not considered a module in \QDS context. Do not import it
+                if you want to make singletons and objects. Use the ProjectName module instead.
+        \row
+            \li App.qml
+            \li This file defines the default dimension of the application window.
+                This is the entry point to QML application.
+        \row
+            \li Screen01.ui.qml
+            \li This file defines a custom component that you can edit in the \uicontrol {2D} view.
+                For more information, see \l {UI Files}.
+                The project wizard generates this as the first scene.
+        \row
+            \li qtquickcontrols2.conf
+            \li This file specifies the preferred style and style-specific arguments.
+    \endtable
+
+    Depending on the assets, components, effects, and animations you use, the project might include
+    additional files and folders.
+
+    \image studio-project-additional-files.webp "Qt Design Studio project files"
+
+    \table
+        \header
+            \li File/Folder
+            \li Description
+        \row
+            \li \c {Generated} (folder)
+            \li This folder contains all the files related to
+                \l {https://doc.qt.io/qt-6/qtquick3d-index.html} {QtQuick3D} and the modules
+                for imported 3D components and elements from the content library,
+                such as Materials and Effects.
+        \row
+            \li \c {Bundles} (folder)
+            \li This folder contains imported 3D components and elements from the content library,
+                such as Materials.
+        \row
+            \li \c {QtQuick3D} (folder)
+            \li This folder contains all the files from an imported Qt Quick 3D object, such as
+                meshes, images, animations, and QML files.
+
+        \row
+            \li \c {Effects} (folder)
+            \li This folder contains all the files related to the effects created with
+                \l {Effect Composer}.
+        \row
+            \li \c {Materials} (folder)
+            \li This folder contains the files related to the materials, such as images, shaders,
+                and QML files.
+
+    \endtable
 
     To use JavaScript and image files in the UI, select
     \uicontrol Assets > \inlineimage icons/plus.png

doc/qtdesignstudio/src/qtdesignstudio-qt-ui-viewer.qdoc

@@ -15,6 +15,11 @@
     These projects then run on your Android device. You can also
     adjust settings, view logs, and run example projects.
 
+    \note This feature is included in the
+          \l{https://www.qt.io/pricing}{Qt Design Studio Enterprise license}.
+          \uicontrol {Share Application Online} and \uicontrol {Deploy Project to Android}
+          are unavailable in \QDS without the Enterprise license.
+
     \section1 Installing Qt UI Viewer
 
     \image qtuiviewer-appstore.webp
@@ -39,6 +44,7 @@
 
           \inlineimage menu-share-application-online.webp
           \inlineimage studio-share-application-online.webp
+
       \li Open \QUV on your Android device.
       \li Select \uicontrol {Scan QR Code}.
           \image qtuiviewer-scan-qr-code.webp

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -119,6 +119,7 @@
         \li \l{Prototyping}
             \list
                 \li \l{Creating UI Logic}
+                \li \l{Effects}
                 \li \l{Simulating Complex Experiences}
                     \list
                         \li \l{Loading Placeholder Data}
@@ -271,5 +272,6 @@
             \endlist
         \li \l{Technical Support}
         \li \l{Acknowledgements}
+        \li \l{What's New}
     \endlist
 */

doc/qtdesignstudio/src/qtdesignstudio.qdoc

@@ -45,6 +45,7 @@
         \li \b {\l{Prototyping}}
             \list
                 \li \l{Creating UI Logic}
+                \li \l{Effects}
                 \li \l{Simulating Complex Experiences}
                 \li \l{Dynamic Behaviors}
                 \li \l{Validating with Target Hardware}

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

@@ -364,6 +364,10 @@
             \li Show Grid
             \li Toggles the visibility of the helper grid.
             \li \key G
+        \row
+            \li Show Look-at
+            \li Toggles the visibility of the edit camera look-at indicator.
+            \li \key L
         \row
             \li Show Selection Boxes
             \li Toggles the visibility of selection boxes for selected 3D objects.
@@ -403,9 +407,12 @@
             \li Select Grid Color
             \li Select a color for the grid.
       \row
-            \li Use Scene Environment Color
+            \li Use Scene Environment
-            \li Sets the 3D view to use the scene environment color as background
+            \li Sets the 3D view to use the scene environment or skybox as background
             color.
+            \note When \uicontrol {Use Scene Environment} is selected, a 3D scene that doesn't
+            have a \uicontrol View3D component, uses the scene environment of the previous
+            \uicontrol View3D for rendering the scene.
       \row
             \li Reset Colors
             \li Resets the background and grid colors to the default colors.

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-importing.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
 
 /*!
@@ -23,42 +23,59 @@
     For more information about exporting 3D graphics, see
     \l{Exporting 3D Assets}.
 
-    \image studio-import-3d.png
+    \image studio-import-3d.webp
 
     \section1 Importing a 3D Asset
 
     To import a 3D asset to a \QDS project:
 
     \list 1
-        \li Drag-and-drop an external file containing the 3D asset from,
+        \li Open the import dialog in one of the following methods:
-            for example, File Explorer (on Windows), to the \uicontrol{3D} view.
+            \list
-        \li In the \uicontrol {3D Scene Options} tab, select options for
+                \li Select \l Assets > \inlineimage icons/plus.png, select the file you
-            importing the file.
+                    want to import, and click \uicontrol Open.
-            \note To see all options, select \uicontrol{Show All Options}.
+                \li Drag the 3D asset to the \uicontrol 3D view. In this case, the 3D asset will be
-        \li Select \uicontrol Import to import the 3D asset.
+                    added to your scene, so it will appear in the \uicontrol 3D and
+                    \uicontrol Navigator views.
+            \endlist
+        \li Select \uicontrol Accept to import the 3D asset.
     \endlist
 
-    The 3D asset is now added to your scene, and you can see it in the
+    Additionally, you can define options for importing the file in the \uicontrol {3D Scene Options}
-    \uicontrol{3D} and \uicontrol Navigator views. It is also
+    tab. To preview the 3D asset before importing it, rotate the preview image by dragging it.
-    available in \uicontrol Components > \uicontrol {My 3D Components}.
+    Select \uicontrol Import to generate the 3D asset with the updated settings, and then select
+    \uicontrol Accept to close the import dialog.
 
-    Alternatively, you can initiate the import dialog from the
+    \note To see all options, select \uicontrol {Show All Options}.
-    \uicontrol Assets view:
+
+    After importing the 3D asset, it is available in \uicontrol Components > \uicontrol
+    {My 3D Components}.
+
+    \section1 Importing Multiple 3D Assets
+
+    To import multiple 3D assets to a \QDS project:
 
     \list 1
-        \li Select \l Assets > \inlineimage icons/plus.png
+        \li Open the import dialog in one of the following methods:
-            .
+            \list
-        \li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D
+                \li Select \uicontrol Assets > \inlineimage icons/plus.png, select the files you
-            graphics files.
+                    want to import, and click \uicontrol Open.
-        \li Select a file to import, and then select \uicontrol Open.
+                \li Select the 3D asset files and drag them to the \uicontrol 3D view. In this
-        \li In the \uicontrol {3D Scene Options} tab, select options for
+                    case, the 3D assets will be added to your scene, so they will appear in the
-            importing the file.
+                    \uicontrol 3D and \uicontrol Navigator views.
-            \note To see all options, select \uicontrol{Show All Options}.
+            \endlist
-        \li Select \uicontrol Import to import the 3D asset.
+        \li Select \uicontrol Accept to import the 3D assets.
     \endlist
 
-    The 3D asset now appears in \uicontrol Components >
+    Additionally, you can define options for importing the files in the \uicontrol
-    \uicontrol {My 3D Components}. You can add it to the scene by
+    {3D Scene Options} tab by selecting the asset you want to edit from the \uicontrol
-    drag-and-dropping it to the \uicontrol{3D} view.
+    {Imported objects} list. To preview the 3D asset before importing it, rotate the preview image
+    by dragging it. Select \uicontrol Import to generate the 3D asset with the updated settings,
+    and then select \uicontrol Accept to close the import dialog.
+
+    \note To see all options, select \uicontrol {Show All Options}.
+
+    After importing the 3D assets, they are available in \uicontrol {Components} > \uicontrol
+    {My 3D Components}.
 
 */

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

@@ -8,10 +8,6 @@
 
     \title Loader3D
 
-    \note The \uicontrol Loader3D component is released as a tech preview
-    feature in \QDS 2.2, and its functionality will be improved in future
-    releases.
-
     \uicontrol Loader3D is a loader component used to dynamically load 3D
     components. It can load a QML file using the \uicontrol Source property or a
     component using the \uicontrol {Source component} property. \uicontrol Loader3D

doc/qtdesignstudio/src/whats new/qds-releases.qdoc

@@ -0,0 +1,68 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \previouspage studio-terms.html
+    \page whats-new.html
+
+    \title What's New
+
+    Read the \QDS release blog posts to see what's new in every version.
+
+    \section1 \QDS Release Blog Posts
+
+    \section2 \QDS 4
+
+    \list
+    \li \l{Qt Design Studio 4.5.1 released}
+    \li \l{Qt Design Studio 4.5 released}
+    \li \l{Qt Design Studio 4.4 released}
+    \li \l{Qt Design Studio 4.3.2 released}
+    \li \l{Qt Design Studio 4.3.1 released}
+    \li \l{Qt Design Studio 4.3 released}
+    \li \l{Qt Design Studio 4.2 released}
+    \li \l{Qt Design Studio 4.1 released}
+    \li \l{Qt Design Studio 4.0.1 released}
+    \li \l{Qt Design Studio 4.0 released}
+    \endlist
+
+    \section2 \QDS 3
+
+    \list
+        \li \l{Qt Design Studio 3.9 released}
+        \li \l{Qt Design Studio 3.8 released}
+        \li \l{Qt Design Studio 3.7 released}
+        \li \l{Qt Design Studio 3.6 released}
+        \li \l{Qt Design Studio 3.5 released}
+        \li \l{Qt Design Studio 3.4 released}
+        \li \l{Qt Design Studio 3.3 released}
+        \li \l{Qt Design Studio 3.2 released}
+        \li \l{Qt Design Studio 3.1 released}
+        \li \l{Qt Design Studio 3.0 released}
+    \endlist
+
+    \section2 \QDS 2
+
+    \list
+        \li \l{Qt Design Studio 2.3 released}
+        \li \l{Qt Design Studio 2.2 released}
+        \li \l{Qt Design Studio 2.1 released}
+        \li \l{Qt Design Studio 2.0 released}
+    \endlist
+
+    \section2 \QDS 1
+
+    \list
+        \li \l{Qt Design Studio 1.6.1 released}
+        \li \l{Qt Design Studio 1.6 released}
+        \li \l{Qt Design Studio 1.5 released}
+        \li \l{Qt Design Studio 1.4 released}
+        \li \l{Qt Design Studio 1.3.1 released}
+        \li \l{Qt Design Studio 1.3 released}
+        \li \l{Qt Design Studio 1.2 released}
+        \li \l{Qt Design Studio 1.1.1 released}
+        \li \l{Qt Design Studio 1.1 released}
+        \li \l{Qt Design Studio 1.0 released}
+    \endlist
+
+*/

doc/qtdesignstudio/src/working with/effects/qtdesignstudio-effects.qdoc

@@ -0,0 +1,55 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \previouspage studio-terms.html
+    \page working-with-effects.html
+    \nextpage best-practices.html
+
+    \title Effects
+
+    \QDS includes various ready-made effects that you can use in your applications. These effects
+    are customizable to meet your specific requirements. Alternatively, you can use your own shader
+    files to create a custom effect.
+
+    The following table summarizes the available effects and their corresponding use cases.
+
+    \table
+    \header
+        \li Effect
+        \li Description
+    \row
+        \li \l {Effect Composer}
+        \li A set of ready-made 2D, 3D, and particle effects that you can combine and customize.
+            Includes effects like \uicontrol {Color Overlay}, \uicontrol Rain, and \uicontrol
+            Swirl.
+    \row
+        \li \l {Adding an Effect to Your Project}{Content Library Effects}
+        \li A set of ready-made particle effects. Includes customizable effects like \uicontrol
+            Bubbles, \uicontrol Explosion, and \uicontrol Shockwave.
+    \row
+        \li \l {Design Effects}
+        \li A feature for adding 2D shadow and blur effects from the \uicontrol Properties
+            view.
+    \row
+        \li \l {Particles}{Particle Effects}
+        \li A set of ready-made particle effect components like \uicontrol Clouds, \uicontrol Dust,
+            and \uicontrol Steam. Includes also components for more advanced customization like
+            \uicontrol Attractor, \uicontrol {Scale Affector}, and \uicontrol Gravity.
+    \row
+        \li \l {3D Effects}
+        \li A set of ready-made 3D effect components. Includes customizable effects like \uicontrol
+            {Brush Strokes}, \uicontrol {Distortion Sphere}, and \uicontrol {Motion Blur}.
+    \row
+        \li \l {2D Effects}
+        \li A set of ready-made 2D effect components. Includes customizable effects like \uicontrol
+            {Brightness Control}, \uicontrol {Gamma Adjust}, and \uicontrol {Opacity Mask}.
+    \row
+        \li \l {Using Qt Quick Effect Maker Effects}{Qt Quick Effect Maker}
+        \li Import effects made with \QQEM to \QDS.
+    \row
+        \li \l {Custom Effects and Materials}{Custom Effects}
+        \li Use your own shader files to create a custom effect.
+    \endtable
+
+*/

qt_attributions.json

@@ -630,5 +630,20 @@
         "License": "MIT License",
         "LicenseFile": "share/qtcreator/lua-plugins/luatests/INSPECT-LICENSE.txt",
         "Copyright": "Copyright (c) 2022 Enrique García Cota"
+    },
+    {
+        "Id": "zlib",
+        "Name": "ZLib",
+        "QDocModule": "qtcreator",
+        "QtParts": ["tools"],
+        "QtUsage": "Used by ZipWriter/ZipReader to support compress and uncompress operations.",
+        "Path": "src/libs/3rdparty/zlib",
+        "Description": "Zlib is a lossless data-compression library.",
+        "Homepage": "https://www.zlib.net",
+        "Version": "1.3.1",
+        "License": "BSD 3-Clause \"New\" or \"Revised\" License",
+        "LicenseFile": "src/libs/3rdparty/zlib/LICENSE",
+        "Copyright": "Copyright (C) 1995-2024 Jean-loup Gailly and Mark Adler"
     }
 ]
+

share/CMakeLists.txt

@@ -6,17 +6,17 @@ if (NOT APPLE AND NOT WIN32)
     string(TIMESTAMP timestamp "%Y-%m-%d")
     set(DATE_ATTRIBUTE " date=\"${timestamp}\"")
   endif()
-  configure_file(metainfo/org.qt-project.qtcreator.appdata.xml.cmakein metainfo/org.qt-project.qtcreator.appdata.xml)
+  configure_file(metainfo/${IDE_APP_ID}.appdata.xml.cmakein metainfo/${IDE_APP_ID}.appdata.xml)
 
   install(
-    DIRECTORY
+    FILES
-      applications
+      applications/${IDE_APP_ID}.desktop
     DESTINATION
-      ${CMAKE_INSTALL_DATAROOTDIR}
+      ${CMAKE_INSTALL_DATAROOTDIR}/applications/
   )
   install(
     FILES
-      ${CMAKE_CURRENT_BINARY_DIR}/metainfo/org.qt-project.qtcreator.appdata.xml
+      ${CMAKE_CURRENT_BINARY_DIR}/metainfo/${IDE_APP_ID}.appdata.xml
     DESTINATION
       ${CMAKE_INSTALL_DATAROOTDIR}/metainfo/
   )

share/applications/io.qt.qtdesignstudio.desktop

@@ -0,0 +1,11 @@
+[Desktop Entry]
+Type=Application
+Exec=qtdesignstudio %F
+Name=Qt Design Studio
+GenericName=UI Designer for Qml applications
+X-KDE-StartupNotify=true
+Icon=QtProject-qtdesignstudio
+StartupWMClass=org.qt-project.qtdesignstudio
+Terminal=false
+Categories=Development;GUIDesigner;Qt;
+MimeType=application/x-qmlproject

share/metainfo/io.qt.qtdesignstudio.appdata.xml.cmakein

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Copyright (C) 2016 The Qt Company Ltd. Contact: https://www.qt.io/licensing/ -->
+<component type="desktop">
+ <id>io.qt.qtdesignstudio</id>
+ <name>Qt Design Studio</name>
+ <developer id="Qt Design Studio team">
+   <name>Qt Project</name>
+ </developer>
+ <summary>UI Designer for Qml applications</summary>
+ <metadata_license>CC0-1.0</metadata_license>
+ <project_license>GPL-3.0</project_license>
+ <description>
+  <p>
+   Define the look and feel of the UI from wireframe to final implementation
+   with preset UI components. Import UI design files from 2D and 3D tools
+   to Qt Design Studio, which can turn them into code for developers.
+  </p>
+  <p>
+   Qt Design Studio prototyping features bring your designs to life and
+   simulate and validate interactions and dynamic behavior.
+  </p>
+  <p>
+   You can test, preview, and fine-tune your designs to pixel-perfection live
+   on the desktop or target device.
+  </p>
+ </description>
+ <launchable type="desktop-id">io.qt.qtdesignstudio.desktop</launchable>
+
+ <url type="homepage">https://www.qt.io/product/ui-design-tools</url>
+ <url type="bugtracker">https://bugreports.qt.io/projects/QDS/summary</url>
+ <url type="help">https://doc.qt.io/qtdesignstudio/</url>
+ <url type="vcs-browser">https://codereview.qt-project.org/q/project:qt-creator/qt-creator</url>
+ <url type="contribute">https://www.qt.io/community/contribute-to-qt</url>
+
+ <project_group>Qt</project_group>
+ <content_rating type="oars-1.1" />
+ <screenshots>
+  <screenshot type="default">
+   <caption>Overview 2D</caption>
+   <image>https://www.qt.io/hs-fs/hubfs/image-png-Dec-13-2021-02-04-37-16-PM.png</image>
+  </screenshot>
+  <screenshot>
+   <caption>Welcome</caption>
+   <image>https://www.qt.io/hs-fs/hubfs/welcomescreen.png</image>
+  </screenshot>
+  <screenshot>
+   <caption>Overview 3D</caption>
+   <image>https://www.qt.io/hs-fs/hubfs/image-png-Feb-28-2022-03-08-54-80-PM.png</image>
+  </screenshot>
+  <screenshot>
+   <caption>Examples</caption>
+   <image>https://www.qt.io/hs-fs/hubfs/image-png-May-23-2022-12-38-02-61-PM.png</image>
+  </screenshot>
+ </screenshots>
+ <releases>
+  <release version="${IDE_VERSION_DISPLAY}"${DATE_ATTRIBUTE}>
+   <description>
+    <p>Qt Design Studio ${IDE_VERSION_DISPLAY}</p>
+   </description>
+   <url>https://www.qt.io/blog/qt-design-studio-${IDE_VERSION_DISPLAY}-released</url>
+  </release>
+ </releases>
+</component>

share/metainfo/org.qt-project.qtcreator.appdata.xml.cmakein

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Copyright (C) 2016 The Qt Company Ltd. Contact: https://www.qt.io/licensing/ -->
 <component type="desktop">
- <id>org.qt-project.qtcreator.desktop</id>
+ <id>org.qt-project.qtcreator</id>
  <name>Qt Creator</name>
  <developer id="org.qt-project">
    <name>Qt Project</name>
@@ -28,7 +28,13 @@
  </description>
  <launchable type="desktop-id">org.qt-project.qtcreator.desktop</launchable>
 
- <url type="homepage">https://www.qt.io/ide/</url>
+ <url type="homepage">https://www.qt.io/product/development-tools</url>
+ <url type="bugtracker">https://bugreports.qt.io/projects/QTCREATORBUG/summary</url>
+ <url type="help">https://doc.qt.io/qtcreator</url>
+ <url type="contact">https://lists.qt-project.org/listinfo/qt-creator</url>
+ <url type="vcs-browser">https://codereview.qt-project.org/q/project:qt-creator/qt-creator</url>
+ <url type="contribute">https://www.qt.io/community/contribute-to-qt</url>
+
  <project_group>Qt</project_group>
  <content_rating type="oars-1.1" />
  <screenshots>

share/qtcreator/qmldesigner/assetsLibraryQmlSources/AssetDelegate.qml

@@ -315,7 +315,7 @@ TreeViewDelegate {
         id: thumbnailImage
         visible: !root.__isDirectory
         y: StudioTheme.Values.border
-        x: root.depth * root.indentation + StudioTheme.Values.border
+        x: bg.x
         width: 48
         height: 48
         cache: false

share/qtcreator/qmldesigner/assetsLibraryQmlSources/AssetsView.qml

@@ -479,6 +479,6 @@ TreeView {
     delegate: AssetDelegate {
         assetsView: root
         assetsRoot: root.assetsRoot
-        indentation: 5
+        indentation: 10
     }
 } // TreeView

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml

@@ -235,7 +235,6 @@ Item {
                 cellWidth: root.thumbnailSize
                 cellHeight: root.thumbnailSize + 20
                 numColumns: root.numColumns
-                hideHorizontalScrollBar: true
 
                 searchBox: searchBox
 

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryEffectsView.qml

@@ -96,6 +96,7 @@ HelperWidgets.ScrollView {
                             height: root.cellHeight
 
                             onShowContextMenu: ctxMenu.popupMenu(modelData)
+                            onAddToProject: ContentLibraryBackend.effectsModel.addInstance(modelData)
                         }
 
                         onCountChanged: root.assignMaxCount()
@@ -107,12 +108,12 @@ HelperWidgets.ScrollView {
         Text {
             id: infoText
             text: {
-                if (!ContentLibraryBackend.effectsModel.bundleExists)
+                if (!ContentLibraryBackend.rootView.isQt6Project)
-                    qsTr("No effects available.")
-                else if (!ContentLibraryBackend.rootView.isQt6Project)
                     qsTr("<b>Content Library</b> effects are not supported in Qt5 projects.")
                 else if (!ContentLibraryBackend.rootView.hasQuick3DImport)
                     qsTr("To use <b>Content Library</b>, first add the QtQuick3D module in the <b>Components</b> view.")
+                else if (!ContentLibraryBackend.effectsModel.bundleExists)
+                    qsTr("No effects available.")
                 else if (!ContentLibraryBackend.effectsModel.hasRequiredQuick3DImport)
                     qsTr("To use <b>Content Library</b>, version 6.4 or later of the QtQuick3D module is required.")
                 else if (!ContentLibraryBackend.rootView.hasMaterialLibrary)

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryItem.qml

@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
-import QtQuick.Layouts
-import HelperWidgets
 import QtQuick.Controls
+import HelperWidgets as HelperWidgets
 import StudioTheme as StudioTheme
 import ContentLibraryBackend
 
@@ -12,18 +11,20 @@ Item {
     id: root
 
     signal showContextMenu()
+    signal addToProject()
 
     visible: modelData.bundleItemVisible
 
     MouseArea {
         id: mouseArea
 
+        enabled: !ContentLibraryBackend.rootView.importerRunning
         hoverEnabled: true
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
         onPressed: (mouse) => {
-            if (mouse.button === Qt.LeftButton && !ContentLibraryBackend.rootView.importerRunning)
+            if (mouse.button === Qt.LeftButton)
                 ContentLibraryBackend.rootView.startDragItem(modelData, mapToGlobal(mouse.x, mouse.y))
             else if (mouse.button === Qt.RightButton)
                 root.showContextMenu()
@@ -67,6 +68,26 @@ Item {
                     hoverEnabled: true
                 }
             }
+
+            HelperWidgets.IconButton {
+                id: addToProjectButton
+
+                icon: StudioTheme.Constants.plus
+                tooltip: qsTr("Add an instance to project")
+                buttonSize: 22
+                property color c: "white"
+                normalColor: Qt.hsla(c.hslHue, c.hslSaturation, c.hslLightness, .2)
+                hoverColor: Qt.hsla(c.hslHue, c.hslSaturation, c.hslLightness, .3)
+                pressColor: Qt.hsla(c.hslHue, c.hslSaturation, c.hslLightness, .4)
+                anchors.right: img.right
+                anchors.bottom: img.bottom
+                enabled: !ContentLibraryBackend.rootView.importerRunning
+                visible: containsMouse || mouseArea.containsMouse
+
+                onClicked: {
+                    root.addToProject()
+                }
+            }
         }
 
         Text {

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryItemContextMenu.qml

@@ -10,7 +10,8 @@ StudioControls.Menu {
     id: root
 
     property var targetItem: null
-    property bool enableRemove: false // true: adds an option to remove targetItem
+    property bool showRemoveAction: false // true: adds an option to remove targetItem
+    property bool showImportAction: false // true: adds an option to import a bundle from file
 
     readonly property bool targetAvailable: targetItem && !ContentLibraryBackend.rootView.importerRunning
 
@@ -18,12 +19,15 @@ StudioControls.Menu {
     signal addToProject()
     signal applyToSelected(bool add)
     signal removeFromContentLib()
+    signal importBundle()
 
     function popupMenu(item = null)
     {
         root.targetItem = item
 
-        let isMaterial = root.targetItem.itemType === "material"
+        let isMaterial = item && (root.targetItem.bundleId === "UserMaterials"
+                                  || root.targetItem.bundleId === "MaterialBundle"
+                                  || root.targetItem.bundleId === "Materials")
         applyToSelectedReplace.visible = isMaterial
         applyToSelectedAdd.visible = isMaterial
 
@@ -64,8 +68,15 @@ StudioControls.Menu {
 
     StudioControls.MenuItem {
         text: qsTr("Remove from Content Library")
-        visible: root.enableRemove && root.targetAvailable
+        visible: root.showRemoveAction && root.targetAvailable
         height: visible ? implicitHeight : 0
         onTriggered: root.removeFromContentLib()
     }
+
+    StudioControls.MenuItem {
+        text: qsTr("Import bundle")
+        visible: root.showImportAction
+        height: visible ? implicitHeight : 0
+        onTriggered: root.importBundle()
+    }
 }

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml

@@ -3,8 +3,7 @@
 
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Layouts
+import HelperWidgets as HelperWidgets
-import HelperWidgets
 import StudioTheme as StudioTheme
 import ContentLibraryBackend
 import WebFetcher
@@ -12,9 +11,9 @@ import WebFetcher
 Item {
     id: root
 
-    // Download states: "" (ie default, not downloaded), "unavailable", "downloading", "downloaded",
+    // Download states: "" (exists not downloaded), "unavailable", "downloading", "downloaded", "failed"
-    //                  "failed"
+    property string downloadState: ContentLibraryBackend.materialsModel.isMaterialDownloaded(modelData)
-    property string downloadState: modelData.isDownloaded() ? "downloaded" : ""
+                                   ? "downloaded" : ""
 
     signal showContextMenu()
     signal addToProject()
@@ -24,20 +23,18 @@ Item {
     MouseArea {
         id: mouseArea
 
-        enabled: root.downloadState !== "downloading"
+        enabled: !ContentLibraryBackend.rootView.importerRunning && root.downloadState == "downloaded"
         hoverEnabled: true
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
         onPressed: (mouse) => {
-            if (mouse.button === Qt.LeftButton && !ContentLibraryBackend.rootView.importerRunning) {
+            if (mouse.button === Qt.LeftButton)
-                if (root.downloadState === "downloaded")
                 ContentLibraryBackend.rootView.startDragMaterial(modelData, mapToGlobal(mouse.x, mouse.y))
-            } else if (mouse.button === Qt.RightButton && root.downloadState === "downloaded") {
+            else if (mouse.button === Qt.RightButton)
                 root.showContextMenu()
         }
     }
-    }
 
     Column {
         anchors.fill: parent
@@ -87,7 +84,7 @@ Item {
                 }
             }
 
-            IconButton {
+            HelperWidgets.IconButton {
                 icon: StudioTheme.Constants.plus
                 tooltip: qsTr("Add an instance to project")
                 buttonSize: 22
@@ -106,7 +103,7 @@ Item {
                 }
             }
 
-            IconButton {
+            HelperWidgets.IconButton {
                 id: downloadIcon
                 icon: root.downloadState === "unavailable"
                       ? StudioTheme.Constants.downloadUnavailable
@@ -181,10 +178,10 @@ Item {
     MultiFileDownloader {
         id: downloader
 
-        baseUrl: modelData.bundleMaterialBaseWebUrl
+        baseUrl: ContentLibraryBackend.materialsModel.baseWebUrl
         files: modelData.bundleMaterialFiles
 
-        targetDirPath: modelData.bundleMaterialDirPath
+        targetDirPath: ContentLibraryBackend.materialsModel.bundlePath
 
         onDownloadStarting: {
             root.downloadState = "downloading"

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterialsView.qml

@@ -113,9 +113,7 @@ HelperWidgets.ScrollView {
         Text {
             id: infoText
             text: {
-                if (!root.materialsModel.matBundleExists)
+                if (!ContentLibraryBackend.rootView.isQt6Project)
-                    qsTr("No materials available. Make sure you have internet connection.")
-                else if (!ContentLibraryBackend.rootView.isQt6Project)
                     qsTr("<b>Content Library</b> materials are not supported in Qt5 projects.")
                 else if (!ContentLibraryBackend.rootView.hasQuick3DImport)
                     qsTr("To use <b>Content Library</b>, first add the QtQuick3D module in the <b>Components</b> view.")
@@ -123,6 +121,8 @@ HelperWidgets.ScrollView {
                     qsTr("To use <b>Content Library</b>, version 6.3 or later of the QtQuick3D module is required.")
                 else if (!ContentLibraryBackend.rootView.hasMaterialLibrary)
                     qsTr("<b>Content Library</b> is disabled inside a non-visual component.")
+                else if (!root.materialsModel.matBundleExists)
+                    qsTr("No materials available. Make sure you have internet connection.")
                 else if (!searchBox.isEmpty())
                     qsTr("No match found.")
                 else

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTextureContextMenu.qml

@@ -12,7 +12,7 @@ StudioControls.Menu {
 
     property var targetTexture: null
     property bool hasSceneEnv: false
-    property bool enableRemove: false // true: adds an option to remove targetTexture
+    property bool showRemoveAction: false // true: adds an option to remove targetTexture
 
     property bool canUse3D: targetTexture && ContentLibraryBackend.rootView.hasQuick3DImport && ContentLibraryBackend.rootView.hasMaterialLibrary
 
@@ -45,7 +45,7 @@ StudioControls.Menu {
 
     StudioControls.MenuItem {
         text: qsTr("Remove from Content Library")
-        visible: root.targetTexture && root.enableRemove
+        visible: root.targetTexture && root.showRemoveAction
         height: visible ? implicitHeight : 0
         onTriggered: ContentLibraryBackend.userModel.removeTexture(root.targetTexture)
     }

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryUserView.qml

@@ -8,12 +8,10 @@ import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ContentLibraryBackend
 
-HelperWidgets.ScrollView {
+Item {
     id: root
 
-    clip: true
+    property alias adsFocus: scrollView.adsFocus
-    interactive: !ctxMenuItem.opened && !ctxMenuTexture.opened
-                 && !ContentLibraryBackend.rootView.isDragging && !HelperWidgets.Controller.contextMenuOpened
 
     property real cellWidth: 100
     property real cellHeight: 120
@@ -46,26 +44,51 @@ HelperWidgets.ScrollView {
         }
     }
 
-    Column {
     ContentLibraryItemContextMenu {
         id: ctxMenuItem
 
-            enableRemove: true
+        showRemoveAction: true
+        showImportAction: true
 
         onApplyToSelected: (add) => ContentLibraryBackend.userModel.applyToSelected(ctxMenuItem.targetItem, add)
 
         onUnimport: root.unimport(ctxMenuItem.targetItem)
         onAddToProject: ContentLibraryBackend.userModel.addToProject(ctxMenuItem.targetItem)
         onRemoveFromContentLib: root.removeFromContentLib(ctxMenuItem.targetItem)
+        onImportBundle: ContentLibraryBackend.rootView.importBundle();
     }
 
     ContentLibraryTextureContextMenu {
         id: ctxMenuTexture
 
-            enableRemove: true
+        showRemoveAction: true
         hasSceneEnv: ContentLibraryBackend.texturesModel.hasSceneEnv
     }
 
+    MouseArea {
+        id: rootMouseArea
+
+        anchors.fill: parent
+        acceptedButtons: Qt.RightButton
+        enabled: ContentLibraryBackend.rootView.isQt6Project
+              && ContentLibraryBackend.rootView.hasQuick3DImport
+              && ContentLibraryBackend.rootView.hasMaterialLibrary
+
+        onClicked: (mouse) => {
+            ctxMenuItem.popupMenu()
+        }
+    }
+
+    HelperWidgets.ScrollView {
+        id: scrollView
+        anchors.fill: parent
+
+        clip: true
+        interactive: !ctxMenuItem.opened && !ctxMenuTexture.opened
+                     && !ContentLibraryBackend.rootView.isDragging && !HelperWidgets.Controller.contextMenuOpened
+        hideHorizontalScrollBar: true
+
+        Column {
             Repeater {
                 id: categoryRepeater
 
@@ -80,8 +103,8 @@ HelperWidgets.ScrollView {
                     topPadding: StudioTheme.Values.sectionPadding
                     bottomPadding: StudioTheme.Values.sectionPadding
 
-                caption: categoryName
+                    caption: categoryTitle
-                visible: categoryVisible && infoText.text === ""
+                    visible: !categoryEmpty && infoText.text === ""
                     category: "ContentLib_User"
 
                     function expandSection() {
@@ -102,11 +125,11 @@ HelperWidgets.ScrollView {
                             model: categoryItems
 
                             delegate: DelegateChooser {
-                            role: "itemType"
+                                role: "bundleId"
 
                                 DelegateChoice {
-                                roleValue: "material"
+                                    roleValue: "UserMaterials"
-                                ContentLibraryMaterial {
+                                    ContentLibraryItem {
                                         width: root.cellWidth
                                         height: root.cellHeight
 
@@ -115,7 +138,7 @@ HelperWidgets.ScrollView {
                                     }
                                 }
                                 DelegateChoice {
-                                roleValue: "texture"
+                                    roleValue: "UserTextures"
                                     delegate: ContentLibraryTexture {
                                         width: root.cellWidth
                                         height: root.cellWidth // for textures use a square size since there is no name row
@@ -124,12 +147,13 @@ HelperWidgets.ScrollView {
                                     }
                                 }
                                 DelegateChoice {
-                                roleValue: "item"
+                                    roleValue: "User3D"
                                     delegate: ContentLibraryItem {
                                         width: root.cellWidth
                                         height: root.cellHeight
 
                                         onShowContextMenu: ctxMenuItem.popupMenu(modelData)
+                                        onAddToProject: ContentLibraryBackend.userModel.addToProject(modelData)
                                     }
                                 }
                             }
@@ -157,6 +181,8 @@ HelperWidgets.ScrollView {
                         qsTr("To use <b>Content Library</b>, first add the QtQuick3D module in the <b>Components</b> view.")
                     else if (!ContentLibraryBackend.rootView.hasMaterialLibrary)
                         qsTr("<b>Content Library</b> is disabled inside a non-visual component.")
+                    else if (ContentLibraryBackend.userModel.isEmpty)
+                        qsTr("There are no user assets in the <b>Content Library</b>.")
                     else
                         ""
                 }
@@ -168,3 +194,4 @@ HelperWidgets.ScrollView {
             }
         }
     }
+}

share/qtcreator/qmldesigner/edit3dQmlSource/CameraSpeedConfigurationDialog.qml

@@ -12,9 +12,10 @@ Rectangle {
     id: root
 
     property int toolTipDelay: 1000
+    property bool qdsTrusted: isQDSTrusted()
 
     width: 260
-    height: 150
+    height: root.qdsTrusted ? 150 : 210
     color: StudioTheme.Values.themePanelBackground
     border.color: StudioTheme.Values.themeControlOutline
     border.width: StudioTheme.Values.border
@@ -151,6 +152,43 @@ Rectangle {
                     onClicked: resetDefaults()
                 }
             }
+
+            Rectangle {
+                visible: !root.qdsTrusted
+                color: "transparent"
+                border.color: StudioTheme.Values.themeWarning
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                RowLayout {
+                    anchors.fill: parent
+
+                    HelperWidgets.IconLabel {
+                        icon: StudioTheme.Constants.warning_medium
+                        pixelSize: StudioTheme.Values.mediumIconFontSize
+                        Layout.leftMargin: 10
+                    }
+
+                    Text {
+                        text: qsTr('<p>You only have partial control in fly mode. For full control, please
+                               enable the <span style="text-decoration: underline">Accessibility settings</span></p>')
+
+                        color: StudioTheme.Values.themeTextColor
+                        wrapMode: Text.WordWrap
+                        Layout.fillWidth: true
+                        Layout.margins: 6
+                        textFormat: Text.RichText
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: {
+                                Qt.openUrlExternally("x-apple.systempreferences:com.apple.preference.security?Privacy_Accessibility")
+                                accessibilityOpened()
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }

share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml

@@ -130,8 +130,8 @@ ColumnLayout {
         orientation: root.width > root.height ? Qt.Horizontal : Qt.Vertical
 
         handle: Rectangle {
-            implicitWidth: splitView.orientation === Qt.Horizontal ? 6 : splitView.width
+            implicitWidth: splitView.orientation === Qt.Horizontal ? StudioTheme.Values.splitterThickness : splitView.width
-            implicitHeight: splitView.orientation === Qt.Horizontal ? splitView.height : 6
+            implicitHeight: splitView.orientation === Qt.Horizontal ? splitView.height : StudioTheme.Values.splitterThickness
             color: T.SplitHandle.pressed ? StudioTheme.Values.themeSliderHandleInteraction
                 : (T.SplitHandle.hovered ? StudioTheme.Values.themeSliderHandleHover
                                          : "transparent")

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml

@@ -273,15 +273,17 @@ Item {
     function ensureVisible(yPos, itemHeight) {
         let currentY = contentYBehavior.targetValue && scrollViewAnim.running
             ? contentYBehavior.targetValue : scrollView.contentY
+        let itemHeightAdj = (itemHeight - scrollView.height + 8)
+        let lessThanItemSpace = itemHeightAdj >= 0
 
-        if (currentY > yPos) {
+        if (currentY > yPos || lessThanItemSpace) {
             if (yPos < itemHeight)
                 scrollView.contentY = 0
             else
                 scrollView.contentY = yPos
-            return true
+            return !lessThanItemSpace
         } else {
-            let adjustedY = yPos + itemHeight - scrollView.height + 8
+            let adjustedY = yPos + itemHeightAdj
             if (currentY < adjustedY) {
                 if (scrollView.contentHeight - scrollView.height < adjustedY )
                     scrollView.contentY = scrollView.contentHeight - scrollView.height

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowserContextMenu.qml

@@ -134,4 +134,17 @@ StudioControls.Menu {
 
         onTriggered: MaterialBrowserBackend.rootView.addMaterialToContentLibrary()
     }
+
+    StudioControls.MenuItem {
+        text: qsTr("Import Material")
+
+        onTriggered: MaterialBrowserBackend.rootView.importMaterial()
+    }
+
+    StudioControls.MenuItem {
+        text: qsTr("Export Material")
+        enabled: !materialBrowserModel.selectedMaterialIsComponent // TODO: support component materials
+
+        onTriggered: MaterialBrowserBackend.rootView.exportMaterial()
+    }
 }

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowserItemName.qml

@@ -23,7 +23,7 @@ TextInput {
     selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor
 
     // allow only alphanumeric characters, underscores, no space at start, and 1 space between words
-    validator: RegExpValidator { regExp: /^(\w+\s)*\w+$/ }
+    validator: RegularExpressionValidator { regularExpression: /^(\w+\s)*\w+$/ }
 
     signal renamed(string newName)
     signal clicked()

share/qtcreator/qmldesigner/materialBrowserQmlSource/TextureItem.qml

@@ -16,7 +16,7 @@ Item {
     signal showContextMenu()
 
     function forceFinishEditing() {
-        txtId.commitRename()
+        txtName.commitRename()
     }
 
     MouseArea {
@@ -76,14 +76,14 @@ Item {
         }
 
         MaterialBrowserItemName {
-            id: txtId
+            id: txtName
 
-            text: textureId
+            text: textureName
             width: img.width
             anchors.horizontalCenter: parent.horizontalCenter
 
-            onRenamed: (newId) => {
+            onRenamed: (newName) => {
-                MaterialBrowserBackend.materialBrowserTexturesModel.setTextureId(index, newId);
+                MaterialBrowserBackend.materialBrowserTexturesModel.setTextureName(index, newName);
                 mouseArea.forceActiveFocus()
             }
 

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml

@@ -2,11 +2,17 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Controls
+import QtCore
 import HelperWidgets
+import StudioControls 1.0 as StudioControls
 
 Item {
     id: root
 
+    property string __previewEnv
+    property string __previewModel
+
     width: 420
     height: 420
 
@@ -15,23 +21,18 @@ Item {
     signal previewModelChanged(string model)
 
     // invoked from C++ to refresh material preview image
-    function refreshPreview()
+    signal refreshPreview()
-    {
-        itemPane.headerItem.refreshPreview()
-    }
 
     // Called from C++ to close context menu on focus out
     function closeContextMenu()
     {
-        itemPane.headerItem.closeContextMenu()
         Controller.closeContextMenu()
     }
 
     // Called from C++ to initialize preview menu checkmarks
-    function initPreviewData(env, model)
+    function initPreviewData(env, model) {
-    {
+        root.__previewEnv = env
-        itemPane.headerItem.previewEnv = env
+        root.__previewModel = model
-        itemPane.headerItem.previewModel = model
     }
 
     MaterialEditorToolBar {
@@ -42,18 +43,56 @@ Item {
         onToolBarAction: (action) => root.toolBarAction(action)
     }
 
-    PropertyEditorPane {
+    Settings {
-        id: itemPane
+        id: settings
+
+        property var topSection
+        property bool dockMode
+    }
+
+    StudioControls.SplitView {
+        id: splitView
+
+        readonly property bool isHorizontal: splitView.orientation == Qt.Horizontal
 
         anchors.top: toolbar.bottom
         anchors.bottom: parent.bottom
         width: parent.width
-
+        orientation: splitView.width > 1000 ? Qt.Horizontal : Qt.Vertical
         clip: true
 
+        Loader {
+            id: leftSideView
+
+            SplitView.fillWidth: leftSideView.visible
+            SplitView.fillHeight: leftSideView.visible
+            SplitView.minimumWidth: leftSideView.visible ? 300 : 0
+            SplitView.minimumHeight: leftSideView.visible ? 300 : 0
+
+            active: splitView.isHorizontal
+            visible: leftSideView.active && leftSideView.item
+
+            sourceComponent: PreviewComponent {}
+        }
+
+        PropertyEditorPane {
+            id: itemPane
+
+            clip: true
+            SplitView.fillWidth: !leftSideView.visible
+            SplitView.fillHeight: true
+            SplitView.minimumWidth: leftSideView.visible ? 400 : 0
+            SplitView.maximumWidth: leftSideView.visible ? 800 : -1
+
+            headerDocked: !leftSideView.visible && settings.dockMode
+
             headerComponent: MaterialEditorTopSection {
-            onPreviewEnvChanged: root.previewEnvChanged(previewEnv)
+                id: topSection
-            onPreviewModelChanged: root.previewModelChanged(previewModel)
+
+                Component.onCompleted: topSection.restoreState(settings.topSection)
+                Component.onDestruction: settings.topSection = topSection.saveState()
+                previewComponent: PreviewComponent {}
+                showImage: !splitView.isHorizontal
             }
 
             DynamicPropertiesSection {
@@ -65,7 +104,7 @@ Item {
 
                 property string theSource: specificQmlData
 
-            width: parent.width
+                width: itemPane.width
                 visible: specificsTwo.theSource !== ""
                 sourceComponent: specificQmlComponent
 
@@ -83,9 +122,30 @@ Item {
 
             Loader {
                 id: specificsOne
-            anchors.left: parent.left
+                width: itemPane.width
-            anchors.right: parent.right
                 source: specificsUrl
             }
         }
     }
+
+    component PreviewComponent : MaterialEditorPreview {
+        id: previewItem
+
+        onPreviewEnvChanged: root.previewEnvChanged(previewEnv)
+        onPreviewModelChanged: root.previewModelChanged(previewModel)
+
+        previewEnv: root.__previewEnv
+        previewModel: root.__previewModel
+        pinned: settings.dockMode
+        showPinButton: !leftSideView.visible
+        onPinnedChanged: settings.dockMode = previewItem.pinned
+
+        Connections {
+            target: root
+
+            function onRefreshPreview() {
+                previewItem.refreshPreview()
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPreview.qml

@@ -0,0 +1,185 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import HelperWidgets as HelperWidgets
+import StudioControls as StudioControls
+import StudioTheme as StudioTheme
+
+Rectangle {
+    id: root
+
+    property string previewEnv
+    property string previewModel
+    property alias pinned: pinButton.checked
+    property alias showPinButton: pinButton.visible
+
+    property StudioTheme.ControlStyle buttonStyle: StudioTheme.ViewBarButtonStyle {
+        // This is how you can override stuff from the control styles
+        baseIconFontSize: StudioTheme.Values.bigIconFontSize
+    }
+
+    Connections {
+        target: HelperWidgets.Controller
+
+        function onCloseContextMenu() {
+            root.closeContextMenu()
+        }
+    }
+
+    implicitHeight: image.height
+
+    clip: true
+    color: "#000000"
+
+    // Called from C++ to close context menu on focus out
+    function closeContextMenu()
+    {
+        modelMenu.close()
+        envMenu.close()
+    }
+
+    function refreshPreview()
+    {
+        image.source = ""
+        image.source = "image://materialEditor/preview"
+    }
+
+    Image {
+        id: image
+
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+
+        source: "image://materialEditor/preview"
+        cache: false
+        smooth: true
+
+        sourceSize.width: image.width
+        sourceSize.height: image.height
+
+        Rectangle {
+            id: toolbarRect
+
+            radius: 10
+            color: StudioTheme.Values.themeToolbarBackground
+            width: optionsToolbar.width + 2 * toolbarRect.radius
+            height: optionsToolbar.height + toolbarRect.radius
+            anchors.left: parent.left
+            anchors.leftMargin: -toolbarRect.radius
+            anchors.verticalCenter: parent.verticalCenter
+
+            Column {
+                id: optionsToolbar
+
+                spacing: 5
+                anchors.centerIn: parent
+                anchors.horizontalCenterOffset: optionsToolbar.spacing
+
+                HelperWidgets.AbstractButton {
+                    id: pinButton
+
+                    style: root.buttonStyle
+                    buttonIcon: pinButton.checked ? StudioTheme.Constants.pin : StudioTheme.Constants.unpin
+                    checkable: true
+                }
+
+                HelperWidgets.AbstractButton {
+                    id: previewEnvMenuButton
+
+                    style: root.buttonStyle
+                    buttonIcon: StudioTheme.Constants.textures_medium
+                    tooltip: qsTr("Select preview environment.")
+                    onClicked: envMenu.popup()
+                }
+
+                HelperWidgets.AbstractButton {
+                    id: previewModelMenuButton
+
+                    style: root.buttonStyle
+                    buttonIcon: StudioTheme.Constants.cube_medium
+                    tooltip: qsTr("Select preview model.")
+                    onClicked: modelMenu.popup()
+                }
+            }
+        }
+    }
+
+    StudioControls.Menu {
+        id: modelMenu
+        closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside
+
+        ListModel {
+            id: modelMenuModel
+            ListElement {
+                modelName: qsTr("Cone")
+                modelStr: "#Cone"
+            }
+            ListElement {
+                modelName: qsTr("Cube")
+                modelStr: "#Cube"
+            }
+            ListElement {
+                modelName: qsTr("Cylinder")
+                modelStr: "#Cylinder"
+            }
+            ListElement {
+                modelName: qsTr("Sphere")
+                modelStr: "#Sphere"
+            }
+        }
+
+        Repeater {
+            model: modelMenuModel
+            StudioControls.MenuItemWithIcon {
+                text: modelName
+                onClicked: {
+                    // Force property change notifications to keep check mark when reselected
+                    root.previewModel = ""
+                    root.previewModel = modelStr
+                }
+                checkable: true
+                checked: root.previewModel === modelStr
+            }
+        }
+    }
+
+    StudioControls.Menu {
+        id: envMenu
+        closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside
+
+        ListModel {
+            id: envMenuModel
+            ListElement {
+                envName: qsTr("Basic")
+                envStr: "Basic"
+            }
+            ListElement {
+                envName: qsTr("Color")
+                envStr: "Color"
+            }
+            ListElement {
+                envName: qsTr("Studio")
+                envStr: "SkyBox=preview_studio"
+            }
+            ListElement {
+                envName: qsTr("Landscape")
+                envStr: "SkyBox=preview_landscape"
+            }
+        }
+
+        Repeater {
+            model: envMenuModel
+            StudioControls.MenuItemWithIcon {
+                text: envName
+                onClicked: {
+                    // Force property change notifications to keep check mark when reselected
+                    root.previewEnv = ""
+                    root.previewEnv = envStr
+                }
+                checkable: true
+                checked: root.previewEnv === envStr
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml

@@ -8,184 +8,40 @@ import HelperWidgets as HelperWidgets
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
-Column {
+StudioControls.SplitView {
     id: root
 
-    property string previewEnv
+    property alias showImage: previewLoader.active
-    property string previewModel
+    property Component previewComponent: null
 
-    property real __horizontalSpacing: 5
-
-    property StudioTheme.ControlStyle buttonStyle: StudioTheme.ViewBarButtonStyle {
-        //This is how you can override stuff from the control styles
-        controlSize: Qt.size(previewOptions.width, previewOptions.width)
-        baseIconFontSize: StudioTheme.Values.bigIconFontSize
-    }
-
-    function refreshPreview()
-    {
-        materialPreview.source = ""
-        materialPreview.source = "image://materialEditor/preview"
-    }
-
-    // Called from C++ to close context menu on focus out
-    function closeContextMenu()
-    {
-        modelMenu.close()
-        envMenu.close()
-    }
-
-    anchors.left: parent.left
-    anchors.right: parent.right
-
-    Item { width: 1; height: 5 } // spacer
-
-    StudioControls.Menu {
-        id: modelMenu
-        closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside
-
-        ListModel {
-            id: modelMenuModel
-            ListElement {
-                modelName: qsTr("Cone")
-                modelStr: "#Cone"
-            }
-            ListElement {
-                modelName: qsTr("Cube")
-                modelStr: "#Cube"
-            }
-            ListElement {
-                modelName: qsTr("Cylinder")
-                modelStr: "#Cylinder"
-            }
-            ListElement {
-                modelName: qsTr("Sphere")
-                modelStr: "#Sphere"
-            }
-        }
-
-        Repeater {
-            model: modelMenuModel
-            StudioControls.MenuItemWithIcon {
-                text: modelName
-                onClicked: {
-                    // Force property change notifications to keep check mark when reselected
-                    root.previewModel = ""
-                    root.previewModel = modelStr
-                }
-                checkable: true
-                checked: root.previewModel === modelStr
-            }
-        }
-    }
-
-    StudioControls.Menu {
-        id: envMenu
-        closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside
-
-        ListModel {
-            id: envMenuModel
-            ListElement {
-                envName: qsTr("Basic")
-                envStr: "Basic"
-            }
-            ListElement {
-                envName: qsTr("Color")
-                envStr: "Color"
-            }
-            ListElement {
-                envName: qsTr("Studio")
-                envStr: "SkyBox=preview_studio"
-            }
-            ListElement {
-                envName: qsTr("Landscape")
-                envStr: "SkyBox=preview_landscape"
-            }
-        }
-
-        Repeater {
-            model: envMenuModel
-            StudioControls.MenuItemWithIcon {
-                text: envName
-                onClicked: {
-                    // Force property change notifications to keep check mark when reselected
-                    root.previewEnv = ""
-                    root.previewEnv = envStr
-                }
-                checkable: true
-                checked: root.previewEnv === envStr
-            }
-        }
-    }
-
-    Item {
-        anchors.horizontalCenter: parent.horizontalCenter
     width: parent.width
-        height: previewRect.height
+    implicitHeight: showImage ? previewLoader.implicitHeight + nameSection.implicitHeight : nameSection.implicitHeight
 
-        StudioControls.AbstractButton {
+    orientation: Qt.Vertical
-            id: pinButton
 
-            x: root.__horizontalSpacing
+    Loader {
+        id: previewLoader
 
-            style: root.buttonStyle
+        SplitView.fillWidth: true
-            iconSize: StudioTheme.Values.bigFont
+        SplitView.minimumWidth: 152
-            buttonIcon: pinButton.checked ? StudioTheme.Constants.pin : StudioTheme.Constants.unpin
+        SplitView.preferredHeight: previewLoader.visible ? Math.min(root.width * 0.75, 400) : 0
-            checkable: true
+        SplitView.minimumHeight: previewLoader.visible ? 150 : 0
-            checked: itemPane.headerDocked
+        SplitView.maximumHeight: previewLoader.visible ? 600 : 0
-            onCheckedChanged: itemPane.headerDocked = pinButton.checked
-        }
 
-        Rectangle {
+        visible: previewLoader.active && previewLoader.item
-            id: previewRect
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: 152
-            height: 152
-            color: "#000000"
 
-            Image {
+        sourceComponent: root.previewComponent
-                id: materialPreview
-                width: 150
-                height: 150
-                anchors.centerIn: parent
-                source: "image://materialEditor/preview"
-                cache: false
-                smooth: true
-            }
-        }
-
-        Item {
-            id: previewOptions
-            width: 40
-            height: previewRect.height
-            anchors.top: previewRect.top
-            anchors.left: previewRect.right
-            anchors.leftMargin: root.__horizontalSpacing
-
-            Column {
-                anchors.horizontalCenter: parent.horizontalCenter
-
-                HelperWidgets.AbstractButton {
-                    style: root.buttonStyle
-                    buttonIcon: StudioTheme.Constants.textures_medium
-                    tooltip: qsTr("Select preview environment.")
-                    onClicked: envMenu.popup()
-                }
-
-                HelperWidgets.AbstractButton {
-                    style: root.buttonStyle
-                    buttonIcon: StudioTheme.Constants.cube_medium
-                    tooltip: qsTr("Select preview model.")
-                    onClicked: modelMenu.popup()
-                }
-            }
-        }
     }
 
     HelperWidgets.Section {
+        id: nameSection
+
         // Section with hidden header is used so properties are aligned with the other sections' properties
         hideHeader: true
-        width: parent.width
+        SplitView.fillWidth: true
+        SplitView.preferredHeight: implicitHeight
+        SplitView.maximumHeight: implicitHeight
+        bottomPadding: StudioTheme.Values.sectionPadding * 2
         collapsible: false
 
         HelperWidgets.SectionLayout {
@@ -205,7 +61,7 @@ Column {
                     showExtendedFunctionButton: false
 
                     // allow only alphanumeric characters, underscores, no space at start, and 1 space between words
-                    validator: HelperWidgets.RegExpValidator { regExp: /^(\w+\s)*\w+$/ }
+                    validator: RegularExpressionValidator { regularExpression: /^(\w+\s)*\w+$/ }
                 }
 
                 HelperWidgets.ExpandingSpacer {}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/EffectsSection.qml

@@ -75,6 +75,8 @@ Section {
                     root.invalidate()
                 }
             }
+
+            ExpandingSpacer {}
         }
 
         PropertyLabel {
@@ -89,7 +91,7 @@ Section {
             CheckBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                + StudioTheme.Values.actionIndicatorWidth
-                backendValue: root.effectNodeWrapper.properties.visible
+                backendValue: root.effectNodeWrapper?.properties.visible
             }
 
             ExpandingSpacer {}
@@ -204,7 +206,7 @@ Section {
                     CheckBox {
                         implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                        + StudioTheme.Values.actionIndicatorWidth
-                        backendValue: root.effectNodeWrapper.properties.layerBlurVisible
+                        backendValue: root.effectNodeWrapper?.properties.layerBlurVisible
                     }
 
                     ExpandingSpacer {}
@@ -219,7 +221,7 @@ Section {
                     SpinBox {
                         implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                        + StudioTheme.Values.actionIndicatorWidth
-                        backendValue: root.effectNodeWrapper.properties.layerBlurRadius
+                        backendValue: root.effectNodeWrapper?.properties.layerBlurRadius
                         minimumValue: 0
                         maximumValue: 250
                     }
@@ -250,7 +252,7 @@ Section {
                     CheckBox {
                         implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                        + StudioTheme.Values.actionIndicatorWidth
-                        backendValue: root.effectNodeWrapper.properties.backgroundBlurVisible
+                        backendValue: root.effectNodeWrapper?.properties.backgroundBlurVisible
                     }
 
                     ExpandingSpacer {}
@@ -267,7 +269,7 @@ Section {
                     SpinBox {
                         implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                        + StudioTheme.Values.actionIndicatorWidth
-                        backendValue: root.effectNodeWrapper.properties.backgroundBlurRadius
+                        backendValue: root.effectNodeWrapper?.properties.backgroundBlurRadius
                         minimumValue: 0
                         maximumValue: 250
                     }
@@ -288,7 +290,7 @@ Section {
                                        + StudioTheme.Values.actionIndicatorWidth
                         width: implicitWidth
                         typeFilter: "QtQuick.Item"
-                        backendValue: root.effectNodeWrapper.properties.backgroundLayer
+                        backendValue: root.effectNodeWrapper?.properties.backgroundLayer
                     }
 
                     ExpandingSpacer {}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Layouts/ColumnLayoutSpecifics.qml

@@ -7,6 +7,7 @@ import HelperWidgets 2.0
 import StudioTheme 1.0 as StudioTheme
 
 Section {
+    id: root
     anchors.left: parent.left
     anchors.right: parent.right
     caption: qsTr("Column Layout")
@@ -50,9 +51,10 @@ Section {
         }
 
         PropertyLabel {
-            text: qsTr("Uniform cell size")
+            text: qsTr("Uniform cell sizes")
             tooltip: qsTr("Toggles all cells to have a uniform size.")
             visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+            blockedByTemplate: !backendValues.uniformCellSizes.isAvailable
         }
 
         SecondColumnLayout {
@@ -61,6 +63,7 @@ Section {
                                + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.uniformCellSizes
                 visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+                enabled: backendValues.uniformCellSizes.isAvailable
             }
 
             ExpandingSpacer {}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Layouts/GridLayoutSpecifics.qml

@@ -7,6 +7,7 @@ import HelperWidgets 2.0
 import StudioTheme 1.0 as StudioTheme
 
 Section {
+    id: root
     anchors.left: parent.left
     anchors.right: parent.right
     caption: qsTr("Grid Layout")
@@ -131,6 +132,8 @@ Section {
             text: qsTr("Uniform cell sizes")
             tooltip: qsTr("Toggles all cells to have a uniform height or width.")
             visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+            blockedByTemplate: !(backendValues.uniformCellHeights.isAvailable
+                                 && backendValues.uniformCellWidths.isAvailable)
         }
 
         SecondColumnLayout {
@@ -140,6 +143,7 @@ Section {
                                + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.uniformCellHeights
                 visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+                enabled: backendValues.uniformCellHeights.isAvailable
             }
 
             Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
@@ -150,6 +154,7 @@ Section {
                                + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.uniformCellWidths
                 visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+                enabled: backendValues.uniformCellWidths.isAvailable
             }
 
             ExpandingSpacer {}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Layouts/RowLayoutSpecifics.qml

@@ -7,6 +7,7 @@ import HelperWidgets 2.0
 import StudioTheme 1.0 as StudioTheme
 
 Section {
+    id: root
     anchors.left: parent.left
     anchors.right: parent.right
     caption: qsTr("Row Layout")
@@ -50,16 +51,19 @@ Section {
         }
 
         PropertyLabel {
-            text: qsTr("Uniform cell size")
+            text: qsTr("Uniform cell sizes")
             tooltip: qsTr("Toggles all cells to have a uniform size.")
             visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+            blockedByTemplate: !backendValues.uniformCellSizes.isAvailable
         }
+
         SecondColumnLayout {
             CheckBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.uniformCellSizes
                 visible: majorQtQuickVersion === 6 && minorQtQuickVersion >= 6
+                enabled: backendValues.uniformCellSizes.isAvailable
             }
 
             ExpandingSpacer {}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml

@@ -444,7 +444,7 @@ Column {
 
             Connections {
                 target: root
-                onAboutToBeShown: {
+                function onAboutToBeShown() {
                     colorPicker.aboutToBeShown()
                 }
             }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DynamicPropertiesSection.qml

@@ -23,13 +23,13 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import HelperWidgets 2.0
+import HelperWidgets
-import QtQuick.Templates 2.15 as T
+import QtQuick.Templates as T
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
-import StudioTheme 1.0 as StudioTheme
+import StudioTheme as StudioTheme
 
 Section {
     id: root
@@ -682,7 +682,7 @@ Section {
                     IconIndicator {
                         id: closeIndicator
                         icon: StudioTheme.Constants.colorPopupClose
-                        pixelSize: StudioTheme.Values.myIconFontSize * 1.4
+                        pixelSize: StudioTheme.Values.myIconFontSize
                         onClicked: cePopup.close()
                         Layout.alignment: Qt.AlignRight
                     }
@@ -699,7 +699,12 @@ Section {
                         translationIndicatorVisible: false
                         width: cePopup.itemWidth
                         rightPadding: 8
-                        validator: RegExpValidator { regExp: /[a-z]+[0-9A-Za-z]*/ }
+                        validator: PropertyNameValidator {}
+
+                        Binding {
+                            when: !textField.acceptableInput && textField.text !== ""
+                            textField.color: StudioTheme.Values.themeRedLight
+                        }
                     }
                 }
                 RowLayout {
@@ -729,6 +734,7 @@ Section {
                         buttonIcon: qsTr("Add Property")
                         iconFont: StudioTheme.Constants.font
                         width: cePopup.width / 3
+                        enabled: textField.acceptableInput
 
                         onClicked: {
                             root.propertiesModel.createProperty(textField.text, comboBox.currentText)

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml

@@ -118,7 +118,10 @@ Item {
                 onHoverChanged: root.delegateHover = delegateComboBox.hover
             }
 
-            Spacer { implicitWidth: extraButton.visible ? 5 : StudioTheme.Values.twoControlColumnGap }
+            Spacer {
+                implicitWidth: extraButton.visible ? StudioTheme.Values.controlLabelGap
+                                                   : StudioTheme.Values.twoControlColumnGap
+            }
 
             IconIndicator {
                 id: extraButton

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ItemFilterComboBox.qml

@@ -11,27 +11,32 @@ HelperWidgets.ComboBox {
 
     manualMapping: true
     editable: true
-    model: comboBox.addDefaultItem(itemFilterModel.itemModel)
+    model: optionsList.model
+    valueRole: "id"
+    textRole: (comboBox.typeFilter === "QtQuick3D.Texture") ? "idAndName" : "id"
 
     validator: RegularExpressionValidator { regularExpression: /(^$|^[a-z_]\w*)/ }
 
     HelperWidgets.ItemFilterModel {
         id: itemFilterModel
         modelNodeBackendProperty: modelNodeBackend
+        onModelReset: optionsList.updateModel()
+        onRowsInserted: optionsList.updateModel()
+        onRowsRemoved: optionsList.updateModel()
     }
 
     property string defaultItem: qsTr("[None]")
-    property string textValue: comboBox.backendValue?.expression ?? ""
+    property string expressionValue: comboBox.backendValue?.expression ?? ""
     property bool block: false
     property bool dirty: true
 
-    onTextValueChanged: {
+    onExpressionValueChanged: {
         if (comboBox.block)
             return
 
-        comboBox.setCurrentText(comboBox.textValue)
+        comboBox.updateText()
     }
-    onModelChanged: comboBox.setCurrentText(comboBox.textValue)
+    onModelChanged: comboBox.updateText()
     onEditTextChanged: comboBox.dirty = true
     onFocusChanged: {
         if (comboBox.dirty)
@@ -41,7 +46,18 @@ HelperWidgets.ComboBox {
     onCompressedActivated: function(index, reason) { comboBox.handleActivate(index) }
     onAccepted: comboBox.setCurrentText(comboBox.editText)
 
-    Component.onCompleted: comboBox.setCurrentText(comboBox.textValue)
+    Component.onCompleted: comboBox.updateText()
+
+    function updateText() {
+        let idx = itemFilterModel.indexFromId(comboBox.expressionValue)
+        if (idx < 0) {
+            comboBox.setCurrentText(comboBox.defaultItem)
+            return
+        }
+
+        let textValue = itemFilterModel.modelItemData(idx)[comboBox.textRole]
+        comboBox.setCurrentText(textValue)
+    }
 
     function handleActivate(index) {
         if (!comboBox.__isCompleted || comboBox.backendValue === undefined)
@@ -69,18 +85,41 @@ HelperWidgets.ComboBox {
                 comboBox.editText = comboBox.defaultItem
         }
 
-        if (comboBox.currentIndex === 0) {
+        if (comboBox.currentIndex < 1) {
             comboBox.backendValue.resetValue()
         } else {
-            if (comboBox.backendValue.expression !== comboBox.editText)
+            let valueData = (comboBox.valueRole === "")
-                comboBox.backendValue.expression = comboBox.editText
+                                ? comboBox.editText
+                                : itemFilterModel.modelItemData(comboBox.currentIndex - 1)[comboBox.valueRole]
+
+            if (comboBox.backendValue.expression !== valueData)
+                comboBox.backendValue.expression = valueData
         }
         comboBox.dirty = false
     }
 
-    function addDefaultItem(arr) {
+    Repeater {
-        var copy = arr.slice()
+        id: optionsList
-        copy.unshift(comboBox.defaultItem)
+
-        return copy
+        property var localModel: []
+
+        function updateModel() {
+            optionsList.localModel = []
+
+            if (comboBox.textRole !== "" && comboBox.valueRole !== "") {
+                let defaultItem = {}
+                defaultItem[comboBox.textRole] = comboBox.defaultItem
+                defaultItem[comboBox.valueRole] = ""
+                optionsList.localModel.push(defaultItem)
+            } else {
+                optionsList.localModel.push(comboBox.defaultItem)
+            }
+
+            let rows = itemFilterModel.rowCount()
+            for (let i = 0; i < rows; ++i)
+                optionsList.localModel.push(itemFilterModel.modelItemData(i))
+
+            optionsList.model = optionsList.localModel // trigger on change handler
+        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml

@@ -57,6 +57,7 @@ Rectangle {
             bottom: itemPane.bottom
             left: itemPane.left
             right: itemPane.right
+            topMargin: dockedHeaderLoader.active ? 2 : 0
         }
 
         interactive: !Controller.contextMenuOpened
@@ -74,6 +75,7 @@ Rectangle {
                 active: !itemPane.headerDocked
                 sourceComponent: itemPane.headerComponent
 
+                visible: active
                 HeaderBackground{}
             }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TextInputSection.qml

@@ -14,30 +14,42 @@ Section {
 
     property bool isTextInput: false
 
+    function isBackendValueAvailable(name) {
+        if (backendValues[name] !== undefined)
+            return backendValues[name].isAvailable
+
+        return false
+    }
+
     SectionLayout {
         PropertyLabel {
             text: qsTr("Selection color")
             tooltip: qsTr("Sets the background color of selected text.")
+            blockedByTemplate: !root.isBackendValueAvailable("selectionColor")
         }
 
         ColorEditor {
             backendValue: backendValues.selectionColor
             supportGradient: false
+            enabled: root.isBackendValueAvailable("selectionColor")
         }
 
         PropertyLabel {
             text: qsTr("Selected text color")
             tooltip: qsTr("Sets the color of selected text.")
+            blockedByTemplate: !root.isBackendValueAvailable("selectedTextColor")
         }
 
         ColorEditor {
             backendValue: backendValues.selectedTextColor
             supportGradient: false
+            enabled: root.isBackendValueAvailable("selectedTextColor")
         }
 
         PropertyLabel {
             text: qsTr("Selection mode")
             tooltip: qsTr("Sets the way text is selected with the mouse.")
+            blockedByTemplate: !root.isBackendValueAvailable("mouseSelectionMode")
         }
 
         SecondColumnLayout {
@@ -48,6 +60,7 @@ Section {
                 backendValue: backendValues.mouseSelectionMode
                 scope: root.isTextInput ? "TextInput" : "TextEdit"
                 model: ["SelectCharacters", "SelectWords"]
+                enabled: root.isBackendValueAvailable("mouseSelectionMode")
             }
 
             ExpandingSpacer {}
@@ -57,6 +70,7 @@ Section {
             visible: root.isTextInput
             text: qsTr("Input mask")
             tooltip: qsTr("Sets the allowed characters.")
+            blockedByTemplate: !root.isBackendValueAvailable("inputMask")
         }
 
         SecondColumnLayout {
@@ -68,6 +82,7 @@ Section {
                                + StudioTheme.Values.actionIndicatorWidth
                 width: implicitWidth
                 showTranslateCheckBox: false
+                enabled: root.isBackendValueAvailable("inputMask")
             }
 
             ExpandingSpacer {}
@@ -77,6 +92,7 @@ Section {
             visible: root.isTextInput
             text: qsTr("Echo mode")
             tooltip: qsTr("Sets the visibility mode.")
+            blockedByTemplate: !root.isBackendValueAvailable("echoMode")
         }
 
         SecondColumnLayout {
@@ -89,6 +105,7 @@ Section {
                 backendValue: backendValues.echoMode
                 scope: "TextInput"
                 model: ["Normal", "Password", "PasswordEchoOnEdit", "NoEcho"]
+                enabled: root.isBackendValueAvailable("echoMode")
             }
 
             ExpandingSpacer {}
@@ -98,6 +115,7 @@ Section {
             visible: root.isTextInput
             text: qsTr("Password character")
             tooltip: qsTr("Sets which character to display when passwords are entered.")
+            blockedByTemplate: !root.isBackendValueAvailable("passwordCharacter")
         }
 
         SecondColumnLayout {
@@ -109,6 +127,7 @@ Section {
                                + StudioTheme.Values.actionIndicatorWidth
                 width: implicitWidth
                 showTranslateCheckBox: false
+                enabled: root.isBackendValueAvailable("passwordCharacter")
             }
 
             ExpandingSpacer {}
@@ -118,6 +137,7 @@ Section {
             visible: !root.isTextInput
             text: qsTr("Tab stop distance")
             tooltip: qsTr("Default distance between tab stops in device units.")
+            blockedByTemplate: !root.isBackendValueAvailable("tabStopDistance")
         }
 
         SecondColumnLayout {
@@ -129,6 +149,7 @@ Section {
                 backendValue: backendValues.tabStopDistance
                 maximumValue: 200
                 minimumValue: 0
+                enabled: root.isBackendValueAvailable("tabStopDistance")
             }
 
             Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
@@ -142,6 +163,7 @@ Section {
             visible: !root.isTextInput
             text: qsTr("Text margin")
             tooltip: qsTr("Margin around the text in the Text Edit in pixels.")
+            blockedByTemplate: !root.isBackendValueAvailable("textMargin")
         }
 
         SecondColumnLayout {
@@ -153,6 +175,7 @@ Section {
                 backendValue: backendValues.textMargin
                 maximumValue: 200
                 minimumValue: -200
+                enabled: root.isBackendValueAvailable("textMargin")
             }
 
             Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
@@ -166,6 +189,7 @@ Section {
             visible: root.isTextInput
             text: qsTr("Maximum length")
             tooltip: qsTr("Sets the maximum length of the text.")
+            blockedByTemplate: !root.isBackendValueAvailable("maximumLength")
         }
 
         SecondColumnLayout {
@@ -177,6 +201,7 @@ Section {
                 backendValue: backendValues.maximumLength
                 minimumValue: 0
                 maximumValue: 32767
+                enabled: root.isBackendValueAvailable("maximumLength")
             }
 
             ExpandingSpacer {}
@@ -184,6 +209,7 @@ Section {
 
         component FlagItem : SecondColumnLayout {
             property alias backendValue: checkBox.backendValue
+
             CheckBox {
                 id: checkBox
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
@@ -197,64 +223,92 @@ Section {
         PropertyLabel {
             text: qsTr("Read only")
             tooltip: qsTr("Toggles if the text allows edits.")
+            blockedByTemplate: !root.isBackendValueAvailable("readOnly")
         }
 
-        FlagItem { backendValue: backendValues.readOnly }
+        FlagItem {
+            backendValue: backendValues.readOnly
+            enabled: root.isBackendValueAvailable("readOnly")
+        }
 
         PropertyLabel {
             text: qsTr("Cursor visible")
             tooltip: qsTr("Toggles if the cursor is visible.")
+            blockedByTemplate: !root.isBackendValueAvailable("cursorVisible")
         }
 
-        FlagItem { backendValue: backendValues.cursorVisible }
+        FlagItem {
+            backendValue: backendValues.cursorVisible
+            enabled: root.isBackendValueAvailable("cursorVisible")
+        }
 
         PropertyLabel {
             text: qsTr("Focus on press")
             tooltip: qsTr("Toggles if the text is focused on mouse click.")
+            blockedByTemplate: !root.isBackendValueAvailable("activeFocusOnPress")
         }
 
-        FlagItem { backendValue: backendValues.activeFocusOnPress }
+        FlagItem {
+            backendValue: backendValues.activeFocusOnPress
+            enabled: root.isBackendValueAvailable("activeFocusOnPress")
+        }
 
         PropertyLabel {
             visible: root.isTextInput
             text: qsTr("Auto scroll")
             tooltip: qsTr("Toggles if the text scrolls when it exceeds its boundary.")
+            blockedByTemplate: !root.isBackendValueAvailable("autoScroll")
         }
 
         FlagItem {
             visible: root.isTextInput
             backendValue: backendValues.autoScroll
+            enabled: root.isBackendValueAvailable("autoScroll")
         }
 
         PropertyLabel {
             text: qsTr("Overwrite mode")
             tooltip: qsTr("Toggles if overwriting text is allowed.")
+            blockedByTemplate: !root.isBackendValueAvailable("overwriteMode")
         }
 
-        FlagItem { backendValue: backendValues.overwriteMode }
+        FlagItem {
+            backendValue: backendValues.overwriteMode
+            enabled: root.isBackendValueAvailable("overwriteMode")
+        }
 
         PropertyLabel {
             text: qsTr("Persistent selection")
             tooltip: qsTr("Toggles if the text should remain selected after moving the focus elsewhere.")
+            blockedByTemplate: !root.isBackendValueAvailable("persistentSelection")
         }
 
-        FlagItem { backendValue: backendValues.persistentSelection }
+        FlagItem {
+            backendValue: backendValues.persistentSelection
+            enabled: root.isBackendValueAvailable("persistentSelection")
+        }
 
         PropertyLabel {
             text: qsTr("Select by mouse")
             tooltip: qsTr("Toggles if the text can be selected with the mouse.")
+            blockedByTemplate: !root.isBackendValueAvailable("selectByMouse")
         }
 
-        FlagItem { backendValue: backendValues.selectByMouse }
+        FlagItem {
+            backendValue: backendValues.selectByMouse
+            enabled: root.isBackendValueAvailable("selectByMouse")
+        }
 
         PropertyLabel {
             visible: !root.isTextInput
             text: qsTr("Select by keyboard")
+            blockedByTemplate: !root.isBackendValueAvailable("selectByKeyboard")
         }
 
         FlagItem {
             visible: !root.isTextInput
             backendValue: backendValues.selectByKeyboard
+            enabled: root.isBackendValueAvailable("selectByKeyboard")
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml

@@ -143,7 +143,7 @@ Row {
 
         property ListModel listModel: ListModel {}
 
-        hasActiveDrag: activeDragSuffix !== "" && root.filter.includes(activeDragSuffix)
+        hasActiveDrag: typeof(activeDragSuffix) !== "undefined" && activeDragSuffix !== "" && root.filter.includes(activeDragSuffix)
         implicitWidth: StudioTheme.Values.singleControlColumnWidth
                         + StudioTheme.Values.actionIndicatorWidth
         width: implicitWidth

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SplitView.qml

@@ -0,0 +1,20 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuick.Controls as QuickControls
+import StudioTheme 1.0 as StudioTheme
+
+QuickControls.SplitView {
+    id: control
+
+    property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
+
+    handle: Rectangle {
+        implicitWidth: control.orientation === Qt.Horizontal ? StudioTheme.Values.splitterThickness : control.width
+        implicitHeight: control.orientation === Qt.Horizontal ? control.height : StudioTheme.Values.splitterThickness
+        color: QuickControls.SplitHandle.pressed ? control.style.slider.handleInteraction
+            : (QuickControls.SplitHandle.hovered ? control.style.slider.handleHover
+                                     : "transparent")
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml

@@ -47,7 +47,6 @@ T.TextField {
     readOnly: false
     selectByMouse: true
     persistentSelection: contextMenu.visible || control.focus
-    clip: true
 
     width: control.style.controlSize.width
     height: control.style.controlSize.height

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir

@@ -51,6 +51,7 @@ SortFilterModel 1.0 SortFilterModel.qml
 SpinBox 1.0 SpinBox.qml
 SpinBoxIndicator 1.0 SpinBoxIndicator.qml
 SpinBoxInput 1.0 SpinBoxInput.qml
+SplitView 1.0 SplitView.qml
 Switch 1.0 Switch.qml
 TabBar 1.0 TabBar.qml
 TabButton 1.0 TabButton.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

@@ -126,6 +126,7 @@ QtObject {
 
     property real controlGap: 5 // TODO different name
     property real splitterMargin: 5
+    property real splitterThickness: 6
     property real twoControlColumnGap: values.controlLabelGap
                                        + values.controlLabelWidth
                                        + values.controlGap
@@ -172,7 +173,7 @@ QtObject {
 
     property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth
                                                           + values.twoControlColumnGap)
-                                                    + values.linkControlWidth // there could be an issue here with the new style
+                                                     + values.iconAreaWidth // there could be an issue here with the new style
 
     property real controlColumnWidth: values.controlColumnWithoutControlsWidth
                                       + 2 * values.twoControlColumnWidth
@@ -193,18 +194,21 @@ QtObject {
     property real dialogScreenMargin: Math.round(160 * values.scaleFactor)
 
     function responsiveResize(width) {
+        // Subtract all layout gaps/spaces
         var tmpWidth = width - values.sectionColumnSpacing
                        - values.sectionLeftPadding - values.sectionLayoutRightPadding
         var labelColumnWidth = Math.round(tmpWidth * values.columnFactor)
         labelColumnWidth = Math.max(Math.min(values.propertyLabelWidthMax, labelColumnWidth),
                                     values.propertyLabelWidthMin)
-
+        // Rest width when label width is substracted
         var controlColumnWidth = tmpWidth - labelColumnWidth
-        var controlWidth = Math.round((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5)
+        var controlWidth = Math.floor((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5)
         controlWidth = Math.max(Math.min(values.twoControlColumnWidthMax, controlWidth),
                                 values.twoControlColumnWidthMin)
-
+        // When both label and controls are at max width, calculate the remaining space
-        values.propertyLabelWidth = labelColumnWidth
+        var rest = tmpWidth - (controlWidth * 2 + values.controlColumnWithoutControlsWidth + labelColumnWidth)
+        // Add the remaining space to the label width in order to improve readability of long labels
+        values.propertyLabelWidth = labelColumnWidth + rest
         values.twoControlColumnWidth = controlWidth
     }
 

share/qtcreator/qmldesigner/qt4mcu/metadata.qml

@@ -5,7 +5,7 @@
 Metadata {
     id: metadataFile
 
-    defaultVersion: v27
+    defaultVersion: v28
 
     VersionData {
         id: v14
@@ -78,4 +78,10 @@ Metadata {
         name: "Qt for MCUs 2.7"
         path: "qul-27.qml"
     }
+
+    VersionData {
+        id: v28
+        name: "Qt for MCUs 2.8"
+        path: "qul-28.qml"
+    }
 }

share/qtcreator/qmldesigner/qt4mcu/qul-28.qml

@@ -0,0 +1,264 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+// new import: QtQuick.Layout
+// new types: TextInput, Layouts
+
+VersionData {
+    name: "Qt for MCUs 2.8"
+
+    bannedItems: [
+        "QtQuick.AnimatedImage",
+        "QtQuick.Flow",
+        "QtQuick.FocusScope",
+        "QtQuick.Grid",
+        "QtQuick.GridView",
+        "QtQuick.PathView",
+        "QtQuick.TextEdit",
+        "QtQuick.Controls",
+        "QtQuick.Controls.BusyIndicator",
+        "QtQuick.Controls.ButtonGroup",
+        "QtQuick.Controls.CheckDelegate",
+        "QtQuick.Controls.ComboBox",
+        "QtQuick.Controls.Container",
+        "QtQuick.Controls.DelayButton",
+        "QtQuick.Controls.Frame",
+        "QtQuick.Controls.GroupBox",
+        "QtQuick.Controls.ItemDelegate",
+        "QtQuick.Controls.Label",
+        "QtQuick.Controls.Page",
+        "QtQuick.Controls.PageIndicator",
+        "QtQuick.Controls.Pane",
+        "QtQuick.Controls.RadioDelegate",
+        "QtQuick.Controls.RangeSlider",
+        "QtQuick.Controls.RoundButton",
+        "QtQuick.Controls.ScrollView",
+        "QtQuick.Controls.SpinBox",
+        "QtQuick.Controls.StackView",
+        "QtQuick.Controls.SwipeDelegate",
+        "QtQuick.Controls.SwitchDelegate",
+        "QtQuick.Controls.TabBar",
+        "QtQuick.Controls.TabButton",
+        "QtQuick.Controls.TextArea",
+        "QtQuick.Controls.TextField",
+        "QtQuick.Controls.ToolBar",
+        "QtQuick.Controls.ToolButton",
+        "QtQuick.Controls.ToolSeparator",
+        "QtQuick.Controls.Tumbler",
+        "QtQuick.Layouts.LayoutItemProxy",
+        "QtQuick.Layouts.StackLayout",
+        "QtQuick.Shapes.ConicalGradient",
+        "QtQuick.Shapes.RadialGradient"
+    ]
+
+    allowedImports: [
+        "QtQuick",
+        "QtQuick.Controls",
+        "QtQuick.Layouts",
+        "QtQuick.Shapes",
+        "QtQuick.Timeline",
+        "QtQuickUltralite.Extras",
+        "QtQuickUltralite.Layers",
+        "QtQuickUltralite.Profiling",
+        "QtQuickUltralite.Studio.Components"
+    ]
+
+    bannedImports: [
+        "FlowView",
+        "SimulinkConnector"
+    ]
+
+    //ComplexProperty is not a type, it's just a way to handle bigger props
+    ComplexProperty {
+        prefix: "font"
+        bannedProperties: ["wordSpacing", "letterSpacing", "hintingPreference",
+            "kerning", "preferShaping",  "capitalization",
+            "strikeout", "underline", "styleName"]
+    }
+
+    QtQml.Timer {
+        bannedProperties: ["triggeredOnStart"]
+    }
+
+    QtQuick.Item {
+        bannedProperties: ["layer", "opacity", "smooth", "antialiasing",
+            "baselineOffset", "focus", "activeFocusOnTab",
+            "rotation", "scale", "transformOrigin"]
+    }
+
+    QtQuick.Rectangle {
+        bannedProperties: ["border"]
+    }
+
+    QtQuick.Flickable {
+        bannedProperties: ["boundsMovement", "flickDeceleration",
+            "leftMargin", "rightMargin", "bottomMargin", "topMargin",
+            "originX", "originY", "pixelAligned", "pressDelay", "synchronousDrag"]
+    }
+
+    QtQuick.MouseArea {
+        bannedProperties: ["propagateComposedEvents", "preventStealing", "cursorShape",
+            "scrollGestureEnabled", "drag", "acceptedButtons", "hoverEnabled"]
+    }
+
+    QtQuick.Image {
+        allowChildren: false
+        allowedProperties: ["rotation", "scale", "transformOrigin"]
+        bannedProperties: ["mirror", "mipmap",  "cache", "autoTransform", "asynchronous",
+            "sourceSize", "smooth"]
+    }
+
+    QtQuick.BorderImage {
+        bannedProperties: ["asynchronous", "cache", "currentFrame", "frameCount",
+            "horizontalTileMode", "mirror", "progress", "smooth", "sourceSize",
+            "status", "verticalTileMode"]
+    }
+
+    QtQuick.Text {
+        allowChildren: false
+        allowedProperties: ["rotation", "scale", "transformOrigin"]
+        bannedProperties: ["lineHeight", "lineHeightMode", "style",
+            "styleColor", "minimumPointSize", "minimumPixelSize",
+            "fontSizeMode", "renderType", "renderTypeQuality", "maximumLineCount"]
+    }
+
+    QtQuick.TextInput {
+        bannedProperties: ["acceptableInput", "autoScroll", "bottomPadding", "canPaste",
+            "canRedo", "canUndo", "contentHeight", "contentWidth", "cursorDelegate",
+            "cursorPosition", "cursorRectangle", "cursorVisible", "displayText", "echoMode",
+            "effectiveHorizontalAlignment", "horizontalAlignment", "inputMask",
+            "inputMethodComposing", "leftPadding", "length", "maximumLength",
+            "mouseSelectionMode", "overwriteMode", "padding", "passwordCharacter",
+            "passwordMaskDelay", "persistentSelection", "preeditText", "readOnly",
+            "renderType", "rightPadding", "selectByMouse", "selectedText",
+            "selectedTextColor", "selectionColor", "selectionEnd", "selectionStart",
+            "topPadding", "validator", "verticalAlignment", "wrapMode"]
+    }
+
+    QtQuick.Loader {
+        bannedProperties: ["asynchronous", "progress", "status"]
+    }
+
+    //Padding is not an actual item, but rather set of properties in Text
+    Padding {
+        bannedProperties: ["bottomPadding", "topPadding", "leftPadding", "rightPadding"]
+    }
+
+    QtQuick.Column {
+        bannedProperties: ["bottomPadding", "leftPadding", "rightPadding", "topPadding"]
+    }
+
+    QtQuick.Row {
+        bannedProperties: ["bottomPadding", "leftPadding", "rightPadding", "topPadding",
+        "effectiveLayoutDirection", "layoutDirection"]
+    }
+
+    QtQuick.ListView {
+        bannedProperties: ["cacheBuffer", "highlightRangeMode", "highlightMoveDuration",
+            "highlightResizeDuration", "preferredHighlightBegin", "layoutDirection",
+            "preferredHighlightEnd", "highlightFollowsCurrentItem", "keyNavigationWraps",
+            "snapMode", "highlightMoveVelocity", "highlightResizeVelocity"]
+    }
+
+    QtQuick.Animation {
+        bannedProperties: ["paused"]
+    }
+
+    QtQuick.AnimatedSprite {
+        allowedProperties: ["currentFrame", "frameCount", "paused"]
+        bannedProperties: ["finishBehavior", "frameRate", "frameSync",
+            "frameX", "frameY", "interpolate", "reverse"]
+    }
+
+    //Quick Controls2 Items and properties:
+
+    QtQuick.Controls.Control {
+        bannedProperties: ["focusPolicy", "hoverEnabled", "wheelEnabled"]
+    }
+
+    QtQuick.Controls.AbstractButton {
+        bannedProperties: ["display", "autoExclusive", "icon"]
+    }
+
+    QtQuick.Controls.ProgressBar {
+        bannedProperties: ["indeterminate"]
+    }
+
+    QtQuick.Controls.Slider {
+        bannedProperties: ["live", "snapMode", "touchDragThreshold"]
+    }
+
+    ComplexProperty {
+        prefix: "Layout"
+        bannedProperties: ["horizontalStretchFactor", "verticalStretchFactor"]
+    }
+
+    QtQuick.Layouts.Layout {
+        bannedProperties: ["horizontalStretchFactor", "verticalStretchFactor"]
+    }
+
+    QtQuick.Layouts.ColumnLayout {
+        allowedProperties: ["layoutDirection"]
+        bannedProperties: ["uniformCellSizes"]
+    }
+
+    QtQuick.Layouts.RowLayout {
+        allowedProperties: ["layoutDirection"]
+        bannedProperties: ["uniformCellSizes"]
+    }
+
+    QtQuick.Layouts.GridLayout {
+        allowedProperties: ["layoutDirection"]
+        bannedProperties: ["uniformCellHeights", "uniformCellWidths"]
+    }
+
+    //Path and Shapes related:
+
+    QtQuick.Path {
+        bannedProperties: ["scale", "pathElements"]
+    }
+
+    QtQuick.PathArc {
+        bannedProperties: ["relativeX", "relativeY"]
+    }
+
+    QtQuick.PathLine {
+        bannedProperties: ["relativeX", "relativeY"]
+    }
+
+    QtQuick.PathMove {
+        bannedProperties: ["relativeX", "relativeY"]
+    }
+
+    QtQuick.PathQuad {
+        bannedProperties: ["relativeX", "relativeY",
+            "relativeControlX", "relativeControlY"]
+    }
+
+    QtQuick.PathCubic {
+        bannedProperties: ["relativeX", "relativeY",
+            "relativeControl1X", "relativeControl1Y",
+            "relativeControl2X", "relativeControl2Y"]
+    }
+
+    QtQuick.PathElement {
+        //nothing
+    }
+
+    QtQuick.PathSvg {
+        //nothing
+    }
+
+    QtQuick.Shapes.Shape {
+        bannedProperties: ["asynchronous", "containsMode", "data",
+            "renderType", "status", "vendorExtensionsEnabled"]
+    }
+
+    QtQuick.Shapes.ShapePath {
+        bannedProperties: ["dashOffset", "dashPattern", "strokeStyle"]
+    }
+
+    QtQuickUltralite.Extras.ItemBuffer {
+        allowedProperties: ["rotation", "scale", "transformOrigin"]
+    }
+}