feat(StatusQ.Controls): introduce StatusSwitchTabBar and StatusSwitchTabButton

This commit adds two new components to the StatusQ.Controls module:

- StatusSwitchTabBar
- StatusSwitchTabButton

Usage:

```qml
StatusSwitchTabBar {

    StatusSwitchTabButton {
        text: "Tab 1"
    }

    StatusSwitchTabButton {
        text: "Tab 2"
    }

    StatusSwitchTabButton {
        text: "Tab 3"
    }
}
```

Closes #365

sandbox/StatusTabSwitchPage.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusSwitchTabBar {
+        StatusSwitchTabButton {
+            text: "Swap"
+        }
+        StatusSwitchTabButton {
+            text: "Swap & Send"
+        }
+        StatusSwitchTabButton {
+            text: "Send"
+        }
+    }
+}
+

sandbox/main.qml

@@ -138,6 +138,11 @@ StatusWindow {
                             selected: page.sourceComponent == buttonsComponent
                             onClicked: page.sourceComponent = buttonsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusSwitchTab" 
+                            selected: page.sourceComponent == statusTabSwitchesComponent
+                            onClicked: page.sourceComponent = statusTabSwitchesComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Controls" 
                             selected: page.sourceComponent == controlsComponent
@@ -281,6 +286,11 @@ StatusWindow {
         Popups {}
     }
 
+    Component {
+        id: statusTabSwitchesComponent
+        StatusTabSwitchPage {}
+    }
+
     Component {
         id: demoAppCmp
 

src/StatusQ/Controls/StatusSwitchTabBar.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import StatusQ.Core.Theme 0.1
+
+TabBar {
+    id: statusSwitchTabBar
+    padding: 1
+
+    background: Rectangle {
+        implicitHeight: 36
+        color: Theme.palette.directColor7
+        radius: 8
+    }
+}

src/StatusQ/Controls/StatusSwitchTabButton.qml

@@ -0,0 +1,52 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+TabButton {
+    id: statusSwitchTabButton
+
+    contentItem: Item {
+        height: 36
+        MouseArea {
+            id: sensor
+            hoverEnabled: true
+            anchors.fill: parent
+
+            cursorShape: Qt.PointingHandCursor
+            onPressed: mouse.accepted = false
+            onReleased: mouse.accepted = false
+
+            StatusBaseText {
+                id: label
+                text: statusSwitchTabButton.text
+                color: Theme.palette.primaryColor1
+                font.weight: Font.Medium
+                font.pixelSize: 15
+                horizontalAlignment: Text.AlignHCenter
+                anchors.centerIn: parent
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: controlBackground
+        implicitHeight: 36
+        implicitWidth: 148
+        color: statusSwitchTabButton.checked ?
+            Theme.palette.statusSwitchTab.backgroundColor :
+            "transparent"
+        radius: 8
+        layer.enabled: true
+        layer.effect: DropShadow {
+            horizontalOffset: 0
+            verticalOffset: 0
+            radius: 10
+            samples: 25
+            spread: 0
+            color: Theme.palette.dropShadow
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -17,3 +17,5 @@ StatusSlider 0.1 StatusSlider.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
+StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
+StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -177,5 +177,9 @@ ThemePalette {
     property QtObject statusChatInput: QtObject {
         property color secondaryBackgroundColor: "#414141"
     }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor: baseColor3
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -175,5 +175,9 @@ ThemePalette {
     property QtObject statusChatInput: QtObject {
         property color secondaryBackgroundColor: "#E2E6E8"
     }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor: white
+    }
 }
 

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -139,6 +139,10 @@ QtObject {
         property color secondaryBackgroundColor
     }
 
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

statusq.qrc

@@ -263,5 +263,7 @@
         <file>src/assets/img/icons/windows_titlebar/maximize.svg</file>
         <file>src/assets/img/icons/windows_titlebar/minimise.svg</file>
         <file>src/assets/img/icons/windows_titlebar/status.svg</file>
+        <file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
+        <file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
     </qresource>
 </RCC>