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>
This commit is contained in:
Brook Cronin
2023-10-30 14:56:44 +01:00
parent 1641035388
commit dca7f6121c
2 changed files with 77 additions and 27 deletions

View File

@@ -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

View File

@@ -26,29 +26,78 @@ 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
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