status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore(ui): visually align different combo box instances 

- extract common background and indicator subcomponents into
StatusQ.Components.private, and reuse it

Fixes #14121
This commit is contained in:
Lukáš Tinkl 2024-04-10 16:07:56 +02:00 committed by Lukáš Tinkl
parent e363dd1109
commit 5d064368cf
11 changed files with 66 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
storybook/pages/NetworkFilterPage.qml
View File

@ -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

2
storybook/pages/NetworkSelectPopupPage.qml
View File

@ -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)
}
}

18
ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml Normal file
View File

@ -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
}
}

11
ui/StatusQ/src/StatusQ/Components/private/StatusComboboxIndicator.qml Normal file
View File

@ -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
}

2
ui/StatusQ/src/StatusQ/Components/private/qmldir
View File

@ -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

19
ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml
View File

@ -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,

2
ui/StatusQ/src/statusq.qrc
View File

@ -65,6 +65,8 @@
<file>StatusQ/Components/StatusVideo.qml</file>
<file>StatusQ/Components/StatusWizardStepper.qml</file>
<file>StatusQ/Components/WebEngineLoader.qml</file>
<file>StatusQ/Components/private/StatusComboboxBackground.qml</file>
<file>StatusQ/Components/private/StatusComboboxIndicator.qml</file>
<file>StatusQ/Components/private/chart/Chart.js</file>
<file>StatusQ/Components/private/chart/Chart.qml</file>
<file>StatusQ/Components/private/chart/LICENSE</file>

7
ui/app/AppLayouts/Communities/controls/InlineNetworksComboBox.qml
View File

@ -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
}

17
ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml
View File

@ -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 {

19
ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
View File

@ -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

17
ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml
View File

@ -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 {