status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(StatusListPicker): Add an option to allign the menu with respective the buttons and keep right aligned as the default one 

Also fixes search placeholder to be centrally aligned

fixes #5633
This commit is contained in:
Khushboo Mehta 2022-05-05 11:50:33 +02:00 committed by r4bbit.eth
parent 75a76afcf1
commit 82e1845056
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sandbox/pages/StatusListPickerPage.qml
View File

@ -25,6 +25,7 @@ GridLayout {
z: 100 z: 100
inputList: Models.languagePickerModel inputList: Models.languagePickerModel
placeholderSearchText: qsTr("Search Languages") placeholderSearchText: qsTr("Search Languages")
menuAlignment: StatusListPicker.MenuAlignment.Left
} }
StatusListPicker { StatusListPicker {
@ -32,6 +33,7 @@ GridLayout {
z: 100 z: 100
inputList: Models.languageNoImagePickerModel inputList: Models.languageNoImagePickerModel
placeholderSearchText: qsTr("Search Languages") placeholderSearchText: qsTr("Search Languages")
menuAlignment: StatusListPicker.MenuAlignment.Center
} }
StatusListPicker { StatusListPicker {

23
src/StatusQ/Components/StatusListPicker.qml
View File

@ -107,6 +107,23 @@ Item {
*/ */
property bool enableSelectableItem: true property bool enableSelectableItem: true
/*!
\qmlproperty string StatusListPicker::menuAlignment
This property holds the allignment of the menu in terms of the button
*/
property int menuAlignment: StatusListPicker.MenuAlignment.Right
/*!
\qmlproperty enum StatusListPicker::MenuAlignment
This property holds the allignment of the menu in terms of the button
values can be Left, Right or Center
*/
enum MenuAlignment {
Left,
Right,
Center
}
/* /*
\qmlmethod StatusListPicker::close() \qmlmethod StatusListPicker::close()
It can be used to force to close the drop-down picker list whenever the consumer needs it. For example by adding an outside MouseArea to close the picker when user clicks outsite the component: It can be used to force to close the drop-down picker list whenever the consumer needs it. For example by adding an outside MouseArea to close the picker when user clicks outsite the component:
@ -240,7 +257,9 @@ Item {
width: content.itemWidth width: content.itemWidth
height: Math.min(content.contentHeight + content.anchors.topMargin + content.anchors.bottomMargin, root.maxPickerHeight) height: Math.min(content.contentHeight + content.anchors.topMargin + content.anchors.bottomMargin, root.maxPickerHeight)
anchors.left: btn.left anchors.left: root.menuAlignment === StatusListPicker.MenuAlignment.Left ? btn.left : undefined
anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
anchors.top: btn.bottom anchors.top: btn.bottom
anchors.topMargin: 4 anchors.topMargin: 4
visible: false visible: false
@ -285,7 +304,7 @@ Item {
width: content.itemWidth - 2 * 18 width: content.itemWidth - 2 * 18
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
topPadding: 8 topPadding: 0
bottomPadding: 0 bottomPadding: 0
placeholderText: root.placeholderSearchText placeholderText: root.placeholderSearchText
text: root.searchText text: root.searchText