QmlProjectManager: Update landing page

* Make landing page responsive * Use QtCreator welcome page theme colors * Remove CMake from landing page * Separate colors from values to make mocking data less redundant * Add quick version to qt version check * Use qml singleton for backend instead of using the root context item Change-Id: Ic303d4713c348e34197716031b303720702f3e98 Reviewed-by: <github-actions-qt-creator@cristianadam.eu> Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
author: Henning Gruendl <henning.gruendl@qt.io> 2022-06-20 23:51:16 +0200
committer: Henning Gründl <henning.gruendl@qt.io> 2022-06-24 11:48:35 +0000
commit: 85cd97a33446699f97a21429ceb22f3acf40a5be (patch)
tree: e26161303f4a30c06765f86caf2c55f340a75687
parent: e3cfbc0a7b2fcdad43efe8bb515dfd06dba98710 (diff)
26 files changed, 798 insertions, 836 deletions
diff --git a/share/qtcreator/qmldesigner/landingpage/content/App.qml b/share/qtcreator/qmldesigner/landingpage/content/App.qml
index 1a5e1efe05e..e93ad196e1a 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/App.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/App.qml
@@ -28,35 +28,15 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import QtQuick.Window 2.15
 
 Item {
+    id: root
     width: 1024
     height: 768
-
     visible: true
-    property alias qtVersion: mainScreen.qtVersion
-    property alias qdsVersion: mainScreen.qdsVersion
-    property alias cmakeLists: mainScreen.cmakeLists
-    property alias qdsInstalled: mainScreen.qdsInstalled
-    property alias projectFileExists: mainScreen.projectFileExists
-    property alias rememberSelection: mainScreen.rememberCheckboxCheckState
-
-    signal openQtc(bool rememberSelection)
-    signal openQds(bool rememberSelection)
-    signal installQds()
-    signal generateCmake()
-    signal generateProjectFile()
 
     Screen01 {
         id: mainScreen
         anchors.fill: parent
-        openQtcButton.onClicked: openQtc(rememberSelection === Qt.Checked)
-        openQdsButton.onClicked: openQds(rememberSelection === Qt.Checked)
-        installButton.onClicked: installQds()
-        generateCmakeButton.onClicked: generateCmake()
-        generateProjectFileButton.onClicked: generateProjectFile()
     }
-
 }
-
diff --git a/share/qtcreator/qmldesigner/landingpage/content/CustomCheckBox.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/CustomCheckBox.ui.qml
new file mode 100644
index 00000000000..8d91f695429
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/content/CustomCheckBox.ui.qml
@@ -0,0 +1,135 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Templates 2.15
+import LandingPage as Theme
+
+CheckBox {
+    id: control
+    autoExclusive: false
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: Theme.Values.checkBoxSpacing
+    hoverEnabled: true
+    font.family: Theme.Values.baseFont
+
+    indicator: Rectangle {
+        id: checkBoxBackground
+        implicitWidth: Theme.Values.checkBoxSize
+        implicitHeight: Theme.Values.checkBoxSize
+        x: 0
+        y: parent.height / 2 - height / 2
+        color: Theme.Colors.backgroundPrimary
+        border.color: Theme.Colors.foregroundSecondary
+        border.width: Theme.Values.border
+
+        Rectangle {
+            id: checkBoxIndicator
+            width: Theme.Values.checkBoxIndicatorSize
+            height: Theme.Values.checkBoxIndicatorSize
+            x: (Theme.Values.checkBoxSize - Theme.Values.checkBoxIndicatorSize) * 0.5
+            y: (Theme.Values.checkBoxSize - Theme.Values.checkBoxIndicatorSize) * 0.5
+            color: Theme.Colors.accent
+            visible: control.checked
+        }
+    }
+
+    contentItem: Text {
+        id: checkBoxLabel
+        text: control.text
+        font: control.font
+        color: Theme.Colors.text
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: control.enabled && !control.hovered && !control.pressed
+            PropertyChanges {
+                target: checkBoxBackground
+                color: Theme.Colors.backgroundPrimary
+                border.color: Theme.Colors.foregroundSecondary
+            }
+            PropertyChanges {
+                target: checkBoxLabel
+                color: Theme.Colors.text
+            }
+        },
+        State {
+            name: "hover"
+            when: control.enabled && control.hovered && !control.pressed
+            PropertyChanges {
+                target: checkBoxBackground
+                color: Theme.Colors.hover
+                border.color: Theme.Colors.foregroundSecondary
+            }
+        },
+        State {
+            name: "press"
+            when: control.hovered && control.pressed
+            PropertyChanges {
+                target: checkBoxBackground
+                color: Theme.Colors.hover
+                border.color: Theme.Colors.accent
+            }
+            PropertyChanges {
+                target: checkBoxIndicator
+                color: Theme.Colors.backgroundSecondary
+            }
+        },
+        State {
+            name: "disable"
+            when: !control.enabled
+            PropertyChanges {
+                target: checkBoxBackground
+                color: Theme.Colors.backgroundPrimary
+                border.color: Theme.Colors.disabledLink
+            }
+            PropertyChanges {
+                target: checkBoxIndicator
+                color: Theme.Colors.disabledLink
+            }
+            PropertyChanges {
+                target: checkBoxLabel
+                color: Theme.Colors.disabledLink
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:40;width:142}
+}
+##^##*/
+
diff --git a/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml
index 35c363583c6..6948e216bec 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml
@@ -33,46 +33,48 @@ It is supposed to be strictly declarative and only uses a subset of QML. If you
 this file manually, you might introduce QML code that is not supported by Qt Design Studio.
 Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
 */
+
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import LandingPage
-import QdsLandingPageTheme as Theme
+import LandingPageApi
+import LandingPage as Theme
 
 Rectangle {
-    id: installQdsBlock
-    color: Theme.Values.themeBackgroundColorNormal
-    border.width: 0
-    property alias installQdsBlockVisible: installQdsBlock.visible
-    property alias installButton: installButton
-    height: 200
+    id: root
 
-    Text {
-        id: statusText
-        text: qsTr("No Qt Design Studio installation found")
-        font.family: Theme.Values.baseFont
-        font.pixelSize: Constants.fontSizeSubtitle
-        anchors.top: parent.top
-        anchors.topMargin: 10
-        anchors.horizontalCenter: parent.horizontalCenter
-    }
+    color: Theme.Colors.backgroundSecondary
+    height: column.childrenRect.height + (2 * Theme.Values.spacing)
 
-    Text {
-        id: suggestionText
-        text: qsTr("Would you like to install it now?")
-        font.family: Theme.Values.baseFont
-        font.pixelSize: Constants.fontSizeSubtitle
-        anchors.top: statusText.bottom
-        anchors.topMargin: 10
-        anchors.horizontalCenterOffset: 0
-        anchors.horizontalCenter: parent.horizontalCenter
+    Connections {
+        target: installButton
+        function onClicked() { LandingPageApi.installQds() }
     }
 
-    PushButton {
-        id: installButton
-        anchors.top: suggestionText.bottom
-        text: "Install"
-        anchors.topMargin: Constants.buttonDefaultMargin
-        anchors.horizontalCenterOffset: 0
-        anchors.horizontalCenter: parent.horizontalCenter
+    Column {
+        id: column
+
+        width: parent.width
+        anchors.centerIn: parent
+
+        PageText {
+            id: statusText
+            width: parent.width
+            topPadding: 0
+            padding: Theme.Values.spacing
+            text: qsTr("No Qt Design Studio installation found")
+        }
+
+        PageText {
+            id: suggestionText
+            width: parent.width
+            padding: Theme.Values.spacing
+            text: qsTr("Would you like to install it now?")
+        }
+
+        PushButton {
+            id: installButton
+            text: qsTr("Install")
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
     }
 }
diff --git a/share/qtcreator/qmldesigner/landingpage/content/PageText.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/PageText.ui.qml
new file mode 100644
index 00000000000..94fb973084e
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/content/PageText.ui.qml
@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*
+This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
+It is supposed to be strictly declarative and only uses a subset of QML. If you edit
+this file manually, you might introduce QML code that is not supported by Qt Design Studio.
+Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
+*/
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import LandingPage as Theme
+
+Text {
+    font.family: Theme.Values.baseFont
+    font.pixelSize: Theme.Values.fontSizeSubtitle
+    horizontalAlignment: Text.AlignHCenter
+    color: Theme.Colors.text
+    anchors.horizontalCenter: parent.horizontalCenter
+    wrapMode: Text.WordWrap
+}
diff --git a/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml
index 40e9f5e3fc6..67108eb0860 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml
@@ -33,171 +33,78 @@ It is supposed to be strictly declarative and only uses a subset of QML. If you
 this file manually, you might introduce QML code that is not supported by Qt Design Studio.
 Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
 */
+
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import LandingPage
-import QdsLandingPageTheme as Theme
+import QtQuick.Layouts 1.15
+import LandingPageApi
+import LandingPage as Theme
 
 Rectangle {
-    id: projectInfo
-    height: 300
-    color: Theme.Values.themeBackgroundColorNormal
-    border.color: Theme.Values.themeBackgroundColorNormal
-    border.width: 0
+    id: root
+
     property bool qdsInstalled: qdsVersionText.text.length > 0
     property bool projectFileExists: false
-    property string qdsVersion: "UNKNOWN"
-    property string qtVersion: "UNKNOWN"
-    property alias cmakeListText: cmakeList.text
-    property alias generateCmakeButton: generateCmakeButton
+    property string qtVersion: qsTr("Unknown")
+    property string qdsVersion: qsTr("Unknown")
     property alias generateProjectFileButton: generateProjectFileButton
 
-    Item {
-        id: projectFileInfoBox
-        width: projectInfo.width
-        height: 150
-        anchors.top: parent.top
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.topMargin: 30
+    color: Theme.Colors.backgroundSecondary
+    height: column.childrenRect.height + (2 * Theme.Values.spacing)
+
+    Connections {
+        target: generateProjectFileButton
+        function onClicked() { LandingPageApi.generateProjectFile() }
+    }
 
-        Text {
+    Column {
+        id: column
+
+        width: parent.width
+        anchors.centerIn: parent
+        spacing: Theme.Values.spacing
+
+        PageText {
             id: projectFileInfoTitle
+            width: parent.width
             text: qsTr("QML PROJECT FILE INFO")
-            font.family: Theme.Values.baseFont
-            font.pixelSize: Constants.fontSizeSubtitle
-            anchors.top: parent.top
-            horizontalAlignment: Text.AlignHCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: 10
         }
 
-        Item {
+        Column {
             id: projectFileInfoVersionBox
             width: parent.width
-            height: 150
-            visible: projectFileExists
-            anchors.top: projectFileInfoTitle.bottom
-            anchors.topMargin: 0
-            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.projectFileExists
 
-            Text {
+            PageText {
                 id: qtVersionText
-                text: qsTr("Qt Version - ") + qtVersion
-                font.family: Theme.Values.baseFont
-                font.pixelSize: Constants.fontSizeSubtitle
-                anchors.top: parent.top
-                horizontalAlignment: Text.AlignHCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.topMargin: 10
+                width: parent.width
+                padding: Theme.Values.spacing
+                text: qsTr("Qt Version - ") + root.qtVersion
             }
 
-            Text {
+            PageText {
                 id: qdsVersionText
-                text: qsTr("Qt Design Studio Version - ") + qdsVersion
-                font.family: Theme.Values.baseFont
-                font.pixelSize: Constants.fontSizeSubtitle
-                anchors.top: qtVersionText.bottom
-                horizontalAlignment: Text.AlignHCenter
-                anchors.topMargin: 10
-                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width
+                padding: Theme.Values.spacing
+                text: qsTr("Qt Design Studio Version - ") + root.qdsVersion
             }
         }
 
-        Item {
+        Column {
             id: projectFileInfoMissingBox
             width: parent.width
-            height: 200
             visible: !projectFileInfoVersionBox.visible
-            anchors.top: projectFileInfoTitle.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: 0
 
-            Text {
+            PageText {
                 id: projectFileInfoMissingText
+                width: parent.width
+                padding: Theme.Values.spacing
                 text: qsTr("No QML project file found - Would you like to create one?")
-                font.family: Theme.Values.baseFont
-                font.pixelSize: Constants.fontSizeSubtitle
-                anchors.top: parent.top
-                horizontalAlignment: Text.AlignHCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.topMargin: 10
             }
 
             PushButton {
                 id: generateProjectFileButton
-                anchors.top: projectFileInfoMissingText.bottom
-                text: "Generate"
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.topMargin: Constants.buttonDefaultMargin
-            }
-        }
-    }
-
-    Item {
-        id: cmakeInfoBox
-        width: projectInfo.width
-        height: 200
-        anchors.top: projectFileInfoBox.bottom
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.topMargin: 40
-
-        Text {
-            id: cmakeInfoTitle
-            text: qsTr("CMAKE RESOURCE FILES")
-            font.family: Theme.Values.baseFont
-            font.pixelSize: Constants.fontSizeSubtitle
-            anchors.top: parent.top
-            horizontalAlignment: Text.AlignHCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: 10
-        }
-
-        Item {
-            id: cmakeListBox
-            width: 150
-            height: 40
-            visible: cmakeListText.length > 0
-            anchors.top: cmakeInfoTitle.bottom
-            anchors.topMargin: 10
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            Text {
-                id: cmakeList
-                text: qsTr("")
-                font.family: "TitilliumWeb"
-                font.pixelSize: Constants.fontSizeSubtitle
-                anchors.top: parent.top
-                horizontalAlignment: Text.AlignHCenter
-                anchors.topMargin: 0
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-        }
-
-        Item {
-            id: cmakeMissingBox
-            width: cmakeInfoBox.width
-            height: 200
-            visible: cmakeListText.length === 0
-            anchors.top: cmakeInfoTitle.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: 10
-
-            Text {
-                id: cmakeMissingText
-                text: qsTr("No resource files found - Would you like to generate them?")
-                font.family: Theme.Values.baseFont
-                font.pixelSize: Constants.fontSizeSubtitle
-                anchors.top: parent.top
-                horizontalAlignment: Text.AlignHCenter
-                anchors.topMargin: 10
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            PushButton {
-                id: generateCmakeButton
-                anchors.top: cmakeMissingText.bottom
-                text: "Generate"
-                anchors.topMargin: Constants.buttonDefaultMargin
+                text: qsTr("Generate")
                 anchors.horizontalCenter: parent.horizontalCenter
             }
         }
diff --git a/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml
index be872c21d7d..116940870ee 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml
@@ -1,5 +1,3 @@
-
-
 /****************************************************************************
 **
 ** Copyright (C) 2021 The Qt Company Ltd.
@@ -24,49 +22,38 @@
 ** be met: https://www.gnu.org/licenses/gpl-3.0.html.
 **
 ****************************************************************************/
+
 import QtQuick 2.15
 import QtQuick.Templates 2.15
-import QdsLandingPageTheme as Theme
+import LandingPage as Theme
 
 Button {
     id: control
 
-    implicitWidth: Math.max(
-                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       textItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        textItem.implicitHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
-
-    text: "My Button"
-    property alias fontpixelSize: textItem.font.pixelSize
-    property bool forceHover: false
     hoverEnabled: true
-    state: "normal"
+    font.family: Theme.Values.baseFont
+    font.pixelSize: 16
 
-    background: buttonBackground
-    Rectangle {
+    background: Rectangle {
         id: buttonBackground
-        color: Theme.Values.themeControlBackground
+        color: Theme.Colors.backgroundPrimary
         implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        radius: 2
-        border.color: Theme.Values.themeControlOutline
+        implicitHeight: 35
+        border.color: Theme.Colors.foregroundSecondary
         anchors.fill: parent
     }
 
-    contentItem: textItem
-
-    Text {
+    contentItem: Text {
         id: textItem
         text: control.text
-        font.pixelSize: 18
-
-        opacity: enabled ? 1.0 : 0.3
-        color: Theme.Values.themeTextColor
+        font: control.font
+        color: Theme.Colors.text
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         rightPadding: 5
@@ -75,46 +62,51 @@ Button {
 
     states: [
         State {
-            name: "normal"
-            when: !control.down && !control.hovered && !control.forceHover
-
+            name: "default"
+            when: control.enabled && !control.hovered && !control.pressed && !control.checked
             PropertyChanges {
                 target: buttonBackground
-                color: Theme.Values.themeControlBackground
-                border.color: Theme.Values.themeControlOutline
+                color: Theme.Colors.backgroundPrimary
             }
-
             PropertyChanges {
                 target: textItem
-                color: Theme.Values.themeTextColor
+                color: Theme.Colors.text
             }
         },
         State {
             name: "hover"
-            when: (control.hovered || control.forceHover) && !control.down
-            PropertyChanges {
-                target: textItem
-                color: Theme.Values.themeTextColor
-            }
-
+            extend: "default"
+            when: control.enabled && control.hovered && !control.pressed
             PropertyChanges {
                 target: buttonBackground
-                color: Theme.Values.themeControlBackgroundHover
-                border.color: Theme.Values.themeControlBackgroundHover
+                color: Theme.Colors.hover
             }
         },
         State {
-            name: "activeQds"
-            when: control.down
+            name: "press"
+            extend: "default"
+            when: control.hovered && control.pressed
+            PropertyChanges {
+                target: buttonBackground
+                color: Theme.Colors.accent
+                border.color: Theme.Colors.accent
+            }
             PropertyChanges {
                 target: textItem
-                color: Theme.Values.themeTextColor
+                color: Theme.Colors.backgroundPrimary
             }
-
+        },
+        State {
+            name: "disable"
+            when: !control.enabled
             PropertyChanges {
                 target: buttonBackground
-                color: Theme.Values.themeControlBackgroundInteraction
-                border.color: Theme.Values.themeControlOutlineInteraction
+                color: Theme.Colors.backgroundPrimary
+                border.color: Theme.Colors.disabledLink
+            }
+            PropertyChanges {
+                target: textItem
+                color: Theme.Colors.disabledLink
             }
         }
     ]
diff --git a/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml
index c3521001e64..9e1d29197e7 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml
@@ -33,167 +33,190 @@ It is supposed to be strictly declarative and only uses a subset of QML. If you
 this file manually, you might introduce QML code that is not supported by Qt Design Studio.
 Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
 */
+
 import QtQuick 2.15
 import QtQuick.Controls 6.2
-import LandingPage
+import QtQuick.Layouts 1.15
 import LandingPageApi
-import QdsLandingPageTheme as Theme
+import LandingPage as Theme
 
 Rectangle {
-    id: rectangle2
+    id: root
+
     width: 1024
     height: 768
-    color: Theme.Values.themeBackgroundColorNormal
-    property bool qdsInstalled: true
-    property alias openQtcButton: openQtc
-    property alias openQdsButton: openQds
-    property alias projectFileExists: projectInfoStatusBlock.projectFileExists
-    property alias installButton: installQdsStatusBlock.installButton
-    property alias generateCmakeButton: projectInfoStatusBlock.generateCmakeButton
-    property alias generateProjectFileButton: projectInfoStatusBlock.generateProjectFileButton
-    property alias qtVersion: projectInfoStatusBlock.qtVersion
-    property alias qdsVersion: projectInfoStatusBlock.qdsVersion
-    property alias cmakeLists: projectInfoStatusBlock.cmakeListText
-    property alias installQdsBlockVisible: installQdsStatusBlock.visible
-    property alias rememberCheckboxCheckState: rememberCheckbox.checkState
-
-    Rectangle {
-        id: logoArea
-        width: parent.width
-        height: 180
-        color: Theme.Values.themeBackgroundColorNormal
-        anchors.top: parent.top
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        Image {
-            id: qdsLogo
-            source: "logo.png"
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 30
-        }
+    color: Theme.Colors.backgroundPrimary
 
-        Text {
-            id: qdsText
-            text: qsTr("Qt Design Studio")
-            font.pixelSize: Constants.fontSizeTitle
-            font.family: Theme.Values.baseFont
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 20
-        }
+    Connections {
+        target: openQds
+        function onClicked() { LandingPageApi.openQds(rememberCheckbox.checkState === Qt.Checked) }
     }
 
-    Item {
-        id: statusBox
-        anchors.top: logoArea.bottom
-        anchors.bottom: buttonBox.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        anchors.leftMargin: 0
-
-        LandingSeparator {
-            id: topSeparator
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        InstallQdsStatusBlock {
-            id: installQdsStatusBlock
-            width: parent.width
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            visible: !qdsInstalled
-        }
-
-        ProjectInfoStatusBlock {
-            id: projectInfoStatusBlock
-            width: parent.width
-            visible: !installQdsStatusBlock.visible
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        LandingSeparator {
-            id: bottomSeparator
-            anchors.bottom: parent.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
+    Connections {
+        target: openQtc
+        function onClicked() { LandingPageApi.openQtc(rememberCheckbox.checkState === Qt.Checked) }
     }
 
-    Rectangle {
-        id: buttonBox
-        width: parent.width
-        height: 220
-        anchors.bottom: parent.bottom
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.Values.themeBackgroundColorNormal
-
-        Item {
-            id: openQdsBox
-            width: parent.width / 2
-            height: parent.height
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
-            anchors.leftMargin: 0
-
-            Text {
-                id: openQdsText
-                text: qsTr("Open with Qt Design Studio")
-                font.pixelSize: Constants.fontSizeSubtitle
-                font.family: Theme.Values.baseFont
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: parent.top
-                anchors.topMargin: 50
+    states: [
+        State {
+            name: "large"
+            when: root.width > Theme.Values.layoutBreakpointLG
+            PropertyChanges {
+                target: Theme.Values
+                fontSizeTitle: Theme.Values.fontSizeTitleLG
+                fontSizeSubtitle: Theme.Values.fontSizeSubtitleLG
             }
-
-            PushButton {
-                id: openQds
-                anchors.top: openQdsText.bottom
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: "Open"
-                anchors.topMargin: Constants.buttonSmallMargin
-                enabled: qdsInstalled
+            PropertyChanges {
+                target: buttonBoxGrid
+                columns: 2
+            }
+        },
+        State {
+            name: "medium"
+            when: root.width <= Theme.Values.layoutBreakpointLG
+                  && root.width > Theme.Values.layoutBreakpointMD
+            PropertyChanges {
+                target: Theme.Values
+                fontSizeTitle: Theme.Values.fontSizeTitleMD
+                fontSizeSubtitle: Theme.Values.fontSizeSubtitleMD
+            }
+            PropertyChanges {
+                target: buttonBoxGrid
+                columns: 2
+            }
+        },
+        State {
+            name: "small"
+            when: root.width <= Theme.Values.layoutBreakpointMD
+            PropertyChanges {
+                target: Theme.Values
+                fontSizeTitle: Theme.Values.fontSizeTitleSM
+                fontSizeSubtitle: Theme.Values.fontSizeSubtitleSM
+            }
+            PropertyChanges {
+                target: buttonBoxGrid
+                columns: 1
             }
         }
+    ]
+
+    ScrollView {
+        id: scrollView
+        anchors.fill: root
+
+        Column {
+            id: layout
+            spacing: 0
+            width: scrollView.width
+
+            Item {
+                width: layout.width
+                height: logoSection.childrenRect.height + (2 * Theme.Values.spacing)
+
+                Column {
+                    id: logoSection
+                    spacing: 10
+                    anchors.centerIn: parent
+
+                    Image {
+                        id: qdsLogo
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        source: "logo.png"
+                    }
+
+                    Text {
+                        id: qdsText
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        text: qsTr("Qt Design Studio")
+                        font.pixelSize: Theme.Values.fontSizeTitle
+                        font.family: Theme.Values.baseFont
+                        color: Theme.Colors.text
+                    }
+                }
+            }
 
-        Item {
-            id: openQtcBox
-            width: parent.width / 2
-            height: parent.height
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
-            anchors.rightMargin: 0
-
-            Text {
-                id: openQtcText
-                text: qsTr("Open with Qt Creator - Text Mode")
-                font.pixelSize: Constants.fontSizeSubtitle
-                font.family: Theme.Values.baseFont
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: parent.top
-                anchors.topMargin: 50
+            InstallQdsStatusBlock {
+                id: installQdsStatusBlock
+                width: parent.width
+                visible: !LandingPageApi.qdsInstalled
             }
 
-            PushButton {
-                id: openQtc
-                anchors.top: openQtcText.bottom
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.topMargin: Constants.buttonSmallMargin
-                text: "Open"
+            ProjectInfoStatusBlock {
+                id: projectInfoStatusBlock
+                width: parent.width
+                visible: !installQdsStatusBlock.visible
+                projectFileExists: LandingPageApi.projectFileExists
+                qtVersion: LandingPageApi.qtVersion
+                qdsVersion: LandingPageApi.qdsVersion
             }
-        }
 
-        CheckBox {
-            id: rememberCheckbox
-            text: qsTr("Remember my choice")
-            font.family: Theme.Values.baseFont
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 30
-            anchors.horizontalCenter: parent.horizontalCenter
+            GridLayout {
+                id: buttonBoxGrid
+                anchors.horizontalCenter: parent.horizontalCenter
+                columns: 2
+                rows: 2
+                columnSpacing: 3 * Theme.Values.spacing
+                rowSpacing: Theme.Values.spacing
+
+                property int tmpWidth: textMetrics.width
+
+                TextMetrics {
+                    id: textMetrics
+                    text: openQtcText.text.length > openQdsText.text.length ? openQtcText.text
+                                                                            : openQdsText.text
+                    font.pixelSize: Theme.Values.fontSizeSubtitle
+                    font.family: Theme.Values.baseFont
+                }
+
+                Column {
+                    id: openQdsBox
+                    Layout.alignment: Qt.AlignHCenter
+
+                    PageText {
+                        id: openQdsText
+                        width: buttonBoxGrid.tmpWidth
+                        padding: Theme.Values.spacing
+                        text: qsTr("Open with Qt Design Studio")
+                        wrapMode: Text.NoWrap
+                    }
+
+                    PushButton {
+                        id: openQds
+                        text: qsTr("Open")
+                        enabled: LandingPageApi.qdsInstalled
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+
+                Column {
+                    id: openQtcBox
+                    Layout.alignment: Qt.AlignHCenter
+
+                    PageText {
+                        id: openQtcText
+                        width: buttonBoxGrid.tmpWidth
+                        padding: Theme.Values.spacing
+                        text: qsTr("Open with Qt Creator - Text Mode")
+                        wrapMode: Text.NoWrap
+                    }
+
+                    PushButton {
+                        id: openQtc
+                        text: qsTr("Open")
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+
+                CustomCheckBox {
+                    id: rememberCheckbox
+                    text: qsTr("Remember my choice")
+                    font.family: Theme.Values.baseFont
+                    Layout.columnSpan: buttonBoxGrid.columns
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.topMargin: Theme.Values.spacing
+                    Layout.bottomMargin: Theme.Values.spacing
+                }
+            }
         }
     }
 }
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Constants.qml b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/+QDS_theming/Colors.qml
index 9dc4144c4d9..a94f82a7ad3 100644
--- a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Constants.qml
+++ b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/+QDS_theming/Colors.qml
@@ -24,12 +24,16 @@
 ****************************************************************************/
 
 pragma Singleton
-import QtQuick 2.10
+import QtQuick 2.15
 
 QtObject {
-    readonly property int buttonDefaultMargin: 30
-    readonly property int buttonSmallMargin: 20
-
-    readonly property int fontSizeTitle: 55
-    readonly property int fontSizeSubtitle: 22
+    readonly property color text: "#ffe7e7e7"
+    readonly property color foregroundPrimary: "#ffa3a3a3"
+    readonly property color foregroundSecondary: "#ff808080"
+    readonly property color backgroundPrimary: "#ff333333"
+    readonly property color backgroundSecondary: "#ff232323"
+    readonly property color hover: "#ff404040"
+    readonly property color accent: "#ff57d658"
+    readonly property color link: "#ff67e668"
+    readonly property color disabledLink: "#7fffffff"
 }
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Colors.qml b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Colors.qml
new file mode 100644
index 00000000000..95956290f30
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Colors.qml
@@ -0,0 +1,40 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.15
+import LandingPageTheme
+
+QtObject {
+    readonly property color text: Theme.color(Theme.Welcome_TextColor)
+    readonly property color foregroundPrimary: Theme.color(Theme.Welcome_ForegroundPrimaryColor)
+    readonly property color foregroundSecondary: Theme.color(Theme.Welcome_ForegroundSecondaryColor)
+    readonly property color backgroundPrimary: Theme.color(Theme.Welcome_BackgroundPrimaryColor)
+    readonly property color backgroundSecondary: Theme.color(Theme.Welcome_BackgroundSecondaryColor)
+    readonly property color hover: Theme.color(Theme.Welcome_HoverColor)
+    readonly property color accent: Theme.color(Theme.Welcome_AccentColor)
+    readonly property color link: Theme.color(Theme.Welcome_LinkColor)
+    readonly property color disabledLink: Theme.color(Theme.Welcome_DisabledLinkColor)
+}
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Values.qml b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Values.qml
new file mode 100644
index 00000000000..89f71e78d37
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Values.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.15
+
+QtObject {
+    id: values
+
+    property string baseFont: "TitilliumWeb"
+
+    property real scaleFactor: 1.0
+    property real checkBoxSize: Math.round(26 * values.scaleFactor)
+    property real checkBoxIndicatorSize: Math.round(14 * values.scaleFactor)
+    property real checkBoxSpacing: Math.round(6 * values.scaleFactor)
+    property real border: 1
+
+    property int fontSizeTitle: values.fontSizeTitleLG
+    property int fontSizeSubtitle: values.fontSizeSubtitleLG
+
+    readonly property int fontSizeTitleSM: 20
+    readonly property int fontSizeTitleMD: 32
+    readonly property int fontSizeTitleLG: 50
+
+    readonly property int fontSizeSubtitleSM: 14
+    readonly property int fontSizeSubtitleMD: 18
+    readonly property int fontSizeSubtitleLG: 22
+
+    // LG > 1000, MD <= 1000 && > 720, SM <= 720
+    readonly property int layoutBreakpointLG: 1000
+    readonly property int layoutBreakpointMD: 720
+
+    readonly property int spacing: 20
+}
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/qmldir b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/qmldir
index 616ac203530..9773fc5d1ab 100644
--- a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/qmldir
+++ b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/qmldir
@@ -1 +1,2 @@
-singleton Constants 1.0 Constants.qml
+singleton Values 1.0 Values.qml
+singleton Colors 1.0 Colors.qml
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/Values.qml b/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/Values.qml
deleted file mode 100644
index 1ff4b5f0d0d..00000000000
--- a/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/Values.qml
+++ /dev/null
@@ -1,312 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2022 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** 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 General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-pragma Singleton
-import QtQuick 2.15
-import LandingPageTheme
-
-QtObject {
-    id: values
-
-    property string baseFont: "TitilliumWeb"
-
-    property real baseHeight: 29
-    property real baseFontSize: 12
-    property real baseIconFont: 12
-
-    property real scaleFactor: 1.0
-
-    property real height: Math.round(values.baseHeight * values.scaleFactor)
-    property real myFontSize: Math.round(values.baseFont * values.scaleFactor)
-    property real myIconFontSize: Math.round(values.baseIconFont * values.scaleFactor)
-
-    property real squareComponentWidth: values.height
-    property real smallRectWidth: values.height / 2 * 1.5
-
-    property real inputWidth: values.height * 4
-
-    property real sliderHeight: values.height / 2 * 1.5 // TODO:Have a look at -> sliderAreaHeight: Data.Values.height/2*1.5
-
-    property real sliderControlSize: 12
-    property real sliderControlSizeMulti: values.sliderControlSize * values.scaleFactor
-
-    property int dragThreshold: 10 // px
-    property real spinControlIconSize: 8
-    property real spinControlIconSizeMulti: values.spinControlIconSize * values.scaleFactor
-
-    property real sliderTrackHeight: values.height / 3
-    property real sliderHandleHeight: values.sliderTrackHeight * 1.8
-    property real sliderHandleWidth: values.sliderTrackHeight * 0.5
-    property real sliderFontSize: Math.round(8 * values.scaleFactor)
-    property real sliderPadding: Math.round(6 * values.scaleFactor)
-    property real sliderMargin: Math.round(3 * values.scaleFactor)
-
-    property real sliderPointerWidth: Math.round(7 * values.scaleFactor)
-    property real sliderPointerHeight: Math.round(2 * values.scaleFactor)
-
-    property real checkBoxSpacing: Math.round(6 * values.scaleFactor)
-
-    property real radioButtonSpacing: values.checkBoxSpacing
-    property real radioButtonWidth: values.height
-    property real radioButtonHeight: values.height
-    property real radioButtonIndicatorWidth: 14
-    property real radioButtonIndicatorHeight: 14
-
-    property real switchSpacing: values.checkBoxSpacing
-
-    property real columnWidth: 225 + (175 * (values.scaleFactor * 2))
-
-    property real marginTopBottom: 4
-    property real border: 1
-
-    property real maxComboBoxPopupHeight: Math.round(300 * values.scaleFactor)
-    property real maxTextAreaPopupHeight: Math.round(150 * values.scaleFactor)
-
-    property real contextMenuLabelSpacing: Math.round(30 * values.scaleFactor)
-    property real contextMenuHorizontalPadding: Math.round(6 * values.scaleFactor)
-
-    property real inputHorizontalPadding: Math.round(6 * values.scaleFactor)
-    property real typeLabelVerticalShift: Math.round(6 * values.scaleFactor)
-
-    property real scrollBarThickness: 10
-    property real scrollBarActivePadding: 1
-    property real scrollBarInactivePadding: 2
-
-    property real toolTipHeight: 25
-    property int toolTipDelay: 1000
-
-    // Controls hover animation params
-    property int hoverDuration: 500
-    property int hoverEasing: Easing.OutExpo
-
-    // Layout sizes
-    property real sectionColumnSpacing: 20 // distance between label and sliderControlSize
-    property real sectionRowSpacing: 5
-    property real sectionHeadGap: 15
-    property real sectionHeadHeight: 21 // tab and section
-    property real sectionHeadSpacerHeight: 10
-
-    property real controlLabelWidth: 15
-    property real controlLabelGap: 5
-
-    property real controlGap: 5 // TODO different name
-    property real twoControlColumnGap: values.controlLabelGap
-                                       + values.controlLabelWidth
-                                       + values.controlGap
-
-    property real columnGap: 10
-
-    property real iconAreaWidth: Math.round(21 * values.scaleFactor)
-
-    property real linkControlWidth: values.iconAreaWidth
-    property real linkControlHeight: values.height
-
-    property real infinityControlWidth: values.iconAreaWidth
-    property real infinityControlHeight: values.height
-
-    property real transform3DSectionSpacing: 15
-
-    // Control sizes
-
-    property real defaultControlWidth: values.squareComponentWidth * 5
-    property real defaultControlHeight: values.height
-
-    property real actionIndicatorWidth: values.iconAreaWidth //StudioTheme.Values.squareComponentWidth
-    property real actionIndicatorHeight: values.height
-
-    property real spinBoxIndicatorWidth: values.smallRectWidth - 2 * values.border
-    property real spinBoxIndicatorHeight: values.height / 2 - values.border
-
-    property real sliderIndicatorWidth: values.squareComponentWidth
-    property real sliderIndicatorHeight: values.height
-
-    property real translationIndicatorWidth: values.squareComponentWidth
-    property real translationIndicatorHeight: values.height
-
-    property real checkIndicatorWidth: values.squareComponentWidth
-    property real checkIndicatorHeight: values.height
-
-    property real singleControlColumnWidth: 2 * values.twoControlColumnWidth
-                                            + values.twoControlColumnGap
-                                            + values.actionIndicatorWidth
-
-    property real twoControlColumnWidthMin: 3 * values.height - 2 * values.border
-    property real twoControlColumnWidthMax: 3 * values.twoControlColumnWidthMin
-    property real twoControlColumnWidth: values.twoControlColumnWidthMin
-
-    property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth
-                                                          + values.twoControlColumnGap)
-                                                    + values.linkControlWidth
-
-    property real controlColumnWidth: values.controlColumnWithoutControlsWidth
-                                      + 2 * values.twoControlColumnWidth
-
-    property real controlColumnWidthMin: values.controlColumnWithoutControlsWidth
-                                         + 2 * values.twoControlColumnWidthMin
-
-    property real propertyLabelWidthMin: 80
-    property real propertyLabelWidthMax: 120
-    property real propertyLabelWidth: values.propertyLabelWidthMin
-
-    property real sectionLeftPadding: 8
-    property real sectionLayoutRightPadding: values.scrollBarThickness + 6
-
-    property real columnFactor: values.propertyLabelWidthMin
-                                / (values.propertyLabelWidthMin + values.controlColumnWidthMin)
-
-    function responsiveResize(width) {
-        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)
-
-        var controlColumnWidth = tmpWidth - labelColumnWidth
-        var controlWidth = Math.round((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5)
-        controlWidth = Math.max(Math.min(values.twoControlColumnWidthMax, controlWidth),
-                                values.twoControlColumnWidthMin)
-
-        values.propertyLabelWidth = labelColumnWidth
-        values.twoControlColumnWidth = controlWidth
-    }
-
-    // Color Editor Popup
-    property real colorEditorPopupWidth: 4 * values.colorEditorPopupSpinBoxWidth
-                                         + 3 * values.controlGap
-                                         + 2 * values.colorEditorPopupPadding
-    property real colorEditorPopupHeight: 800
-    property real colorEditorPopupPadding: 10
-    property real colorEditorPopupMargin: 20
-
-    property real colorEditorPopupSpacing: 10
-    property real colorEditorPopupLineHeight: 60
-
-    property real hueSliderHeight: 20
-    property real hueSliderHandleWidth: 10
-
-    property real colorEditorPopupCmoboBoxWidth: 110
-    property real colorEditorPopupSpinBoxWidth: 54
-
-    // Theme Colors
-
-    property bool isLightTheme: themeControlBackground.hsvValue > themeTextColor.hsvValue
-
-    property string themePanelBackground: Theme.color(Theme.DSpanelBackground)
-
-    property string themeGreenLight: Theme.color(Theme.DSgreenLight)
-    property string themeAmberLight: Theme.color(Theme.DSamberLight)
-    property string themeRedLight: Theme.color(Theme.DSredLight)
-
-    property string themeInteraction: Theme.color(Theme.DSinteraction)
-    property string themeError: Theme.color(Theme.DSerrorColor)
-    property string themeWarning: Theme.color(Theme.DSwarningColor)
-    property string themeDisabled: Theme.color(Theme.DSdisabledColor)
-
-    property string themeInteractionHover: Theme.color(Theme.DSinteractionHover)
-
-    property string themeAliasIconChecked: Theme.color(Theme.DSnavigatorAliasIconChecked)
-
-    // Control colors
-    property color themeControlBackground: Theme.color(Theme.DScontrolBackground)
-    property string themeControlBackgroundInteraction: Theme.color(Theme.DScontrolBackgroundInteraction)
-    property string themeControlBackgroundDisabled: Theme.color(Theme.DScontrolBackgroundDisabled)
-    property string themeControlBackgroundGlobalHover: Theme.color(Theme.DScontrolBackgroundGlobalHover)
-    property string themeControlBackgroundHover: Theme.color(Theme.DScontrolBackgroundHover)
-
-    property string themeControlOutline: Theme.color(Theme.DScontrolOutline)
-    property string themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction)
-    property string themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled)
-
-    // Panels & Panes
-    property string themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal)
-    property string themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate)
-
-    // Text colors
-    property color themeTextColor: Theme.color(Theme.DStextColor)
-    property string themeTextColorDisabled: Theme.color(Theme.DStextColorDisabled)
-    property string themeTextSelectionColor: Theme.color(Theme.DStextSelectionColor)
-    property string themeTextSelectedTextColor: Theme.color(Theme.DStextSelectedTextColor)
-    property string themeTextColorDisabledMCU: Theme.color(Theme.DStextColorDisabled)
-
-    property string themePlaceholderTextColor: Theme.color(Theme.DSplaceholderTextColor)
-    property string themePlaceholderTextColorInteraction: Theme.color(Theme.DSplaceholderTextColorInteraction)
-
-    // Icon colors
-    property string themeIconColor: Theme.color(Theme.DSiconColor)
-    property string themeIconColorHover: Theme.color(Theme.DSiconColorHover)
-    property string themeIconColorInteraction: Theme.color(Theme.DSiconColorInteraction)
-    property string themeIconColorDisabled: Theme.color(Theme.DSiconColorDisabled)
-    property string themeIconColorSelected: Theme.color(Theme.DSiconColorSelected)
-
-    property string themeLinkIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor)
-    property string themeLinkIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover)
-    property string themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction)
-    property string themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled)
-
-    property string themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor)
-    property string themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover)
-    property string themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction)
-
-    // Popup background color (ComboBox, SpinBox, TextArea)
-    property string themePopupBackground: Theme.color(Theme.DSpopupBackground)
-    // GradientPopupDialog modal overly color
-    property string themePopupOverlayColor: Theme.color(Theme.DSpopupOverlayColor)
-
-    // ToolTip (UrlChooser)
-    property string themeToolTipBackground: Theme.color(Theme.DStoolTipBackground)
-    property string themeToolTipOutline: Theme.color(Theme.DStoolTipOutline)
-    property string themeToolTipText: Theme.color(Theme.DStoolTipText)
-
-    // Slider colors
-    property string themeSliderActiveTrack: Theme.color(Theme.DSsliderActiveTrack)
-    property string themeSliderActiveTrackHover: Theme.color(Theme.DSactiveTrackHover)
-    property string themeSliderActiveTrackFocus: Theme.color(Theme.DSsliderActiveTrackFocus)
-    property string themeSliderInactiveTrack: Theme.color(Theme.DSsliderInactiveTrack)
-    property string themeSliderInactiveTrackHover: Theme.color(Theme.DSsliderInactiveTrackHover)
-    property string themeSliderInactiveTrackFocus: Theme.color(Theme.DSsliderInactiveTrackFocus)
-    property string themeSliderHandle: Theme.color(Theme.DSsliderHandle)
-    property string themeSliderHandleHover: Theme.color(Theme.DSsliderHandleHover)
-    property string themeSliderHandleFocus: Theme.color(Theme.DSsliderHandleFocus)
-    property string themeSliderHandleInteraction: Theme.color(Theme.DSsliderHandleInteraction)
-
-    property string themeScrollBarTrack: Theme.color(Theme.DSscrollBarTrack)
-    property string themeScrollBarHandle: Theme.color(Theme.DSscrollBarHandle)
-
-    property string themeSectionHeadBackground: Theme.color(Theme.DSsectionHeadBackground)
-
-    property string themeTabActiveBackground: Theme.color(Theme.DStabActiveBackground)
-    property string themeTabActiveText: Theme.color(Theme.DStabActiveText)
-    property string themeTabInactiveBackground: Theme.color(Theme.DStabInactiveBackground)
-    property string themeTabInactiveText: Theme.color(Theme.DStabInactiveText)
-
-    property string themeStateSeparator: Theme.color(Theme.DSstateSeparatorColor)
-    property string themeStateBackground: Theme.color(Theme.DSstateBackgroundColor)
-    property string themeStatePreviewOutline: Theme.color(Theme.DSstatePreviewOutline)
-
-    property string themeUnimportedModuleColor: Theme.color(Theme.DSUnimportedModuleColor)
-
-    // Taken out of Constants.js
-    property string themeChangedStateText: Theme.color(Theme.DSchangedStateText)
-}
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/qmldir b/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/qmldir
deleted file mode 100644
index bc251e981f7..00000000000
--- a/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/qmldir
+++ /dev/null
@@ -1 +0,0 @@
-singleton Values 1.0 Values.qml
diff --git a/share/qtcreator/qmldesigner/landingpage/landingpage.qmlproject b/share/qtcreator/qmldesigner/landingpage/landingpage.qmlproject
index 54915a68ddb..2b6325ada5a 100644
--- a/share/qtcreator/qmldesigner/landingpage/landingpage.qmlproject
+++ b/share/qtcreator/qmldesigner/landingpage/landingpage.qmlproject
@@ -12,6 +12,10 @@ Project {
         directory: "imports"
     }
 
+    QmlFiles {
+        directory: "mockimports"
+    }
+
     JavaScriptFiles {
         directory: "content"
     }
@@ -69,11 +73,14 @@ Project {
        */
     }
 
-
     /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports", "../../../../share/3rdparty/studiofonts" ]
+    importPaths: [ "imports", "../../../../src/share/3rdparty/studiofonts", "mockimports" ]
+
+    fileSelectors: [ "QDS_theming" ]
 
     qt6Project: true
 
     qdsVersion: "3.2"
+
+    mainUiFile: "content/Screen01.ui.qml"
 }
diff --git a/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageApi/LandingPageApi.qml b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageApi/LandingPageApi.qml
new file mode 100644
index 00000000000..c1148980988
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageApi/LandingPageApi.qml
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.15
+import StudioFonts
+
+QtObject {
+    property bool qdsInstalled: true
+    property bool projectFileExists: true
+    property string qtVersion: "6.1"
+    property string qdsVersion: "3.6"
+
+    function openQtc(rememberSelection) { console.log("openQtc", rememberSelection) }
+    function openQds(rememberSelection) { console.log("openQds", rememberSelection) }
+    function installQds() { console.log("installQds") }
+    function generateProjectFile() { console.log("generateProjectFile") }
+
+    // This property ensures that the Titillium font will be loaded and
+    // can be used by the theme.
+    property string family: StudioFonts.titilliumWeb_regular
+}
diff --git a/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageApi/qmldir b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageApi/qmldir
new file mode 100644
index 00000000000..d3cbdae478c
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageApi/qmldir
@@ -0,0 +1 @@
+singleton LandingPageApi 1.0 LandingPageApi.qml
diff --git a/share/qtcreator/qmldesigner/landingpage/content/LandingSeparator.qml b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageTheme/Dummy.qml
index 344bbbcd3c9..3e1e28bc87a 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/LandingSeparator.qml
+++ b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageTheme/Dummy.qml
@@ -28,13 +28,5 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QdsLandingPageTheme as Theme
 
-Rectangle {
-    color: Theme.Values.themeControlBackground
-    width: parent.width
-    height: 2
-    z: 10
-    anchors.horizontalCenter: parent.horizontalCenter
-}
+QtObject {}
diff --git a/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageTheme/qmldir b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageTheme/qmldir
new file mode 100644
index 00000000000..9ae3bc301f0
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/mockimports/LandingPageTheme/qmldir
@@ -0,0 +1 @@
+Dummy 1.0 Dummy.qml
diff --git a/src/plugins/qmlprojectmanager/CMakeLists.txt b/src/plugins/qmlprojectmanager/CMakeLists.txt
index af094450028..42013e53868 100644
--- a/src/plugins/qmlprojectmanager/CMakeLists.txt
+++ b/src/plugins/qmlprojectmanager/CMakeLists.txt
@@ -30,4 +30,5 @@ add_qtc_plugin(QmlProjectManager
     qmlprojectnodes.cpp qmlprojectnodes.h
     qmlprojectplugin.cpp qmlprojectplugin.h
     qmlprojectrunconfiguration.cpp qmlprojectrunconfiguration.h
+    "${PROJECT_SOURCE_DIR}/src/share/3rdparty/studiofonts/studiofonts.qrc"
 )
diff --git a/src/plugins/qmlprojectmanager/projectfilecontenttools.cpp b/src/plugins/qmlprojectmanager/projectfilecontenttools.cpp
index 247e636beaf..3de9a325d46 100644
--- a/src/plugins/qmlprojectmanager/projectfilecontenttools.cpp
+++ b/src/plugins/qmlprojectmanager/projectfilecontenttools.cpp
@@ -56,24 +56,37 @@ const QString qdsVersion(const Utils::FilePath &projectFilePath)
 {
     const QString projectFileContent = readFileContents(projectFilePath);
     QRegularExpressionMatch match = qdsVerRegexp.match(projectFileContent);
-    if (!match.hasMatch())
-        return {};
-    QString version = match.captured(1);
-    return version.isEmpty() ? QObject::tr("Unknown") : version;
+    if (match.hasMatch()) {
+        const QString version = match.captured(1);
+        if (!version.isEmpty())
+            return version;
+    }
+
+    return QObject::tr("Unknown");
 }
 
-QRegularExpression qt6Regexp("(qt6project:)\\s*\"*(true|false)\"*", QRegularExpression::CaseInsensitiveOption);
+QRegularExpression quickRegexp("(quickVersion:)\\s*\"(\\d+.\\d+)\"",
+                               QRegularExpression::CaseInsensitiveOption);
+QRegularExpression qt6Regexp("(qt6Project:)\\s*\"*(true|false)\"*",
+                             QRegularExpression::CaseInsensitiveOption);
 
 const QString qtVersion(const Utils::FilePath &projectFilePath)
 {
     const QString defaultReturn = QObject::tr("Unknown");
     const QString data = readFileContents(projectFilePath);
-    QRegularExpressionMatch match = qt6Regexp.match(data);
-    if (!match.hasMatch())
-        return defaultReturn;
-    return match.captured(2).contains("true", Qt::CaseInsensitive)
-            ? QObject::tr("Qt6 or later")
-            : QObject::tr("Qt5 or earlier");
+
+    // First check if quickVersion is contained in the project file
+    QRegularExpressionMatch match = quickRegexp.match(data);
+    if (match.hasMatch())
+        return QString("Qt %1").arg(match.captured(2));
+
+    // If quickVersion wasn't found check for qt6Project
+    match = qt6Regexp.match(data);
+    if (match.hasMatch())
+        return match.captured(2).contains("true", Qt::CaseInsensitive) ? QObject::tr("Qt 6")
+                                                                       : QObject::tr("Qt 5");
+
+    return defaultReturn;
 }
 
 bool isQt6Project(const Utils::FilePath &projectFilePath)
diff --git a/src/plugins/qmlprojectmanager/qdslandingpage.cpp b/src/plugins/qmlprojectmanager/qdslandingpage.cpp
index 13b469a18e7..d9fbe8be232 100644
--- a/src/plugins/qmlprojectmanager/qdslandingpage.cpp
+++ b/src/plugins/qmlprojectmanager/qdslandingpage.cpp
@@ -24,26 +24,27 @@
 ****************************************************************************/
 
 #include "qdslandingpage.h"
+#include "projectfilecontenttools.h"
 #include "qdslandingpagetheme.h"
+#include "qmlprojectconstants.h"
+#include "qmlprojectgen/qmlprojectgenerator.h"
+#include "qmlprojectplugin.h"
 #include "utils/algorithm.h"
 
+#include <coreplugin/coreconstants.h>
+#include <coreplugin/editormanager/editormanager.h>
 #include <coreplugin/icore.h>
+#include <coreplugin/modemanager.h>
 
-#include <QtQml/QQmlEngine>
+#include <QDesktopServices>
 #include <QHBoxLayout>
 #include <QQuickItem>
+#include <QtQml/QQmlEngine>
 
 namespace QmlProjectManager {
 namespace Internal {
 
-const char QMLRESOURCEPATH[] = "qmldesigner/propertyEditorQmlSources/imports";
-const char LANDINGPAGEPATH[] = "qmldesigner/landingpage";
-const char PROPERTY_QDSINSTALLED[] = "qdsInstalled";
-const char PROPERTY_PROJECTFILEEXISTS[] = "projectFileExists";
-const char PROPERTY_QTVERSION[] = "qtVersion";
-const char PROPERTY_QDSVERSION[] = "qdsVersion";
-const char PROPERTY_CMAKES[] = "cmakeLists";
-const char PROPERTY_REMEMBER[] = "rememberSelection";
+const char INSTALL_QDS_URL[] = "https://www.qt.io/product/ui-design-tools";
 
 QdsLandingPageWidget::QdsLandingPageWidget(QWidget* parent)
     : QWidget(parent)
@@ -62,38 +63,79 @@ QQuickWidget *QdsLandingPageWidget::widget()
 {
     if (!m_widget) {
         m_widget = new QQuickWidget();
+
+        const QString resourcePath
+            = Core::ICore::resourcePath(QmlProjectManager::Constants::QML_RESOURCE_PATH).toString();
+        const QString landingPath
+            = Core::ICore::resourcePath(QmlProjectManager::Constants::LANDING_PAGE_PATH).toString();
+
+        QdsLandingPageTheme::setupTheme(m_widget->engine());
+
+        m_widget->setResizeMode(QQuickWidget::SizeRootObjectToView);
+        m_widget->engine()->addImportPath(landingPath + "/imports");
+        m_widget->engine()->addImportPath(resourcePath);
+        m_widget->setSource(QUrl::fromLocalFile(landingPath + "/main.qml"));
+        m_widget->hide();
+
         layout()->addWidget(m_widget);
     }
 
     return m_widget;
 }
 
-QdsLandingPage::QdsLandingPage(QdsLandingPageWidget *widget, QWidget *parent)
-    : m_widget{widget->widget()}
+QdsLandingPage::QdsLandingPage()
+    : m_widget{nullptr}
+{}
+
+void QdsLandingPage::openQtc(bool rememberSelection)
 {
-    Q_UNUSED(parent)
+    if (rememberSelection)
+        Core::ICore::settings()->setValue(QmlProjectManager::Constants::ALWAYS_OPEN_UI_MODE,
+                                          Core::Constants::MODE_EDIT);
 
-    setParent(m_widget);
+    hide();
 
-    const QString resourcePath = Core::ICore::resourcePath(QMLRESOURCEPATH).toString();
-    const QString landingPath = Core::ICore::resourcePath(LANDINGPAGEPATH).toString();
+    Core::ModeManager::activateMode(Core::Constants::MODE_EDIT);
+}
 
-    qmlRegisterSingletonInstance<QdsLandingPage>("LandingPageApi", 1, 0, "LandingPageApi", this);
-    QdsLandingPageTheme::setupTheme(m_widget->engine());
+void QdsLandingPage::openQds(bool rememberSelection)
+{
+    if (rememberSelection)
+        Core::ICore::settings()->setValue(QmlProjectManager::Constants::ALWAYS_OPEN_UI_MODE,
+                                          Core::Constants::MODE_DESIGN);
 
-    m_widget->setResizeMode(QQuickWidget::SizeRootObjectToView);
-    m_widget->engine()->addImportPath(landingPath + "/imports");
-    m_widget->engine()->addImportPath(resourcePath);
-    m_widget->setSource(QUrl::fromLocalFile(landingPath + "/main.qml"));
+    auto editor = Core::EditorManager::currentEditor();
+    if (editor)
+        QmlProjectPlugin::openInQDSWithProject(editor->document()->filePath());
+}
 
-    if (m_widget->rootObject()) { // main.qml only works with Qt6
-        connect(m_widget->rootObject(), SIGNAL(openQtc(bool)), this, SIGNAL(openCreator(bool)));
-        connect(m_widget->rootObject(), SIGNAL(openQds(bool)), this, SIGNAL(openDesigner(bool)));
-        connect(m_widget->rootObject(), SIGNAL(installQds()), this, SIGNAL(installDesigner()));
-        connect(m_widget->rootObject(), SIGNAL(generateCmake()), this, SIGNAL(generateCmake()));
-        connect(m_widget->rootObject(), SIGNAL(generateProjectFile()), this, SIGNAL(generateProjectFile()));
+void QdsLandingPage::installQds()
+{
+    QDesktopServices::openUrl(QUrl(INSTALL_QDS_URL));
+}
+
+void QdsLandingPage::generateProjectFile()
+{
+    GenerateQmlProject::QmlProjectFileGenerator generator;
+
+    Core::IEditor *editor = Core::EditorManager::currentEditor();
+    if (!editor)
+        return;
+
+    if (generator.prepareForUiQmlFile(editor->document()->filePath())) {
+        if (generator.execute()) {
+            const QString qtVersion = ProjectFileContentTools::qtVersion(generator.targetFile());
+            const QString qdsVersion = ProjectFileContentTools::qdsVersion(generator.targetFile());
+            setProjectFileExists(generator.targetFile().exists());
+            setQtVersion(qtVersion);
+            setQdsVersion(qdsVersion);
+        }
     }
-    m_widget->hide();
+}
+
+void QdsLandingPage::setWidget(QWidget *widget)
+{
+    m_widget = widget;
 }
 
 QWidget *QdsLandingPage::widget()
@@ -103,19 +145,17 @@ QWidget *QdsLandingPage::widget()
 
 void QdsLandingPage::show()
 {
-    if (m_widget->rootObject()) {
-        m_widget->rootObject()->setProperty(PROPERTY_QDSINSTALLED, m_qdsInstalled);
-        m_widget->rootObject()->setProperty(PROPERTY_PROJECTFILEEXISTS, m_projectFileExists);
-        m_widget->rootObject()->setProperty(PROPERTY_QTVERSION, m_qtVersion);
-        m_widget->rootObject()->setProperty(PROPERTY_QDSVERSION, m_qdsVersion);
-        m_widget->rootObject()->setProperty(PROPERTY_CMAKES, m_cmakeResources);
-        m_widget->rootObject()->setProperty(PROPERTY_REMEMBER, Qt::Unchecked);
-    }
+    if (!m_widget)
+        return;
+
     m_widget->show();
 }
 
 void QdsLandingPage::hide()
 {
+    if (!m_widget)
+        return;
+
     m_widget->hide();
 }
 
@@ -126,9 +166,10 @@ bool QdsLandingPage::qdsInstalled() const
 
 void QdsLandingPage::setQdsInstalled(bool installed)
 {
-    m_qdsInstalled = installed;
-    if (m_widget->rootObject())
-        m_widget->rootObject()->setProperty(PROPERTY_QDSINSTALLED, installed);
+    if (m_qdsInstalled != installed) {
+        m_qdsInstalled = installed;
+        emit qdsInstalledChanged();
+    }
 }
 
 bool QdsLandingPage::projectFileExists() const
@@ -138,9 +179,10 @@ bool QdsLandingPage::projectFileExists() const
 
 void QdsLandingPage::setProjectFileExists(bool exists)
 {
-    m_projectFileExists = exists;
-    if (m_widget->rootObject())
-        m_widget->rootObject()->setProperty(PROPERTY_PROJECTFILEEXISTS, exists);
+    if (m_projectFileExists != exists) {
+        m_projectFileExists = exists;
+        emit projectFileExistshanged();
+    }
 }
 
 const QString QdsLandingPage::qtVersion() const
@@ -150,9 +192,10 @@ const QString QdsLandingPage::qtVersion() const
 
 void QdsLandingPage::setQtVersion(const QString &version)
 {
-    m_qtVersion = version;
-    if (m_widget->rootObject())
-        m_widget->rootObject()->setProperty(PROPERTY_QTVERSION, version);
+    if (m_qtVersion != version) {
+        m_qtVersion = version;
+        emit qtVersionChanged();
+    }
 }
 
 const QString QdsLandingPage::qdsVersion() const
@@ -162,9 +205,10 @@ const QString QdsLandingPage::qdsVersion() const
 
 void QdsLandingPage::setQdsVersion(const QString &version)
 {
-    m_qdsVersion = version;
-    if (m_widget->rootObject())
-        m_widget->rootObject()->setProperty(PROPERTY_QDSVERSION, version);
+    if (m_qdsVersion != version) {
+        m_qdsVersion = version;
+        emit qdsVersionChanged();
+    }
 }
 
 const QStringList QdsLandingPage::cmakeResources() const
diff --git a/src/plugins/qmlprojectmanager/qdslandingpage.h b/src/plugins/qmlprojectmanager/qdslandingpage.h
index 020633ed3ca..3447a2bf915 100644
--- a/src/plugins/qmlprojectmanager/qdslandingpage.h
+++ b/src/plugins/qmlprojectmanager/qdslandingpage.h
@@ -60,14 +60,24 @@ class QdsLandingPage : public QObject
     Q_OBJECT
 
 public:
-    Q_PROPERTY(bool qdsInstalled MEMBER m_qdsInstalled READ qdsInstalled WRITE setQdsInstalled)
-    Q_PROPERTY(bool projectFileExists MEMBER m_projectFileExists READ projectFileExists WRITE setProjectFileExists)
-    Q_PROPERTY(QString qtVersion MEMBER m_qtVersion READ qtVersion WRITE setQtVersion)
-    Q_PROPERTY(QString qdsVersion MEMBER m_qdsVersion READ qdsVersion WRITE setQdsVersion)
+    Q_PROPERTY(bool qdsInstalled MEMBER m_qdsInstalled READ qdsInstalled WRITE setQdsInstalled
+                   NOTIFY qdsInstalledChanged)
+    Q_PROPERTY(bool projectFileExists MEMBER m_projectFileExists READ projectFileExists WRITE
+                   setProjectFileExists NOTIFY projectFileExistshanged)
+    Q_PROPERTY(QString qtVersion MEMBER m_qtVersion READ qtVersion WRITE setQtVersion NOTIFY
+                   qtVersionChanged)
+    Q_PROPERTY(QString qdsVersion MEMBER m_qdsVersion READ qdsVersion WRITE setQdsVersion NOTIFY
+                   qdsVersionChanged)
 
 public:
-    QdsLandingPage(QdsLandingPageWidget *widget, QWidget *parent = nullptr);
+    QdsLandingPage();
 
+    Q_INVOKABLE void openQtc(bool rememberSelection);
+    Q_INVOKABLE void openQds(bool rememberSelection);
+    Q_INVOKABLE void installQds();
+    Q_INVOKABLE void generateProjectFile();
+
+    void setWidget(QWidget *widget);
     QWidget *widget();
     void show();
     void hide();
@@ -85,19 +95,16 @@ public:
     void setCmakeResources(const QStringList &resources);
 
 signals:
-    void doNotShowChanged(bool doNotShow);
-    void openCreator(bool rememberSelection);
-    void openDesigner(bool rememberSelection);
-    void installDesigner();
-    void generateCmake();
-    void generateProjectFile();
+    void qdsInstalledChanged();
+    void projectFileExistshanged();
+    void qtVersionChanged();
+    void qdsVersionChanged();
 
 private:
-    QQuickWidget *m_widget = nullptr;
+    QWidget *m_widget = nullptr;
 
     bool m_qdsInstalled = false;
     bool m_projectFileExists = false;
-    Qt::CheckState m_doNotShow = Qt::Unchecked;
     QString m_qtVersion;
     QString m_qdsVersion;
     QStringList m_cmakeResources;
diff --git a/src/plugins/qmlprojectmanager/qmlprojectconstants.h b/src/plugins/qmlprojectmanager/qmlprojectconstants.h
index 3ba2b101462..89d3cc630d3 100644
--- a/src/plugins/qmlprojectmanager/qmlprojectconstants.h
+++ b/src/plugins/qmlprojectmanager/qmlprojectconstants.h
@@ -43,5 +43,9 @@ const char customImportPaths[] = "CustomImportPaths";
 const char canonicalProjectDir[] ="CanonicalProjectDir";
 
 const char enviromentLaunchedQDS[] = "QTC_LAUNCHED_QDS";
+
+const char ALWAYS_OPEN_UI_MODE[] = "J.QtQuick/QmlJSEditor.openUiQmlMode";
+const char QML_RESOURCE_PATH[] = "qmldesigner/propertyEditorQmlSources/imports";
+const char LANDING_PAGE_PATH[] = "qmldesigner/landingpage";
 } // namespace Constants
 } // namespace QmlProjectManager
diff --git a/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs b/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs
index bf0a2c4626b..0bac36cf7c9 100644
--- a/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs
+++ b/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs
@@ -27,7 +27,8 @@ QtcPlugin {
             "qmlprojectmanagerconstants.h",
             "qmlprojectnodes.cpp", "qmlprojectnodes.h",
             "qmlprojectplugin.cpp", "qmlprojectplugin.h",
-            "qmlprojectrunconfiguration.cpp", "qmlprojectrunconfiguration.h"
+            "qmlprojectrunconfiguration.cpp", "qmlprojectrunconfiguration.h",
+            project.ide_source_tree + "/src/share/3rdparty/studiofonts/studiofonts.qrc"
         ]
     }
 
diff --git a/src/plugins/qmlprojectmanager/qmlprojectplugin.cpp b/src/plugins/qmlprojectmanager/qmlprojectplugin.cpp
index 655ece436cd..4c98a998838 100644
--- a/src/plugins/qmlprojectmanager/qmlprojectplugin.cpp
+++ b/src/plugins/qmlprojectmanager/qmlprojectplugin.cpp
@@ -1,4 +1,4 @@
-/****************************************************************************
+/****************************************************************************
 **
 ** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
@@ -76,9 +76,6 @@ using namespace ProjectExplorer;
 namespace QmlProjectManager {
 namespace Internal {
 
-const char alwaysOpenUiQmlMode[] = "J.QtQuick/QmlJSEditor.openUiQmlMode";
-const char installQdsUrl[] = "https://www.qt.io/product/ui-design-tools";
-
 static bool isQmlDesigner(const ExtensionSystem::PluginSpec *spec)
 {
     if (!spec)
@@ -96,17 +93,19 @@ static bool qmlDesignerEnabled()
 
 static QString alwaysOpenWithMode()
 {
-    return Core::ICore::settings()->value(alwaysOpenUiQmlMode, "").toString();
+    return Core::ICore::settings()
+        ->value(QmlProjectManager::Constants::ALWAYS_OPEN_UI_MODE, "")
+        .toString();
 }
 
 static void setAlwaysOpenWithMode(const QString &mode)
 {
-    Core::ICore::settings()->setValue(alwaysOpenUiQmlMode, mode);
+    Core::ICore::settings()->setValue(QmlProjectManager::Constants::ALWAYS_OPEN_UI_MODE, mode);
 }
 
 static void clearAlwaysOpenWithMode()
 {
-    Core::ICore::settings()->remove(alwaysOpenUiQmlMode);
+    Core::ICore::settings()->remove(QmlProjectManager::Constants::ALWAYS_OPEN_UI_MODE);
 }
 
 class QmlProjectPluginPrivate
@@ -203,7 +202,6 @@ const Utils::FilePath findQmlProjectUpwards(const Utils::FilePath &folder)
 
 static bool findAndOpenProject(const Utils::FilePath &filePath)
 {
-
     ProjectExplorer::Project *project
             = ProjectExplorer::SessionManager::projectForFile(filePath);
 
@@ -268,6 +266,14 @@ bool QmlProjectPlugin::initialize(const QStringList &, QString *errorMessage)
     d = new QmlProjectPluginPrivate;
 
     if (!qmlDesignerEnabled()) {
+        QFontDatabase::addApplicationFont(":/studiofonts/TitilliumWeb-Regular.ttf");
+        d->landingPage = new QdsLandingPage();
+        qmlRegisterSingletonInstance<QdsLandingPage>("LandingPageApi",
+                                                     1,
+                                                     0,
+                                                     "LandingPageApi",
+                                                     d->landingPage);
+
         d->landingPageWidget = new QdsLandingPageWidget();
 
         const QStringList mimeTypes = {QmlJSTools::Constants::QMLUI_MIMETYPE};
@@ -280,7 +286,6 @@ bool QmlProjectPlugin::initialize(const QStringList &, QString *errorMessage)
                 this, &QmlProjectPlugin::editorModeChanged);
     }
 
-
     ProjectManager::registerProjectType<QmlProject>(QmlJSTools::Constants::QMLPROJECT_MIMETYPE);
     Core::FileIconProvider::registerIconOverlayForSuffix(":/qmlproject/images/qmlproject.png",
                                                          "qmlproject");
@@ -379,20 +384,12 @@ bool QmlProjectPlugin::initialize(const QStringList &, QString *errorMessage)
     return true;
 }
 
-void QmlProjectPlugin::initializeQmlLandingPage()
-{
-    d->landingPage = new QdsLandingPage(d->landingPageWidget);
-    connect(d->landingPage, &QdsLandingPage::openCreator, this, &QmlProjectPlugin::openQtc);
-    connect(d->landingPage, &QdsLandingPage::openDesigner, this, &QmlProjectPlugin::openQds);
-    connect(d->landingPage, &QdsLandingPage::installDesigner, this, &QmlProjectPlugin::installQds);
-    connect(d->landingPage, &QdsLandingPage::generateCmake, this, &QmlProjectPlugin::generateCmake);
-    connect(d->landingPage, &QdsLandingPage::generateProjectFile, this, &QmlProjectPlugin::generateProjectFile);
-}
-
 void QmlProjectPlugin::displayQmlLandingPage()
 {
     if (!d->landingPage)
-        initializeQmlLandingPage();
+        return;
+
+    d->landingPage->setWidget(d->landingPageWidget->widget());
 
     updateQmlLandingPageProjectInfo(projectFilePath());
     d->landingPage->setQdsInstalled(qdsInstallationExists());
@@ -452,37 +449,16 @@ void QmlProjectPlugin::openQds(bool permanent)
         openInQDSWithProject(editor->document()->filePath());
 }
 
-void QmlProjectPlugin::installQds()
-{
-    QDesktopServices::openUrl(QUrl(installQdsUrl));
-    hideQmlLandingPage();
-}
-
-void QmlProjectPlugin::generateCmake()
-{
-    qWarning() << "TODO generate cmake";
-}
-
-void QmlProjectPlugin::generateProjectFile()
-{
-    GenerateQmlProject::QmlProjectFileGenerator generator;
-
-    Core::IEditor *editor = Core::EditorManager::currentEditor();
-    if (editor)
-        if (generator.prepareForUiQmlFile(editor->document()->filePath()))
-            if (generator.execute())
-                updateQmlLandingPageProjectInfo(generator.targetFile());
-}
-
 void QmlProjectPlugin::updateQmlLandingPageProjectInfo(const Utils::FilePath &projectFile)
 {
-    if (d->landingPage) {
-        const QString qtVersionString = ProjectFileContentTools::qtVersion(projectFile);
-        const QString qdsVersionString = ProjectFileContentTools::qdsVersion(projectFile);
-        d->landingPage->setProjectFileExists(projectFile.exists());
-        d->landingPage->setQtVersion(qtVersionString);
-        d->landingPage->setQdsVersion(qdsVersionString);
-    }
+    if (!d->landingPage)
+        return;
+
+    const QString qtVersionString = ProjectFileContentTools::qtVersion(projectFile);
+    const QString qdsVersionString = ProjectFileContentTools::qdsVersion(projectFile);
+    d->landingPage->setProjectFileExists(projectFile.exists());
+    d->landingPage->setQtVersion(qtVersionString);
+    d->landingPage->setQdsVersion(qdsVersionString);
 }
 
 Utils::FilePath QmlProjectPlugin::projectFilePath()
diff --git a/src/plugins/qmlprojectmanager/qmlprojectplugin.h b/src/plugins/qmlprojectmanager/qmlprojectplugin.h
index 7a9130b4869..ffc23351bb3 100644
--- a/src/plugins/qmlprojectmanager/qmlprojectplugin.h
+++ b/src/plugins/qmlprojectmanager/qmlprojectplugin.h
@@ -49,21 +49,16 @@ public:
     static Utils::FilePaths rootCmakeFiles();
     static QString qtVersion(const Utils::FilePath &projectFilePath);
     static QString qdsVersion(const Utils::FilePath &projectFilePath);
+    static void openInQDSWithProject(const Utils::FilePath &filePath);
+    static const QString readFileContents(const Utils::FilePath &filePath);
 
 public slots:
     void editorModeChanged(Utils::Id newMode, Utils::Id oldMode);
     void openQtc(bool permanent = false);
     void openQds(bool permanent = false);
-    void installQds();
-    void generateCmake();
-    void generateProjectFile();
 
 private:
-    static void openInQDSWithProject(const Utils::FilePath &filePath);
-    static const QString readFileContents(const Utils::FilePath &filePath);
-
     bool initialize(const QStringList &arguments, QString *errorString) final;
-    void initializeQmlLandingPage();
     void displayQmlLandingPage();
     void hideQmlLandingPage();
     void updateQmlLandingPageProjectInfo(const Utils::FilePath &projectFile);
author	Henning Gruendl <henning.gruendl@qt.io>	2022-06-20 23:51:16 +0200
committer	Henning Gründl <henning.gruendl@qt.io>	2022-06-24 11:48:35 +0000
commit	85cd97a33446699f97a21429ceb22f3acf40a5be (patch)
tree	e26161303f4a30c06765f86caf2c55f340a75687
parent	e3cfbc0a7b2fcdad43efe8bb515dfd06dba98710 (diff)