feat(StatusTabButton): Created component as per design (#684)

sandbox/main.qml

@@ -183,6 +183,11 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusTabBarButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusNavigationListItem { 
                             title: "StatusTabBarIconButton"
                             selected: viewLoader.source.toString().includes(title)

sandbox/pages/StatusTabBarButtonPage.qml

@@ -0,0 +1,27 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusTabBar {
+        StatusTabButton {
+            width: implicitWidth
+            text: "Button 1"
+        }
+        StatusTabButton {
+            width: implicitWidth
+            text: "Button 2"
+        }
+        StatusTabButton {
+            width: implicitWidth
+            text: "Button 3"
+            badge.value: 42
+        }
+    }
+}

sandbox/qml.qrc

@@ -42,5 +42,6 @@
         <file>pages/StatusTagSelectorPage.qml</file>
         <file>pages/StatusToastMessagePage.qml</file>
         <file>pages/StatusWizardStepperPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
     </qresource>
 </RCC>

src/StatusQ/Controls/StatusTabBar.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+
+/*!
+   \qmltype StatusTabButton
+   \inherits TabButton
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief StatusTabBar provides a tab-based navigation model
+
+   It's customized from Qt's \l{https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbar.html}{TabBar},
+   adding a transparent background.
+*/
+
+
+TabBar {
+    background: Item { }
+}

src/StatusQ/Controls/StatusTabButton.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+/*!
+   \qmltype StatusTabButton
+   \inherits TabButton
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief StatusTabButton is used in conjunction with a StatusTabBar
+
+   It's customized from Qt's \l{https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbutton.html}{TabButton}, adding:
+    - transparent background
+    - theme-styled text
+    - styled underscore for active state
+    - `StatusBadge` to the right from the text
+
+   An alias `badge` property is added to control the `StatusBadge` behaviour and content.
+*/
+
+TabButton {
+    id: root
+
+    property alias badge: statusBadge
+
+    leftPadding: 12
+    rightPadding: 12
+
+    background: Item { }
+
+    contentItem: Item {
+        implicitWidth: contentItemGrid.implicitWidth
+        implicitHeight: contentItemGrid.implicitHeight + 11
+
+        RowLayout {
+            id: contentItemGrid
+
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+
+            spacing: 0
+
+            StatusBaseText {
+                Layout.fillWidth: true
+                elide: Qt.ElideRight
+                font.weight: Font.Medium
+                font.pixelSize: 15
+                color: root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                text: root.text
+            }
+
+            StatusBadge {
+                id: statusBadge
+                Layout.leftMargin: 10
+                visible: value > 0
+            }
+        }
+
+        Rectangle {
+            anchors.bottom: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.checked || root.hovered
+            implicitWidth: 24
+            implicitHeight: 2
+            radius: 4
+            color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -32,6 +32,8 @@ StatusPasswordStrengthIndicator 0.1 StatusPasswordStrengthIndicator.qml
 StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml
+StatusTabBar 0.1 StatusTabBar.qml
+StatusTabButton 0.1 StatusTabButton.qml
 StatusTokenInlineSelector 0.1 StatusTokenInlineSelector.qml
 StatusWalletColorButton 0.1 StatusWalletColorButton.qml
 StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml

statusq.qrc

@@ -79,6 +79,7 @@
         <file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
         <file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
         <file>src/StatusQ/Controls/StatusTabBarIconButton.qml</file>
+        <file>src/StatusQ/Controls/StatusTabButton.qml</file>
         <file>src/StatusQ/Controls/StatusTokenInlineSelector.qml</file>
         <file>src/StatusQ/Controls/StatusToolTip.qml</file>
         <file>src/StatusQ/Controls/StatusWalletColorButton.qml</file>
@@ -10496,5 +10497,6 @@
         <file>src/assets/twemoji/svg/ae.svg</file>
         <file>src/assets/twemoji/svg/e50a.svg</file>
         <file>src/assets/twemoji/LICENSE</file>
+        <file>src/StatusQ/Controls/StatusTabBar.qml</file>
     </qresource>
 </RCC>