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

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

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

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

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

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

@@ -160,8 +160,17 @@ Item {
+ 2 * DialogValues.styleImageBorderWidth
height: DialogValues.styleImageHeight
+ 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"
Image {
@@ -173,6 +182,12 @@ Item {
asynchronous: false
source: "image://newprojectdialog_library/" + BackendApi.styleModel.iconId(model.index)
}
MouseArea {
id: itemRectMouseArea
anchors.fill: parent
hoverEnabled: true
}
} // Rectangle
Text {