refactor(IconButton): turn IconButton into proper button control

So far our `IconButton` hasn't been a proper button control which comes
with many downsides, such as:

- Some default button behaviours need to be simulated (e.g. `onClicked`)
- Any support built-in features for all controls in QML like `ToolTip` aren't can't be used
- There are probably accessibility aspects to it as well

We use the `IconButton` in many different places. Sometimes it doesn't
even act as a button, but just as an icon. I suggest we introduce a separate
`StatusIcon` component for that in future changes.

This commit turns the `IconButton` into a proper `RoundButton`, restoring
the control behaviour and features we get from QML.

This also required to expose the `icon` property as a `iconImg`,
because a `RoundButton` already comes with an `icon`.
On the other hand, we could remove the `onClick` simulation and can now
take advantage of components like `ToolTip`.
This commit is contained in:
Pascal Precht 2020-08-21 13:11:50 +02:00 committed by Pascal Precht
parent 885ea76345
commit f4d16d7661
3 changed files with 22 additions and 13 deletions

View File

@ -9,7 +9,7 @@ AddButton {
height: 36 height: 36
onClicked: { onClicked: {
let x = btnAdd.icon.x + btnAdd.icon.width / 2 - newChatMenu.width / 2 let x = btnAdd.iconImg.x + btnAdd.icon.width / 2 - newChatMenu.width / 2
newChatMenu.popup(x, btnAdd.icon.height + 10) newChatMenu.popup(x, btnAdd.icon.height + 10)
} }

View File

@ -6,7 +6,7 @@ import "../../../../imports"
AddButton { AddButton {
id: btnAdd id: btnAdd
onClicked: { onClicked: {
let x = btnAdd.icon.x + btnAdd.icon.width / 2 - newAccountMenu.width / 2 let x = btnAdd.iconImg.x + btnAdd.icon.width / 2 - newAccountMenu.width / 2
newAccountMenu.popup(x, btnAdd.icon.height + 10) newAccountMenu.popup(x, btnAdd.icon.height + 10)
} }

View File

@ -4,26 +4,33 @@ import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1 import Qt.labs.platform 1.1
import "../imports" import "../imports"
Rectangle { RoundButton {
signal clicked
property int iconWidth: 14 property int iconWidth: 14
property int iconHeight: 14 property int iconHeight: 14
property alias icon: imgIcon property alias iconImg: imgIcon
property bool clickable: true property bool clickable: true
property string iconName: "plusSign" property string iconName: "plusSign"
property color color: Style.current.blue
icon.width: iconWidth
icon.height: iconHeight
id: btnAddContainer id: btnAddContainer
width: 36 width: 36
height: 36 height: 36
color: Style.current.blue
radius: width / 2 radius: width / 2
background: Rectangle {
color: parent.color
radius: parent.radius
}
Image { Image {
id: imgIcon id: imgIcon
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
source: "../app/img/" + parent.iconName + ".svg" source: "../app/img/" + parent.iconName + ".svg"
width: iconWidth width: btnAddContainer.iconWidth
height: iconHeight height: btnAddContainer.iconHeight
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -68,16 +75,18 @@ Rectangle {
] ]
} }
onClicked: {
if (btnAddContainer.clickable) {
imgIcon.state = "rotated"
}
}
MouseArea { MouseArea {
id: mouseArea id: mouseArea
visible: btnAddContainer.clickable visible: btnAddContainer.clickable
anchors.fill: parent anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton onPressed: mouse.accepted = false
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: {
imgIcon.state = "rotated"
btnAddContainer.clicked()
}
} }
} }