serviceListItem in an easier to drag container
This commit is contained in:
Chris Cochrun
parent
2b84e05a0b
commit
72a0c8c4c8
1 changed files with 199 additions and 183 deletions
|
|
@ -85,6 +85,202 @@ Item {
|
||||||
|
|
||||||
/* onExited: dropHighlightLine.visible = false; */
|
/* onExited: dropHighlightLine.visible = false; */
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: delegate
|
||||||
|
Kirigami.AbstractListItem {
|
||||||
|
id: serviceListItem
|
||||||
|
implicitWidth: serviceItemList.width
|
||||||
|
height: 30
|
||||||
|
Kirigami.ListItemDragHandle {
|
||||||
|
anchors.fill: parent
|
||||||
|
listItem: serviceListItem
|
||||||
|
listView: serviceItemList
|
||||||
|
onMoveRequested: serviceItemModel.move(oldIndex, newIndex, 1)
|
||||||
|
}
|
||||||
|
DropArea {
|
||||||
|
id: serviceDrop
|
||||||
|
anchors.fill: parent
|
||||||
|
/* enabled: false */
|
||||||
|
|
||||||
|
onEntered: (drag) => {
|
||||||
|
if (drag.keys[0] === "library") {
|
||||||
|
dropHighlightLine.visible = true;
|
||||||
|
dropHighlightLine.y = y - 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* onExited: dropHighlightLine.visible = false; */
|
||||||
|
|
||||||
|
onDropped: (drag) => {
|
||||||
|
print("DROPPED IN ITEM AREA: " + drag.keys);
|
||||||
|
print(dragItemIndex + " " + index);
|
||||||
|
const hlIndex = serviceItemList.currentIndex;
|
||||||
|
if (drag.keys[0] === "library") {
|
||||||
|
addItem(index,
|
||||||
|
dragItemTitle,
|
||||||
|
dragItemType,
|
||||||
|
dragItemBackground,
|
||||||
|
dragItemBackgroundType,
|
||||||
|
dragItemText,
|
||||||
|
dragItemAudio,
|
||||||
|
dragItemFont,
|
||||||
|
dragItemFontSize,
|
||||||
|
dragItemIndex);
|
||||||
|
} else if (drag.keys[0] === "serviceitem") {
|
||||||
|
serviceItemModel.move(serviceItemList.indexDragged,
|
||||||
|
serviceItemList.moveToIndex);
|
||||||
|
serviceItemList.currentIndex = moveToIndex;
|
||||||
|
}
|
||||||
|
dropHighlightLine.visible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
keys: ["library","serviceitem"]
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: visServiceItem
|
||||||
|
width: serviceDrop.width
|
||||||
|
height: serviceDrop.height
|
||||||
|
anchors {
|
||||||
|
horizontalCenter: parent.horizontalCenter
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
color: {
|
||||||
|
if (active)
|
||||||
|
Kirigami.Theme.highlightColor;
|
||||||
|
else if (selected)
|
||||||
|
Kirigami.Theme.focusColor;
|
||||||
|
else if (mouseHandler.containsMouse)
|
||||||
|
Kirigami.Theme.hoverColor;
|
||||||
|
else
|
||||||
|
Kirigami.Theme.backgroundColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
Controls.Label {
|
||||||
|
id: label
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.leftMargin: 5
|
||||||
|
text: name
|
||||||
|
elide: Text.ElideRight
|
||||||
|
width: parent.width - trailing.width - 15
|
||||||
|
color: {
|
||||||
|
if (selected ||
|
||||||
|
mouseHandler.containsMouse || active)
|
||||||
|
Kirigami.Theme.highlightedTextColor;
|
||||||
|
else
|
||||||
|
Kirigami.Theme.textColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Controls.Label {
|
||||||
|
id: trailing
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.rightMargin: 5
|
||||||
|
text: type
|
||||||
|
color: {
|
||||||
|
if (selected ||
|
||||||
|
mouseHandler.containsMouse || active)
|
||||||
|
Kirigami.Theme.highlightedTextColor;
|
||||||
|
else
|
||||||
|
Kirigami.Theme.disabledTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onYChanged: serviceItemList.updateDrag(Math.round(y));
|
||||||
|
|
||||||
|
states: [
|
||||||
|
State {
|
||||||
|
when: mouseHandler.drag.active
|
||||||
|
ParentChange {
|
||||||
|
target: visServiceItem
|
||||||
|
parent: serviceItemList
|
||||||
|
}
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: visServiceItem
|
||||||
|
/* backgroundColor: Kirigami.Theme.backgroundColor */
|
||||||
|
/* textColor: Kirigami.Theme.textColor */
|
||||||
|
anchors.verticalCenter: undefined
|
||||||
|
anchors.horizontalCenter: undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
/* Drag.dragType: Drag.Automatic */
|
||||||
|
Drag.active: mouseHandler.drag.active
|
||||||
|
Drag.hotSpot.x: width / 2
|
||||||
|
Drag.hotSpot.y: height / 2
|
||||||
|
Drag.keys: ["serviceitem"]
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: mouseHandler
|
||||||
|
anchors.fill: parent
|
||||||
|
hoverEnabled: true
|
||||||
|
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||||
|
preventStealing: true
|
||||||
|
|
||||||
|
drag {
|
||||||
|
target: visServiceItem
|
||||||
|
axis: Drag.YAxis
|
||||||
|
/* minimumY: root.y */
|
||||||
|
/* maximumY: serviceItemList.height - serviceDrop.height */
|
||||||
|
smoothed: false
|
||||||
|
}
|
||||||
|
|
||||||
|
drag.onActiveChanged: {
|
||||||
|
if (mouseHandler.drag.active) {
|
||||||
|
serviceItemList.indexDragged = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* onPositionChanged: { */
|
||||||
|
/* if (!pressed) { */
|
||||||
|
/* return; */
|
||||||
|
/* } */
|
||||||
|
/* mouseArea.arrangeItem(); */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
onPressed: {
|
||||||
|
serviceItemList.interactive = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onClicked: {
|
||||||
|
if (mouse.button === Qt.RightButton)
|
||||||
|
rightClickMenu.popup();
|
||||||
|
else {
|
||||||
|
serviceItemList.currentIndex = index;
|
||||||
|
serviceItemModel.select(index);
|
||||||
|
/* currentServiceItem = index; */
|
||||||
|
/* changeItem(index); */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onDoubleClicked: {
|
||||||
|
/* showPassiveNotification("Double Clicked") */
|
||||||
|
/* serviceItemList.currentIndex = index; */
|
||||||
|
changeServiceItem(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
onReleased: {
|
||||||
|
print("should drop");
|
||||||
|
visServiceItem.Drag.drop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Controls.Menu {
|
||||||
|
id: rightClickMenu
|
||||||
|
x: mouseHandler.mouseX
|
||||||
|
y: mouseHandler.mouseY + 10
|
||||||
|
Kirigami.Action {
|
||||||
|
text: "delete"
|
||||||
|
onTriggered: removeItem(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
id: serviceItemList
|
id: serviceItemList
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
|
|
@ -119,190 +315,10 @@ Item {
|
||||||
|
|
||||||
model: serviceItemModel
|
model: serviceItemModel
|
||||||
|
|
||||||
delegate: DropArea {
|
delegate: Kirigami.DelegateRecycler {
|
||||||
id: serviceDrop
|
width: serviceItemList.width
|
||||||
implicitWidth: serviceItemList.width
|
sourceComponent: delegate
|
||||||
height: 30
|
|
||||||
/* enabled: false */
|
|
||||||
|
|
||||||
onEntered: (drag) => {
|
|
||||||
if (drag.keys[0] === "library") {
|
|
||||||
dropHighlightLine.visible = true;
|
|
||||||
dropHighlightLine.y = y - 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* onExited: dropHighlightLine.visible = false; */
|
|
||||||
|
|
||||||
onDropped: (drag) => {
|
|
||||||
print("DROPPED IN ITEM AREA: " + drag.keys);
|
|
||||||
print(dragItemIndex + " " + index);
|
|
||||||
const hlIndex = serviceItemList.currentIndex;
|
|
||||||
if (drag.keys[0] === "library") {
|
|
||||||
addItem(index,
|
|
||||||
dragItemTitle,
|
|
||||||
dragItemType,
|
|
||||||
dragItemBackground,
|
|
||||||
dragItemBackgroundType,
|
|
||||||
dragItemText,
|
|
||||||
dragItemAudio,
|
|
||||||
dragItemFont,
|
|
||||||
dragItemFontSize,
|
|
||||||
dragItemIndex);
|
|
||||||
} else if (drag.keys[0] === "serviceitem") {
|
|
||||||
serviceItemModel.move(serviceItemList.indexDragged,
|
|
||||||
serviceItemList.moveToIndex);
|
|
||||||
serviceItemList.currentIndex = moveToIndex;
|
|
||||||
}
|
|
||||||
dropHighlightLine.visible = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
keys: ["library","serviceitem"]
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: visServiceItem
|
|
||||||
width: serviceDrop.width
|
|
||||||
height: serviceDrop.height
|
|
||||||
anchors {
|
|
||||||
horizontalCenter: parent.horizontalCenter
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
}
|
|
||||||
color: {
|
|
||||||
if (active)
|
|
||||||
Kirigami.Theme.highlightColor;
|
|
||||||
else if (selected)
|
|
||||||
Kirigami.Theme.focusColor;
|
|
||||||
else if (mouseHandler.containsMouse)
|
|
||||||
Kirigami.Theme.hoverColor;
|
|
||||||
else
|
|
||||||
Kirigami.Theme.backgroundColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
Controls.Label {
|
|
||||||
id: label
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.leftMargin: 5
|
|
||||||
text: name
|
|
||||||
elide: Text.ElideRight
|
|
||||||
width: parent.width - trailing.width - 15
|
|
||||||
color: {
|
|
||||||
if (selected ||
|
|
||||||
mouseHandler.containsMouse || active)
|
|
||||||
Kirigami.Theme.highlightedTextColor;
|
|
||||||
else
|
|
||||||
Kirigami.Theme.textColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Controls.Label {
|
|
||||||
id: trailing
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.rightMargin: 5
|
|
||||||
text: type
|
|
||||||
color: {
|
|
||||||
if (selected ||
|
|
||||||
mouseHandler.containsMouse || active)
|
|
||||||
Kirigami.Theme.highlightedTextColor;
|
|
||||||
else
|
|
||||||
Kirigami.Theme.disabledTextColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onYChanged: serviceItemList.updateDrag(Math.round(y));
|
|
||||||
|
|
||||||
states: [
|
|
||||||
State {
|
|
||||||
when: mouseHandler.drag.active
|
|
||||||
ParentChange {
|
|
||||||
target: visServiceItem
|
|
||||||
parent: serviceItemList
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: visServiceItem
|
|
||||||
/* backgroundColor: Kirigami.Theme.backgroundColor */
|
|
||||||
/* textColor: Kirigami.Theme.textColor */
|
|
||||||
anchors.verticalCenter: undefined
|
|
||||||
anchors.horizontalCenter: undefined
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
/* Drag.dragType: Drag.Automatic */
|
|
||||||
Drag.active: mouseHandler.drag.active
|
|
||||||
Drag.hotSpot.x: width / 2
|
|
||||||
Drag.hotSpot.y: height / 2
|
|
||||||
Drag.keys: ["serviceitem"]
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: mouseHandler
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
|
||||||
preventStealing: true
|
|
||||||
|
|
||||||
drag {
|
|
||||||
target: visServiceItem
|
|
||||||
axis: Drag.YAxis
|
|
||||||
/* minimumY: root.y */
|
|
||||||
/* maximumY: serviceItemList.height - serviceDrop.height */
|
|
||||||
smoothed: false
|
|
||||||
}
|
|
||||||
|
|
||||||
drag.onActiveChanged: {
|
|
||||||
if (mouseHandler.drag.active) {
|
|
||||||
serviceItemList.indexDragged = index;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* onPositionChanged: { */
|
|
||||||
/* if (!pressed) { */
|
|
||||||
/* return; */
|
|
||||||
/* } */
|
|
||||||
/* mouseArea.arrangeItem(); */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
onPressed: {
|
|
||||||
serviceItemList.interactive = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
onClicked: {
|
|
||||||
if (mouse.button === Qt.RightButton)
|
|
||||||
rightClickMenu.popup();
|
|
||||||
else {
|
|
||||||
serviceItemList.currentIndex = index;
|
|
||||||
serviceItemModel.select(index);
|
|
||||||
/* currentServiceItem = index; */
|
|
||||||
/* changeItem(index); */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onDoubleClicked: {
|
|
||||||
/* showPassiveNotification("Double Clicked") */
|
|
||||||
/* serviceItemList.currentIndex = index; */
|
|
||||||
changeServiceItem(index);
|
|
||||||
}
|
|
||||||
|
|
||||||
onReleased: {
|
|
||||||
print("should drop");
|
|
||||||
visServiceItem.Drag.drop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Controls.Menu {
|
|
||||||
id: rightClickMenu
|
|
||||||
x: mouseHandler.mouseX
|
|
||||||
y: mouseHandler.mouseY + 10
|
|
||||||
Kirigami.Action {
|
|
||||||
text: "delete"
|
|
||||||
onTriggered: removeItem(index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Kirigami.WheelHandler {
|
Kirigami.WheelHandler {
|
||||||
id: wheelHandler
|
id: wheelHandler
|
||||||
target: serviceItemList
|
target: serviceItemList
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue