From 0592e2338baeaafdc055cd6d609cb26c4c1036b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Wed, 18 Dec 2024 15:54:49 +0100 Subject: [PATCH] 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 --- storybook/pages/StatusTabBarPage.qml | 43 ++++++++++++ .../src/StatusQ/Controls/StatusTabBar.qml | 16 +++-- .../src/StatusQ/Controls/StatusTabButton.qml | 65 +++++++++---------- ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml | 8 +++ .../Profile/views/CurrenciesModel.qml | 8 +-- .../Profile/views/MyProfileView.qml | 1 - .../Profile/views/wallet/EditNetworkView.qml | 1 - .../Profile/views/wallet/ManageTokensView.qml | 1 - .../Wallet/views/AssetsDetailView.qml | 1 - .../AppLayouts/Wallet/views/RightTabView.qml | 1 - ui/imports/shared/views/ProfileDialogView.qml | 1 - 11 files changed, 93 insertions(+), 53 deletions(-) create mode 100644 storybook/pages/StatusTabBarPage.qml diff --git a/storybook/pages/StatusTabBarPage.qml b/storybook/pages/StatusTabBarPage.qml new file mode 100644 index 0000000000..33b5692eae --- /dev/null +++ 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 index abbab1113f..a5ae22ef11 100644 --- 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 index 0c6e9263c1..eabcb4e5ae 100644 --- 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 + } } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml index e4f4e212d4..65cf5c1c82 100644 --- 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" diff --git a/ui/app/AppLayouts/Profile/views/CurrenciesModel.qml b/ui/app/AppLayouts/Profile/views/CurrenciesModel.qml index c0cf3831c6..96de40b6e1 100644 --- 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 } diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml index 5ead589107..9c5b75c2d9 100644 --- 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") } diff --git a/ui/app/AppLayouts/Profile/views/wallet/EditNetworkView.qml b/ui/app/AppLayouts/Profile/views/wallet/EditNetworkView.qml index c59dad4ee7..5658d8a31d 100644 --- 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 diff --git a/ui/app/AppLayouts/Profile/views/wallet/ManageTokensView.qml b/ui/app/AppLayouts/Profile/views/wallet/ManageTokensView.qml index f24e3fc8be..acde6e4233 100644 --- 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") diff --git a/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml b/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml index bb086e5248..7277bed426 100644 --- 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") } diff --git a/ui/app/AppLayouts/Wallet/views/RightTabView.qml b/ui/app/AppLayouts/Wallet/views/RightTabView.qml index 15e13bd1fa..8408c3168f 100644 --- 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") } diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml index 14136ec651..7ab17f9220 100644 --- 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") }