From dca7f6121c83277a7d05895e24f1a311dbecaa10 Mon Sep 17 00:00:00 2001 From: Brook Cronin Date: Mon, 30 Oct 2023 14:56:44 +0100 Subject: [PATCH] QmlDesigner: Make toolbutton include label MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Task-number: QDS-9220 Change-Id: I91b30b0f1d8b94662492c0480ec216b2eaff3339 Reviewed-by: Thomas Hartmann Reviewed-by: Qt CI Patch Build Bot Reviewed-by: Henning Gründl --- .../imports/StudioControls/AbstractButton.qml | 21 ++--- share/qtcreator/qmldesigner/toolbar/Main.qml | 83 +++++++++++++++---- 2 files changed, 77 insertions(+), 27 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml index 0acf8418f79..79f27ddaf27 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml @@ -12,6 +12,7 @@ T.AbstractButton { property bool globalHover: false property bool hover: control.hovered + property bool press: control.pressed property alias buttonIcon: buttonIcon.text property alias iconColor: buttonIcon.color @@ -67,7 +68,7 @@ T.AbstractButton { states: [ State { name: "default" - when: control.enabled && !control.pressed && !control.checked && !control.hover + when: control.enabled && !control.press && !control.checked && !control.hover PropertyChanges { target: buttonIcon color: control.style.icon.idle @@ -75,7 +76,7 @@ T.AbstractButton { }, State { name: "hover" - when: control.enabled && !control.pressed && !control.checked && control.hover + when: control.enabled && !control.press && !control.checked && control.hover PropertyChanges { target: buttonIcon color: control.style.icon.hover @@ -83,7 +84,7 @@ T.AbstractButton { }, State { name: "press" - when: control.enabled && control.pressed + when: control.enabled && control.press PropertyChanges { target: buttonIcon color: control.style.icon.interaction @@ -91,7 +92,7 @@ T.AbstractButton { }, State { name: "check" - when: control.enabled && !control.pressed && control.checked + when: control.enabled && !control.press && control.checked PropertyChanges { target: buttonIcon color: control.checkedInverted ? control.style.text.selectedText // TODO rather something in icon @@ -114,7 +115,7 @@ T.AbstractButton { State { name: "default" when: control.enabled && !control.globalHover && !control.hover - && !control.pressed && !control.checked + && !control.press && !control.checked PropertyChanges { target: buttonBackground color: control.style.background.idle @@ -127,7 +128,7 @@ T.AbstractButton { }, State { name: "globalHover" - when: control.globalHover && !control.hover && !control.pressed && control.enabled + when: control.globalHover && !control.hover && !control.press && control.enabled PropertyChanges { target: buttonBackground color: control.style.background.idle @@ -136,7 +137,7 @@ T.AbstractButton { }, State { name: "hover" - when: !control.checked && control.hover && !control.pressed && control.enabled + when: !control.checked && control.hover && !control.press && control.enabled PropertyChanges { target: buttonBackground color: control.style.background.hover @@ -149,7 +150,7 @@ T.AbstractButton { }, State { name: "hoverCheck" - when: control.checked && control.hover && !control.pressed && control.enabled + when: control.checked && control.hover && !control.press && control.enabled PropertyChanges { target: buttonBackground color: control.checkedInverted ? control.style.interactionHover @@ -164,7 +165,7 @@ T.AbstractButton { }, State { name: "press" - when: control.hover && control.pressed && control.enabled + when: control.hover && control.press && control.enabled PropertyChanges { target: buttonBackground color: control.style.interaction @@ -177,7 +178,7 @@ T.AbstractButton { }, State { name: "check" - when: control.enabled && !control.pressed && control.checked + when: control.enabled && !control.press && control.checked PropertyChanges { target: buttonBackground color: control.checkedInverted ? control.style.interaction diff --git a/share/qtcreator/qmldesigner/toolbar/Main.qml b/share/qtcreator/qmldesigner/toolbar/Main.qml index ddd63b0708f..360800a5f70 100644 --- a/share/qtcreator/qmldesigner/toolbar/Main.qml +++ b/share/qtcreator/qmldesigner/toolbar/Main.qml @@ -26,26 +26,75 @@ Rectangle { anchors.fill: parent visible: !backend.isInDesignMode - ToolbarButton { - id: homeOther - anchors.verticalCenter: parent.verticalCenter + Rectangle { + id: returnExtended + height: homeOther.height + width: backTo.visible ? (homeOther.width + backTo.width + contentRow.spacing + 6) : homeOther.width + anchors.verticalCenter: topToolbarOtherMode.verticalCenter anchors.left: parent.left anchors.leftMargin: 10 - tooltip: backend.isDesignModeEnabled ? qsTr("Switch to Design Mode.") - : qsTr("Switch to Welcome Mode.") - buttonIcon: backend.isDesignModeEnabled ? StudioTheme.Constants.designMode_large - : StudioTheme.Constants.home_large - onClicked: backend.triggerModeChange() - } + color: StudioTheme.Values.themeToolbarBackground + radius: StudioTheme.Values.smallRadius + state: "default" - Text { - id: backTo - visible: backend.isDesignModeEnabled - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Return to Design") - anchors.left: homeOther.right - anchors.leftMargin: 10 - color: StudioTheme.Values.themeTextColor + Row { + id: contentRow + spacing: 6 + anchors.fill: parent + + ToolbarButton { + id: homeOther + tooltip: backend.isDesignModeEnabled ? qsTr("Switch to Design Mode.") + : qsTr("Switch to Welcome Mode.") + buttonIcon: backend.isDesignModeEnabled ? StudioTheme.Constants.designMode_large + : StudioTheme.Constants.home_large + hover: mouseArea.containsMouse + press: mouseArea.pressed + + onClicked: backend.triggerModeChange() + + } + + Text { + id: backTo + height: homeOther.height + visible: backend.isDesignModeEnabled + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + text: qsTr("Return to Design") + color: StudioTheme.Values.themeTextColor + } + } + + MouseArea{ + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: homeOther.onClicked() + } + + states: [ + State { + name: "default" + when: !mouseArea.containsMouse && !mouseArea.pressed + }, + State { + name: "hover" + when: mouseArea.containsMouse && !mouseArea.pressed + PropertyChanges { + target: returnExtended + color: StudioTheme.Values.themeControlBackground_topToolbarHover + } + }, + State { + name: "pressed" + when: mouseArea.pressed + PropertyChanges { + target: returnExtended + color: StudioTheme.Values.themeInteraction + } + } + ] } }