feat(StatusItemSelector): improved reusablity, addItem and popup handling removed (#887)

Additionally:
- minor positioning fixes in StatusListItem and StatusListItemTag
- StatusItemSelectorPage updated and added to main.qml
This commit is contained in:
Michał 2022-09-08 11:06:25 +02:00 committed by Michał Cieślak
parent 97c3b6c7df
commit 21f187ad39
5 changed files with 66 additions and 42 deletions

View File

@ -302,6 +302,11 @@ StatusWindow {
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusItemSelector"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusPopupMenu"

View File

@ -1,4 +1,4 @@
import QtQuick 2.0
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Components 0.1
@ -15,25 +15,44 @@ ColumnLayout {
defaultItemText: "Example: Empty items"
andOperatorText: "and"
orOperatorText: "or"
popupItem: StatusDropdown {
itemsModel: ListModel {
id: model
}
StatusDropdown {
id: dropdown
parent: selector.addButton
width: 200
contentItem: ColumnLayout {
spacing: 10
StatusInput {
id: input
text: "Sample"
Layout.fillWidth: true
}
StatusButton {
Layout.alignment: Qt.AlignHCenter
text: "Add element"
onClicked: {
selector.addItem(input.text, "qrc:/images/SNT.png", selector.itemsModel.count > 0 ? Utils.Operators.Or : Utils.Operators.None)
model.append({
text: input.text,
imageSource: "qrc:/images/SNT.png",
operator: model.count > 0 ? Utils.Operators.Or : Utils.Operators.None
})
dropdown.close()
}
}
}
}
addButton.onClicked: {
dropdown.x = mouse.x
dropdown.y = mouse.y
dropdown.open()
}
}
StatusButton {

View File

@ -27,12 +27,15 @@ import StatusQ.Core.Utils 0.1
defaultItemText: qsTr("Example: 10 SNT")
andOperatorText: qsTr("and")
orOperatorText: qsTr("or")
popupItem: CustomPopup {
id: customPopup
onAddItem: {
tokensSelector.addItem(itemText, itemImage, operator)
customPopup.close()
CustomPopup {
id: popup
}
addButton.onClicked: {
popup.x = mouse.x
popup.y = mouse.y
popup.open()
}
}
\endqml
@ -66,10 +69,10 @@ Rectangle {
*/
property url defaultItemImageSource: ""
/*!
\qmlproperty QC.Popup StatusItemSelector::popupItem
This property holds a custom popup item to be opened near the `add` button in order to select new items.
\qmlproperty StatusRoundButton StatusItemSelector::addButton
This property holds an alias to the `add` button.
*/
property QC.Popup popupItem
readonly property alias addButton: addItemButton
/*!
\qmlproperty ListModel StatusItemSelector::itemsModel
This property holds the data that will be populated in the items selector.
@ -90,7 +93,7 @@ Rectangle {
}
\endqml
*/
property ListModel itemsModel: ListModel { }
property var itemsModel: ListModel { }
/*!
\qmlproperty string StatusItemSelector::andOperatorText
This property holds the string text representation for an `AND` logical operator.
@ -101,21 +104,18 @@ Rectangle {
This property holds the string text representation for an `OR` logical operator.
*/
property string orOperatorText: qsTr("or")
/*
\qmlmethod StatusItemSelector::addItem()
It is used to add new items into the selector control. The expected arguments are:
string `text`, url `imageSource` and int `operator` (None = 0, And = 1 and Or = 2)
/*!
\qmlsignal StatusItemSelector::itemClicked
This signal is emitted when the item is clicked.
*/
function addItem(text, imageSource, operator) {
itemsModel.insert(itemsModel.count, { "text": text, "imageSource": imageSource.toString(), "operator": operator })
}
signal itemClicked(var item, int index, var mouse)
QtObject {
id: d
function operatorTextFormat(operator) {
switch(operator)
{
switch(operator) {
case Utils.Operators.And:
return root.andOperatorText
case Utils.Operators.Or:
@ -179,8 +179,10 @@ Rectangle {
}
Repeater {
model: itemsModel
RowLayout {
spacing: flow.spacing
StatusBaseText {
visible: model.operator !== Utils.Operators.None
Layout.alignment: Qt.AlignVCenter
@ -207,7 +209,13 @@ Rectangle {
closeButtonVisible: false
titleText.color: Theme.palette.primaryColor1
titleText.font.pixelSize: 15
//onClicked: // TODO: Open remove or edit dialog
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: root.itemClicked(parent, model.index, mouse)
}
}
}
}
@ -218,11 +226,6 @@ Rectangle {
height: width
type: StatusRoundButton.Type.Secondary
icon.name: "add"
onClicked: {
root.popupItem.x = addItemButton.x + addItemButton.width + 4 * flow.spacing
root.popupItem.y = addItemButton.y + addItemButton.height
root.popupItem.open()
}
}
}
}

View File

@ -135,8 +135,7 @@ Rectangle {
id: iconOrImage
anchors.left: parent.left
anchors.leftMargin: statusListItem.leftPadding
anchors.top: parent.top
anchors.topMargin: 12
anchors.verticalCenter: parent.verticalCenter
visible: !iconOrImageLoadingOverlay.visible
asset: statusListItem.asset
name: statusListItem.title

View File

@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
Rectangle {
id: root
width: layout.width + layout.anchors.margins
height: 30
implicitWidth: layout.width + layout.anchors.margins
implicitHeight: 30
color: Theme.palette.primaryColor3
radius: 15
@ -15,7 +15,7 @@ Rectangle {
property string title: ""
property bool closeButtonVisible: true
signal clicked()
signal clicked(var mouse)
property StatusAssetSettings asset: StatusAssetSettings {
height: 20
@ -61,9 +61,7 @@ Rectangle {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.clicked()
}
onClicked: root.clicked(mouse)
}
}
}