mirror of
https://github.com/status-im/StatusQ.git
synced 2025-02-24 10:38:28 +00:00
555ad8bea8
It adds the `StatusItemPicker` control and `StatusListPicker` component and its corresponding documentation. The new selector component is composed by a `StatusButtonPicker` and a drop-down list. It adds sections in `ListView` by using `category` model property. It incorporates a searcher in header. The selector type can be customised as a `StatusRadioButton` or a `StatusCheckbox`. It adds dynamic selection mechanism. It adds a dynamic text fit between `name` and `shortName` text components. It adds a specific page in `sandbox` and some models to play with that. It extends `StatusPickerButton` to allow more than one type. Closes #563
79 lines
2.0 KiB
QML
79 lines
2.0 KiB
QML
import QtQuick 2.0
|
|
import QtQuick.Layouts 1.14
|
|
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Core 0.1
|
|
|
|
import "../demoapp/data" 1.0
|
|
|
|
GridLayout {
|
|
id: root
|
|
columns: 1
|
|
rowSpacing: 150
|
|
|
|
GridLayout {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
|
rows: 4
|
|
columns: 2
|
|
rowSpacing: 170
|
|
columnSpacing: 150
|
|
z: 100
|
|
StatusListPicker {
|
|
id: languagePicker
|
|
z: 100
|
|
inputList: Models.languagePickerModel
|
|
searchText: qsTr("Search Languages")
|
|
}
|
|
|
|
StatusListPicker {
|
|
id: languagePicker2
|
|
z: 100
|
|
inputList: Models.languageNoImagePickerModel
|
|
searchText: qsTr("Search Languages")
|
|
}
|
|
|
|
StatusListPicker {
|
|
id: currencyPicker
|
|
inputList: Models.currencyPickerModel
|
|
searchText: qsTr("Search Currencies")
|
|
multiSelection: true
|
|
}
|
|
|
|
StatusListPicker {
|
|
id: currencyPicker2
|
|
inputList: Models.currencyPickerModel2
|
|
searchText: qsTr("Search Currencies")
|
|
multiSelection: true
|
|
printSymbol: true
|
|
}
|
|
}
|
|
|
|
StatusBaseText {
|
|
id: pageDesc
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
|
height: 100
|
|
width: 500
|
|
text: "4 different configurations for the `StatusListPicker` component:\n
|
|
* Single selection. \n
|
|
* Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
|
|
* Multiple selection.\n
|
|
* Multiple selection and displayed name is the symbol + shortName\n"
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 15
|
|
}
|
|
|
|
// Outsite area
|
|
MouseArea {
|
|
height: root.height
|
|
width: root.width
|
|
onClicked: {
|
|
languagePicker.close()
|
|
languagePicker2.close()
|
|
currencyPicker.close()
|
|
currencyPicker2.close()
|
|
}
|
|
}
|
|
}
|