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

feat(StatusComboBox): Introduced new component to replace `StatusSelect` (#790)

This commit is contained in:
Igor Sirotin 2022-07-30 17:45:22 +03:00 committed by Michał Cieślak
parent 29fbe51e8f
commit b3dfa02297
8 changed files with 312 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/StatusQ/sandbox/main.qml
View File

@ -202,6 +202,11 @@ StatusWindow {
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusComboBox"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusAccountSelector"
selected: viewLoader.source.toString().includes(title)

72
ui/StatusQ/sandbox/pages/StatusComboBoxPage.qml Normal file
View File

@ -0,0 +1,72 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import Sandbox 0.1
Column {
spacing: 20
ListModel {
id: commmonModel
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
StatusComboBox {
id: combobox
label: "ComboBox"
model: commmonModel
}
StatusComboBox {
id: comboBox1
label: "ComboBox with custom delegate"
model: commmonModel
delegate: StatusItemDelegate {
width: comboBox1.comboBox.width
highlighted: comboBox1.comboBox.highlightedIndex === index
text: modelData
font: comboBox1.comboBox.font
icon {
name: "filled-account"
color: Theme.palette.primaryColor1
}
enabled: index != 2
}
}
StatusComboBox {
model: commmonModel
label: "Disabled ComboBox"
enabled: false
}
StatusComboBox {
model: commmonModel
label: "ComboBox with validation error"
validationError: "Validation failed example"
}
StatusComboBox {
model: commmonModel
label: "Mirrored ComboBox"
LayoutMirroring.enabled: true
}
}

36
ui/StatusQ/sandbox/pages/StatusSelectPage.qml
View File

@ -8,26 +8,31 @@ import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import Sandbox 0.1
Column {
spacing: 8
spacing: 20
ListModel {
id: commmonModel
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
StatusSelect {
id: select
label: "Some label"
model: ListModel {
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
model: commmonModel
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
@ -38,6 +43,7 @@ Column {
}
}
}
selectedItemComponent: Item {
id: selectedItem
anchors.fill: parent

2
ui/StatusQ/sandbox/qml.qrc
View File

@ -79,5 +79,7 @@
<file>images/SRToken.png</file>
<file>demoapp/data/profile-image-1.jpeg</file>
<file>demoapp/data/profile-image-2.jpeg</file>
<file>pages/StatusItemSelectorPage.qml</file>
<file>pages/StatusComboBoxPage.qml</file>
</qresource>
</RCC>

150
ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml Normal file
View File

@ -0,0 +1,150 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Popups 0.1
import QtQuick.Templates 2.14 as T
Item {
id: root
property alias comboBox: comboBox
property alias model: comboBox.model
property alias delegate: comboBox.delegate
property alias contentItem: comboBox.contentItem
property alias label: labelItem.text
property alias validationError: validationErrorItem.text
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight
LayoutMirroring.childrenInherit: true
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
StatusBaseText {
id: labelItem
Layout.fillWidth: true
visible: !!text
font.pixelSize: 15
color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
}
ComboBox {
id: comboBox
property color bgColor: Theme.palette.baseColor2
property color bgColorHover: bgColor
Layout.fillWidth: true
Layout.topMargin: 7
enabled: root.enabled
font.family: Theme.palette.baseFont.name
font.pixelSize: 14
padding: 16
spacing: 16
background: Rectangle {
implicitHeight: 56
implicitWidth: 448
color: Theme.palette.baseColor2
radius: 8
border.width: !!root.validationError || comboBox.hovered || comboBox.down || comboBox.activeFocus ? 1 : 0
border.color: !!root.validationError
? Theme.palette.dangerColor1
: comboBox.activeFocus
? Theme.palette.primaryColor1
: comboBox.hovered
? Theme.palette.primaryColor2
: "transparent"
}
contentItem: StatusBaseText {
font: comboBox.font
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
text: comboBox.displayText
color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
}
indicator: StatusIcon {
x: comboBox.mirrored ? comboBox.padding : comboBox.width - width - comboBox.padding
y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
width: 24
height: 24
icon: "chevron-down"
color: Theme.palette.baseColor1
}
popup: Popup {
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
y: comboBox.height + 8
width: comboBox.width
implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding
padding: 1
verticalPadding: 8
contentItem: ListView { // TODO: Replace with StatusListView
id: listView
clip: true
implicitHeight: contentHeight
model: comboBox.popup.visible ? comboBox.delegateModel : null
currentIndex: comboBox.highlightedIndex
boundsBehavior: Flickable.StopAtBounds
synchronousDrag: true
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
id: backgroundItem
color: Theme.palette.statusSelect.menuItemBackgroundColor
radius: 8
border.color: Theme.palette.baseColor2
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 4
radius: 12
samples: 25
spread: 0.2
color: Theme.palette.dropShadow
}
}
}
delegate: StatusItemDelegate {
width: comboBox.width
highlighted: comboBox.highlightedIndex === index
font: comboBox.font
text: modelData
}
}
StatusBaseText {
id: validationErrorItem
Layout.fillWidth: true
Layout.topMargin: 11
visible: !!text
font.pixelSize: 12
color: Theme.palette.dangerColor1
horizontalAlignment: TextEdit.AlignRight
wrapMode: Text.WordWrap
}
}
}

49
ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml Normal file
View File

@ -0,0 +1,49 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
ItemDelegate {
id: root
padding: 8
spacing: 8
icon.width: 16
icon.height: 16
contentItem: RowLayout {
spacing: root.spacing
StatusIcon {
id: iconItem
Layout.alignment: Qt.AlignVCenter
visible: !!icon
icon: root.icon.name
color: root.enabled ? root.icon.color : Theme.palette.baseColor1
width: root.icon.width
height: root.icon.height
}
StatusBaseText {
id: textItem
Layout.fillWidth: true
Layout.fillHeight: true
font: root.font
text: root.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
}
}
background: Rectangle {
color: root.highlighted
? Theme.palette.statusPopupMenu.hoverBackgroundColor
: "transparent"
}
}

13
ui/StatusQ/src/StatusQ/Controls/StatusSelect.qml
View File

@ -8,11 +8,14 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Popups 0.1
Item {
id: root
enum MenuAlignment {
Left,
Right,
Center
}
property string label: ""
readonly property bool hasLabel: label !== ""
property color bgColor: Theme.palette.baseColor2
@ -28,10 +31,12 @@ Item {
property string validationError: ""
property alias validationErrorAlignment: validationErrorText.horizontalAlignment
property int validationErrorTopMargin: 11
implicitWidth: 448
id: root
height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
implicitHeight: inputRectangle.height +
(hasLabel ? inputLabel.height + labelMargin : 0) +
(!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
StatusBaseText {
id: inputLabel
@ -95,6 +100,10 @@ Item {
}
}
// ListView {
// id: selectMenu
// }
StatusPopupMenu {
id: selectMenu
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

2
ui/StatusQ/src/StatusQ/Controls/qmldir
View File

@ -48,3 +48,5 @@ StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
StatusDropdown 0.1 StatusDropdown.qml
StatusIconTextButton 0.1 StatusIconTextButton.qml
StatusScrollBar 0.1 StatusScrollBar.qml
StatusComboBox 0.1 StatusComboBox.qml
StatusItemDelegate 0.1 StatusItemDelegate.qml