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

Change-Id: I907e067abba640d27313ce03bc41326d3ed750f0
This commit is contained in:
Tim Jenssen
2024-08-06 19:04:41 +02:00
603 changed files with 41253 additions and 6404 deletions

View File

@@ -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)
option(WITH_QMLDESIGNER "Build QmlDesigner" ${ENV_QTC_WITH_QMLDESIGNER})
else()
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} "")
# depending on Qt version and compiler version enable or disable Qml Designer
# can be overwritten by variable WITH_QMLDESIGNER / QTC_WITH_QMLDESIGNER (env)
configure_qml_designer(${Qt6_VERSION})
# hack for Qbs which still supports Qt5 and Qt6
if (TARGET Qt6::Core5CompatPrivate)

View File

@@ -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

View File

@@ -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)

View File

@@ -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 "")

View File

@@ -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()

View File

@@ -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")

View File

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

View File

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 482 B

View File

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 529 B

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 735 B

After

Width:  |  Height:  |  Size: 735 B

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -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"

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

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

View File

@@ -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
*/

View File

@@ -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>

View File

@@ -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.
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@@ -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 \l{Organizing Components}
\endlist
\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}
\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
specifying the value of a property. Binding allows a property value to be
expressed as a JavaScript expression that defines the value relative to
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.
Using \e {Property Binding}, you can connect the properties of components. So, change in
one can affect another. Once the binding is set, 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
JavaScript expression. To set JavaScript expressions as values of properties
in the \l Properties view:
To set \e {Property Binding} to a component property:
\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
. To remove bindings, select \uicontrol Actions > \uicontrol Reset.
\inlineimage icons/action-icon-binding.png.
To remove bindings, select \uicontrol Actions > \uicontrol Reset.
You can set bindings also on the \uicontrol Bindings tab in the
\l Connections view.
For more information, see \l {Adding Bindings Between Properties}.
See \l {Adding Bindings Between Properties} to learn how to set bindings using
the \uicontrol Bindings tab in the \l Connections view.
For more information on the JavaScript environment provided, see
\l{Integrating QML and JavaScript}.
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
\note For better performance, set anchors and margins for binding
components. For example, instead of setting \c {parent.width} for a
component, 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
components. To set the anchors of a component, click the anchor buttons.
You can combine the top/bottom, left/right, and horizontal/vertical anchors
to anchor components in the corners of the parent component or center them
horizontally or vertically within the parent component.
To set anchors and margins for components:
\list 1
\li Go to \l Properties > \uicontrol Layout > \uicontrol Anchors.
\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
you use the anchor buttons. Select a sibling of the component in the
\uicontrol Target field to anchor to it instead.
or direct parent. By default, a component is anchored to its parent when
you use the anchor buttons. To anchor to a sibling of the component, select
the sibling component as \uicontrol Target.
Arbitrary anchoring is not supported. For example, you cannot specify:
\c {anchor.left: parent.right}. You have to specify:
Arbitrary anchoring is not supported. For example, don't select:
\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
to sibling components are specified to the opposite side:
the parent component are always set to the same side. However, anchors
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
right edge of the sibling on its left side, \e rectangle, while its top
In the following image, the left edge of \e rectangle2 is anchored to the
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
anchors.left: rectangle.right
id: rectangle2
width: 84
height: 84
color: "#967de7"
anchors.left: rectangle1.right
anchors.top: parent.top
anchors.leftMargin: 5
anchors.topMargin: 30
anchors.leftMargin: 51
anchors.topMargin: 56
}
\endqml
Margins specify the amount of empty space to leave to the outside of a
component. Margins only have meaning for anchors. They do not take any
To define the empty space outside of a component, set the
\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
either allow \QDS to distribute components or spacing using the closest
without ending up with half pixels, you receive a notification.
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
components in pixels. You can disable the distribution of spacing in
pixels by clicking the \inlineimage icons/distribute-origin-none.png
In the \uicontrol {Pixel spacing} field, set the space between
components in pixels. To disable the distribution of spacing in
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,
\uicontrol Flow, or \uicontrol Grid, select the components in
the \l {2D} view, and then select \uicontrol Position in
the context menu.
To position several components in a
\uicontrol Column \inlineimage column-positioner-icon-16px.png,
\uicontrol Row \inlineimage row-positioner-icon-16px.png,
\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
components that they contain in the \uicontrol Spacing field.
For all positioners, set the spacing between the child
components in the \uicontrol Spacing field.
In addition, you can specify the vertical and horizontal padding between
content and the left, right, top, and bottom edges of components as values
of the fields in the \l Padding section.
In addition, set the vertical and horizontal padding between
content and the left, right, top, and bottom edges of components
in the \l Padding section.
\section3 Row and Flow Positioners
A \uicontrol Row positions its child components along a single row. It can
be used as a convenient way to horizontally position a series of components
A \uicontrol Row positions its child components along a single row. It is
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
to specify its size in respect to its non-layout parent component. However,
Use anchors or the width and height properties of the layout itself
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
\uicontrol {Stack Layout}, select the components in the \l {2D} view,
and then select \uicontrol Layout in the context menu.
Follow the process to put components in the \uicontrol {Grid Layout}.
\list 1
\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
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}.
\endlist
\section3 Layout Properties
A \uicontrol {Grid Layout} component provides a way of dynamically
arranging components in a grid. If the grid layout is resized, all
its child components are rearranged. If you want a layout with just
one row or one column, use the \uicontrol {Row Layout} or
\uicontrol {Column Layout} component.
The child components of row and column layout components are automatically
positioned either horizontally from left to right as rows or vertically from
top to bottom as columns. The number of the child components determines the
width of the row or the height of the column. You can specify the spacing
between the child components in the \uicontrol Spacing field.
The child components of grid layout components are arranged according to the
\uicontrol Flow property. When the direction of a flow is set to
\uicontrol LeftToRight, child components are positioned next to to each
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.
To make the components adept the width and height within the grid, follow these steps:
\list 1
\li Select a \uicontrol Rectangle component in the \l {2D} view
and go to \uicontrol Layout in the \l {Properties} view.
\li In the \uicontrol {Fill layout}, select both the \uicontrol Width and
\uicontrol Height checkboxes.
\image qtquick-layout-grid-layout-properties.webp "Layout properties for the component"
\note Manipulate the \uicontrol {Row span} and the \uicontrol {Column span}
to allow the components to take more row and column spaces within the
\uicontrol {Grid Layout}.
\li Repeat the previous steps for all the \uicontrol Rectangle components.
\li Select \uicontrol {Grid Layout} in the \uicontrol Navigator view.
\li Go to \uicontrol {Geometry-2D} in the \uicontrol Properties view. In
\uicontrol Size, increase the \uicontrol Width and \uicontrol Height.
\li All the \uicontrol Rectangle components follow the change accordingly.
\image qtquick-layout-in-grid-enlarged.webp "Components follow the change in grid size"
\endlist
\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
\inlineimage icons/plus.png
button next to the component name in the \l {2D} view.
To move between components, select the \inlineimage icons/prev.png
To use \uicontrol {Stack Layout}:
\list 1
\li Drag the \uicontrol {Stack Layout} component to the \uicontrol 2D view
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
\uicontrol {Stack Layout} in \l Navigator to access the context menu, and
select \uicontrol {Stacked Container} > \uicontrol {Add Tab Bar}.
\endlist
To raise or lower the stacking order of a component, select
\uicontrol {Stacked Container} > \uicontrol {Increase Index} or
\uicontrol {Decrease Index}.
Follow the example below to understand how the \uicontrol {Stack Layout} works:
\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
components in UIs. They are available in \uicontrol Components
> \uicontrol {Qt Quick Layouts}.
\image studio-stack-layout-components.webp "Components in the Stack Layout"
\table
\header
\li Icon
\li Name
\li Purpose
\row
\li \inlineimage column-layouts-icon-16px.png
\li \l{ColumnLayout}{Column Layout}
\li Provides a grid layout with only one column.
\row
\li\inlineimage row-layouts-icon-16px.png
\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
\li Select a rectangle component and go to the \uicontrol Properties view > Rectangle >
\uicontrol {Fill color}, and change it to "#ff0000".
\li For the second rectangle, follow the previous process and change the
\uicontrol {Fill color} to "0000ff".
\li For the third rectangle, follow the previous process and change the
\uicontrol {Fill color} to "00ff00".
\li Drag a \uicontrol Slider component from the \uicontrol Components view to the
\uicontrol 2D view.
\li Select the \uicontrol Slider component and go to the \uicontrol Properties view
> \uicontrol Slider. Set the \uicontrol Value to "0", \uicontrol From to "0",
\uicontrol To to "2", and \uicontrol {Step size} to "1".
\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}.
*/

View File

@@ -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
*/

View File

@@ -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

View File

@@ -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
compatible.
of the project, as described in \l {Overriding the Preview Tool},
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
\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}.
\image studio-project-files.webp "Qt Design Studio project files"
By default, this is the main file in the project, but you can
change that in the .qmlproject file. While the custom component
is a good starting point for new users, you don't have to use it.
Specifically, if you export and import designs using \QB, your main
file is most likely called something else. For more information,
see \l {Exporting from Design Tools}.
\li \e CMakeLists.txt project configuration file allowing you to
share your project as a fully working C++ application with
developers.
\li qtquickcontrols2.conf file specifies the preferred style and some
style-specific arguments.
\li \e fonts folder contains font files that you have added in
\uicontrol Assets.
\li \e imports folder contains a \e {Constants.qml} file that specifies
a font loader for the Arial font and the screen resolution. The size
of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should
\table
\header
\li File/Folder
\li Description
\row
\li ProjectName.qmlproject
\li This file defines that all components, 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. Since \QDS 4.5, the default
\l {https://doc.qt.io/qt-6/qtqml-syntax-directoryimports.html} {QML import path}
defined within the \c {.qmlproject} file is \c {"."}. However, you can add more
import paths by editing the \c {.qmlproject} file.
\row
\li \c {ProjectName} (folder)
\li This folder contains the essential QML files for the project.
\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.
\li \e qmldir module definition file declares the Constant component.
that it inherits the global resolution saved here. This is the default
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

View File

@@ -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

View File

@@ -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
*/

View File

@@ -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}

View File

@@ -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 Sets the 3D view to use the scene environment color as background
\li Use Scene Environment
\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.

View File

@@ -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,
for example, File Explorer (on Windows), to the \uicontrol{3D} view.
\li In the \uicontrol {3D Scene Options} tab, select options for
importing the file.
\note To see all options, select \uicontrol{Show All Options}.
\li Select \uicontrol Import to import the 3D asset.
\li Open the import dialog in one of the following methods:
\list
\li Select \l Assets > \inlineimage icons/plus.png, select the file you
want to import, and click \uicontrol Open.
\li Drag the 3D asset to the \uicontrol 3D view. In this case, the 3D asset will be
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
\uicontrol{3D} and \uicontrol Navigator views. It is also
available in \uicontrol Components > \uicontrol {My 3D Components}.
Additionally, you can define options for importing the file in the \uicontrol {3D Scene Options}
tab. 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.
Alternatively, you can initiate the import dialog from the
\uicontrol Assets view:
\note To see all options, select \uicontrol {Show All Options}.
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 Select \uicontrol {3D Assets} in the dropdown menu to filter 3D
graphics files.
\li Select a file to import, and then select \uicontrol Open.
\li In the \uicontrol {3D Scene Options} tab, select options for
importing the file.
\note To see all options, select \uicontrol{Show All Options}.
\li Select \uicontrol Import to import the 3D asset.
\li Open the import dialog in one of the following methods:
\list
\li Select \uicontrol Assets > \inlineimage icons/plus.png, select the files you
want to import, and click \uicontrol Open.
\li Select the 3D asset files and drag them to the \uicontrol 3D view. In this
case, the 3D assets will be added to your scene, so they will appear in the
\uicontrol 3D and \uicontrol Navigator views.
\endlist
\li Select \uicontrol Accept to import the 3D assets.
\endlist
The 3D asset now appears in \uicontrol Components >
\uicontrol {My 3D Components}. You can add it to the scene by
drag-and-dropping it to the \uicontrol{3D} view.
Additionally, you can define options for importing the files in the \uicontrol
{3D Scene Options} tab by selecting the asset you want to edit from the \uicontrol
{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}.
*/

View File

@@ -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

View File

@@ -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
*/

View File

@@ -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
*/

View File

@@ -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"
}
]

View File

@@ -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
applications
FILES
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/
)

View File

@@ -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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

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

View File

@@ -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)
qsTr("No effects available.")
else if (!ContentLibraryBackend.rootView.isQt6Project)
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)

View File

@@ -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 {

View File

@@ -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()
}
}

View File

@@ -3,8 +3,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import HelperWidgets
import HelperWidgets as 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",
// "failed"
property string downloadState: modelData.isDownloaded() ? "downloaded" : ""
// Download states: "" (exists not downloaded), "unavailable", "downloading", "downloaded", "failed"
property string downloadState: ContentLibraryBackend.materialsModel.isMaterialDownloaded(modelData)
? "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 (root.downloadState === "downloaded")
if (mouse.button === Qt.LeftButton)
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"

View File

@@ -113,9 +113,7 @@ HelperWidgets.ScrollView {
Text {
id: infoText
text: {
if (!root.materialsModel.matBundleExists)
qsTr("No materials available. Make sure you have internet connection.")
else if (!ContentLibraryBackend.rootView.isQt6Project)
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

View File

@@ -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)
}

View File

@@ -8,12 +8,10 @@ import StudioControls as StudioControls
import StudioTheme as StudioTheme
import ContentLibraryBackend
HelperWidgets.ScrollView {
Item {
id: root
clip: true
interactive: !ctxMenuItem.opened && !ctxMenuTexture.opened
&& !ContentLibraryBackend.rootView.isDragging && !HelperWidgets.Controller.contextMenuOpened
property alias adsFocus: scrollView.adsFocus
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
visible: categoryVisible && infoText.text === ""
caption: categoryTitle
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"
ContentLibraryMaterial {
roleValue: "UserMaterials"
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
""
}
@@ -167,4 +193,5 @@ HelperWidgets.ScrollView {
visible: infoText.text !== ""
}
}
}
}

View File

@@ -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()
}
}
}
}
}
}
}
}

View File

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

View File

@@ -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

View File

@@ -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()
}
}

View File

@@ -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()

View File

@@ -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) => {
MaterialBrowserBackend.materialBrowserTexturesModel.setTextureId(index, newId);
onRenamed: (newName) => {
MaterialBrowserBackend.materialBrowserTexturesModel.setTextureName(index, newName);
mouseArea.forceActiveFocus()
}

View File

@@ -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()
{
itemPane.headerItem.refreshPreview()
}
signal 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)
{
itemPane.headerItem.previewEnv = env
itemPane.headerItem.previewModel = model
function initPreviewData(env, model) {
root.__previewEnv = env
root.__previewModel = model
}
MaterialEditorToolBar {
@@ -42,18 +43,56 @@ Item {
onToolBarAction: (action) => root.toolBarAction(action)
}
PropertyEditorPane {
id: itemPane
Settings {
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)
onPreviewModelChanged: root.previewModelChanged(previewModel)
id: topSection
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
anchors.right: parent.right
width: itemPane.width
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()
}
}
}
}

View File

@@ -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
}
}
}
}

View File

@@ -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 string previewModel
property alias showImage: previewLoader.active
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 {
id: pinButton
orientation: Qt.Vertical
x: root.__horizontalSpacing
Loader {
id: previewLoader
style: root.buttonStyle
iconSize: StudioTheme.Values.bigFont
buttonIcon: pinButton.checked ? StudioTheme.Constants.pin : StudioTheme.Constants.unpin
checkable: true
checked: itemPane.headerDocked
onCheckedChanged: itemPane.headerDocked = pinButton.checked
}
SplitView.fillWidth: true
SplitView.minimumWidth: 152
SplitView.preferredHeight: previewLoader.visible ? Math.min(root.width * 0.75, 400) : 0
SplitView.minimumHeight: previewLoader.visible ? 150 : 0
SplitView.maximumHeight: previewLoader.visible ? 600 : 0
Rectangle {
id: previewRect
anchors.horizontalCenter: parent.horizontalCenter
width: 152
height: 152
color: "#000000"
visible: previewLoader.active && previewLoader.item
Image {
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()
}
}
}
sourceComponent: root.previewComponent
}
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 {}

View File

@@ -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 {}

View File

@@ -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 {}

View File

@@ -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 {}

View File

@@ -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 {}

View File

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

View File

@@ -23,13 +23,13 @@
**
****************************************************************************/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import HelperWidgets 2.0
import QtQuick.Templates 2.15 as T
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import HelperWidgets
import QtQuick.Templates as T
import StudioControls as StudioControls
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)

View File

@@ -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

View File

@@ -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)
comboBox.backendValue.expression = comboBox.editText
let valueData = (comboBox.valueRole === "")
? comboBox.editText
: itemFilterModel.modelItemData(comboBox.currentIndex - 1)[comboBox.valueRole]
if (comboBox.backendValue.expression !== valueData)
comboBox.backendValue.expression = valueData
}
comboBox.dirty = false
}
function addDefaultItem(arr) {
var copy = arr.slice()
copy.unshift(comboBox.defaultItem)
return copy
Repeater {
id: optionsList
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
}
}
}

View File

@@ -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{}
}

View File

@@ -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")
}
}
}

View File

@@ -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

View File

@@ -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")
}
}

View File

@@ -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

View File

@@ -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

View File

@@ -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)
values.propertyLabelWidth = labelColumnWidth
// When both label and controls are at max width, calculate the remaining space
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
}

View File

@@ -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"
}
}

View File

@@ -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"]
}
}

Some files were not shown because too many files have changed in this diff Show More