Improve the visual of the New Project dialog

* Reworked dialog header -- added DS logo, reworded title & subtitle,
  aligned them to the left
* Added radius for rectangles: Presets pane, Styles pane, the
  Orientation button
* Added extra padding for style items -- so it's easier to figure that
  the label is for the image above it.

Task-number: QDS-5500
Change-Id: Icebe8abb886401e5d075e4a372c0036468301490
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml

@@ -58,41 +58,66 @@ Item {
                     anchors.fill: parent
 
                     Item { width: parent.width; implicitHeight: 20 } // spacer
+
                     Row {
                         width: parent.width
                         height: DialogValues.dialogTitleTextHeight
-                        Layout.alignment: Qt.AlignHCenter
+
+                        Item { width: DialogValues.dialogLeftPadding; height: 1} // horizontal spacer
+
+                        Image {
+                            asynchronous: false
+                            source: "image://newprojectdialog_library/logo"
+                            width: DialogValues.logoWidth
+                            height: DialogValues.logoHeight
+                        }
+
+                        Item {width: 10; height: 1}
+
                         Text {
-                            text: qsTr("Welcome to ")
+                            text: qsTr("Let's create something wonderful with ")
                             font.pixelSize: DialogValues.dialogTitlePixelSize
                             font.family: "Titillium Web"
                             height: DialogValues.dialogTitleTextHeight
                             lineHeight: DialogValues.dialogTitleLineHeight
                             lineHeightMode: Text.FixedHeight
                             color: DialogValues.textColor
+                            verticalAlignment: Text.AlignVCenter
                         }
 
                         Text {
-                            text: qsTr("Qt Design Studio")
+                            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
+                            color: DialogValues.brandTextColor
-                        }
+                            verticalAlignment: Text.AlignVCenter
                         }
+                    } // Row
+
+                    Item { width: parent.width; height: 11 } // spacer
+
+                    Item {
+                        width: parent.width
+                        height: DialogValues.paneTitleLineHeight
+                        Row {
+                            width: parent.width
+                            height: DialogValues.paneTitleLineHeight
+
+                            Item { width: DialogValues.dialogLeftPadding; height: 1} // spacer
 
                             Text {
-                        width: parent.width
+                                width: parent.width - DialogValues.dialogLeftPadding
                                 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
-                        Layout.alignment: Qt.AlignHCenter
                             }
-
+                        }
+                    }
                     Item { width: parent.width; Layout.fillHeight: true} // spacer
                 } // ColumnLayout
             } // Header Item
@@ -102,7 +127,7 @@ Item {
                 Layout.fillHeight: true
 
                 RowLayout {
-                    x: 35
+                    x: DialogValues.dialogLeftPadding
                     width: parent.width - 70
                     height: parent.height
                     spacing: 0
@@ -113,6 +138,7 @@ Item {
                         Layout.fillHeight: true
                         Layout.minimumWidth: 379 // figured out this number visually
                         Layout.minimumHeight: 261 // figured out this number visually
+                        radius: 6
 
                         Column {
                             x: DialogValues.defaultPadding                          // left padding
@@ -294,7 +320,7 @@ Item {
                         } // RowLayout
                     } // Dialog Button Box
 
-                    Item { implicitWidth: 35 - DialogValues.defaultPadding }
+                    Item { implicitWidth: DialogValues.dialogLeftPadding - DialogValues.defaultPadding }
                 } // RowLayout
             } // Footer
         } // ColumnLayout

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

@@ -58,7 +58,7 @@ Item {
                 Text {
                     id: detailsHeading
                     text: qsTr("Details")
-                    height: DialogValues.dialogTitleTextHeight
+                    height: DialogValues.paneTitleTextHeight
                     width: parent.width;
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
@@ -388,6 +388,7 @@ Item {
                                                 width: parent.width
                                                 height: orientationButton.height / 2
                                                 anchors.verticalCenter: parent.verticalCenter
+                                                radius: 3
                                             }
                                         }
 
@@ -401,6 +402,7 @@ Item {
                                             width: orientationButton.width / 4
                                             height: orientationButton.height
                                             color: "white"
+                                            radius: 3
                                         }
                                     }
                                 }

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

@@ -36,7 +36,11 @@ QtObject {
     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 dialogTitleTextHeight: 47
+    readonly property int dialogTitleTextHeight: 85
+    readonly property int paneTitleTextHeight: 47
+    readonly property int logoWidth: 85
+    readonly property int logoHeight: 85
+
     /* 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
@@ -44,6 +48,7 @@ QtObject {
     readonly property int detailsPanePadding: 18
     readonly property int stylesPanePadding: 18
     readonly property int defaultPadding: 18
+    readonly property int dialogLeftPadding: 35
 
     readonly property int styleImageWidth: 200
     readonly property int styleImageBorderWidth: 2
@@ -73,9 +78,11 @@ QtObject {
     readonly property real viewHeaderLineHeight: 24
     readonly property real paneTitlePixelSize: 18
     readonly property real paneTitleLineHeight: 27
-    readonly property int dialogTitlePixelSize: 32
+    readonly property int dialogTitlePixelSize: 38
     readonly property int dialogTitleLineHeight: 49
 
+    readonly property string brandTextColor: "#2e769e"
+
     // for a spacer item
     function narrowSpacing(value, layoutSpacing = DialogValues.defaultPadding) {
         /* e.g. if we want narrow spacing value = 11, then for the spacer item residing inside a

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

@@ -52,6 +52,7 @@ Item {
     Rectangle {
         color: DialogValues.lightPaneColor
         anchors.fill: parent
+        radius: 6
 
         Item {
             x: DialogValues.stylesPanePadding                               // left padding
@@ -65,7 +66,7 @@ Item {
                 Text {
                     id: styleTitleText
                     text: qsTr("Style")
-                    Layout.minimumHeight: DialogValues.dialogTitleTextHeight
+                    Layout.minimumHeight: DialogValues.paneTitleTextHeight
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
                     lineHeight: DialogValues.paneTitleLineHeight
@@ -118,7 +119,7 @@ Item {
 
                     delegate: ItemDelegate {
                         id: delegateId
-                        height: styleImage.height + DialogValues.styleImageBorderWidth + styleText.height + 1
+                        height: styleImage.height + DialogValues.styleImageBorderWidth + styleText.height + extraPadding.height + 1
                         width: stylesList.width
 
                         Rectangle {
@@ -134,7 +135,7 @@ Item {
                                     border.width: index == stylesList.currentIndex ? DialogValues.styleImageBorderWidth : 0
                                     color: "transparent"
                                     width: parent.width
-                                    height: parent.height - styleText.height
+                                    height: parent.height - styleText.height - extraPadding.height
 
                                     Image {
                                         id: styleImage
@@ -158,6 +159,8 @@ Item {
                                     width: parent.width
                                     color: DialogValues.textColor
                                 }
+
+                                Item { id: extraPadding; width: 1; height: 10 }
                             } // Column
                         } // Rectangle