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`.

ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml

@@ -9,7 +9,7 @@ AddButton {
     height: 36
 
     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)
     }
     

ui/app/AppLayouts/Wallet/components/AddAccount.qml

@@ -6,7 +6,7 @@ import "../../../../imports"
 AddButton {
     id: btnAdd
     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)
     }
 

ui/shared/IconButton.qml

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