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

Fix visual issues in new project wizard

Browse Source 
* 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>
This commit is contained in:
Samuel Ghinet
2021-11-23 21:05:02 +02:00
parent f79a93dc2b
commit 536f96fef8
8 changed files with 520 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,6 +34,7 @@ import StudioControls as SC
import NewProjectDialog import NewProjectDialog
Item { Item {
id: rootDialog
width: DialogValues.dialogWidth width: DialogValues.dialogWidth
height: DialogValues.dialogHeight height: DialogValues.dialogHeight
@@ -47,38 +48,53 @@ Item {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: 0 spacing: 0
Item { width: parent.width; height: 20 } // spacer
Item { // Header Item Item { // Header Item
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: 218 implicitHeight: 164
Column { ColumnLayout {
anchors.fill: parent 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 width: parent.width
height: 47 height: DialogValues.dialogTitleTextHeight
lineHeight: 49 Layout.alignment: Qt.AlignHCenter
lineHeightMode: Text.FixedHeight Text {
color: DialogValues.textColor text: qsTr("Welcome to ")
horizontalAlignment: Text.AlignHCenter font.pixelSize: DialogValues.dialogTitlePixelSize
font.family: "Titillium Web"
height: DialogValues.dialogTitleTextHeight
lineHeight: DialogValues.dialogTitleLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
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
}
} }
Item { width: parent.width; height: 11 } // spacer
Text { Text {
width: parent.width 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 color: DialogValues.textColor
font.pixelSize: DialogValues.paneTitlePixelSize font.pixelSize: DialogValues.paneTitlePixelSize
lineHeight: DialogValues.paneTitleLineHeight lineHeight: DialogValues.paneTitleLineHeight
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
}
Item { width: parent.width; Layout.fillHeight: true} // spacer
} // ColumnLayout
} // Header Item } // Header Item
Item { // Content Item Item { // Content Item
@@ -96,7 +112,7 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.minimumWidth: 379 // figured out this number visually 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 { Column {
x: DialogValues.defaultPadding // left padding x: DialogValues.defaultPadding // left padding
@@ -106,19 +122,86 @@ Item {
Text { Text {
text: qsTr("Presets") text: qsTr("Presets")
width: parent.width width: parent.width
height: 47
font.weight: Font.DemiBold font.weight: Font.DemiBold
font.pixelSize: DialogValues.paneTitlePixelSize font.pixelSize: DialogValues.paneTitlePixelSize
lineHeight: DialogValues.paneTitleLineHeight lineHeight: DialogValues.paneTitleLineHeight
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
color: DialogValues.textColor 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 { NewProjectView {
id: projectViewId id: projectViewId
x: 10 // left padding x: 10 // left padding
width: parent.width - 64 // right padding width: parent.width - 64 // right padding
height: DialogValues.projectViewHeight height: DialogValues.projectViewHeight
loader: projectDetailsLoader 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 } Item { height: 5; width: parent.width }
@@ -158,32 +241,46 @@ Item {
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
SC.AbstractButton { Item { // Dialog Button Box
implicitWidth: DialogValues.dialogButtonWidth width: DialogValues.stylesPaneWidth
width: DialogValues.dialogButtonWidth height: parent.height
visible: true
buttonIcon: qsTr("Cancel")
iconSize: DialogValues.defaultPixelSize
iconFont: StudioTheme.Constants.font
onClicked: { RowLayout {
dialogBox.reject(); width: DialogValues.stylesPaneWidth
} implicitWidth: DialogValues.stylesPaneWidth
} implicitHeight: parent.height
SC.AbstractButton { SC.AbstractButton {
implicitWidth: DialogValues.dialogButtonWidth implicitWidth: DialogValues.dialogButtonWidth
width: DialogValues.dialogButtonWidth width: DialogValues.dialogButtonWidth
visible: true visible: true
buttonIcon: qsTr("Create") buttonIcon: qsTr("Cancel")
iconSize: DialogValues.defaultPixelSize iconSize: DialogValues.defaultPixelSize
enabled: dialogBox.fieldsValid iconFont: StudioTheme.Constants.font
iconFont: StudioTheme.Constants.font
onClicked: {
dialogBox.reject();
}
}
Item { Layout.fillWidth: true }
SC.AbstractButton {
implicitWidth: DialogValues.dialogButtonWidth
width: DialogValues.dialogButtonWidth
visible: true
buttonIcon: qsTr("Create")
iconSize: DialogValues.defaultPixelSize
enabled: dialogBox.fieldsValid
iconFont: StudioTheme.Constants.font
onClicked: {
dialogBox.accept();
}
}
} // RowLayout
} // Dialog Button Box
onClicked: {
dialogBox.accept();
}
}
Item { implicitWidth: 35 - DialogValues.defaultPadding } Item { implicitWidth: 35 - DialogValues.defaultPadding }
} // RowLayout } // RowLayout
} // Footer } // Footer

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

@@ -49,358 +49,385 @@ Item {
Item { Item {
x: DialogValues.detailsPanePadding // left padding x: DialogValues.detailsPanePadding // left padding
width: parent.width - DialogValues.detailsPanePadding * 2 // right padding width: parent.width - DialogValues.detailsPanePadding * 2 // right padding
height: parent.height
Column { Column {
anchors.fill: parent anchors.fill: parent
spacing: DialogValues.defaultPadding spacing: DialogValues.defaultPadding
Text { Text {
id: detailsHeading
text: qsTr("Details") text: qsTr("Details")
height: DialogValues.dialogTitleTextHeight
width: parent.width; width: parent.width;
font.weight: Font.DemiBold font.weight: Font.DemiBold
font.pixelSize: DialogValues.paneTitlePixelSize font.pixelSize: DialogValues.paneTitlePixelSize
lineHeight: DialogValues.paneTitleLineHeight lineHeight: DialogValues.paneTitleLineHeight
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
color: DialogValues.textColor color: DialogValues.textColor
verticalAlignment: Qt.AlignVCenter
} }
SC.TextField { Flickable {
id: projectNameTextField
actionIndicatorVisible: false
translationIndicatorVisible: false
text: dialogBox.projectName
width: parent.width width: parent.width
color: DialogValues.textColor height: parent.height - detailsHeading.height - DialogValues.defaultPadding
selectByMouse: true
onEditingFinished: { contentWidth: parent.width
text = text.charAt(0).toUpperCase() + text.slice(1) contentHeight: scrollContent.height
} boundsBehavior: Flickable.StopAtBounds
clip: true
font.pixelSize: DialogValues.paneTitlePixelSize ScrollBar.vertical: ScrollBar {
} implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
Binding { property bool scrollBarVisible: parent.childrenRect.height > parent.height
target: dialogBox
property: "projectName"
value: projectNameTextField.text
}
Item { width: parent.width; height: DialogValues.narrowSpacing(11) } minimumSize: orientation == Qt.Horizontal ? height / width : width / height
RowLayout { // Project location orientation: Qt.Vertical
width: parent.width policy: scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
x: parent.width - width
y: 0
height: parent.availableHeight
- (parent.bothVisible ? parent.horizontalThickness : 0)
padding: 0
SC.TextField { background: Rectangle {
Layout.fillWidth: true color: StudioTheme.Values.themeScrollBarTrack
id: projectLocationTextField
actionIndicatorVisible: false
translationIndicatorVisible: false
text: dialogBox.projectLocation
color: DialogValues.textColor
selectByMouse: true
font.pixelSize: DialogValues.defaultPixelSize
}
Binding {
target: dialogBox
property: "projectLocation"
value: projectLocationTextField.text
}
SC.AbstractButton {
implicitWidth: 30
iconSize: 20
visible: true
buttonIcon: "…"
iconFont: StudioTheme.Constants.font
onClicked: {
var newLocation = dialogBox.chooseProjectLocation()
if (newLocation)
projectLocationTextField.text = newLocation
} }
} // SC.AbstractButton
} // Project location RowLayout
Item { width: parent.width; height: DialogValues.narrowSpacing(7) } contentItem: Rectangle {
implicitWidth: StudioTheme.Values.scrollBarThickness
color: StudioTheme.Values.themeScrollBarHandle
}
} // ScrollBar
RowLayout { // StatusMessage Column {
width: parent.width id: scrollContent
spacing: 0 width: parent.width - DialogValues.detailsPanePadding
height: DialogValues.detailsScrollableContentHeight
spacing: DialogValues.defaultPadding
Image { SC.TextField {
id: statusIcon id: projectNameTextField
Layout.alignment: Qt.AlignTop actionIndicatorVisible: false
asynchronous: false translationIndicatorVisible: false
} text: dialogBox.projectName
width: parent.width
color: DialogValues.textColor
selectByMouse: true
Text { onEditingFinished: {
id: statusMessage text = text.charAt(0).toUpperCase() + text.slice(1)
text: dialogBox.statusMessage }
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
wrapMode: Text.Wrap
elide: Text.ElideRight
maximumLineCount: 3
Layout.fillWidth: true
states: [ font.pixelSize: DialogValues.defaultPixelSize
State { }
name: "warning"
when: dialogBox.statusType === "warning" Binding {
PropertyChanges { target: dialogBox
target: statusMessage property: "projectName"
color: DialogValues.textWarning value: projectNameTextField.text
}
Item { width: parent.width; height: DialogValues.narrowSpacing(11) }
RowLayout { // Project location
width: parent.width
SC.TextField {
Layout.fillWidth: true
id: projectLocationTextField
actionIndicatorVisible: false
translationIndicatorVisible: false
text: dialogBox.projectLocation
color: DialogValues.textColor
selectByMouse: true
font.pixelSize: DialogValues.defaultPixelSize
}
Binding {
target: dialogBox
property: "projectLocation"
value: projectLocationTextField.text
}
SC.AbstractButton {
implicitWidth: 30
iconSize: 20
visible: true
buttonIcon: "…"
iconFont: StudioTheme.Constants.font
onClicked: {
var newLocation = dialogBox.chooseProjectLocation()
if (newLocation)
projectLocationTextField.text = newLocation
} }
PropertyChanges { } // SC.AbstractButton
target: statusIcon } // Project location RowLayout
source: "image://newprojectdialog_library/status-warning"
}
},
State { Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
name: "error"
when: dialogBox.statusType === "error" RowLayout { // StatusMessage
PropertyChanges { width: parent.width
target: statusMessage spacing: 0
color: DialogValues.textError
} Image {
PropertyChanges { id: statusIcon
target: statusIcon Layout.alignment: Qt.AlignTop
source: "image://newprojectdialog_library/status-error" asynchronous: false
}
Text {
id: statusMessage
text: dialogBox.statusMessage
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
wrapMode: Text.Wrap
elide: Text.ElideRight
maximumLineCount: 3
Layout.fillWidth: true
states: [
State {
name: "warning"
when: dialogBox.statusType === "warning"
PropertyChanges {
target: statusMessage
color: DialogValues.textWarning
}
PropertyChanges {
target: statusIcon
source: "image://newprojectdialog_library/status-warning"
}
},
State {
name: "error"
when: dialogBox.statusType === "error"
PropertyChanges {
target: statusMessage
color: DialogValues.textError
}
PropertyChanges {
target: statusIcon
source: "image://newprojectdialog_library/status-error"
}
}
]
} // Text
} // RowLayout
SC.CheckBox {
id: defaultLocationCheckbox
actionIndicatorVisible: false
text: qsTr("Use as default project location")
checked: false
font.pixelSize: DialogValues.defaultPixelSize
}
Binding {
target: dialogBox
property: "saveAsDefaultLocation"
value: defaultLocationCheckbox.checked
}
Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
SC.ComboBox { // Screen Size ComboBox
id: screenSizeComboBox
actionIndicatorVisible: false
currentIndex: -1
model: screenSizeModel
textRole: "display"
width: parent.width
font.pixelSize: DialogValues.defaultPixelSize
onActivated: (index) => {
dialogBox.setScreenSizeIndex(index);
var size = screenSizeModel.screenSizes(index);
widthField.realValue = size.width;
heightField.realValue = size.height;
}
Connections {
target: screenSizeModel
function onModelReset() {
var newIndex = screenSizeComboBox.currentIndex > -1
? screenSizeComboBox.currentIndex
: dialogBox.screenSizeIndex()
screenSizeComboBox.currentIndex = newIndex
screenSizeComboBox.activated(newIndex)
} }
} }
] } // Screen Size ComboBox
} // Text
} // RowLayout
SC.CheckBox { GridLayout { // orientation + width + height
id: defaultLocationCheckbox
actionIndicatorVisible: false
text: qsTr("Use as default project location")
checked: false
font.pixelSize: DialogValues.defaultPixelSize
}
Binding {
target: dialogBox
property: "saveAsDefaultLocation"
value: defaultLocationCheckbox.checked
}
Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
SC.ComboBox { // Screen Size ComboBox
id: screenSizeComboBox
actionIndicatorVisible: false
currentIndex: -1
model: screenSizeModel
textRole: "display"
width: parent.width
font.pixelSize: DialogValues.defaultPixelSize
onActivated: (index) => {
dialogBox.setScreenSizeIndex(index);
var size = screenSizeModel.screenSizes(index);
widthField.realValue = size.width;
heightField.realValue = size.height;
}
Connections {
target: screenSizeModel
function onModelReset() {
var newIndex = screenSizeComboBox.currentIndex > -1
? screenSizeComboBox.currentIndex
: dialogBox.screenSizeIndex()
screenSizeComboBox.currentIndex = newIndex
screenSizeComboBox.activated(newIndex)
}
}
} // Screen Size ComboBox
GridLayout { // orientation + width + height
width: parent.width
height: 85
columns: 4
rows: 2
columnSpacing: 10
rowSpacing: 10
// header items
Text {
text: qsTr("Width")
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
Text {
text: qsTr("Height")
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
Item { Layout.fillWidth: true }
Text {
text: qsTr("Orientation")
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
// content items
SC.RealSpinBox {
id: widthField
actionIndicatorVisible: false
implicitWidth: 70
labelColor: DialogValues.textColor
realFrom: 100
realTo: 100000
realValue: 100
realStepSize: 10
font.pixelSize: DialogValues.defaultPixelSize
onRealValueChanged: {
var height = heightField.realValue
var width = realValue
if (width >= height)
orientationButton.setHorizontal()
else
orientationButton.setVertical()
}
} // Width Text Field
Binding {
target: dialogBox
property: "customWidth"
value: widthField.realValue
}
SC.RealSpinBox {
id: heightField
actionIndicatorVisible: false
implicitWidth: 70
labelColor: DialogValues.textColor
realFrom: 100
realTo: 100000
realValue: 100
realStepSize: 10
font.pixelSize: DialogValues.defaultPixelSize
onRealValueChanged: {
var height = realValue
var width = widthField.realValue
if (width >= height)
orientationButton.setHorizontal()
else
orientationButton.setVertical()
}
} // Height Text Field
Binding {
target: dialogBox
property: "customHeight"
value: heightField.realValue
}
Item { Layout.fillWidth: true }
Button {
id: orientationButton
implicitWidth: 100
implicitHeight: 50
checked: false
hoverEnabled: false
background: Rectangle {
width: parent.width width: parent.width
height: parent.height height: 85
color: "transparent"
Row { columns: 4
Item { rows: 2
width: orientationButton.width / 2
height: orientationButton.height columnSpacing: 10
Rectangle { rowSpacing: 10
id: horizontalBar
color: "white" // header items
width: parent.width Text {
height: orientationButton.height / 2 text: qsTr("Width")
anchors.verticalCenter: parent.verticalCenter font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
Text {
text: qsTr("Height")
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
Item { Layout.fillWidth: true }
Text {
text: qsTr("Orientation")
font.pixelSize: DialogValues.defaultPixelSize
lineHeight: DialogValues.defaultLineHeight
lineHeightMode: Text.FixedHeight
color: DialogValues.textColor
}
// content items
SC.RealSpinBox {
id: widthField
actionIndicatorVisible: false
implicitWidth: 70
labelColor: DialogValues.textColor
realFrom: 100
realTo: 100000
realValue: 100
realStepSize: 10
font.pixelSize: DialogValues.defaultPixelSize
onRealValueChanged: {
var height = heightField.realValue
var width = realValue
if (width >= height)
orientationButton.setHorizontal()
else
orientationButton.setVertical()
}
} // Width Text Field
Binding {
target: dialogBox
property: "customWidth"
value: widthField.realValue
}
SC.RealSpinBox {
id: heightField
actionIndicatorVisible: false
implicitWidth: 70
labelColor: DialogValues.textColor
realFrom: 100
realTo: 100000
realValue: 100
realStepSize: 10
font.pixelSize: DialogValues.defaultPixelSize
onRealValueChanged: {
var height = realValue
var width = widthField.realValue
if (width >= height)
orientationButton.setHorizontal()
else
orientationButton.setVertical()
}
} // Height Text Field
Binding {
target: dialogBox
property: "customHeight"
value: heightField.realValue
}
Item { Layout.fillWidth: true }
Button {
id: orientationButton
implicitWidth: 100
implicitHeight: 50
checked: false
hoverEnabled: false
background: Rectangle {
width: parent.width
height: parent.height
color: "transparent"
Row {
Item {
width: orientationButton.width / 2
height: orientationButton.height
Rectangle {
id: horizontalBar
color: "white"
width: parent.width
height: orientationButton.height / 2
anchors.verticalCenter: parent.verticalCenter
}
}
Item {
width: orientationButton.width / 4
height: orientationButton.height
}
Rectangle {
id: verticalBar
width: orientationButton.width / 4
height: orientationButton.height
color: "white"
}
} }
} }
Item { onClicked: {
width: orientationButton.width / 4 if (widthField.realValue && heightField.realValue) {
height: orientationButton.height [widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue];
checked = !checked
}
} }
Rectangle { function setHorizontal() {
id: verticalBar checked = false
width: orientationButton.width / 4 horizontalBar.color = DialogValues.textColorInteraction
height: orientationButton.height verticalBar.color = "white"
color: "white"
} }
}
}
onClicked: { function setVertical() {
if (widthField.realValue && heightField.realValue) { checked = true
[widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue]; horizontalBar.color = "white"
checked = !checked verticalBar.color = DialogValues.textColorInteraction
} }
} } // Orientation button
function setHorizontal() { } // GridLayout: orientation + width + height
checked = false
horizontalBar.color = DialogValues.textColorInteraction
verticalBar.color = "white"
}
function setVertical() { Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
checked = true
horizontalBar.color = "white"
verticalBar.color = DialogValues.textColorInteraction
}
} // Orientation button
} // GridLayout: orientation + width + height
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 { SC.CheckBox {
id: useQtVirtualKeyboard id: useQtVirtualKeyboard
@@ -440,22 +467,19 @@ Item {
} }
} }
width: parent.width
onActivated: (index) => { onActivated: (index) => {
dialogBox.setTargetQtVersion(index) dialogBox.setTargetQtVersion(index)
} }
} // Target Qt Version ComboBox } // Target Qt Version ComboBox
} // RowLayout } // RowLayout
} // Column
} // SC.Section
Binding { Binding {
target: dialogBox target: dialogBox
property: "useVirtualKeyboard" property: "useVirtualKeyboard"
value: useQtVirtualKeyboard.checked value: useQtVirtualKeyboard.checked
} }
} // ScrollContent Column
} // ScrollView
} // Column } // Column
} // Item } // Item

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

@@ -30,12 +30,16 @@ import StudioTheme as StudioTheme
QtObject { QtObject {
readonly property int dialogWidth: 1522 readonly property int dialogWidth: 1522
readonly property int dialogHeight: 994 readonly property int dialogHeight: 940
readonly property int projectViewMinimumWidth: 600 readonly property int projectViewMinimumWidth: 600
readonly property int projectViewMinimumHeight: projectViewHeight readonly property int projectViewMinimumHeight: projectViewHeight
readonly property int dialogContentHeight: projectViewHeight + 300 // i.e. dialog without header and footer readonly property int dialogContentHeight: projectViewHeight + 300 // i.e. dialog without header and footer
readonly property int loadedPanesWidth: detailsPaneWidth + stylesPaneWidth 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 stylesPaneWidth: styleImageWidth + stylesPanePadding * 2 + styleImageBorderWidth * 2 // i.e. 240px
readonly property int detailsPanePadding: 18 readonly property int detailsPanePadding: 18
readonly property int stylesPanePadding: 18 readonly property int stylesPanePadding: 18
@@ -44,9 +48,9 @@ QtObject {
readonly property int styleImageWidth: 200 readonly property int styleImageWidth: 200
readonly property int styleImageBorderWidth: 2 readonly property int styleImageBorderWidth: 2
readonly property int footerHeight: 73 readonly property int footerHeight: 73
readonly property int projectItemWidth: 144 readonly property int projectItemWidth: 90
readonly property int projectItemHeight: 144 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 projectViewHeaderHeight: 38
readonly property int dialogButtonWidth: 100 readonly property int dialogButtonWidth: 100
@@ -69,6 +73,8 @@ QtObject {
readonly property real viewHeaderLineHeight: 24 readonly property real viewHeaderLineHeight: 24
readonly property real paneTitlePixelSize: 18 readonly property real paneTitlePixelSize: 18
readonly property real paneTitleLineHeight: 27 readonly property real paneTitleLineHeight: 27
readonly property int dialogTitlePixelSize: 32
readonly property int dialogTitleLineHeight: 49
// for a spacer item // for a spacer item
function narrowSpacing(value, layoutSpacing = DialogValues.defaultPadding) { function narrowSpacing(value, layoutSpacing = DialogValues.defaultPadding) {

54
share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/NewProjectView.qml
View File

@@ -35,61 +35,9 @@ GridView {
required property Item loader 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 cellWidth: DialogValues.projectItemWidth
cellHeight: DialogValues.projectItemHeight cellHeight: DialogValues.projectItemHeight
clip: true
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds

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

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

22
src/plugins/studiowelcome/newprojectdialogimageprovider.cpp
View File

@@ -84,6 +84,26 @@ QPixmap NewProjectDialogImageProvider::requestStylePixmap(const QString &id, QSi
return pixmap; 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) QPixmap NewProjectDialogImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{ {
if (id.startsWith("style-")) if (id.startsWith("style-"))
@@ -92,7 +112,7 @@ QPixmap NewProjectDialogImageProvider::requestPixmap(const QString &id, QSize *s
if (id.startsWith("status-")) if (id.startsWith("status-"))
return requestStatusPixmap(id, size, requestedSize); return requestStatusPixmap(id, size, requestedSize);
return QPixmap{}; return requestDefaultPixmap(id, size, requestedSize);
} }
} // namespace Internal } // namespace Internal

1
src/plugins/studiowelcome/newprojectdialogimageprovider.h
View File

@@ -41,6 +41,7 @@ public:
private: private:
QPixmap requestStatusPixmap(const QString &id, QSize *size, const QSize &requestedSize); QPixmap requestStatusPixmap(const QString &id, QSize *size, const QSize &requestedSize);
QPixmap requestStylePixmap(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(); static QPixmap invalidStyleIcon();
}; };

6
src/plugins/studiowelcome/qdsnewdialog.cpp
View File

@@ -93,7 +93,11 @@ QdsNewDialog::QdsNewDialog(QWidget *parent)
m_dialog->setWindowModality(Qt::ApplicationModal); m_dialog->setWindowModality(Qt::ApplicationModal);
m_dialog->setWindowFlags(Qt::Dialog); m_dialog->setWindowFlags(Qt::Dialog);
m_dialog->setAttribute(Qt::WA_DeleteOnClose); 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::deletingWizard, this, &QdsNewDialog::onDeletingWizard);
QObject::connect(&m_wizard, &WizardHandler::wizardCreated, this, &QdsNewDialog::onWizardCreated); QObject::connect(&m_wizard, &WizardHandler::wizardCreated, this, &QdsNewDialog::onWizardCreated);