From ec55793a225a9959eaacf6d68676b19c42ff4ea4 Mon Sep 17 00:00:00 2001 From: Samuel Ghinet Date: Thu, 10 Mar 2022 13:42:51 +0200 Subject: [PATCH] New Project Dialog: Use hover states for interactive items 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 Reviewed-by: Thomas Hartmann --- .../newprojectdialog/NewProjectDialog.qml | 15 ++- .../imports/NewProjectDialog/Details.qml | 116 +++++++++--------- .../imports/NewProjectDialog/Styles.qml | 19 ++- 3 files changed, 85 insertions(+), 65 deletions(-) diff --git a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml index 4cc82bc79cc..f895cdd8c40 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml +++ b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml @@ -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) diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml index b348a6da350..1f154810b00 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml +++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml @@ -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 { diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml index 72be983e33a..2f8da50c6c3 100644 --- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml +++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml @@ -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 {