forked from qt-creator/qt-creator
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>
This commit is contained in:
Samuel Ghinet
@@ -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
|
||||
|
||||
Text {
|
||||
text: qsTr("Welcome to Qt Design Studio. Let's Create Something Wonderful!")
|
||||
font.pixelSize: 32
|
||||
Item { width: parent.width; implicitHeight: 20 } // spacer
|
||||
Row {
|
||||
width: parent.width
|
||||
height: 47
|
||||
lineHeight: 49
|
||||
lineHeightMode: Text.FixedHeight
|
||||
color: DialogValues.textColor
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
height: DialogValues.dialogTitleTextHeight
|
||||
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
|
||||
}
|
||||
|
||||
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 {
|
||||
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,32 +241,46 @@ Item {
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
|
||||
SC.AbstractButton {
|
||||
implicitWidth: DialogValues.dialogButtonWidth
|
||||
width: DialogValues.dialogButtonWidth
|
||||
visible: true
|
||||
buttonIcon: qsTr("Cancel")
|
||||
iconSize: DialogValues.defaultPixelSize
|
||||
iconFont: StudioTheme.Constants.font
|
||||
Item { // Dialog Button Box
|
||||
width: DialogValues.stylesPaneWidth
|
||||
height: parent.height
|
||||
|
||||
onClicked: {
|
||||
dialogBox.reject();
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
width: DialogValues.stylesPaneWidth
|
||||
implicitWidth: DialogValues.stylesPaneWidth
|
||||
implicitHeight: parent.height
|
||||
|
||||
SC.AbstractButton {
|
||||
implicitWidth: DialogValues.dialogButtonWidth
|
||||
width: DialogValues.dialogButtonWidth
|
||||
visible: true
|
||||
buttonIcon: qsTr("Create")
|
||||
iconSize: DialogValues.defaultPixelSize
|
||||
enabled: dialogBox.fieldsValid
|
||||
iconFont: StudioTheme.Constants.font
|
||||
SC.AbstractButton {
|
||||
implicitWidth: DialogValues.dialogButtonWidth
|
||||
width: DialogValues.dialogButtonWidth
|
||||
visible: true
|
||||
buttonIcon: qsTr("Cancel")
|
||||
iconSize: DialogValues.defaultPixelSize
|
||||
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 }
|
||||
} // RowLayout
|
||||
} // Footer
|
||||
|
||||
@@ -49,358 +49,385 @@ 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
|
||||
}
|
||||
|
||||
SC.TextField {
|
||||
id: projectNameTextField
|
||||
actionIndicatorVisible: false
|
||||
translationIndicatorVisible: false
|
||||
text: dialogBox.projectName
|
||||
Flickable {
|
||||
width: parent.width
|
||||
color: DialogValues.textColor
|
||||
selectByMouse: true
|
||||
height: parent.height - detailsHeading.height - DialogValues.defaultPadding
|
||||
|
||||
onEditingFinished: {
|
||||
text = text.charAt(0).toUpperCase() + text.slice(1)
|
||||
}
|
||||
contentWidth: parent.width
|
||||
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 {
|
||||
target: dialogBox
|
||||
property: "projectName"
|
||||
value: projectNameTextField.text
|
||||
}
|
||||
property bool scrollBarVisible: parent.childrenRect.height > parent.height
|
||||
|
||||
Item { width: parent.width; height: DialogValues.narrowSpacing(11) }
|
||||
minimumSize: orientation == Qt.Horizontal ? height / width : width / height
|
||||
|
||||
RowLayout { // Project location
|
||||
width: parent.width
|
||||
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
|
||||
|
||||
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
|
||||
background: Rectangle {
|
||||
color: StudioTheme.Values.themeScrollBarTrack
|
||||
}
|
||||
} // 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
|
||||
width: parent.width
|
||||
spacing: 0
|
||||
Column {
|
||||
id: scrollContent
|
||||
width: parent.width - DialogValues.detailsPanePadding
|
||||
height: DialogValues.detailsScrollableContentHeight
|
||||
spacing: DialogValues.defaultPadding
|
||||
|
||||
Image {
|
||||
id: statusIcon
|
||||
Layout.alignment: Qt.AlignTop
|
||||
asynchronous: false
|
||||
}
|
||||
SC.TextField {
|
||||
id: projectNameTextField
|
||||
actionIndicatorVisible: false
|
||||
translationIndicatorVisible: false
|
||||
text: dialogBox.projectName
|
||||
width: parent.width
|
||||
color: DialogValues.textColor
|
||||
selectByMouse: true
|
||||
|
||||
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
|
||||
onEditingFinished: {
|
||||
text = text.charAt(0).toUpperCase() + text.slice(1)
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "warning"
|
||||
when: dialogBox.statusType === "warning"
|
||||
PropertyChanges {
|
||||
target: statusMessage
|
||||
color: DialogValues.textWarning
|
||||
font.pixelSize: DialogValues.defaultPixelSize
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: dialogBox
|
||||
property: "projectName"
|
||||
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 {
|
||||
target: statusIcon
|
||||
source: "image://newprojectdialog_library/status-warning"
|
||||
}
|
||||
},
|
||||
} // SC.AbstractButton
|
||||
} // Project location RowLayout
|
||||
|
||||
State {
|
||||
name: "error"
|
||||
when: dialogBox.statusType === "error"
|
||||
PropertyChanges {
|
||||
target: statusMessage
|
||||
color: DialogValues.textError
|
||||
}
|
||||
PropertyChanges {
|
||||
target: statusIcon
|
||||
source: "image://newprojectdialog_library/status-error"
|
||||
Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
|
||||
|
||||
RowLayout { // StatusMessage
|
||||
width: parent.width
|
||||
spacing: 0
|
||||
|
||||
Image {
|
||||
id: statusIcon
|
||||
Layout.alignment: Qt.AlignTop
|
||||
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)
|
||||
}
|
||||
}
|
||||
]
|
||||
} // Text
|
||||
} // RowLayout
|
||||
} // Screen Size ComboBox
|
||||
|
||||
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
|
||||
|
||||
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 {
|
||||
GridLayout { // orientation + width + height
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
color: "transparent"
|
||||
height: 85
|
||||
|
||||
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
|
||||
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
|
||||
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 {
|
||||
width: orientationButton.width / 4
|
||||
height: orientationButton.height
|
||||
onClicked: {
|
||||
if (widthField.realValue && heightField.realValue) {
|
||||
[widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue];
|
||||
checked = !checked
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: verticalBar
|
||||
width: orientationButton.width / 4
|
||||
height: orientationButton.height
|
||||
color: "white"
|
||||
function setHorizontal() {
|
||||
checked = false
|
||||
horizontalBar.color = DialogValues.textColorInteraction
|
||||
verticalBar.color = "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if (widthField.realValue && heightField.realValue) {
|
||||
[widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue];
|
||||
checked = !checked
|
||||
}
|
||||
}
|
||||
function setVertical() {
|
||||
checked = true
|
||||
horizontalBar.color = "white"
|
||||
verticalBar.color = DialogValues.textColorInteraction
|
||||
}
|
||||
} // Orientation button
|
||||
|
||||
function setHorizontal() {
|
||||
checked = false
|
||||
horizontalBar.color = DialogValues.textColorInteraction
|
||||
verticalBar.color = "white"
|
||||
}
|
||||
} // GridLayout: orientation + width + height
|
||||
|
||||
function setVertical() {
|
||||
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 }
|
||||
Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
|
||||
|
||||
SC.CheckBox {
|
||||
id: useQtVirtualKeyboard
|
||||
@@ -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
|
||||
}
|
||||
Binding {
|
||||
target: dialogBox
|
||||
property: "useVirtualKeyboard"
|
||||
value: useQtVirtualKeyboard.checked
|
||||
}
|
||||
} // ScrollContent Column
|
||||
} // ScrollView
|
||||
|
||||
} // Column
|
||||
} // Item
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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() + ")"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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();
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user