From 5d064368cf025292caa12de92210812dfa64a57f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Wed, 10 Apr 2024 16:07:56 +0200 Subject: [PATCH] chore(ui): visually align different combo box instances - extract common background and indicator subcomponents into StatusQ.Components.private, and reuse it Fixes #14121 --- storybook/pages/NetworkFilterPage.qml | 2 ++ storybook/pages/NetworkSelectPopupPage.qml | 2 +- .../private/StatusComboboxBackground.qml | 18 ++++++++++++++++ .../private/StatusComboboxIndicator.qml | 11 ++++++++++ .../src/StatusQ/Components/private/qmldir | 2 ++ .../src/StatusQ/Controls/StatusComboBox.qml | 19 +++++++---------- ui/StatusQ/src/statusq.qrc | 2 ++ .../controls/InlineNetworksComboBox.qml | 7 +++---- .../Wallet/controls/FilterComboBox.qml | 17 ++++----------- .../Wallet/controls/NetworkFilter.qml | 21 ++++++++++--------- .../Wallet/controls/SortOrderComboBox.qml | 17 ++++----------- 11 files changed, 66 insertions(+), 52 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml create mode 100644 ui/StatusQ/src/StatusQ/Components/private/StatusComboboxIndicator.qml diff --git a/storybook/pages/NetworkFilterPage.qml b/storybook/pages/NetworkFilterPage.qml index 4f2a6fc334..c18003826f 100644 --- a/storybook/pages/NetworkFilterPage.qml +++ b/storybook/pages/NetworkFilterPage.qml @@ -117,3 +117,5 @@ SplitView { } // category: Components + +// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=13179-346563&mode=design&t=RUkJVqqhgam32C1S-0 diff --git a/storybook/pages/NetworkSelectPopupPage.qml b/storybook/pages/NetworkSelectPopupPage.qml index 32cc6bc636..f0a0df78e2 100644 --- a/storybook/pages/NetworkSelectPopupPage.qml +++ b/storybook/pages/NetworkSelectPopupPage.qml @@ -69,7 +69,7 @@ SplitView { closePolicy: Popup.NoAutoClose // Simulates a network toggle - onToggleNetwork: (network, networkModel, index) => simulatedNimModel.toggleNetwork(network) + onToggleNetwork: (network, index) => simulatedNimModel.toggleNetwork(network) } } diff --git a/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml b/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml new file mode 100644 index 0000000000..cb66042202 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml @@ -0,0 +1,18 @@ +import QtQuick 2.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +Rectangle { + id: root + + required property bool active // hovered or down + + border.width: 1 + border.color: Theme.palette.directColor7 + radius: 8 + color: root.active ? Theme.palette.baseColor2 : "transparent" + HoverHandler { + cursorShape: root.enabled ? Qt.PointingHandCursor : undefined + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxIndicator.qml b/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxIndicator.qml new file mode 100644 index 0000000000..e043e2f92c --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxIndicator.qml @@ -0,0 +1,11 @@ +import QtQuick 2.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +StatusIcon { + width: 16 + height: width + icon: "chevron-down" + color: Theme.palette.baseColor1 +} diff --git a/ui/StatusQ/src/StatusQ/Components/private/qmldir b/ui/StatusQ/src/StatusQ/Components/private/qmldir index c5403e813d..320aa22691 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/private/qmldir @@ -2,3 +2,5 @@ module StatusQ.Components.private StatusImageMessage 0.1 statusMessage/StatusImageMessage.qml StatusMessageImageAlbum 0.1 statusMessage/StatusMessageImageAlbum.qml +StatusComboboxBackground 0.1 StatusComboboxBackground.qml +StatusComboboxIndicator 0.1 StatusComboboxIndicator.qml diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml index 29e5bd78a8..80594fe6b7 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml @@ -1,8 +1,8 @@ -import QtQuick 2.14 -import QtQuick.Window 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 -import QtGraphicalEffects 1.13 +import QtQuick 2.15 +import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -101,11 +101,8 @@ Item { return "transparent" } - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - acceptedButtons: Qt.NoButton - enabled: root.enabled + HoverHandler { + cursorShape: root.enabled ? Qt.PointingHandCursor : undefined } } @@ -136,7 +133,7 @@ Item { popup: Popup { closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent - y: comboBox.height + 8 + y: comboBox.height + 4 implicitWidth: comboBox.width height: Math.min(implicitContentHeight + topPadding + bottomPadding, diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index 18680190dd..ce230b64e5 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -65,6 +65,8 @@ StatusQ/Components/StatusVideo.qml StatusQ/Components/StatusWizardStepper.qml StatusQ/Components/WebEngineLoader.qml + StatusQ/Components/private/StatusComboboxBackground.qml + StatusQ/Components/private/StatusComboboxIndicator.qml StatusQ/Components/private/chart/Chart.js StatusQ/Components/private/chart/Chart.qml StatusQ/Components/private/chart/LICENSE diff --git a/ui/app/AppLayouts/Communities/controls/InlineNetworksComboBox.qml b/ui/app/AppLayouts/Communities/controls/InlineNetworksComboBox.qml index 18c577d6e3..8431917dc1 100644 --- a/ui/app/AppLayouts/Communities/controls/InlineNetworksComboBox.qml +++ b/ui/app/AppLayouts/Communities/controls/InlineNetworksComboBox.qml @@ -5,6 +5,7 @@ import QtQml 2.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 +import StatusQ.Components.private 0.1 as SQP import StatusQ.Core.Utils 0.1 as SQUtils import SortFilterProxyModel 0.2 @@ -33,10 +34,8 @@ StatusComboBox { control.currentIndex: 0 control.indicator.visible: !d.oneItem - control.background: Rectangle { - radius: d.radius - color: "transparent" - border.color: Theme.palette.directColor7 + control.background: SQP.StatusComboboxBackground { + active: false visible: !d.oneItem } diff --git a/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml b/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml index 425f7dc2d3..d3ed69ab94 100644 --- a/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml +++ b/ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml @@ -7,6 +7,7 @@ import StatusQ 0.1 import StatusQ.Core 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 +import StatusQ.Components.private 0.1 as SQP import StatusQ.Core.Theme 0.1 import StatusQ.Popups 0.1 @@ -128,14 +129,8 @@ ComboBox { } } - background: Rectangle { - border.width: 1 - border.color: Theme.palette.directColor7 - radius: Style.current.radius - color: root.down ? Theme.palette.baseColor2 : "transparent" - HoverHandler { - cursorShape: root.enabled ? Qt.PointingHandCursor : undefined - } + background: SQP.StatusComboboxBackground { + active: root.down || root.hovered } contentItem: RowLayout { @@ -159,13 +154,9 @@ ComboBox { } } - indicator: StatusIcon { + indicator: SQP.StatusComboboxIndicator { x: root.mirrored ? root.horizontalPadding : root.width - width - root.horizontalPadding y: root.topPadding + (root.availableHeight - height) / 2 - width: 16 - height: width - icon: "chevron-down" - color: Theme.palette.baseColor1 } popup: Popup { diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml index ac5f04965f..9cbd2df529 100644 --- a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml +++ b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml @@ -7,6 +7,7 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 import StatusQ.Components 0.1 +import StatusQ.Components.private 0.1 as SQP import StatusQ.Controls 0.1 import SortFilterProxyModel 0.2 @@ -54,7 +55,7 @@ StatusComboBox { property SortFilterProxyModel enabledFlatNetworks: SortFilterProxyModel { sourceModel: root.flatNetworks - filters: ValueFilter { roleName: "isEnabled"; value: true; enabled: !root.preferredNetworksMode} + filters: ValueFilter { roleName: "isEnabled"; value: true; enabled: !root.preferredNetworksMode } } } @@ -68,18 +69,18 @@ StatusComboBox { size: StatusComboBox.Size.Small - control.background: Rectangle { + control.background: SQP.StatusComboboxBackground { height: 38 - radius: 8 - color: root.control.hovered ? Theme.palette.baseColor2 : "transparent" - border.color: Theme.palette.directColor7 - HoverHandler { - cursorShape: root.enabled ? Qt.PointingHandCursor : undefined - } + active: root.control.down || root.control.hovered + } + + control.indicator: SQP.StatusComboboxIndicator { + x: root.control.mirrored ? root.control.horizontalPadding : root.width - width - root.control.horizontalPadding + y: root.control.topPadding + (root.control.availableHeight - height) / 2 } contentItem: RowLayout { - spacing: 16 + spacing: Style.current.padding StatusSmartIdenticon { Layout.alignment: Qt.AlignVCenter asset.height: 24 @@ -92,7 +93,7 @@ StatusComboBox { StatusBaseText { Layout.alignment: Qt.AlignVCenter Layout.fillWidth: true - font.pixelSize: 13 + font.pixelSize: Style.current.additionalTextSize font.weight: Font.Medium elide: Text.ElideRight lineHeight: 24 diff --git a/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml b/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml index ec7f20cf7f..e479a5127b 100644 --- a/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml +++ b/ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml @@ -5,6 +5,7 @@ import QtGraphicalEffects 1.15 import StatusQ.Core 0.1 import StatusQ.Controls 0.1 +import StatusQ.Components.private 0.1 as SQP import StatusQ.Core.Theme 0.1 import StatusQ.Popups 0.1 @@ -74,14 +75,8 @@ ComboBox { property int currentIndex: 0 } - background: Rectangle { - border.width: 1 - border.color: Theme.palette.directColor7 - radius: Style.current.radius - color: root.down ? Theme.palette.baseColor2 : "transparent" - HoverHandler { - cursorShape: root.enabled ? Qt.PointingHandCursor : undefined - } + background: SQP.StatusComboboxBackground { + active: root.down || root.hovered } contentItem: StatusBaseText { @@ -95,13 +90,9 @@ ComboBox { color: Theme.palette.baseColor1 } - indicator: StatusIcon { + indicator: SQP.StatusComboboxIndicator { x: root.mirrored ? root.horizontalPadding : root.width - width - root.horizontalPadding y: root.topPadding + (root.availableHeight - height) / 2 - width: 16 - height: width - icon: "chevron-down" - color: Theme.palette.baseColor1 } popup: Popup {