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
2024-12-18 15:54:49 +01:00 · 2024-12-18 15:54:49 +01:00 · 0592e2338b
parent 8aebb81137
commit 0592e2338b
11 changed files with 93 additions and 53 deletions
--- 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
--- 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
 }
--- 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

+    spacing: Theme.smallPadding
+
+    contentItem: ColumnLayout {
+        spacing: root.spacing
        RowLayout {
-            id: contentItemGrid
-
-            anchors {
-                top: parent.top
-                left: parent.left
-                right: parent.right
-            }
-
-            spacing: 0
+            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
+    }
 }
--- 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"
--- a/ui/app/AppLayouts/Profile/views/CurrenciesModel.qml
+++ b/ui/app/AppLayouts/Profile/views/CurrenciesModel.qml
@ -62,7 +62,7 @@ ListModel {
        name: qsTr("Ethereum")
        symbol: "Ξ"
        category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/ETH.png"
+        imageSource: "../../assets/png/tokens/ETH.png"
        selected: false
        isToken: true
    }
@ -73,7 +73,7 @@ ListModel {
        name: qsTr("Bitcoin")
        symbol: "฿"
        category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/WBTC.png"
+        imageSource: "../../assets/png/tokens/WBTC.png"
        selected: false
        isToken: true
    }
@ -84,7 +84,7 @@ ListModel {
        name: qsTr("Status Network Token")
        symbol: ""
        category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/SNT.png"
+        imageSource: "../../assets/png/tokens/SNT.png"
        selected: false
        isToken: true
    }
@ -95,7 +95,7 @@ ListModel {
        name: qsTr("Dai")
        symbol: "◈"
        category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/DAI.png"
+        imageSource: "../../assets/png/tokens/DAI.png"
        selected: false
        isToken: true
    }
--- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml
+++ b/ui/app/AppLayouts/Profile/views/MyProfileView.qml
@ -85,7 +85,6 @@ SettingsContentBase {
        StatusTabButton {
            objectName: "identityTabButton"
            width: implicitWidth
-            leftPadding: 0
            text: qsTr("Identity")
        }

--- a/ui/app/AppLayouts/Profile/views/wallet/EditNetworkView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/EditNetworkView.qml
@ -27,7 +27,6 @@ ColumnLayout {
        id: editPreviwTabBar
        objectName: "editPreviwTabBar"
        StatusTabButton {
-            leftPadding: 0
            text: qsTr("Live Network")
            objectName: "editNetworkLiveButton"
            width: implicitWidth
--- a/ui/app/AppLayouts/Profile/views/wallet/ManageTokensView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/ManageTokensView.qml
@ -73,7 +73,6 @@ Item {
            Layout.topMargin: 5

            StatusTabButton {
-                leftPadding: 0
                width: implicitWidth
                objectName: "assetsButton"
                text: qsTr("Assets")
--- a/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml
+++ b/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml
@ -439,7 +439,6 @@ Item {
                StatusTabBar {
                    width: parent.width
                    StatusTabButton {
-                        leftPadding: 0
                        width: implicitWidth
                        text: qsTr("Overview")
                    }
--- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml
+++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml
@ -146,7 +146,6 @@ RightTabBaseView {

                    StatusTabButton {
                        objectName: "assetsTabButton"
-                        leftPadding: 0
                        width: implicitWidth
                        text: qsTr("Assets")
                    }
--- a/ui/imports/shared/views/ProfileDialogView.qml
+++ b/ui/imports/shared/views/ProfileDialogView.qml
@ -485,7 +485,6 @@ Pane {
                    Layout.rightMargin: column.anchors.rightMargin
                    bottomPadding: -4
                    StatusTabButton {
-                        leftPadding: 0
                        width: implicitWidth
                        text: qsTr("Communities")
                    }