QmlDesigner: Make toolbutton include label

Task-number: QDS-9220
Change-Id: I91b30b0f1d8b94662492c0480ec216b2eaff3339
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>

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

share/qtcreator/qmldesigner/toolbar/Main.qml

@@ -26,26 +26,75 @@ Rectangle {
         anchors.fill: parent
         visible: !backend.isInDesignMode
 
-        ToolbarButton {
+        Rectangle {
-            id: homeOther
+            id: returnExtended
-            anchors.verticalCenter: parent.verticalCenter
+            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.")
+            color: StudioTheme.Values.themeToolbarBackground
-                                                 : qsTr("Switch to Welcome Mode.")
+            radius: StudioTheme.Values.smallRadius
-            buttonIcon: backend.isDesignModeEnabled ? StudioTheme.Constants.designMode_large
+            state: "default"
-                                                    : StudioTheme.Constants.home_large
-            onClicked: backend.triggerModeChange()
-        }
 
-        Text {
+            Row {
-            id: backTo
+                id: contentRow
-            visible: backend.isDesignModeEnabled
+                spacing: 6
-            anchors.verticalCenter: parent.verticalCenter
+                anchors.fill: parent
-            text: qsTr("Return to Design")
+
-            anchors.left: homeOther.right
+                ToolbarButton {
-            anchors.leftMargin: 10
+                    id: homeOther
-            color: StudioTheme.Values.themeTextColor
+                    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
+                    }
+                }
+            ]
         }
     }