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ł
Michał Cieślak
parent
97c3b6c7df
commit
21f187ad39
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,27 +104,24 @@ 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)
|
||||
{
|
||||
case Utils.Operators.And:
|
||||
return root.andOperatorText
|
||||
case Utils.Operators.Or:
|
||||
return root.orOperatorText
|
||||
case Utils.Operators.None:
|
||||
return ""
|
||||
switch(operator) {
|
||||
case Utils.Operators.And:
|
||||
return root.andOperatorText
|
||||
case Utils.Operators.Or:
|
||||
return root.orOperatorText
|
||||
case Utils.Operators.None:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue