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

New Project Dialog: Use hover states for interactive items

Browse Source 
Also, changed the "Save Preset" dialog so that, when the user presses
Enter, the dialog will be accept-ed.

Task-number: QDS-5741
Change-Id: I7056d1184a3d9d400ac718c8d434cf2ad36ed35e
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Samuel Ghinet
2022-03-10 13:42:51 +02:00
parent f487143848
commit ec55793a22
3 changed files with 85 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -204,11 +204,22 @@ Item {
font.weight: Font.DemiBold font.weight: Font.DemiBold
font.pixelSize: DialogValues.viewHeaderPixelSize font.pixelSize: DialogValues.viewHeaderPixelSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: tabBarRow.currIndex === index ? DialogValues.textColorInteraction
color: {
var color = tabBarRow.currIndex === index
? DialogValues.textColorInteraction
: DialogValues.textColor : DialogValues.textColor
return tabItemMouseArea.containsMouse
? Qt.darker(color, 1.5)
: color
}
Behavior on color { ColorAnimation { duration: tabBar.animDur } } Behavior on color { ColorAnimation { duration: tabBar.animDur } }
MouseArea { MouseArea {
id: tabItemMouseArea
hoverEnabled: true
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
tabBar.selectTab(index) tabBar.selectTab(index)

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

@@ -286,12 +286,8 @@ Item {
realStepSize: 10 realStepSize: 10
font.pixelSize: DialogValues.defaultPixelSize font.pixelSize: DialogValues.defaultPixelSize
onRealValueChanged: { onRealValueChanged: orientationButton.isHorizontal =
if (widthField.realValue >= heightField.realValue) widthField.realValue >= heightField.realValue
orientationButton.setHorizontal()
else
orientationButton.setVertical()
}
} // Width Text Field } // Width Text Field
Binding { Binding {
@@ -311,12 +307,8 @@ Item {
realStepSize: 10 realStepSize: 10
font.pixelSize: DialogValues.defaultPixelSize font.pixelSize: DialogValues.defaultPixelSize
onRealValueChanged: { onRealValueChanged: orientationButton.isHorizontal =
if (widthField.realValue >= heightField.realValue) widthField.realValue >= heightField.realValue
orientationButton.setHorizontal()
else
orientationButton.setVertical()
}
} // Height Text Field } // Height Text Field
Binding { Binding {
@@ -327,69 +319,69 @@ Item {
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
Button { Item {
id: orientationButton id: orientationButton
implicitWidth: 100 implicitWidth: 100
implicitHeight: 50 implicitHeight: 50
checked: false property bool isHorizontal: false
hoverEnabled: false
background: Rectangle {
width: parent.width
height: parent.height
color: "transparent"
Row { Row {
Item { spacing: orientationButton.width / 4
width: orientationButton.width / 2
height: orientationButton.height function computeColor(barId) {
var color = DialogValues.textColor
if (barId === horizontalBar) {
color = orientationButton.isHorizontal
? DialogValues.textColorInteraction
: DialogValues.textColor
} else {
color = orientationButton.isHorizontal
? DialogValues.textColor
: DialogValues.textColorInteraction
}
if (orientationButtonMouseArea.containsMouse)
color = Qt.darker(color, 1.5)
return color
}
Rectangle { Rectangle {
id: horizontalBar id: horizontalBar
color: "white" color: parent.computeColor(horizontalBar)
width: parent.width width: orientationButton.width / 2
height: orientationButton.height / 2 height: orientationButton.height / 2
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
radius: 3 radius: 3
} }
}
Item {
width: orientationButton.width / 4
height: orientationButton.height
}
Rectangle { Rectangle {
id: verticalBar id: verticalBar
color: parent.computeColor(verticalBar)
width: orientationButton.width / 4 width: orientationButton.width / 4
height: orientationButton.height height: orientationButton.height
color: "white"
radius: 3 radius: 3
} }
} }
}
MouseArea {
id: orientationButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: { onClicked: {
if (widthField.realValue && heightField.realValue) { if (widthField.realValue && heightField.realValue) {
[widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue] [widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue]
orientationButton.checked = !orientationButton.checked
if (widthField.realValue === heightField.realValue) if (widthField.realValue === heightField.realValue)
orientationButton.checked ? setVertical() : setHorizontal() orientationButton.isHorizontal = !orientationButton.isHorizontal
else
orientationButton.isHorizontal = widthField.realValue > heightField.realValue
} }
} }
function setHorizontal() {
orientationButton.checked = false
horizontalBar.color = DialogValues.textColorInteraction
verticalBar.color = "white"
}
function setVertical() {
orientationButton.checked = true
horizontalBar.color = "white"
verticalBar.color = DialogValues.textColorInteraction
} }
} // Orientation button } // Orientation button
} // GridLayout: orientation + width + height } // GridLayout: orientation + width + height
Rectangle { Rectangle {
@@ -507,6 +499,8 @@ Item {
presetNameTextField.text = text.trim() presetNameTextField.text = text.trim()
presetNameTextField.text = text.replace(/\s+/g, " ") presetNameTextField.text = text.replace(/\s+/g, " ")
} }
onAccepted: savePresetDialog.accept()
} }
Binding { Binding {

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

@@ -160,8 +160,17 @@ Item {
+ 2 * DialogValues.styleImageBorderWidth + 2 * DialogValues.styleImageBorderWidth
height: DialogValues.styleImageHeight height: DialogValues.styleImageHeight
+ 2 * DialogValues.styleImageBorderWidth + 2 * DialogValues.styleImageBorderWidth
border.color: index === stylesList.currentIndex ? DialogValues.textColorInteraction : "transparent"
border.width: index === stylesList.currentIndex ? DialogValues.styleImageBorderWidth : 0 border.color: itemRectMouseArea.containsMouse
? DialogValues.textColor
: (index === stylesList.currentIndex
? DialogValues.textColorInteraction
: "transparent")
border.width: index === stylesList.currentIndex || itemRectMouseArea.containsMouse
? DialogValues.styleImageBorderWidth
: 0
color: "transparent" color: "transparent"
Image { Image {
@@ -173,6 +182,12 @@ Item {
asynchronous: false asynchronous: false
source: "image://newprojectdialog_library/" + BackendApi.styleModel.iconId(model.index) source: "image://newprojectdialog_library/" + BackendApi.styleModel.iconId(model.index)
} }
MouseArea {
id: itemRectMouseArea
anchors.fill: parent
hoverEnabled: true
}
} // Rectangle } // Rectangle
Text { Text {