feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Improve the visual of the New Project dialog

Browse Source 
* 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>
This commit is contained in:
Samuel Ghinet
2021-11-23 21:05:02 +02:00
committed by Thomas Hartmann
parent 3118a92479
commit 76d8bb3f45
6 changed files with 61 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
View File

@@ -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

BIN
share/qtcreator/qmldesigner/newprojectdialog/image/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
share/qtcreator/qmldesigner/newprojectdialog/image/logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

4
share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
View File

@@ -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
}
}
}

11
share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
View File

@@ -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

9
share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
View File

@@ -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