chore(StatusTab[Bar,Button]): UI updates

- fixup margins and padding according to latest Figma designs - make a difference between a disabled and inactive tab by using opacity - provide smooth color transitions - add a dedicated StoryBook page
status-im · Dec 18, 2024 · 12c2ca7 · 12c2ca7
1 parent 8aebb81
commit 12c2ca7
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 43 deletions.
diff --git a/storybook/pages/StatusTabBarPage.qml b/storybook/pages/StatusTabBarPage.qml
@@ -0,0 +1,43 @@
+import QtQuick 2.15
+
+import StatusQ.Controls 0.1
+
+Item {
+    id: root
+
+    Rectangle {
+        width: tabbar.childrenRect.width
+        height: tabbar.childrenRect.height
+        anchors.centerIn: parent
+        color: "transparent"
+        border.width: 1
+        border.color: "pink"
+
+        StatusTabBar {
+            id: tabbar
+            anchors.centerIn: parent
+
+            StatusTabButton {
+                width: implicitWidth
+                text: "Contacts"
+            }
+            StatusTabButton {
+                width: implicitWidth
+                text: "Pending contacts"
+                badge.value: 2
+            }
+            StatusTabButton {
+                width: implicitWidth
+                enabled: false
+                text: qsTr("Blocked & disabled")
+            }
+            StatusTabButton {
+                width: implicitWidth
+                text: "Misc"
+            }
+        }
+    }
+}
+
+// category: Controls
+// status: good
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTabBar.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTabBar.qml
@@ -1,18 +1,20 @@
-import QtQuick 2.0
-import QtQuick.Controls 2.13
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core.Theme 0.1
 
 /*!
-   \qmltype StatusTabButton
-   \inherits TabButton
+   \qmltype StatusTabBar
+   \inherits TabBar
    \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},
+   It's customized from Qt's \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html}{TabBar},
    adding a transparent background.
 */
 
-
 TabBar {
-    background: Item { }
+    spacing: Theme.bigPadding
+    background: null
 }
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml
@@ -1,6 +1,6 @@
 import QtQuick 2.15
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -13,7 +13,7 @@ import StatusQ.Components 0.1
    \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:
+   It's customized from Qt's \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbutton.html}{TabButton}, adding:
     - transparent background
     - theme-styled text
     - styled underscore for active state
@@ -27,59 +27,52 @@ TabButton {
 
     readonly property alias badge: statusBadge
 
-    leftPadding: 12
-    rightPadding: 12
+    horizontalPadding: 0
 
-    background: Item {
-        HoverHandler {
-            target: parent
-            cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.NoButton
-            enabled: root.enabled
-        }
-    }
+    background: null
 
-    contentItem: Item {
-        implicitWidth: contentItemGrid.implicitWidth
-        implicitHeight: contentItemGrid.implicitHeight + 15
+    font.family: Theme.baseFont.name
+    font.weight: Font.Medium
+    font.pixelSize: Theme.primaryTextFontSize
 
-        enabled: root.enabled
+    opacity: enabled ? 1 : Theme.disabledOpacity
 
-        RowLayout {
-            id: contentItemGrid
-
-            anchors {
-                top: parent.top
-                left: parent.left
-                right: parent.right
-            }
+    spacing: Theme.smallPadding
 
-            spacing: 0
+    contentItem: ColumnLayout {
+        spacing: root.spacing
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: root.spacing
 
             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
+                font: root.font
+                color: !enabled ? Theme.palette.baseColor1 : root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                Behavior on color {ColorAnimation {duration: Theme.AnimationDuration.Fast}}
                 text: root.text
             }
 
             StatusBadge {
                 id: statusBadge
-                Layout.leftMargin: 10
                 visible: value > 0
             }
         }
-
         Rectangle {
-            anchors.bottom: parent.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-            visible: root.enabled && (root.checked || root.hovered)
-            implicitWidth: 24
-            implicitHeight: 2
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 4
+            Layout.preferredWidth: 24
+            Layout.preferredHeight: 2
+            opacity: root.checked || root.hovered ? 1 : 0
+            Behavior on opacity {OpacityAnimator {duration: Theme.AnimationDuration.Fast}}
             radius: 4
             color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
+            Behavior on color {ColorAnimation {duration: Theme.AnimationDuration.Fast}}
         }
     }
+
+    HoverHandler {
+        cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
+    }
 }
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml
@@ -149,6 +149,8 @@ QtObject {
     property int smallPadding: 10
     property int radius: 8
 
+    readonly property real disabledOpacity: 0.3
+
     function updateFontSize(fontSize:int) {
         switch (fontSize) {
             case Theme.FontSizeXS:
@@ -207,6 +209,12 @@ QtObject {
         }
     }
 
+    enum AnimationDuration {
+        Fast = 100,
+        Default = 250, // https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html#duration-prop
+        Slow = 400
+    }
+
     // Style compat
     function png(name) {
         return assetPath + "png/" + name + ".png"