fix(StatusListPicker/StatusItemPicker/StatusPickerButton): Added some properties / signals (#624)
Added property `textPixelSize` to be configurable in `StatusPickerButton`. Added signal `itemPickerChanged` to be directly notified when an item changes its selected property value. Updated `selected` property properly in `StatusListPicker`. Added new property `enableSelectableItem` to highlight an item when hovering. Some documentation improvements.
This commit is contained in:
Noelia
GitHub
parent
a16bc6bb6e
commit
e231c0a6cb
|
|
@ -47,6 +47,7 @@ GridLayout {
|
|||
searchText: qsTr("Search Currencies")
|
||||
multiSelection: true
|
||||
printSymbol: true
|
||||
enableSelectableItem: false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import StatusQ.Controls 0.1
|
|||
\inherits Item
|
||||
\inqmlmodule StatusQ.Components
|
||||
\since StatusQ.Components 0.1
|
||||
\brief It is a combination of StatusPickerButton and a drop-down list component that provides a way of presenting a list of selectable options to the user.
|
||||
\brief It is a combination of StatusPickerButton and a drop-down list component that provides a way of presenting a list of selectable options to the user. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
|
||||
|
||||
The \c StatusListPicker is populated with a data model. The data model is commonly a JavaScript array or a ListModel object.
|
||||
|
||||
|
|
@ -95,6 +95,12 @@ Item {
|
|||
*/
|
||||
property int maxPickerHeight: 718
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::enableSelectableItem
|
||||
This property holds if the item in the list will be highlighted when hovering and clickable in its complete area or just not highlighted and able to be selected by clicking only the checbox or radiobutton area.
|
||||
*/
|
||||
property bool enableSelectableItem: true
|
||||
|
||||
/*
|
||||
\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:
|
||||
|
|
@ -107,7 +113,13 @@ Item {
|
|||
}
|
||||
\endqml
|
||||
*/
|
||||
function close() { if(picker.visible) picker.visible = false }
|
||||
function close() { picker.visible = false }
|
||||
|
||||
/*!
|
||||
\qmlsignal StatusListPicker::itemPickerChanged(string key, bool selected)
|
||||
This signal is emitted when an item changes its selected value.
|
||||
*/
|
||||
signal itemPickerChanged(string key, bool selected)
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
|
@ -198,6 +210,7 @@ Item {
|
|||
bgColor: Theme.palette.primaryColor3
|
||||
contentColor: Theme.palette.primaryColor1
|
||||
text: picker.selectedItemsText
|
||||
textPixelSize: 13
|
||||
type: StatusPickerButton.Type.Down
|
||||
|
||||
onClicked: {
|
||||
|
|
@ -272,6 +285,7 @@ Item {
|
|||
delegate: StatusItemPicker {
|
||||
width: content.itemWidth
|
||||
height: content.itemHeight
|
||||
color: mouseArea.containsMouse? Theme.palette.baseColor4 : "transparent"
|
||||
image: StatusImageSettings {
|
||||
source: model.imageSource ? model.imageSource : ""
|
||||
width: 15
|
||||
|
|
@ -294,6 +308,18 @@ Item {
|
|||
// Update selected items text (multiple selection, text chain).
|
||||
picker.selectedItemsText = d.getSelectedItemsText()
|
||||
}
|
||||
|
||||
// Used to notify selected property changes in the specific item picker.
|
||||
itemPickerChanged(model.key, checked)
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
enabled: root.enableSelectableItem
|
||||
anchors.fill: parent
|
||||
cursorShape: root.enableSelectableItem ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
hoverEnabled: true
|
||||
onClicked: { selected = !selected }
|
||||
}
|
||||
}
|
||||
section.property: "category"
|
||||
|
|
@ -318,7 +344,7 @@ Item {
|
|||
// Not visual element to control mutual-exclusion of radiobuttons that are not sharing the same parent (inside list view)
|
||||
ButtonGroup {
|
||||
id: radioBtnGroup
|
||||
}
|
||||
}
|
||||
}// End of Content
|
||||
}// End of Rectangle picker
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import StatusQ.Controls 0.1
|
|||
\inherits Item
|
||||
\inqmlmodule StatusQ.Controls
|
||||
\since StatusQ.Controls 0.1
|
||||
\brief It presents a selectable item to the user.
|
||||
\brief It presents a selectable item to the user. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-rectangle.html}{Rectangle}.
|
||||
|
||||
The \c StatusItemPicker is populated with the given properties data.
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ import StatusQ.Controls 0.1
|
|||
\endqml
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
Item {
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
/*!
|
||||
|
|
@ -169,7 +169,10 @@ Item {
|
|||
StatusRadioButton {
|
||||
ButtonGroup.group: root.radioGroup
|
||||
checked: root.selected
|
||||
onCheckedChanged: root.checkedChanged(checked)
|
||||
onCheckedChanged: {
|
||||
root.selected = checked
|
||||
root.checkedChanged(checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -177,7 +180,10 @@ Item {
|
|||
id: checkbox
|
||||
StatusCheckBox {
|
||||
checked: root.selected
|
||||
onCheckedChanged: root.checkedChanged(checked)
|
||||
onCheckedChanged: {
|
||||
root.selected = checked
|
||||
root.checkedChanged(checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
}// End of Content item
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ Button {
|
|||
property color contentColor: Theme.palette.baseColor1
|
||||
property var type: StatusPickerButton.Type.Next
|
||||
property int lateralMargins: 16
|
||||
property int textPixelSize: 15
|
||||
|
||||
enum Type {
|
||||
Next,
|
||||
|
|
@ -38,7 +39,7 @@ Button {
|
|||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - icon.width - anchors.rightMargin - anchors.leftMargin - icon.anchors.rightMargin - icon.anchors.leftMargin
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
font.pixelSize: root.textPixelSize
|
||||
color: root.contentColor
|
||||
text: root.text
|
||||
clip: true
|
||||
|
|
|
|||
Loading…
Reference in New Issue