diff --git a/doc/qtcreator/examples/transitions/CMakeLists.txt b/doc/qtcreator/examples/transitions/CMakeLists.txt new file mode 100644 index 00000000000..bf543f34ffe --- /dev/null +++ b/doc/qtcreator/examples/transitions/CMakeLists.txt @@ -0,0 +1,59 @@ +cmake_minimum_required(VERSION 3.14) + +project(transitions VERSION 0.1 LANGUAGES CXX) + +set(CMAKE_INCLUDE_CURRENT_DIR ON) + +set(CMAKE_AUTOUIC ON) +set(CMAKE_AUTOMOC ON) +set(CMAKE_AUTORCC ON) + +set(CMAKE_CXX_STANDARD 11) +set(CMAKE_CXX_STANDARD_REQUIRED ON) + +find_package(QT NAMES Qt6 Qt5 COMPONENTS Core Quick REQUIRED) +find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Core Quick REQUIRED) + +set(PROJECT_SOURCES + main.cpp + qml.qrc +) + +if(${QT_VERSION_MAJOR} GREATER_EQUAL 6) + qt_add_executable(transitions + MANUAL_FINALIZATION + ${PROJECT_SOURCES} + ) +# Define target properties for Android with Qt 6 as: +# set_property(TARGET transitions APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR +# ${CMAKE_CURRENT_SOURCE_DIR}/android) +# For more information, see https://doc.qt.io/qt-6/qt-add-executable.html#target-creation +else() + if(ANDROID) + add_library(transitions SHARED + ${PROJECT_SOURCES} + ) +# Define properties for Android with Qt 5 after find_package() calls as: +# set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android") + else() + add_executable(transitions + ${PROJECT_SOURCES} + ) + endif() +endif() + +target_compile_definitions(transitions + PRIVATE $<$,$>:QT_QML_DEBUG>) +target_link_libraries(transitions + PRIVATE Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Quick) + +set_target_properties(transitions PROPERTIES + MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com + MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION} + MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR} +) + +if(QT_VERSION_MAJOR EQUAL 6) + qt_import_qml_plugins(transitions) + qt_finalize_executable(transitions) +endif() diff --git a/doc/qtcreator/examples/transitions/Page.qml b/doc/qtcreator/examples/transitions/Page.qml new file mode 100644 index 00000000000..932a29cd029 --- /dev/null +++ b/doc/qtcreator/examples/transitions/Page.qml @@ -0,0 +1,266 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.15 +import QtQuick.Window 2.15 + +Rectangle { + id: page + state: "State1" + + Image { + id: icon + x: 20 + y: 20 + source: "images/qt-logo.png" + fillMode: Image.PreserveAspectFit + } + + Rectangle { + id: topLeftRect + width: 55 + height: 41 + color: "#00ffffff" + border.color: "#808080" + anchors.left: parent.left + anchors.top: parent.top + anchors.leftMargin: 20 + anchors.topMargin: 20 + + MouseArea { + id: mouseArea + anchors.fill: parent + + Connections { + target: mouseArea + function onClicked() + { + page.state = "State1" + } + } + } + } + + + Rectangle { + id: middleRightRect + width: 55 + height: 41 + color: "#00ffffff" + border.color: "#808080" + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 20 + MouseArea { + id: mouseArea1 + anchors.fill: parent + + Connections { + target: mouseArea1 + function onClicked() + { + page.state = "State2" + } + } + } + } + + + Rectangle { + id: bottomLeftRect + width: 55 + height: 41 + color: "#00ffffff" + border.color: "#808080" + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 + anchors.leftMargin: 20 + MouseArea { + id: mouseArea2 + anchors.fill: parent + + Connections { + target: mouseArea2 + function onClicked() + { + page.state = "State3" + } + } + } + } + + states: [ + State { + name: "State1" + }, + State { + name: "State2" + + PropertyChanges { + target: icon + x: middleRightRect.x + y: middleRightRect.y + } + }, + State { + name: "State3" + + PropertyChanges { + target: icon + x: bottomLeftRect.x + y: bottomLeftRect.y + } + } + ] + transitions: [ + Transition { + id: toState1 + ParallelAnimation { + SequentialAnimation { + PauseAnimation { + duration: 0 + } + + PropertyAnimation { + target: icon + property: "y" + duration: 200 + } + } + + SequentialAnimation { + PauseAnimation { + duration: 0 + } + + PropertyAnimation { + target: icon + property: "x" + duration: 200 + } + } + } + to: "State1" + from: "State2,State3" + }, + Transition { + id: toState2 + ParallelAnimation { + SequentialAnimation { + PauseAnimation { + duration: 0 + } + + PropertyAnimation { + target: icon + property: "y" + easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1] + duration: 1006 + } + } + + SequentialAnimation { + PauseAnimation { + duration: 0 + } + + PropertyAnimation { + target: icon + property: "x" + easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1] + duration: 1006 + } + } + } + to: "State2" + from: "State1,State3" + }, + Transition { + id: toState3 + ParallelAnimation { + SequentialAnimation { + PauseAnimation { + duration: 0 + } + + PropertyAnimation { + target: icon + property: "y" + easing.bezierCurve: [0.455,0.03,0.515,0.955,1,1] + duration: 2000 + } + } + + SequentialAnimation { + PauseAnimation { + duration: 0 + } + + PropertyAnimation { + target: icon + property: "x" + easing.bezierCurve: [0.455,0.03,0.515,0.955,1,1] + duration: 2000 + } + } + } + to: "State3" + from: "State1,State2" + } + ] +} + +/*##^## +Designer { + D{i:0;height:480;width:640}D{i:1}D{i:16;transitionDuration:2000}D{i:24;transitionDuration:2000} +D{i:32;transitionDuration:2000} +} +##^##*/ diff --git a/doc/qtcreator/examples/transitions/qt-logo.png b/doc/qtcreator/examples/transitions/images/qt-logo.png similarity index 100% rename from doc/qtcreator/examples/transitions/qt-logo.png rename to doc/qtcreator/examples/transitions/images/qt-logo.png diff --git a/doc/qtcreator/examples/transitions/main.cpp b/doc/qtcreator/examples/transitions/main.cpp index fa832817aa3..c43b030e92a 100644 --- a/doc/qtcreator/examples/transitions/main.cpp +++ b/doc/qtcreator/examples/transitions/main.cpp @@ -1,9 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + #include #include + int main(int argc, char *argv[]) { - QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); + if (qEnvironmentVariableIsEmpty("QTGLESSTREAM_DISPLAY")) { + qputenv("QT_QPA_EGLFS_PHYSICAL_WIDTH", QByteArray("213")); + qputenv("QT_QPA_EGLFS_PHYSICAL_HEIGHT", QByteArray("120")); + +#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0) + QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); +#endif + } QGuiApplication app(argc, argv); diff --git a/doc/qtcreator/examples/transitions/main.qml b/doc/qtcreator/examples/transitions/main.qml index 1072e85ffeb..bb93d70fe90 100644 --- a/doc/qtcreator/examples/transitions/main.qml +++ b/doc/qtcreator/examples/transitions/main.qml @@ -1,214 +1,71 @@ -import QtQuick 2.14 +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ -Rectangle { - id: page +import QtQuick 2.15 +import QtQuick.Window 2.15 + +Window { width: 640 height: 480 visible: true - border.color: "#808080" - state: "State1" + title: qsTr("Hello World") - Image { - id: icon - x: 10 - y: 20 - source: "qt-logo.png" - fillMode: Image.PreserveAspectFit + Page { + id: page + anchors.fill: parent + color: "#ffffff" } - - Rectangle { - id: topLeftRect - width: 55 - height: 41 - color: "#00000000" - border.color: "#808080" - anchors.left: parent.left - anchors.top: parent.top - anchors.leftMargin: 10 - anchors.topMargin: 20 - - MouseArea { - id: mouseArea - anchors.fill: parent - - Connections { - target: mouseArea - onClicked: page.state = "State1" - } - } - } - - Rectangle { - id: middleRightRect - width: 55 - height: 41 - color: "#00000000" - border.color: "#808080" - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: 10 - MouseArea { - id: mouseArea1 - anchors.fill: parent - - Connections { - target: mouseArea1 - onClicked: page.state = "State2" - } - } - } - - Rectangle { - id: bottomLeftRect - width: 55 - height: 41 - color: "#00000000" - border.color: "#808080" - anchors.left: parent.left - anchors.bottom: parent.bottom - anchors.bottomMargin: 20 - MouseArea { - id: mouseArea2 - anchors.fill: parent - - Connections { - target: mouseArea2 - onClicked: page.state = "State3" - } - } - anchors.leftMargin: 10 - } - states: [ - State { - name: "State1" - - PropertyChanges { - target: icon - x: 10 - y: 20 - } - }, - State { - name: "State2" - - PropertyChanges { - target: icon - x: 575 - y: 219 - } - }, - State { - name: "State3" - PropertyChanges { - target: icon - x: 10 - y: 419 - } - } - ] - transitions: [ - Transition { - id: toState1 - ParallelAnimation { - SequentialAnimation { - PauseAnimation { - duration: 50 - } - - PropertyAnimation { - target: icon - property: "x" - easing.bezierCurve: [0.2,0.2,0.8,0.8,1,1] - duration: 152 - } - } - - SequentialAnimation { - PauseAnimation { - duration: 52 - } - - PropertyAnimation { - target: icon - property: "y" - easing.bezierCurve: [0.2,0.2,0.8,0.8,1,1] - duration: 152 - } - } - } - to: "State1" - from: "State2,State3" - }, - Transition { - id: toState2 - ParallelAnimation { - SequentialAnimation { - PauseAnimation { - duration: 50 - } - - PropertyAnimation { - target: icon - property: "x" - easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1] - duration: 951 - } - } - - SequentialAnimation { - PauseAnimation { - duration: 50 - } - - PropertyAnimation { - target: icon - property: "y" - easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1] - duration: 951 - } - } - } - to: "State2" - from: "State1,State3" - }, - Transition { - id: toState3 - ParallelAnimation { - SequentialAnimation { - PauseAnimation { - duration: 0 - } - - PropertyAnimation { - target: icon - property: "x" - easing.bezierCurve: [0.25,0.46,0.45,0.94,1,1] - duration: 2000 - } - } - - SequentialAnimation { - PauseAnimation { - duration: 0 - } - - PropertyAnimation { - target: icon - property: "y" - easing.bezierCurve: [0.25,0.46,0.45,0.94,1,1] - duration: 2000 - } - } - } - to: "State3" - from: "State1,State2" - } - ] } /*##^## Designer { - D{i:0;formeditorZoom:0.6600000262260437}D{i:17;transitionDuration:2000}D{i:25;transitionDuration:2000} -D{i:33;transitionDuration:2000} + D{i:0;formeditorZoom:0.75} } ##^##*/ diff --git a/doc/qtcreator/examples/transitions/qml.qrc b/doc/qtcreator/examples/transitions/qml.qrc index 1cca02ca098..f046cc30b36 100644 --- a/doc/qtcreator/examples/transitions/qml.qrc +++ b/doc/qtcreator/examples/transitions/qml.qrc @@ -1,6 +1,7 @@ main.qml - qt-logo.png + images/qt-logo.png + Page.qml diff --git a/doc/qtcreator/examples/transitions/transitions.pro b/doc/qtcreator/examples/transitions/transitions.pro deleted file mode 100644 index 34ba75e4077..00000000000 --- a/doc/qtcreator/examples/transitions/transitions.pro +++ /dev/null @@ -1,23 +0,0 @@ -QT += quick - -CONFIG += c++11 - -# You can make your code fail to compile if it uses deprecated APIs. -# In order to do so, uncomment the following line. -#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 - -SOURCES += \ - main.cpp - -RESOURCES += qml.qrc - -# Additional import path used to resolve QML modules in Qt Creator's code model -QML_IMPORT_PATH = - -# Additional import path used to resolve QML modules just for Qt Quick Designer -QML_DESIGNER_IMPORT_PATH = - -# Default rules for deployment. -qnx: target.path = /tmp/$${TARGET}/bin -else: unix:!android: target.path = /opt/$${TARGET}/bin -!isEmpty(target.path): INSTALLS += target diff --git a/doc/qtcreator/images/icons/transparent.png b/doc/qtcreator/images/icons/transparent.png new file mode 100644 index 00000000000..3f9bffcac5a Binary files /dev/null and b/doc/qtcreator/images/icons/transparent.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-bindings.png b/doc/qtcreator/images/qmldesigner-tutorial-bindings.png new file mode 100644 index 00000000000..ab9e72cd9ee Binary files /dev/null and b/doc/qtcreator/images/qmldesigner-tutorial-bindings.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-page-component.png b/doc/qtcreator/images/qmldesigner-tutorial-page-component.png new file mode 100644 index 00000000000..e73e8370857 Binary files /dev/null and b/doc/qtcreator/images/qmldesigner-tutorial-page-component.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-states.png b/doc/qtcreator/images/qmldesigner-tutorial-states.png index 62f166b8732..7c4d44f0ec7 100644 Binary files a/doc/qtcreator/images/qmldesigner-tutorial-states.png and b/doc/qtcreator/images/qmldesigner-tutorial-states.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png index 59f7fa0d7f1..d05ac96a4dc 100644 Binary files a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png and b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png index cdd691ad1a3..e935213744f 100644 Binary files a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png and b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png b/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png index 3fb5585416a..e87bfd6b877 100644 Binary files a/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png and b/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png differ diff --git a/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png b/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png index 10755939fe2..a115cf8fbf5 100644 Binary files a/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png and b/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png differ diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index 1daf929e54d..e38b0bdea64 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -131,6 +131,7 @@ \li \l{Lists and Other Data Models} \li \l{Animations} \li \l{3D Views} + \li \l{Node} \li \l{Group} \li \l{Instanced Rendering} \li \l{Skeletal Animation} diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 23ed4f5f495..be4a66a01c5 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -47,15 +47,14 @@ \include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application - \QC generates a component file, \e main.qml, and opens it in - \l {Text Editor}. The wizard template uses an instance of the \l Window - control, which does not support adding states. Because we want to use states - in this example, we first replace the instance of the Window component with - an instance of the basic \l {basic-rectangle}{Rectangle} component. We must - also remove the line that sets the \c title property, which the Rectangle - component does not have. If you change the value of the \l Type property in - the \l Properties view, \QC offers to automatically remove the \c title - property. + \QC generates a component file, \e main.qml, and opens it in the + \l {Text Editor} view. Select \uicontrol Design to open the file in + the \l {Form Editor} view. + + \note The visibility of Design views depends on the selected workspace. + To open hidden views, select \uicontrol View > \uicontrol Views + in the \uicontrol Design mode. For more information about moving + views around, see \l {Managing Workspaces}. \section1 Creating the Main View @@ -65,15 +64,22 @@ We use the \e qt-logo.png image in this tutorial, but you can also use any other image or a component, instead. - \note If a view is hidden, you can show it by selecting \uicontrol View > - \uicontrol Views. - \list 1 + \li In \uicontrol Library > \uicontrol Components > + \uicontrol {Default Components} > \uicontrol Basic, select + \uicontrol Rectangle and drag and drop it to \e Window in + \uicontrol Navigator. + \li Select the \uicontrol Rectangle instance in \l Navigator, and enter \e page in the \uicontrol ID field in \l Properties. - \li Select \l Library > \uicontrol Assets > \inlineimage plus.png + \li In \uicontrol Layout, select the + \inlineimage icons/anchor-fill.png "Fill anchor button" + fill anchor button to anchor the rectangle to the window on all + sides. + + \li Select \uicontrol Library > \uicontrol Assets > \inlineimage plus.png to locate qt-logo.png (or your own image) and add it to the project folder. @@ -91,7 +97,7 @@ \li In the \uicontrol ID field, enter \e icon. - \li In the \uicontrol Position field, set \uicontrol X to \e 10 and + \li In the \uicontrol Position field, set \uicontrol X and \uicontrol Y to \e 20. \endlist @@ -111,26 +117,25 @@ \li In the \uicontrol ID field, enter \e topLeftRect. \li In the \uicontrol Size field, set \uicontrol W and - \uicontrol H to \e 64, for the rectangle size to - match the image size. + \uicontrol H to values that match the image size + (\e 55 and \e 41). - \li In the \uicontrol Color field, click the - \inlineimage icon_color_none.png - (\uicontrol Transparent) button to make the rectangle - transparent. + \li Select the \uicontrol Color field, and then select the + \inlineimage icons/transparent.png "Transparent button" + button in the \l{Picking colors}{color picker} to make + the rectangle transparent. \li In the \uicontrol {Border color} field, set the border color to \e #808080 to make the rectangle visible on - the white background. + the background. \li Click \uicontrol {Layout}, and then click the - \inlineimage icons/anchor-top.png - (\uicontrol Top) and \inlineimage icons/anchor-left.png - (\uicontrol Left) anchor buttons to anchor the - rectangle to the top left corner of the page. + \inlineimage icons/anchor-top.png "Top anchor button" + top and \inlineimage icons/anchor-left.png "Left anchor button" + left anchor buttons to anchor the rectangle to the top left + corner of the page. - \li In the \uicontrol Margin field, select \e 20 for the top anchor - and \e 10 for the left anchor. + \li In the \uicontrol Margin field, select \e 20 for both anchors. \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins" @@ -140,9 +145,8 @@ \uicontrol Library to \e topLeftRect in \uicontrol Navigator. \li Click \uicontrol {Layout}, and then click the - \inlineimage icons/anchor-fill.png - (\uicontrol {Fill to Parent}) button to anchor the mouse area to the - rectangle. + \inlineimage icons/anchor-fill.png "Fill anchor button" + button to anchor the mouse area to its parent. \li In the \uicontrol Navigator, copy \e topLeftRect (by pressing \key {Ctrl+C}) and paste it to \e page in \uicontrol Navigator @@ -156,13 +160,13 @@ \li In the \uicontrol ID field, enter \e middleRightRect. \li In \uicontrol {Layout}, select the - \inlineimage icons/anchor-center-vertical.png - (\uicontrol {Vertical Center} anchor button and then the - \inlineimage icons/anchor-right.png - (\uicontrol Right) anchor button to anchor the rectangle + \inlineimage icons/anchor-center-vertical.png "Vertical center anchor button" + vertical center anchor button and then the + \inlineimage icons/anchor-right.png "Right anchor button" + right anchor button to anchor the rectangle to the middle right margin of its parent. - \li In the \uicontrol Margin field, select \e 10 for the right + \li In the \uicontrol Margin field, select \e 20 for the right anchor and \e 0 for the vertical center anchor. \endlist @@ -179,8 +183,7 @@ (\uicontrol Left) anchor buttons to anchor the rectangle to the bottom left margin of its parent. - \li In the \uicontrol Margin field, select \e 20 for the bottom - anchor and \e 10 for the left anchor. + \li In the \uicontrol Margin field, select \e 20 for both anchors. \endlist @@ -199,18 +202,41 @@ For more information about the views you used, see: \list + \li \l {Form Editor} \li \l Library \li \l Navigator \li \l Properties \endlist Next, we will make the image move between the rectangles when users click - them by adding states and by connecting mouse clicks to state changes. + them by \l{Adding States}{adding states} and by connecting mouse clicks + to state changes. + + Because the Window component requires states to be added into child + components, we must first move \e page into a separate component. + + \section1 Turning Page into a Custom Component + + To turn \e page into a custom component, right-click it + in \uicontrol Navigator or \uicontrol {Form Editor}, and select + \uicontrol {Move Component into Separate File} in the context menu. + + \image qmldesigner-tutorial-page-component.png "Move page component instance into a separate file" + + \list 1 + \li In \uicontrol {Component name}, enter \e Page. + \li In \uicontrol {Property assignments for main.qml} select both + check boxes to preserve the appearance of the UI. + \li Select \uicontrol OK to create a file called \e Page.qml that + defines the Page custom component and to add an instance of it + into \e main.qml. + \endlist \section1 Connecting Mouse Clicks to State Changes To make the image move between the rectangles when users click them, we add - states, where we change the values of the \c x and \c y properties of + states to the Page component, where we change the values of the \c x and + \c y properties of \e icon to match those of the middle right and top left rectangles. Then, we connect the \c onClicked signals of the mouse areas to the state changes. @@ -219,6 +245,9 @@ \c y properties of \e icon to those of the rectangles. \list 1 + \li Right-click \e page in \uicontrol Navigator, and select + \uicontrol {Go into Component} in the context menu to open + \e Page.qml in \uicontrol {Form Editor}. \li In the \uicontrol States view, select \uicontrol {Create New State} three times to create \e State1, \e State2, and \e State3. \li Select \e State1 in \uicontrol States. @@ -227,13 +256,22 @@ \uicontrol {Set as Default} to display \e State1 when the application starts. \li Select \e State2 in \uicontrol States. - \li Select \e icon in \uicontrol Navigator and drag it on top of the - middle left rectangle in \uicontrol {Form Editor}. This changes the - \c x and \c y property values of \e icon to match those of - \e middleRightRect in \e State2. - \image qmldesigner-tutorial-states.png "States view" - \li Select \e State3 in \uicontrol States, and drag \e icon on top of - the bottom left rectangle in \uicontrol {Form Editor}. + \li Select \e icon in \uicontrol Navigator to display its properties + in \uicontrol Properties. + \li In \uicontrol {Geometry - 2D} > \uicontrol Position > \uicontrol X, + select \inlineimage icons/action-icon.png "Actions button" + , and then select \uicontrol {Set Binding} to open + \uicontrol {Binding Editor}. + \li Select the \e middleRightRect component and the \e x property + to bind the \e x property value of \e icon to that of + \e middleRightRect. + \image qmldesigner-tutorial-bindings.png "Binding Editor" + \li Select \uicontrol OK to create the binding. + \li Repeat for \uicontrol Y, but set the binding as + \e middleRightRect.y. + \li Select \e State3 in \uicontrol States, and bind the \e x and \e y + property values of \e icon to those of \e bottomLeftRect + (\e bottomLeftRect.x and \e bottomLeftRect.y). \li In \l {Connection View} > \uicontrol Connections, click the \inlineimage plus.png button to create a new connection. @@ -250,10 +288,30 @@ Click the rectangles to move the Qt logo from one rectangle to another. + If you develop with Qt 6, you must specify the connections as + functions. This is currently not supported in \uicontrol {Connections}, + so you must do it in \uicontrol {Text Editor}. For example: + + \code + MouseArea { + id: mouseArea + anchors.fill: parent + + Connections { + target: mouseArea + function onClicked() + { + page.state = "State1" + } + } + } + \endcode + For more information about the views you used, see: \list \li \l States + \li \l{Setting Bindings} \li \l{Connecting Components to Signals} \endlist diff --git a/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc index 0f110e2fee8..cc896f78c9c 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc @@ -69,6 +69,7 @@ \list \li \l {3D Views} + \li \l {Node} \li \l {Group} \li \l {Instanced Rendering} \li \l {Skeletal Animation} diff --git a/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc b/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc index b8bac07b3cf..f8ffb2918d3 100644 --- a/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc @@ -94,8 +94,10 @@ \image qtquick-number-animation.gif "Number animation" + \if defined(qtdesignstudio) For an example of using property animation to animate the scale and opacity of components, see the \l{Coffee Machine} example. + \endif \section2 Setting Non-Animated Properties diff --git a/doc/qtcreator/src/qtquick/qtquick-from-qmlproject-to-pro.qdoc b/doc/qtcreator/src/qtquick/qtquick-from-qmlproject-to-pro.qdoc index db6b077e61f..1f3f5c0adc4 100644 --- a/doc/qtcreator/src/qtquick/qtquick-from-qmlproject-to-pro.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-from-qmlproject-to-pro.qdoc @@ -26,7 +26,7 @@ /*! \page quick-converting-ui-projects.html \if defined(qtdesignstudio) - \previouspage creator-vcs-git.html + \previouspage studio-porting-projects.html \nextpage creator-editor-external.html \else \previouspage qtquick-iso-icon-browser.html diff --git a/doc/qtcreator/src/qtquick/qtquick-library.qdoc b/doc/qtcreator/src/qtquick/qtquick-library.qdoc index 46b7dfeb8ef..3c73fcfa4ae 100644 --- a/doc/qtcreator/src/qtquick/qtquick-library.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-library.qdoc @@ -70,6 +70,7 @@ \endif \li \l Animations \li \l{3D Views} + \li \l{Node} \li \l{Group} \li \l{Instanced Rendering} \li \l{Skeletal Animation} diff --git a/doc/qtcreator/src/vcs/creator-vcs-git.qdoc b/doc/qtcreator/src/vcs/creator-vcs-git.qdoc index 0d2ed02fec5..5359c964f67 100644 --- a/doc/qtcreator/src/vcs/creator-vcs-git.qdoc +++ b/doc/qtcreator/src/vcs/creator-vcs-git.qdoc @@ -33,7 +33,7 @@ \page creator-vcs-git.html \if defined(qtdesignstudio) \previouspage studio-developer-topics.html - \nextpage quick-converting-ui-projects.html + \nextpage studio-porting-projects.html \else \previouspage creator-vcs-cvs.html \nextpage creator-vcs-mercurial.html diff --git a/doc/qtdesignstudio/images/icons/add-file-16px.png b/doc/qtdesignstudio/images/icons/add-file-16px.png new file mode 100644 index 00000000000..6112f6d02e7 Binary files /dev/null and b/doc/qtdesignstudio/images/icons/add-file-16px.png differ diff --git a/doc/qtdesignstudio/images/studio-3d-properties-node.png b/doc/qtdesignstudio/images/studio-3d-properties-node.png new file mode 100644 index 00000000000..62db01c2f4d Binary files /dev/null and b/doc/qtdesignstudio/images/studio-3d-properties-node.png differ diff --git a/doc/qtdesignstudio/images/studio-3d-properties-transform.png b/doc/qtdesignstudio/images/studio-3d-properties-transform.png new file mode 100644 index 00000000000..e0b25a6d420 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-3d-properties-transform.png differ diff --git a/doc/qtdesignstudio/images/studio-3d-properties-type.png b/doc/qtdesignstudio/images/studio-3d-properties-type.png index 3b171820c09..c0363d0233b 100644 Binary files a/doc/qtdesignstudio/images/studio-3d-properties-type.png and b/doc/qtdesignstudio/images/studio-3d-properties-type.png differ diff --git a/doc/qtdesignstudio/images/studio-qtquick-3d-shader-utilities.png b/doc/qtdesignstudio/images/studio-qtquick-3d-shader-utilities.png index af179adf4d5..17b49726451 100644 Binary files a/doc/qtdesignstudio/images/studio-qtquick-3d-shader-utilities.png and b/doc/qtdesignstudio/images/studio-qtquick-3d-shader-utilities.png differ diff --git a/doc/qtdesignstudio/images/studio-qtquick-3d-view.png b/doc/qtdesignstudio/images/studio-qtquick-3d-view.png index 9cba7fcd1a4..9c0e8fc82bf 100644 Binary files a/doc/qtdesignstudio/images/studio-qtquick-3d-view.png and b/doc/qtdesignstudio/images/studio-qtquick-3d-view.png differ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 976da0d4ccd..12bae906f41 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -88,6 +88,7 @@ \li \l{Logic Helpers} \li \l Animations \li \l{3D Views} + \li \l{Node} \li \l{Group} \li \l{Instanced Rendering} \li \l{Skeletal Animation} @@ -258,6 +259,7 @@ \li \l{Developer Topics} \list \li \l{Using Git} + \li \l{Converting Qt 5 Projects into Qt 6 Projects} \li \l{Converting UI Projects to Applications} \li \l{Using External Tools} \endlist diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 25285fbdd4d..3a1306300dc 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -99,6 +99,7 @@ \li \b {\l{Developer Topics}} \list \li \l{Using Git} + \li \l{Converting Qt 5 Projects into Qt 6 Projects} \li \l{Converting UI Projects to Applications} \li \l{Using External Tools} \endlist diff --git a/doc/qtdesignstudio/src/qtquick-from-qt5-to-qt6.qdoc b/doc/qtdesignstudio/src/qtquick-from-qt5-to-qt6.qdoc new file mode 100644 index 00000000000..2e80cb5306f --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick-from-qt5-to-qt6.qdoc @@ -0,0 +1,141 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \page studio-porting-projects.html + \previouspage creator-vcs-git.html + \nextpage quick-converting-ui-projects.html + + \title Converting Qt 5 Projects into Qt 6 Projects + + \QDS supports creating UIs with Qt 6 in addition to Qt 5. However, to + make a project that uses Qt 5 use Qt 6, you have to be aware of a few + differences and issues that are discussed in this topic. + + \section1 Font Loader + + Projects that were \l{Creating Projects}{created} with \QDS 2.1 use + \c FontLoader in a way that is not supported in Qt 6. Specifically, the + \c name property is read-only in Qt 6. Therefore, you must modify the + \c Constants.qml file to have fonts loaded correctly. You can either + remove the \c FontLoader or switch to using the \c source property + instead of the \c name property. + + To remove the \c FontLoader, delete the following line from the + \c Constants.qml file: + + \code + readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + \endcode + + Then, remove the following lines that contain references to mySystemFont: + + \code + readonly property font font: Qt.font({ + family: mySystemFont.name, + pixelSize: Qt.application.font.pixelSize + }) + + readonly property font largeFont: Qt.font({ + family: mySystemFont.name, + pixelSize: Qt.application.font.pixelSize * 1.6 + }) + \endcode + + Alternatively, you can keep the \c FontLoader and use the \c source property + instead of the \c name property. If you are unsure about how to do this, you + can replace the \c Constants.qml file with a new one that you create by + using \QDS 2.2. + + \section1 Qt Quick Studio Components + + \l{Summary of Shapes}{Qt Quick Studio Components} are available in Qt 6, + except for the \l {Iso Icon} component. It specifies an icon from an + ISO 7000 icon library as a \l [QtQuickExtras] {Picture} component, which + is not supported in Qt 6. Therefore, Iso Icon is also not supported in Qt 6. + + \section1 Qt Quick Studio Effects + + \l{2D Effects} are only partially supported. The following 2D effects are + not available in Qt 6: + + \list + \li Blend + \li Inner Shadow + \li Blur effects except: + \list + \li DirectionalBlur + \li FastBlur + \li GaussianBlur + \li MaskedBlur + \li RecursiveBlur + \li RadialBlur + \li ZoomBlur + \endlist + \endlist + + Substitutes are provided for the obsolete effects to keep Qt 5 based + applications working, but the effects will not be rendered as expected. + + \section1 Qt Quick 3D + + In Qt 6, you cannot use the import \c {import QtQuick3D 1.15}, which + imports a Qt 5 based Qt Quick 3D module. Qt 6 does not require a version + for imports, and therefore it is not used by default. To turn a Qt 5 based + project into a Qt 6 based project, you have to adjust the imports in all + \c .qml files that use Qt Quick 3D by removing the version numbers. + + For more information about changes in Qt Quick 3D, see the + \l{https://doc-snapshots.qt.io/qt6-dev/qtquick3d-changes-qt6.html} + {changes file}. + + \section1 QML + + For general information about changes in QML between Qt 5 and Qt 6, see: + + \list + \li \l{https://doc.qt.io/qt-6/obsoleteqmltypes.html}{Obsolete types} + \li \l{https://doc.qt.io/qt-6/quick-changes-qt6.html}{Changes in Qt Quick} + \endlist + + The most notable change is that Qt 6 does not require a version for + imports anymore. + + \section1 \QDS + + Projects that support only Qt 6 are marked with \c {qt6Project: true} in + the \c .qmlproject file. This line is added if you choose \uicontrol {Qt 6} + in the wizard when creating the project. If the project file does not + contain this line, the project will use Qt 5 and a Qt 5 kit by default. + You can change this in the project \uicontrol {Run Settings}, where you + can select \uicontrol {Qt 6} instead. + + Projects that use Qt 6 specific features will not work with Qt 5. This + means that projects that are supposed to work with both Qt 5 and Qt 6 + require versions for their imports. + + Therefore, if you want to use Qt Quick 3D, using the same project with Qt 5 + and Qt 6 is not possible. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc index 521e9c666eb..4bf5e030116 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc @@ -33,25 +33,40 @@ \title Custom Shaders You can use the 3D shader utilities and commands available in \l Library - > \uicontrol Components > \uicontrol QtQuick3D > \uicontrol - {Custom Shader Utils} to create your own effects and materials. - - \image studio-qtquick-3d-shader-utilities.png - - Additional 3D shader utilities include the \uicontrol Effect, which you can - find in \uicontrol Library > \uicontrol {QtQuick3D Effects} > \uicontrol - {Qt Quick 3D Custom Shader Utils}, and \uicontrol {Custom Material}, - available in \uicontrol Library > \uicontrol {QtQuick3D Materials} > - \uicontrol {Qt Quick 3D Custom Shader Utils}. - - \image studio-qtquick-3d-shader-effect.png - \image studio-qtquick-3d-shader-custom-material.png + > \uicontrol Components > \uicontrol {Qt Quick 3D} > + \uicontrol {Qt Quick 3D Custom Shader Utilities} to create your own effects + and materials. If the custom shader utilities are not displayed in \uicontrol Library, add the \uicontrol QtQuick3D module to your project, as described in \l {Adding and Removing Modules}. - For more information on using the shaders, see + \note If you select \uicontrol {Qt 5} as the \uicontrol {Target Qt Version} + when \l {Creating Projects}{creating your project}, the available custom + shader utilities and their properties will be slightly different, and some + of the components can be found in different locations in \uicontrol Library. + + \image studio-qtquick-3d-shader-utilities.png "Custom shader utilities in Library" + + You can find additional shader utilities, the \uicontrol Effect and + \uicontrol {Custom Material} components, in \uicontrol Library > + \uicontrol Components > \uicontrol {Qt Quick3D} > \uicontrol {Qt Quick 3D}. + + \image studio-qtquick-3d-components.png "Effect and Custom Material Components in Library" + + \note In Qt 5 the \uicontrol Effect component is located in + \uicontrol {Qt Quick 3D Effects} > + \uicontrol {Qt Quick 3D Custom Shader Utilities}. To use the + \uicontrol Effect component, add the \uicontrol QtQuick3D.Effects module to + your project. + + \note In Qt 5 the \uicontrol {Custom Material} component can be found in + \uicontrol {Qt Quick 3D Materials} > + \uicontrol {Qt Quick 3D Custom Shader Utilities}. To use the + \uicontrol {Custom Material} component, add the + \uicontrol QtQuick3D.Materials module to your project. + + For more information about using the shaders, see \l {Custom Effects and Materials}. See the following tables for available shader utilities and commands. @@ -60,125 +75,210 @@ \table \header \li Custom Shader + \li Qt 5 Only \li Description \row \li \l Buffer - \li A buffer to be used for a pass of a Custom Material or an Effect. + \li + \li A buffer to be used for a pass of \uicontrol {Custom Material} + or \uicontrol Effect instances. - Specify attributes for the buffer by defining the \uicontrol Name - and \uicontrol Format and \uicontrol {Allocation Flags} properties. + The \uicontrol Name property identifies the \uicontrol Buffer + instance. When the value of this property is empty, the buffer will + refer to the default output texture of the render pass instead of + allocating a buffer. This can be useful to override certain settings + of the output, such as the texture format, without introducing a new, + separate intermediate texture. + + The \uicontrol Format property specifies the format of the buffer. The \uicontrol Filter property specifies the filter operation when a - render pass is reading the buffer that differs in size in comparison + render pass is reading a buffer that differs in size in comparison to the current output buffer. - The \uicontrol {Coordinate Operation} property specifies the texture + The \uicontrol {Coordinate operation} property specifies the texture coordinate operation for coordinates outside [0, 1] range. + Select the \uicontrol ClampToEdge operation to clamp coordinates to + edges. The \uicontrol Repeat operation wraps the coordinates at the + edges to tile the texture, while \uicontrol MirroredRepeat also + mirrors every other repeat of the texture while tiling it. - You can also specify the \uicontrol {Size Multiplier} of the buffer. - Value of 1.0 creates buffer with the same size while 0.5 creates - buffer with width and height halved. + The \uicontrol {Allocation flags} property defines allocation flags + for the \uicontrol Buffer instance. Select \uicontrol SceneLifeTime + to allocate the buffer for the whole lifetime of the scene. + + \uicontrol {Size multiplier} specifies the size of the + \uicontrol Buffer instance. Value of 1.0 creates a buffer with the + same size, while 0.5 creates a buffer with width and height halved. \row \li \l {CustomMaterial} {Custom Material} + \li \li The base component for creating custom materials used to shade - models. + model instances. + + The \uicontrol {Shading mode} property specifies whether the material + is \uicontrol Shaded or \uicontrol Unshaded. + + The \uicontrol {Vertex shader} and \uicontrol {Fragment shader} + properties define the vertex and fragment shader files for the + material. Select the shader files from the dropdown menus. You can + select \inlineimage icons/add-file-16px.png + to add new shader files to the dropdown menus. + + The \uicontrol {Source blend} and \uicontrol {Destination blend} + properties specify the source and destination blend factors. + + The \uicontrol {Always dirty} property determines whether the + material is refreshed every time it is used. + + The \uicontrol {Line Width} property defines the width of the lines + when the geometry is using lines or line strips. Specify the attributes of the \uicontrol {Custom Material} by defining the \uicontrol Transparency, \uicontrol Refraction and - \uicontrol {Always Dirty} properties. The \uicontrol Passes property - contains a list of render passes implemented by the material. + \uicontrol {Always dirty} properties. + The \uicontrol {Shader Info} specifies the shader info of the - material. For more information, see - \l {Custom Effects and Materials}. + material. For more information, see \l {Custom Effects and Materials}. + + \note In Qt 5 you can also define render passes for + \uicontrol {Custom Material} instances by using the + \uicontrol Passes property, which lists render passes implemented + by the material. \row \li \l Effect + \li \li A base component for creating post-processing effects. The \uicontrol Passes property contains a list of render passes - implemented by the effect. For more information, see - \l {Custom Effects and Materials}. + implemented by the effect. You can add more entry fields to the list + by selecting \inlineimage plus.png + . For more information, see \l {Custom Effects and Materials}. \row \li \l Pass - \li A render pass in a Custom Material or an Effect. + \li + \li A render pass of an \uicontrol Effect instance. In Qt 5 you can also + use render passes for \uicontrol {Custom Materials}. The \uicontrol Commands property specifies the list of render - commands of the pass. You can further define a render pass by using - the \uicontrol Buffer and \uicontrol Shaders properties. + commands for the \uicontrol Pass instance, while the + \uicontrol Shaders property lists the shaders for it. Use the + dropdown menus to select the render commands and shader files of + your choice. + The \uicontrol Buffer property specifies an output buffer for the + \uicontrol Pass instance. \row \li \l Shader - \li A container component for defining shader code used by Custom - Materials and Effects. + \li + \li A container component for defining shader code used by + \uicontrol Effect instances. - Define the \uicontrol Shader attributes by specifying the - \uicontrol Source and \uicontrol Stage properties. + The \uicontrol Source property specifies the shader file to be used + by the \uicontrol Shader instance, and the \uicontrol Stage property + defines a \uicontrol Vertex or \uicontrol Fragment stage for it. + + \note In Qt 5 you can also set the \uicontrol Stage property to + \uicontrol Shared, \uicontrol Geometry, or \uicontrol Compute. \row \li \l {ShaderInfo} {Shader Info} + \li \inlineimage ok.png \li Basic information about custom shader code for Custom Materials. The \uicontrol Version property specifies the shader code version, while the \uicontrol Type property defines the shader code type. + The \uicontrol Key property specifies the options used by the shader using the combination of shader key values, such as diffuse or specular lighting, refraction, transparency, displacement, transmissiveness, glossiness, and alpha cutout. + The \uicontrol Key property specifies the options used by the shader + using the combination of shader key values. Use the dropdown list + to select the one of available shader keys: + \list + \li The \uicontrol Diffuse shader key applies diffuse lighting + and \uicontrol Specular applies specular lighting to the + shader instance. + \li The \uicontrol Cutout shader key applies alpha cutout to + the shader instance. + \li The \uicontrol Refraction shader key applies refraction to + the shader instance, while using the \uicontrol Transparent + key applies transparency to the shader instance. + \li The \uicontrol Displace shader key applies displacement + mapping to the shader instance. + \li The \uicontrol Transmissive shader key applies + transmissiveness to the shader instance. + \li The \uicontrol Glossy shader key applies glossiness to the + shader instance by default. This shader key is a combination + of \uicontrol Diffuse and \uicontrol Specular keys. + \endlist \row \li \l {TextureInput} {Texture Input} - \li A texture channel for a Custom Material or an Effect. - - The \uicontrol Texture property specifies the texture to input, while - the \uicontrol Enabled determines whether the texture is enabled. + \li + \li A texture channel for \uicontrol {Custom Material} and Effect + instances. + The \uicontrol Texture property specifies the texture to input, + while \uicontrol Enabled determines whether the texture is + enabled. + In \uicontrol Effect instances, setting \uicontrol Enabled + to \uicontrol false causes the shaders to sample a dummy, opaque + black texture instead of the one specified by texture. \endtable - \section1 Available Custom Shader Commands \table \header \li Command + \li Qt 5 Only \li Description \row \li \l Blending + \li \inlineimage ok.png \li A pass command that specifies the source blending function. - Use the \uicontrol Source and \uicontrol Destination to further - define the function. - + The \uicontrol Source property specifies the source blending + function, while the \uicontrol Destination property specifies the + destination for it. \row \li \l {BufferBlit} {Buffer Blit} + \li \inlineimage ok.png \li A copy operation between two buffers in a pass of a Custom Material or an Effect. - Define the source and the destination buffer of the copy-operation - by using the \uicontrol Source and \uicontrol Destination - properties. - + The \uicontrol Source and \uicontrol Destination specify the source + and the destination buffers for the copy-operation. \row \li \l {BufferInput} {Buffer Input} + \li \li An input buffer to be used for a pass of a Custom Material or an Effect. - The \uicontrol Buffer property specifies the buffer used for the - parameter. The \uicontrol Parameter specifies the name of the input - parameter in the shader. + The \uicontrol Buffer property specifies the input buffer for an + instance of the \uicontrol Pass instance. The \uicontrol Parameter + specifies the name of the input parameter in the shader. \row \li \l {CullMode} {Cull Mode} + \li \inlineimage ok.png \li A culling mode for a render pass. - The \uicontrol Mode specifies the culling mode in a pass when the - \uicontrol {State} property of the \uicontrol {Render State} is - set to \uicontrol CullFace. + The \uicontrol Mode property specifies the culling mode in a pass + when the \uicontrol {State} property of the \uicontrol {Render State} + is set to \uicontrol CullFace. Use the dropdown menu to set the + culling mode to \uicontrol BackFaceCulling, + \uicontrol FrontFaceCulling, or \uicontrol NoCulling. \row \li \l {DepthInput} {Depth Input} + \li \inlineimage ok.png \li An output texture for the depth buffer. The \uicontrol Parameter property specifies the name of the texture @@ -186,14 +286,23 @@ \row \li \l {RenderState} {Render State} - \li The render state to be enabled or disabled in a pass of a Custom - Material or an Effect. + \li \inlineimage ok.png + \li The render state to be enabled or disabled in a pass of a + \uicontrol {Custom Material} or an \uicontrol Effect instance. The \uicontrol State property specifies the render state to - enable or disable in a pass. + enable or disable in a pass. Use the dropdown menu to set the + \uicontrol State to \uicontrol Blend, \uicontrol CullFace, + \uicontrol DepthTest, \uicontrol StencilTest, + \uicontrol ScissorTest, \uicontrol DepthWrite, or + \uicontrol Multisample. + + The \uicontrol Enabled property defines the \uicontrol Enable state + for the \uicontrol {Render State}. \row \li \l {SetUniformValue} {Set Uniform Value} + \li \li A value to be set during a single pass. The \uicontrol Target property specifies the name of the uniform diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc index 995f29b1fd5..70385e9170a 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc @@ -38,10 +38,14 @@ \uicontrol {Qt Quick 3D Effects} to a \uicontrol View3D component in \l Navigator. - You can use the \l Effect component available in \uicontrol - {Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as the base + You can use the \l Effect component available in \uicontrol Library > + \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} as the base component for creating custom post-processing effects. For more information, see \l {Custom Effects and Materials} and \l {Custom Shaders}. + \note In \uicontrol {Qt 5}, the \uicontrol Effect component is located + in \uicontrol {Qt Quick 3D Effects} > + \uicontrol {Qt Quick 3D Custom Shader Utilities}. + You can apply multiple effects to a scene. Select the \uicontrol {Scene Environment} component in \uicontrol Navigator to view the applied diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-group.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-group.qdoc new file mode 100644 index 00000000000..25a9d5f90d4 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-group.qdoc @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \page studio-3d-group.html + \previouspage studio-3d-node.html + \nextpage studio-3d-instancing.html + + \title Group + + The \uicontrol Group component is a \l Node component that can be + used to wrap other objects for the purpose of grouping them. This allows you + to transform and set the opacity and visibility of multiple 3D components in + the \l Properties view simultaneously. + + To add a \uicontrol Group component + to your scene, drag-and-drop it from \l Library > \uicontrol Components > + \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor} + view or to \l Navigator > \uicontrol View3D > \uicontrol {Scene Environment} + > \uicontrol Scene. + + If the \uicontrol Group component is not displayed in + \uicontrol Library, you should add the \uicontrol {Qt Quick 3D} module to + your project, as described in \l {Adding and Removing Modules}. + + Select the \uicontrol Group component in \uicontrol Navigator to modify + \uicontrol Node properties for its child components in the + \uicontrol Properties view. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-instancing.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-instancing.qdoc index 91863bd40b4..31a9c90be95 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-instancing.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-instancing.qdoc @@ -25,7 +25,7 @@ /*! \page studio-3d-instancing.html - \previouspage studio-3d-node.html + \previouspage studio-3d-group.html \nextpage studio-skeletal-components.html \title Instanced Rendering diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc index d524fd8da00..871e6664150 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2020 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Design Studio documentation. @@ -25,27 +25,22 @@ /*! \page studio-3d-node.html - \previouspage quick-animations.html - \nextpage studio-3d-instancing.html + \previouspage studio-3d-view.html + \nextpage studio-3d-group.html - \title Group + \title Node - The \uicontrol Group component is a \uicontrol Node component that can be - used to wrap other objects for the purpose of grouping them. This allows you - to transform and set the opacity and visibility of multiple 3D components in - the \l Properties view simultaneously. To add a \uicontrol Group component - to your scene, drag-and-drop it from \l Library > \uicontrol Components > - \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor} - view or to \l Navigator > \uicontrol View3D > \uicontrol {Scene Environment} - > \uicontrol Scene. If the \uicontrol Group component is not displayed in - \uicontrol Library, you should add the \uicontrol {Qt Quick 3D} module to - your project, as described in \l {Adding and Removing Modules}. - - Select the \uicontrol Group component in \uicontrol Navigator to modify its - properties in the \uicontrol Properties view. + You can set properties for 3D components that are based on the + \uicontrol Node component in \uicontrol Properties > \uicontrol Node + and \uicontrol Transform. \section1 Setting Node Opacity and Visibility + You can set the opacity and visibility of 3D components that are based on + the \uicontrol Node component in \uicontrol Properties > \uicontrol Node. + + \image studio-3d-properties-node.png "Node properties" + All components have an \uicontrol Opacity value applied to them. The opacity of 100 makes a component fully opaque, while the opacity of 0 prevents a component from rendering at all. @@ -61,8 +56,15 @@ show components. It is useful when you want to show a component in a particular state, but hide it in another state, for example. + The \uicontrol {Static flags} property is currently not used. + \section1 Managing 3D Transformations + You can manage 3D transformations for components that are based on the + \uicontrol Node component in \uicontrol Transform. + + \image studio-3d-properties-transform.png "Transform properties" + The value of the \uicontrol Translation property contains the position translation of the component in the local coordinate space established by the parent component. The \uicontrol Orientation property specifies whether diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc index 1e285e9ec15..c80e6ffcba3 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc @@ -31,7 +31,7 @@ \title 3D Views To create a Qt Quick 3D UI project, we recommend using a \uicontrol - {Qt Quick 3D Application Template} wizard template that adds the + {Qt Quick 3D Application} wizard template that adds the \l {3D Components}{Qt Quick 3D} components to \l Library > \uicontrol Components and contains a 3D view. A 3D view component includes a \l {Scene Environment}{scene environment} as well as a scene diff --git a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/nodeinstanceserver.cpp b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/nodeinstanceserver.cpp index 80bfabebd58..1fda59c964e 100644 --- a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/nodeinstanceserver.cpp +++ b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/nodeinstanceserver.cpp @@ -564,10 +564,9 @@ void NodeInstanceServer::setupDefaultDummyData() qWarning() << error; } - if (m_dummyContextObject) { - qDebug() << "Loaded default dummy context object."; + if (m_dummyContextObject) m_dummyContextObject->setParent(this); - } + refreshBindings(); } diff --git a/share/qtcreator/qml/qmlpuppet/qmlprivategate/qmlprivategate_56.cpp b/share/qtcreator/qml/qmlpuppet/qmlprivategate/qmlprivategate_56.cpp index 8b2f6041657..e920263e1bd 100644 --- a/share/qtcreator/qml/qmlpuppet/qmlprivategate/qmlprivategate_56.cpp +++ b/share/qtcreator/qml/qmlpuppet/qmlprivategate/qmlprivategate_56.cpp @@ -378,7 +378,6 @@ void doComponentCompleteRecursive(QObject *object, NodeInstanceServer *nodeInsta } if (!isQuickStyleItem(item)) { - qDebug() << Q_FUNC_INFO << item; if (item) { static_cast(item)->componentComplete(); } else { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml index ca0ba9661d7..98b41da3051 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml @@ -157,9 +157,13 @@ PropertyEditorPane { visible: specificsOne.source.toString() !== "" } - AdvancedSection {} + AdvancedSection { + expanded: false + } - LayerSection {} + LayerSection { + expanded: false + } } Column { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentHorizontalButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentHorizontalButtons.qml index 2172430561b..ab83bea7d1d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentHorizontalButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentHorizontalButtons.qml @@ -34,10 +34,10 @@ Row { property string scope: "Text" property bool blueHighlight: false property variant backendValue: backendValues.horizontalAlignment - property variant value: backendValue.enumeration + property variant value: root.backendValue.enumeration property bool baseStateFlag: isBaseState - property color __currentColor: blueHighlight ? StudioTheme.Values.themeIconColorInteraction - : StudioTheme.Values.themeIconColor + property color __currentColor: root.blueHighlight ? StudioTheme.Values.themeIconColorInteraction + : StudioTheme.Values.themeIconColor onValueChanged: { buttonAlignLeft.checked = true @@ -45,45 +45,45 @@ Row { buttonAlignRight.checked = false buttonAlignJustify.checked = false - if (value !== undefined) { - if (value === "AlignLeft") + if (root.value !== undefined) { + if (root.value === "AlignLeft") buttonAlignLeft.checked = true - else if (value === "AlignHCenter") + else if (root.value === "AlignHCenter") buttonAlignHCenter.checked = true - else if (value === "AlignRight") + else if (root.value === "AlignRight") buttonAlignRight.checked = true - else if (value === "AlignJustify") + else if (root.value === "AlignJustify") buttonAlignJustify.checked = true } - evaluate() + root.evaluate() } property bool isInModel: { - if (backendValue !== undefined && backendValue.isInModel !== undefined) - return backendValue.isInModel + if (root.backendValue !== undefined && root.backendValue.isInModel !== undefined) + return root.backendValue.isInModel return false } - onIsInModelChanged: evaluate() + onIsInModelChanged: root.evaluate() property bool isInSubState: { - if (backendValue !== undefined && backendValue.isInSubState !== undefined) - return backendValue.isInSubState + if (root.backendValue !== undefined && root.backendValue.isInSubState !== undefined) + return root.backendValue.isInSubState return false } - onIsInSubStateChanged: evaluate() + onIsInSubStateChanged: root.evaluate() function evaluate() { - if (baseStateFlag) { - if (backendValue !== null && backendValue.isInModel) - blueHighlight = true + if (root.baseStateFlag) { + if (root.backendValue !== null && root.backendValue.isInModel) + root.blueHighlight = true else - blueHighlight = false + root.blueHighlight = false } else { - if (backendValue !== null && backendValue.isInSubState) - blueHighlight = true + if (root.backendValue !== null && root.backendValue.isInSubState) + root.blueHighlight = true else - blueHighlight = false + root.blueHighlight = false } } @@ -109,10 +109,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignLeft") + if (buttonAlignLeft.checked) + root.backendValue.setEnumeration(root.scope, "AlignLeft") } } @@ -122,10 +122,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignHCenter") + if (buttonAlignHCenter.checked) + root.backendValue.setEnumeration(root.scope, "AlignHCenter") } } @@ -135,10 +135,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignRight") + if (buttonAlignRight.checked) + root.backendValue.setEnumeration(root.scope, "AlignRight") } } @@ -148,10 +148,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignJustify") + if (buttonAlignRight.checked) + root.backendValue.setEnumeration(root.scope, "AlignJustify") } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentVerticalButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentVerticalButtons.qml index ea69901ae7a..488ba804be9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentVerticalButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AlignmentVerticalButtons.qml @@ -34,53 +34,53 @@ Row { property string scope: "Text" property bool blueHighlight: false property variant backendValue: backendValues.verticalAlignment - property variant value: backendValue.enumeration + property variant value: root.backendValue.enumeration property bool baseStateFlag: isBaseState - property color __currentColor: blueHighlight ? StudioTheme.Values.themeIconColorInteraction - : StudioTheme.Values.themeIconColor + property color __currentColor: root.blueHighlight ? StudioTheme.Values.themeIconColorInteraction + : StudioTheme.Values.themeIconColor onValueChanged: { buttonAlignTop.checked = true buttonAlignVCenter.checked = false buttonAlignBottom.checked = false - if (value !== undefined) { - if (value === "AlignTop") + if (root.value !== undefined) { + if (root.value === "AlignTop") buttonAlignTop.checked = true - else if (value === "AlignVCenter") + else if (root.value === "AlignVCenter") buttonAlignVCenter.checked = true - else if (value === "AlignBottom") + else if (root.value === "AlignBottom") buttonAlignBottom.checked = true } - evaluate() + root.evaluate() } property bool isInModel: { - if (backendValue !== undefined && backendValue.isInModel !== undefined) - return backendValue.isInModel + if (root.backendValue !== undefined && root.backendValue.isInModel !== undefined) + return root.backendValue.isInModel return false } - onIsInModelChanged: evaluate() + onIsInModelChanged: root.evaluate() property bool isInSubState: { - if (backendValue !== undefined && backendValue.isInSubState !== undefined) - return backendValue.isInSubState + if (root.backendValue !== undefined && root.backendValue.isInSubState !== undefined) + return root.backendValue.isInSubState return false } - onIsInSubStateChanged: evaluate() + onIsInSubStateChanged: root.evaluate() function evaluate() { - if (baseStateFlag) { - if (backendValue !== null && backendValue.isInModel) - blueHighlight = true + if (root.baseStateFlag) { + if (root.backendValue !== null && root.backendValue.isInModel) + root.blueHighlight = true else - blueHighlight = false + root.blueHighlight = false } else { - if (backendValue !== null && backendValue.isInSubState) - blueHighlight = true + if (root.backendValue !== null && root.backendValue.isInSubState) + root.blueHighlight = true else - blueHighlight = false + root.blueHighlight = false } } @@ -108,10 +108,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignTop") + if (buttonAlignTop.checked) + root.backendValue.setEnumeration(root.scope, "AlignTop") } } StudioControls.AbstractButton { @@ -120,10 +120,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignVCenter") + if (buttonAlignVCenter.checked) + root.backendValue.setEnumeration(root.scope, "AlignVCenter") } } StudioControls.AbstractButton { @@ -132,10 +132,10 @@ Row { checkable: true autoExclusive: true StudioControls.ButtonGroup.group: group - iconColor: __currentColor + iconColor: root.__currentColor onClicked: { - if (checked) - backendValue.setEnumeration(root.scope, "AlignBottom") + if (buttonAlignBottom.checked) + root.backendValue.setEnumeration(root.scope, "AlignBottom") } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml index 7477d0baf58..b633167681b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml @@ -34,46 +34,42 @@ StudioControls.Button { property variant backendValue property bool isHighlighted: false - iconColor: isHighlighted ? StudioTheme.Values.themeIconColorInteraction - : StudioTheme.Values.themeIconColor + iconColor: button.isHighlighted ? StudioTheme.Values.themeIconColorInteraction + : StudioTheme.Values.themeIconColor actionIndicatorVisible: true checkable: true QtObject { id: innerObject + function evaluate() { if (innerObject.baseStateFlag) { - if (button.backendValue !== null - && innerObject.isInModel) { - isHighlighted = true - } else { - isHighlighted = false - } + if (button.backendValue !== null && innerObject.isInModel) + button.isHighlighted = true + else + button.isHighlighted = false } else { - if (button.backendValue !== null - && innerObject.isInSubState) { - isHighlighted = true - } else { - isHighlighted = false - } + if (button.backendValue !== null && innerObject.isInSubState) + button.isHighlighted = true + else + button.isHighlighted = false } } property bool baseStateFlag: isBaseState - onBaseStateFlagChanged: evaluate() + onBaseStateFlagChanged: innerObject.evaluate() property bool isInModel: button.backendValue === undefined ? false : button.backendValue.isInModel - onIsInModelChanged: evaluate() - + onIsInModelChanged: innerObject.evaluate() property bool isInSubState: button.backendValue === undefined ? false : button.backendValue.isInSubState - onIsInSubStateChanged: evaluate() + onIsInSubStateChanged: innerObject.evaluate() property variant theValue: button.backendValue === undefined ? 0 : button.backendValue.value onTheValueChanged: { - evaluate() + innerObject.evaluate() button.checked = innerObject.theValue } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml index 1b9c483c89b..6348df0c584 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml @@ -48,6 +48,8 @@ Row { // + StudioTheme.Values.border on width because of negative spacing on the row width: actionIndicator.visible ? myButtonRow.__actionIndicatorWidth + StudioTheme.Values.border : 0 height: actionIndicator.visible ? myButtonRow.__actionIndicatorHeight : 0 + + onHoverChanged: myButtonRow.hoverCallback() } spacing: -StudioTheme.Values.border diff --git a/src/plugins/cmakeprojectmanager/cmakespecificsettings.cpp b/src/plugins/cmakeprojectmanager/cmakespecificsettings.cpp index 8a87865057f..2c1702eba1d 100644 --- a/src/plugins/cmakeprojectmanager/cmakespecificsettings.cpp +++ b/src/plugins/cmakeprojectmanager/cmakespecificsettings.cpp @@ -25,6 +25,7 @@ #include "cmakespecificsettings.h" +#include #include #include @@ -36,6 +37,9 @@ namespace Internal { CMakeSpecificSettings::CMakeSpecificSettings() { + // TODO: fixup of QTCREATORBUG-26289 , remove in Qt Creator 7 or so + Core::ICore::settings()->remove("CMakeSpecificSettings/NinjaPath"); + setSettingsGroup("CMakeSpecificSettings"); setAutoApply(false); @@ -51,6 +55,9 @@ CMakeSpecificSettings::CMakeSpecificSettings() registerAspect(&ninjaPath); ninjaPath.setSettingsKey("NinjaPath"); + // never save this to the settings: + ninjaPath.setToSettingsTransformation( + [](const QVariant &) { return QVariant::fromValue(QString()); }); registerAspect(&packageManagerAutoSetup); packageManagerAutoSetup.setSettingsKey("PackageManagerAutoSetup"); diff --git a/src/plugins/coreplugin/fancytabwidget.cpp b/src/plugins/coreplugin/fancytabwidget.cpp index 00f5d74fcc9..c72b89762df 100644 --- a/src/plugins/coreplugin/fancytabwidget.cpp +++ b/src/plugins/coreplugin/fancytabwidget.cpp @@ -551,6 +551,12 @@ void FancyTabWidget::insertTab(int index, QWidget *tab, const QIcon &icon, const m_tabBar->insertTab(index, icon, label, hasMenu); } +void FancyTabWidget::removeTab(int index) +{ + m_modesStack->removeWidget(m_modesStack->widget(index)); + m_tabBar->removeTab(index); +} + void FancyTabWidget::setBackgroundBrush(const QBrush &brush) { QPalette pal; diff --git a/src/plugins/coreplugin/fancytabwidget.h b/src/plugins/coreplugin/fancytabwidget.h index c52376c5456..8c5544665df 100644 --- a/src/plugins/coreplugin/fancytabwidget.h +++ b/src/plugins/coreplugin/fancytabwidget.h @@ -109,6 +109,12 @@ public: updateGeometry(); } void setEnabled(int index, bool enabled); + void removeTab(int index) + { + FancyTab *tab = m_tabs.takeAt(index); + delete tab; + updateGeometry(); + } void setCurrentIndex(int index); int currentIndex() const { return m_currentIndex; } @@ -142,6 +148,7 @@ public: FancyTabWidget(QWidget *parent = nullptr); void insertTab(int index, QWidget *tab, const QIcon &icon, const QString &label, bool hasMenu); + void removeTab(int index); void setBackgroundBrush(const QBrush &brush); void addCornerWidget(QWidget *widget); void insertCornerWidget(int pos, QWidget *widget); diff --git a/src/plugins/coreplugin/modemanager.cpp b/src/plugins/coreplugin/modemanager.cpp index c8c33519e1d..4a7e3cf3695 100644 --- a/src/plugins/coreplugin/modemanager.cpp +++ b/src/plugins/coreplugin/modemanager.cpp @@ -256,6 +256,21 @@ void ModeManagerPrivate::appendMode(IMode *mode) QObject::connect(mode, &IMode::enabledStateChanged, [this, mode] { enabledStateChanged(mode); }); } +void ModeManager::removeMode(IMode *mode) +{ + const int index = d->m_modes.indexOf(mode); + if (index >= d->m_modes.size() - 1 && d->m_modes.size() > 1) + d->m_modeStack->setCurrentIndex(d->m_modes.size() - 2); + d->m_modes.remove(index); + if (d->m_startingUp) + return; + + d->m_modeCommands.remove(index); + d->m_modeStack->removeTab(index); + + d->m_mainWindow->removeContextObject(mode); +} + void ModeManagerPrivate::enabledStateChanged(IMode *mode) { int index = d->m_modes.indexOf(mode); diff --git a/src/plugins/coreplugin/modemanager.h b/src/plugins/coreplugin/modemanager.h index 7ba0393ce86..cbf963df9da 100644 --- a/src/plugins/coreplugin/modemanager.h +++ b/src/plugins/coreplugin/modemanager.h @@ -67,6 +67,8 @@ public: static void setFocusToCurrentMode(); static Style modeStyle(); + static void removeMode(IMode *mode); + public slots: static void setModeStyle(Style layout); static void cycleModeStyle(); diff --git a/src/plugins/coreplugin/welcomepagehelper.cpp b/src/plugins/coreplugin/welcomepagehelper.cpp index 15b5591bf61..00489b3de35 100644 --- a/src/plugins/coreplugin/welcomepagehelper.cpp +++ b/src/plugins/coreplugin/welcomepagehelper.cpp @@ -30,6 +30,7 @@ #include #include +#include #include #include #include @@ -38,6 +39,8 @@ #include #include +#include + namespace Core { using namespace Utils; @@ -483,6 +486,7 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti QTextOption wrapped; wrapped.setWrapMode(QTextOption::WordWrap); int offset = 0; + float animationProgress = 0; // Linear increase from 0.0 to 1.0 during hover animation if (hovered) { if (index != m_previousIndex) { m_previousIndex = index; @@ -491,9 +495,11 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti m_currentWidget = qobject_cast( const_cast(option.widget)); } - offset = m_startTime.elapsed() * GridProxyModel::GridItemHeight / 200; // Duration 200 ms. + animationProgress = m_startTime.elapsed() / 200.0; // Duration 200 ms. + static const QEasingCurve animationCurve(QEasingCurve::OutQuad); + offset = animationCurve.valueForProgress(animationProgress) * shiftY; if (offset < shiftY) - QTimer::singleShot(5, this, &ListItemDelegate::goon); + QTimer::singleShot(10, this, &ListItemDelegate::goon); else if (offset > shiftY) offset = shiftY; } else { @@ -504,9 +510,9 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti const QRect shiftedTextRect = textRect.adjusted(0, -offset, 0, -offset); // The pixmap. - if (offset == 0) { + if (offset < shiftY) { QPixmap pm = index.data(ListModel::ItemImageRole).value(); - QRect inner(x + 11, y - offset, ListModel::defaultImageSize.width(), + QRect inner(x + 11, y, ListModel::defaultImageSize.width(), ListModel::defaultImageSize.height()); QRect pixmapRect = inner; if (!pm.isNull()) { @@ -527,8 +533,13 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti painter->setFont(sizedFont(11, option.widget)); painter->drawText(pixmapRect.adjusted(6, 10, -6, -10), item->description, wrapped); } - painter->setPen(foregroundColor1); - painter->drawRect(pixmapRect.adjusted(-1, -1, -1, -1)); + qDrawPlainRect(painter, pixmapRect.translated(-1, -1), foregroundColor1); + } + + // The description background rect + if (offset) { + QRect backgroundRect = shiftedTextRect.adjusted(0, -16, 0, 0); + painter->fillRect(backgroundRect, backgroundColor); } // The title of the example. @@ -548,6 +559,7 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti if (offset) { int ll = nameRect.bottom() + 5; painter->setPen(lightColor); + painter->setOpacity(animationProgress); // "fade in" separator line and description painter->drawLine(x, ll, x + w, ll); } @@ -558,6 +570,7 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti painter->setPen(foregroundColor2); painter->setFont(sizedFont(11, option.widget)); painter->drawText(descRect, item->description, wrapped); + painter->setOpacity(1); } // Separator line between text and 'Tags:' section @@ -591,11 +604,8 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti } // Box it when hovered. - if (hovered) { - painter->setPen(lightColor); - painter->drawRect(rc.adjusted(0, 0, -1, -1)); - } - + if (hovered) + qDrawPlainRect(painter, rc, lightColor); } bool ListItemDelegate::editorEvent(QEvent *event, QAbstractItemModel *model, diff --git a/src/plugins/debugger/gdb/gdbengine.cpp b/src/plugins/debugger/gdb/gdbengine.cpp index e8733d7814d..4b51fd31942 100644 --- a/src/plugins/debugger/gdb/gdbengine.cpp +++ b/src/plugins/debugger/gdb/gdbengine.cpp @@ -4469,10 +4469,16 @@ void GdbEngine::setupInferior() ? QString("Going to attach to %1 (%2)").arg(attachedPID).arg(attachedMainThreadID) : QString("Going to attach to %1").arg(attachedPID); showMessage(msg, LogMisc); - const QString executable - = runParameters().inferior.command.executable().toFileInfo().absoluteFilePath(); - runCommand({"-file-exec-and-symbols \"" + executable + '"', - CB(handleFileExecAndSymbols)}); + // For some reason, this breaks GDB 9 on Linux. See QTCREATORBUG-26299. + if (HostOsInfo::isWindowsHost() && m_gdbVersion >= 100000) { + // Required for debugging MinGW32 apps with 64-bit GDB. See QTCREATORBUG-26208. + const QString executable + = runParameters().inferior.command.executable().toFileInfo().absoluteFilePath(); + runCommand({"-file-exec-and-symbols \"" + executable + '"', + CB(handleFileExecAndSymbols)}); + } else { + handleInferiorPrepared(); + } } else if (isPlainEngine()) { setEnvironmentVariables();