feat(Core.Controls): introduce StatusIconTabButton component

This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight
adjustments:

- removes `iconColor` in favour of `icon.color`
- removes `disabledColor` (main reason being that we don't show disabled buttons of this type)

This button handles various cases:

1. Icon tab buttons - An icon button used in Status Desktop for different sections
2. Letter identicon button - Used for community sections that don't have a profile picture
3. Image icon button - Used for community sections that do have a profile picture

Which type is rendered depends on the configuration of the component as shown
in the usage.

Usage:

```
import StatusQ.Controls 0.1

// When `icon.name` is set, it renders a `StatusIcon` button
StatusIconTabButton {
    icon.name: "chat"
}

// When `icon.source` is set, it renders a `StatusRoundedImage` button
StatusIconTabButton {
    icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}

// When `name` is set, it renders a `StatusLetterIdenticon` button
StatusIconTabButton {
    name: "#status"
}

```

Closes #16

README.md

@@ -9,6 +9,7 @@ These modules are:
 
 - [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
+- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.

sandbox/Controls.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 6
+    columnSpacing: 5
+    rowSpacing: 5
+    property ThemePalette theme
+
+    StatusIconTabButton {
+        icon.name: "chat"
+    }
+
+    StatusIconTabButton {
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusIconTabButton {
+        name: "#status"
+    }
+}
+

sandbox/main.qml

@@ -29,6 +29,11 @@ Window {
             checkable: true
             text: "Icons"
         }
+        Button {
+            id: controlsTab
+            checkable: true
+            text: "Controls"
+        }
         Button {
             id: otherTab
             checkable: true
@@ -67,6 +72,8 @@ Window {
                         switch(topicsGroup.checkedButton) {
                         case iconsTab:
                             return iconsComponent;
+                        case controlsTab:
+                            return controlsComponent;
                         case otherTab:
                             return othersComponent;
                         default:
@@ -95,6 +102,8 @@ Window {
                         switch(topicsGroup.checkedButton) {
                         case iconsTab:
                             return iconsComponent;
+                        case controlsTab:
+                            return controlsComponent;
                         case otherTab:
                             return othersComponent;
                         default:
@@ -142,6 +151,14 @@ Window {
         }
     }
 
+    Component {
+        id: controlsComponent
+        Controls {
+            anchors.centerIn: parent
+            theme: parent.currentTheme
+        }
+    }
+
     Component {
         id: othersComponent
         Others {

sandbox/qml.qrc

@@ -1,6 +1,7 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
+        <file>Controls.qml</file>
         <file>Icons.qml</file>
         <file>Others.qml</file>
     </qresource>

src/StatusQ/Controls/StatusIconTabButton.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+TabButton {
+    id: statusIconTabButton
+
+    property string name: ""
+
+    implicitWidth: 40
+    implicitHeight: 40
+
+    icon.height: 24
+    icon.width: 24
+    icon.color: Theme.palette.baseColor1
+
+    contentItem: Item {
+        anchors.fill: parent
+
+        Loader {
+            active: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: statusIconTabButton.name !== "" && !icon.source.toString() ? letterIdenticon :
+              !!icon.source.toString() ? imageIcon : defaultIcon
+        }
+
+        Component {
+            id: defaultIcon
+            StatusIcon {
+                icon: statusIconTabButton.icon.name
+                height: statusIconTabButton.icon.height
+                width: statusIconTabButton.icon.width
+                color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+            }
+        }
+
+        Component {
+            id: imageIcon
+            StatusRoundedImage {
+                width: 28
+                height: 28
+                image.source: icon.source
+            }
+        }
+
+        Component {
+            id: letterIdenticon
+            StatusLetterIdenticon {
+                width: 26
+                height: 26
+                letterSize: 15
+                name: statusIconTabButton.name
+                color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+            }
+        }
+    }
+
+    background: Rectangle {
+        color: hovered || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent"
+        border.color: Theme.palette.primaryColor1
+        border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0
+        radius: statusIconTabButton.width / 2
+    }
+
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        onPressed: mouse.accepted = false
+    }
+}
+

src/StatusQ/Controls/qmldir

@@ -0,0 +1,4 @@
+module StatusQ.Controls
+
+StatusIconTabButton 0.1 StatusIconTabButton.qml
+