diff options
author | Samuel Ghinet <samuel.ghinet@qt.io> | 2021-11-23 21:05:02 +0200 |
---|---|---|
committer | Thomas Hartmann <thomas.hartmann@qt.io> | 2021-12-10 11:14:13 +0000 |
commit | 76d8bb3f45fed06678dde909f788191c30d897f4 (patch) | |
tree | f578a569544d90ada36899bc1a2df0c90d6f7214 | |
parent | 3118a9247982575e904bc3173662ef3a896b8f2c (diff) |
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>
6 files changed, 59 insertions, 21 deletions
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml index 3e91ab70f1..1f88360266 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml +++ b/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 - Text { + Item { width: parent.width; height: 11 } // spacer + + Item { width: parent.width - 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 - } + height: DialogValues.paneTitleLineHeight + Row { + width: parent.width + height: DialogValues.paneTitleLineHeight + Item { width: DialogValues.dialogLeftPadding; height: 1} // spacer + + Text { + 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 + } + } + } 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 diff --git a/share/qtcreator/qmldesigner/newprojectdialog/image/logo.png b/share/qtcreator/qmldesigner/newprojectdialog/image/logo.png Binary files differnew file mode 100644 index 0000000000..555e0cac58 --- /dev/null +++ b/share/qtcreator/qmldesigner/newprojectdialog/image/logo.png diff --git a/share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png b/share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png Binary files differnew file mode 100644 index 0000000000..5c443d177a --- /dev/null +++ b/share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml index d622253a68..ab4c081db4 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml +++ b/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 } } } diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml index b99b99dc95..ae26727e07 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml index 09350f5601..1464449ee7 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml +++ b/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 |