Fix visual issues in new project wizard

* Make Project name text field have the same font size as the rest
* Use Titillium Web as the font family for the title
* Reduce the top padding of the dialog box
* Renounce the section "Advanced" from Details - we still have the items
  in the section, just not the section itself.
* Add scrollbar for the details pane - to allow smaller size dialog
* Move the tab bar (Presets) out of the GridView component - so that
scrolling the view would not also scroll the header.
* The Project view now shrinks if the dialog box is shrinked too much,
also reduced the minimum sizes of the dialog
* Resize dialog on screens smaller than 1920 x 1080
* Increase the space between Presets, Details, Styles text and their
top margin
* Lower the project item width from 144 to 90, so that project items in
the view are not so distanced from each other.
* Align the Cancel button with the left margin of the Style pane

Task-number: QDS-5500
Change-Id: I340967941c5c56c89b8741079cb64e355a283e3b
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml

@@ -34,6 +34,7 @@ import StudioControls as SC
 import NewProjectDialog
 
 Item {
+    id: rootDialog
     width: DialogValues.dialogWidth
     height: DialogValues.dialogHeight
 
@@ -47,38 +48,53 @@ Item {
             Layout.alignment: Qt.AlignHCenter
             spacing: 0
 
+            Item { width: parent.width; height: 20 } // spacer
+
             Item { // Header Item
                 Layout.fillWidth: true
-                implicitHeight: 218
+                implicitHeight: 164
 
-                Column {
+                ColumnLayout {
                     anchors.fill: parent
 
-                    Item { width: parent.width; height: 74 } // spacer
+                    Item { width: parent.width; implicitHeight: 20 } // spacer
-
+                    Row {
-                    Text {
-                        text: qsTr("Welcome to Qt Design Studio. Let's Create Something Wonderful!")
-                        font.pixelSize: 32
                         width: parent.width
-                        height: 47
+                        height: DialogValues.dialogTitleTextHeight
-                        lineHeight: 49
+                        Layout.alignment: Qt.AlignHCenter
+                        Text {
+                            text: qsTr("Welcome to ")
+                            font.pixelSize: DialogValues.dialogTitlePixelSize
+                            font.family: "Titillium Web"
+                            height: DialogValues.dialogTitleTextHeight
+                            lineHeight: DialogValues.dialogTitleLineHeight
                             lineHeightMode: Text.FixedHeight
                             color: DialogValues.textColor
-                        horizontalAlignment: Text.AlignHCenter
                         }
 
-                    Item { width: parent.width; height: 11 } // spacer
+                        Text {
+                            text: qsTr("Qt Design Studio")
+                            font.pixelSize: DialogValues.dialogTitlePixelSize
+                            font.family: "Titillium Web"
+                            height: DialogValues.dialogTitleTextHeight
+                            lineHeight: DialogValues.dialogTitleLineHeight
+                            lineHeightMode: Text.FixedHeight
+                            color: DialogValues.textColorInteraction
+                        }
+                    }
 
                     Text {
                         width: parent.width
-                        text: qsTr("Get started by selecting from Presets or start from empty screen. You may also include your design file.")
+                        text: qsTr("Create new project by selecting a suitable Preset and then adjust details.")
                         color: DialogValues.textColor
                         font.pixelSize: DialogValues.paneTitlePixelSize
                         lineHeight: DialogValues.paneTitleLineHeight
                         lineHeightMode: Text.FixedHeight
-                        horizontalAlignment: Text.AlignHCenter
+                        Layout.alignment: Qt.AlignHCenter
-                    }
                     }
+
+                    Item { width: parent.width; Layout.fillHeight: true} // spacer
+                } // ColumnLayout
             } // Header Item
 
             Item { // Content Item
@@ -96,7 +112,7 @@ Item {
                         Layout.fillWidth: true
                         Layout.fillHeight: true
                         Layout.minimumWidth: 379 // figured out this number visually
-                        Layout.minimumHeight: 326 // figured out this number visually
+                        Layout.minimumHeight: 261 // figured out this number visually
 
                         Column {
                             x: DialogValues.defaultPadding                          // left padding
@@ -106,19 +122,86 @@ Item {
                             Text {
                                 text: qsTr("Presets")
                                 width: parent.width
+                                height: 47
                                 font.weight: Font.DemiBold
                                 font.pixelSize: DialogValues.paneTitlePixelSize
                                 lineHeight: DialogValues.paneTitleLineHeight
                                 lineHeightMode: Text.FixedHeight
                                 color: DialogValues.textColor
+                                verticalAlignment: Qt.AlignVCenter
                             }
 
+                            Rectangle { // TabBar
+                                readonly property int animDur: 500
+                                id: samTabRect
+                                x: 10                       // left padding
+                                width: parent.width - 64    // right padding
+                                height: DialogValues.projectViewHeaderHeight
+                                color: DialogValues.lightPaneColor
+
+                                Row {
+                                    id: tabBarRow
+                                    spacing: 20
+                                    property int currIndex: 0
+
+                                    Repeater {
+                                        model: categoryModel
+                                        Text {
+                                            text: name
+                                            font.weight: Font.DemiBold
+                                            font.pixelSize: DialogValues.viewHeaderPixelSize
+                                            verticalAlignment: Text.AlignVCenter
+                                            color: tabBarRow.currIndex === index ? DialogValues.textColorInteraction
+                                                                                 : DialogValues.textColor
+                                            Behavior on color { ColorAnimation { duration: samTabRect.animDur } }
+
+                                            MouseArea {
+                                                anchors.fill: parent
+                                                onClicked: {
+                                                    tabBarRow.currIndex = index
+                                                    projectModel.setPage(index)
+                                                    projectViewId.currentIndex = 0
+                                                    projectViewId.currentIndexChanged()
+
+                                                    strip.x = parent.x
+                                                    strip.width = parent.width
+                                                }
+                                            }
+
+                                        } // Text
+                                    } // Repeater
+                                } // tabBarRow
+
+                                Rectangle {
+                                    id: strip
+                                    width: tabBarRow.children[0].width
+                                    height: 5
+                                    radius: 2
+                                    color: DialogValues.textColorInteraction
+                                    anchors.bottom: parent.bottom
+
+                                    Behavior on x { SmoothedAnimation { duration: samTabRect.animDur } }
+                                    Behavior on width { SmoothedAnimation { duration: strip.width === 0 ? 0 : samTabRect.animDur } } // do not animate initial width
+                                }
+                            } // Rectangle
+
                             NewProjectView {
                                 id: projectViewId
                                 x: 10                       // left padding
                                 width: parent.width - 64    // right padding
                                 height: DialogValues.projectViewHeight
                                 loader: projectDetailsLoader
+
+                                Connections {
+                                    target: rootDialog
+                                    function onHeightChanged() {
+                                        if (rootDialog.height < 700) { // 700 = minimum height big dialog
+                                            projectViewId.height = DialogValues.projectViewHeight / 2
+                                        } else {
+                                            projectViewId.height = DialogValues.projectViewHeight
+                                        }
+                                    }
+                                }
                             }
 
                             Item { height: 5; width: parent.width }
@@ -158,6 +241,15 @@ Item {
 
                     Item { Layout.fillWidth: true }
 
+                    Item { // Dialog Button Box
+                        width: DialogValues.stylesPaneWidth
+                        height: parent.height
+
+                        RowLayout {
+                            width: DialogValues.stylesPaneWidth
+                            implicitWidth: DialogValues.stylesPaneWidth
+                            implicitHeight: parent.height
+
                             SC.AbstractButton {
                                 implicitWidth: DialogValues.dialogButtonWidth
                                 width: DialogValues.dialogButtonWidth
@@ -171,6 +263,8 @@ Item {
                                 }
                             }
 
+                            Item { Layout.fillWidth: true }
+
                             SC.AbstractButton {
                                 implicitWidth: DialogValues.dialogButtonWidth
                                 width: DialogValues.dialogButtonWidth
@@ -184,6 +278,9 @@ Item {
                                     dialogBox.accept();
                                 }
                             }
+                        } // RowLayout
+                    } // Dialog Button Box
+
                     Item { implicitWidth: 35 - DialogValues.defaultPadding }
                 } // RowLayout
             } // Footer

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml

@@ -49,21 +49,68 @@ Item {
         Item {
             x: DialogValues.detailsPanePadding                               // left padding
             width: parent.width - DialogValues.detailsPanePadding * 2        // right padding
+            height: parent.height
 
             Column {
                 anchors.fill: parent
                 spacing: DialogValues.defaultPadding
 
                 Text {
+                    id: detailsHeading
                     text: qsTr("Details")
+                    height: DialogValues.dialogTitleTextHeight
                     width: parent.width;
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
                     lineHeight: DialogValues.paneTitleLineHeight
                     lineHeightMode: Text.FixedHeight
                     color: DialogValues.textColor
+                    verticalAlignment: Qt.AlignVCenter
                 }
 
+                Flickable {
+                    width: parent.width
+                    height: parent.height - detailsHeading.height - DialogValues.defaultPadding
+
+                    contentWidth: parent.width
+                    contentHeight: scrollContent.height
+                    boundsBehavior: Flickable.StopAtBounds
+                    clip: true
+
+                    ScrollBar.vertical:  ScrollBar {
+                        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                                                implicitContentWidth + leftPadding + rightPadding)
+                        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                                                 implicitContentHeight + topPadding + bottomPadding)
+
+                        property bool scrollBarVisible: parent.childrenRect.height > parent.height
+
+                        minimumSize: orientation == Qt.Horizontal ? height / width : width / height
+
+                        orientation: Qt.Vertical
+                        policy: scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+                        x: parent.width - width
+                        y: 0
+                        height: parent.availableHeight
+                                - (parent.bothVisible ? parent.horizontalThickness : 0)
+                        padding: 0
+
+                        background: Rectangle {
+                            color: StudioTheme.Values.themeScrollBarTrack
+                        }
+
+                        contentItem: Rectangle {
+                            implicitWidth: StudioTheme.Values.scrollBarThickness
+                            color: StudioTheme.Values.themeScrollBarHandle
+                        }
+                    } // ScrollBar
+
+                    Column {
+                        id: scrollContent
+                        width: parent.width - DialogValues.detailsPanePadding
+                        height: DialogValues.detailsScrollableContentHeight
+                        spacing: DialogValues.defaultPadding
+
                         SC.TextField {
                             id: projectNameTextField
                             actionIndicatorVisible: false
@@ -77,7 +124,7 @@ Item {
                                 text = text.charAt(0).toUpperCase() + text.slice(1)
                             }
 
-                    font.pixelSize: DialogValues.paneTitlePixelSize
+                            font.pixelSize: DialogValues.defaultPixelSize
                         }
 
                         Binding {
@@ -382,26 +429,6 @@ Item {
 
                         Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
 
-                SC.Section {
-                    width: parent.width
-                    caption: qsTr("Advanced")
-                    captionPixelSize: DialogValues.defaultPixelSize
-                    captionColor: DialogValues.darkPaneColor
-                    captionTextColor: DialogValues.textColor
-                    leftPadding: 0
-                    expanded: true
-                    visible: dialogBox.haveVirtualKeyboard || dialogBox.haveTargetQtVersion
-
-                    Column {
-                        spacing: DialogValues.defaultPadding
-                        width: parent.width
-
-                        /* We need a spacer of -10 in order to have actual 18px spacing between
-                         * section bottom and the checkbox. Otherwise, with Column spacing set to
-                         * 18, without a spacer, the default space to the first item would be 10,
-                         * for some reason. */
-                        Item { width: parent.width; height: -10 }
-
                         SC.CheckBox {
                             id: useQtVirtualKeyboard
                             actionIndicatorVisible: false
@@ -440,22 +467,19 @@ Item {
                                     }
                                 }
 
-                                width: parent.width
-
                                 onActivated: (index) => {
                                     dialogBox.setTargetQtVersion(index)
                                 }
                             } // Target Qt Version ComboBox
-
                         } // RowLayout
-                    } // Column
-                } // SC.Section
 
                         Binding {
                             target: dialogBox
                             property: "useVirtualKeyboard"
                             value: useQtVirtualKeyboard.checked
                         }
+                    } // ScrollContent Column
+                } // ScrollView
 
             } // Column
         } // Item

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml

@@ -30,12 +30,16 @@ import StudioTheme as StudioTheme
 
 QtObject {
     readonly property int dialogWidth: 1522
-    readonly property int dialogHeight: 994
+    readonly property int dialogHeight: 940
     readonly property int projectViewMinimumWidth: 600
     readonly property int projectViewMinimumHeight: projectViewHeight
     readonly property int dialogContentHeight: projectViewHeight + 300  // i.e. dialog without header and footer
     readonly property int loadedPanesWidth: detailsPaneWidth + stylesPaneWidth
-    readonly property int detailsPaneWidth: 330 + detailsPanePadding * 2
+    readonly property int detailsPaneWidth: 330 + detailsPanePadding * 2// + 10 // 50
+    readonly property int dialogTitleTextHeight: 47
+    /* detailsScrollableContentHeight - the full height that may need to be scrolled to be fully
+       visible, if the dialog box is too small. */
+    readonly property int detailsScrollableContentHeight: 428
     readonly property int stylesPaneWidth: styleImageWidth + stylesPanePadding * 2 + styleImageBorderWidth * 2 // i.e. 240px
     readonly property int detailsPanePadding: 18
     readonly property int stylesPanePadding: 18
@@ -44,9 +48,9 @@ QtObject {
     readonly property int styleImageWidth: 200
     readonly property int styleImageBorderWidth: 2
     readonly property int footerHeight: 73
-    readonly property int projectItemWidth: 144
+    readonly property int projectItemWidth: 90
     readonly property int projectItemHeight: 144
-    readonly property int projectViewHeight: projectItemHeight * 2 + projectViewHeaderHeight
+    readonly property int projectViewHeight: projectItemHeight * 2
     readonly property int projectViewHeaderHeight: 38
 
     readonly property int dialogButtonWidth: 100
@@ -69,6 +73,8 @@ QtObject {
     readonly property real viewHeaderLineHeight: 24
     readonly property real paneTitlePixelSize: 18
     readonly property real paneTitleLineHeight: 27
+    readonly property int dialogTitlePixelSize: 32
+    readonly property int dialogTitleLineHeight: 49
 
     // for a spacer item
     function narrowSpacing(value, layoutSpacing = DialogValues.defaultPadding) {

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/NewProjectView.qml

@@ -35,61 +35,9 @@ GridView {
 
     required property Item loader
 
-    readonly property int animDur: 500
-
-    header: Rectangle {
-        width: parent.width
-        height: DialogValues.projectViewHeaderHeight
-        color: DialogValues.lightPaneColor
-
-        Row {
-            id: row
-            spacing: 20
-            property int currIndex: 0
-
-            Repeater {
-                model: categoryModel
-                Text {
-                    text: name
-                    font.weight: Font.DemiBold
-                    font.pixelSize: DialogValues.viewHeaderPixelSize
-                    verticalAlignment: Text.AlignVCenter
-                    color: row.currIndex === index ? DialogValues.textColorInteraction
-                                                   : DialogValues.textColor
-                    Behavior on color { ColorAnimation { duration: animDur } }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            row.currIndex = index
-                            projectModel.setPage(index)
-                            projectView.currentIndex = 0
-                            projectView.currentIndexChanged()
-
-                            strip.x = parent.x
-                            strip.width = parent.width
-                        }
-                    }
-
-                } // Text
-            } // Repeater
-        } // Row
-
-        Rectangle {
-            id: strip
-            width: row.children[0].width
-            height: 5
-            radius: 2
-            color: DialogValues.textColorInteraction
-            anchors.bottom: parent.bottom
-
-            Behavior on x { SmoothedAnimation { duration: animDur } }
-            Behavior on width { SmoothedAnimation { duration: strip.width === 0 ? 0 : animDur } } // do not animate initial width
-        }
-    } // Rectangle
-
     cellWidth: DialogValues.projectItemWidth
     cellHeight: DialogValues.projectItemHeight
+    clip: true
 
     boundsBehavior: Flickable.StopAtBounds
 

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml

@@ -65,12 +65,13 @@ Item {
                 Text {
                     id: styleTitleText
                     text: qsTr("Style")
-                    width: parent.width;
+                    Layout.minimumHeight: DialogValues.dialogTitleTextHeight
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
                     lineHeight: DialogValues.paneTitleLineHeight
                     lineHeightMode: Text.FixedHeight
                     color: DialogValues.textColor
+                    verticalAlignment: Qt.AlignVCenter
 
                     function refresh() {
                         text = qsTr("Style") + " (" + styleModel.rowCount() + ")"

src/plugins/studiowelcome/newprojectdialogimageprovider.cpp

@@ -84,6 +84,26 @@ QPixmap NewProjectDialogImageProvider::requestStylePixmap(const QString &id, QSi
     return pixmap;
 }
 
+QPixmap NewProjectDialogImageProvider::requestDefaultPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    QString realPath = Core::ICore::resourcePath("qmldesigner/newprojectdialog/image/" + id).toString();
+
+    QPixmap pixmap{realPath};
+
+    if (size) {
+        size->setWidth(pixmap.width());
+        size->setHeight(pixmap.height());
+    }
+
+    if (pixmap.isNull())
+        return QPixmap{};
+
+    if (requestedSize.isValid())
+        return pixmap.scaled(requestedSize);
+
+    return pixmap;
+}
+
 QPixmap NewProjectDialogImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
 {
     if (id.startsWith("style-"))
@@ -92,7 +112,7 @@ QPixmap NewProjectDialogImageProvider::requestPixmap(const QString &id, QSize *s
     if (id.startsWith("status-"))
         return requestStatusPixmap(id, size, requestedSize);
 
-    return QPixmap{};
+    return requestDefaultPixmap(id, size, requestedSize);
 }
 
 } // namespace Internal

src/plugins/studiowelcome/newprojectdialogimageprovider.h

@@ -41,6 +41,7 @@ public:
 private:
     QPixmap requestStatusPixmap(const QString &id, QSize *size, const QSize &requestedSize);
     QPixmap requestStylePixmap(const QString &id, QSize *size, const QSize &requestedSize);
+    QPixmap requestDefaultPixmap(const QString &id, QSize *size, const QSize &requestedSize);
 
     static QPixmap invalidStyleIcon();
 };

src/plugins/studiowelcome/qdsnewdialog.cpp

@@ -93,7 +93,11 @@ QdsNewDialog::QdsNewDialog(QWidget *parent)
     m_dialog->setWindowModality(Qt::ApplicationModal);
     m_dialog->setWindowFlags(Qt::Dialog);
     m_dialog->setAttribute(Qt::WA_DeleteOnClose);
-    m_dialog->setMinimumSize(1155, 804);
+    m_dialog->setMinimumSize(1110, 554);
+
+    QSize screenSize = m_dialog->screen()->geometry().size();
+    if (screenSize.height() < 1080)
+        m_dialog->resize(parent->size());
 
     QObject::connect(&m_wizard, &WizardHandler::deletingWizard, this, &QdsNewDialog::onDeletingWizard);
     QObject::connect(&m_wizard, &WizardHandler::wizardCreated, this, &QdsNewDialog::onWizardCreated);