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,29 +26,78 @@ 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
+            color: StudioTheme.Values.themeToolbarBackground
+            radius: StudioTheme.Values.smallRadius
+            state: "default"
+
+            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
-            anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
                     text: qsTr("Return to Design")
-            anchors.left: homeOther.right
-            anchors.leftMargin: 10
                     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
+                    }
+                }
+            ]
+        }
+    }
+
     Item {
         id: topToolbar
         anchors.fill: parent