Skip to content

Commit 6fd51ad

Browse files
zsienzsien
committed
chore: switch tray items to listview
* tray 使用 listview 实现 * stashed 使用 grid 实现 * 修改 traysortordermodel Issues: linuxdeepin/developer-center#10198
1 parent 638c6f4 commit 6fd51ad

10 files changed

+646
-395
lines changed

Diff for: ‎panels/dock/tray/package/ActionLegacyTrayPluginDelegate.qml

+46-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ AppletItemButton {
2626

2727
required property bool itemVisible
2828
property bool dragable: true
29+
property string dropOnSurfaceId: ""
30+
property bool dropOnBefore: true
2931

3032
padding: 0
3133

@@ -160,7 +162,7 @@ AppletItemButton {
160162
Drag.dragType: Drag.Automatic
161163
DQuickDrag.overlay: overlayWindow
162164
DQuickDrag.active: Drag.active
163-
DQuickDrag.hotSpotScale: Qt.size(0.5, 1)
165+
DQuickDrag.hotSpotScale: Qt.size(0.5, 0.5)
164166
Drag.mimeData: {
165167
"text/x-dde-shell-tray-dnd-surfaceId": model.surfaceId,
166168
"text/x-dde-shell-tray-dnd-sectionType": model.sectionType
@@ -172,6 +174,11 @@ AppletItemButton {
172174
// reset position on drop
173175
Qt.callLater(() => { x = 0; y = 0; });
174176
}
177+
178+
if (!Drag.active && dropOnSurfaceId != "") {
179+
DDT.TraySortOrderModel.move(model.surfaceId, dropOnSurfaceId, dropOnBefore);
180+
dropOnSurfaceId = "";
181+
}
175182
}
176183

177184
DragHandler {
@@ -182,4 +189,42 @@ AppletItemButton {
182189
Qt.callLater(function(){ root.Drag.active = dragHandler.active })
183190
}
184191
}
192+
193+
DropArea {
194+
enabled: dragable
195+
anchors.fill: parent
196+
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
197+
198+
onEntered: function(drag) {
199+
let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
200+
if (!legacyTrayPlugin) {
201+
return
202+
}
203+
204+
const sourceSurfaceId = drag.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
205+
const sourceSectionType = drag.getDataAsString("text/x-dde-shell-tray-dnd-sectionType")
206+
if (model.sectionType != "stashed" && sourceSectionType == "stashed") {
207+
DDT.TraySortOrderModel.move(sourceSurfaceId, model.surfaceId, false);
208+
return
209+
}
210+
211+
if (model.sectionType == "stashed" && sourceSectionType != "stashed") {
212+
if (!sourceSurfaceId.startsWith("application-tray::")) {
213+
drag.accepted = false
214+
return
215+
}
216+
DDT.TraySortOrderModel.move(surfaceId, model.surfaceId, false);
217+
return
218+
}
219+
220+
if (DelegateModel.itemsIndex == legacyTrayPlugin.DelegateModel.itemsIndex) {
221+
return
222+
}
223+
224+
visualModel.items.move(legacyTrayPlugin.DelegateModel.itemsIndex, DelegateModel.itemsIndex)
225+
226+
legacyTrayPlugin.dropOnSurfaceId = model.surfaceId
227+
legacyTrayPlugin.dropOnBefore = DelegateModel.itemsIndex > legacyTrayPlugin.DelegateModel.itemsIndex
228+
}
229+
}
185230
}

Diff for: ‎panels/dock/tray/package/ActionShowStashDelegate.qml

+22
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,26 @@ AppletItemButton {
119119
}
120120
}
121121
}
122+
123+
DropArea {
124+
anchors.fill: parent
125+
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
126+
127+
onEntered: function(drag) {
128+
let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
129+
if (!legacyTrayPlugin) {
130+
return
131+
}
132+
133+
let surfaceId = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
134+
if (!surfaceId.startsWith("application-tray::")) {
135+
dragEvent.accepted = false
136+
return
137+
}
138+
}
139+
onDropped: function (dropEvent) {
140+
let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
141+
DDT.TraySortOrderModel.move(surfaceId, "internal/action-stash-placeholder", true);
142+
}
143+
}
122144
}

Diff for: ‎panels/dock/tray/package/ActionToggleCollapseDelegate.qml

+19
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,23 @@ AppletItemButton {
7979
}
8080
}
8181
}
82+
83+
DropArea {
84+
anchors.fill: parent
85+
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
86+
87+
onEntered: function(drag) {
88+
let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
89+
if (legacyTrayPlugin) {
90+
if (DelegateModel.itemsIndex == legacyTrayPlugin.DelegateModel.itemsIndex) {
91+
return
92+
}
93+
94+
visualModel.items.move(legacyTrayPlugin.DelegateModel.itemsIndex, DelegateModel.itemsIndex)
95+
96+
legacyTrayPlugin.dropOnSurfaceId = model.surfaceId
97+
legacyTrayPlugin.dropOnBefore = DelegateModel.itemsIndex > legacyTrayPlugin.DelegateModel.itemsIndex
98+
}
99+
}
100+
}
82101
}

Diff for: ‎panels/dock/tray/package/DebugRectangle.qml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import QtQuick 2.15
2+
3+
Rectangle {
4+
property var toFill: parent // instantiation site "can" (optionally) override
5+
property color customColor: 'yellow' // instantiation site "can" (optionally) override
6+
property int customThickness: 1 // instantiation site "can" (optionally) override
7+
8+
anchors.fill: toFill
9+
z: 200
10+
color: 'transparent'
11+
border.color: customColor
12+
border.width: customThickness
13+
}

Diff for: ‎panels/dock/tray/package/StashContainer.qml

+36-23
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,12 @@ import org.deepin.ds.dock.tray 1.0 as DDT
1111
Item {
1212
id: root
1313

14-
property var model: ListModel {
15-
ListElement {
16-
delegateType: "dummy"
17-
surfaceId: "folder-trash"
18-
visualIndex: 0
19-
}
20-
ListElement {
21-
delegateType: "dummy"
22-
visualIndex: 1
14+
required property DDT.SortFilterProxyModel model: DDT.SortFilterProxyModel {
15+
sourceModel: DDT.TraySortOrderModel
16+
filterRowCallback: (sourceRow, sourceParent) => {
17+
let index = sourceModel.index(sourceRow, 0, sourceParent)
18+
return sourceModel.data(index, DDT.TraySortOrderModel.SectionTypeRole) === "stashed" &&
19+
sourceModel.data(index, DDT.TraySortOrderModel.VisibilityRole) === true
2320
}
2421
}
2522

@@ -59,14 +56,6 @@ Item {
5956
}
6057

6158
// Delegates
62-
StashedItemDelegateChooser {
63-
columnCount: root.columnCount
64-
rowCount: root.rowCount
65-
itemPadding: root.itemPadding
66-
id: stashedItemDelegateChooser
67-
stashedSurfacePopup: stashSurfacePopup
68-
}
69-
7059
// tooltip and menu
7160
DDT.SurfacePopup {
7261
id: stashSurfacePopup
@@ -101,19 +90,43 @@ Item {
10190
}
10291
onDropped: function (dropEvent) {
10392
let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
104-
DDT.TraySortOrderModel.dropToStashTray(surfaceId, 0, false);
93+
DDT.TraySortOrderModel.move(surfaceId, "internal/action-stash-placeholder", true);
10594
}
10695
}
10796

108-
Item {
97+
Flow {
98+
id: stashedList
10999
anchors.fill: parent
110100
anchors.margins: 0
101+
spacing: root.itemSpacing
102+
103+
add: Transition {
104+
NumberAnimation {
105+
properties: "scale,opacity"
106+
from: 0
107+
to: 1
108+
duration: 200
109+
}
110+
}
111+
move: Transition {
112+
NumberAnimation {
113+
properties: "x,y"
114+
easing.type: Easing.OutQuad
115+
}
116+
}
111117

112-
// Tray items
113118
Repeater {
114-
anchors.fill: parent
115-
model: root.model
116-
delegate: stashedItemDelegateChooser
119+
model: DelegateModel {
120+
id: visualModel
121+
model: root.model
122+
delegate: StashedItemDelegateChooser {
123+
columnCount: root.columnCount
124+
rowCount: root.rowCount
125+
itemPadding: root.itemPadding
126+
id: stashedItemDelegateChooser
127+
stashedSurfacePopup: stashSurfacePopup
128+
}
129+
}
117130
}
118131
}
119132
}

Diff for: ‎panels/dock/tray/package/TrayContainer.qml

+56-68
Original file line numberDiff line numberDiff line change
@@ -86,30 +86,24 @@ Item {
8686
property int trayHeight: 50
8787
property size containerSize: DDT.TrayItemPositionManager.visualSize
8888
property bool isDragging: DDT.TraySortOrderModel.actionsAlwaysVisible
89-
property bool animationEnable: true
89+
property bool animationEnable: false
9090
// visiualIndex default value is -1
9191
property int dropHoverIndex: -1
9292
required property var surfaceAcceptor
9393
readonly property bool isDropping: dropArea.containsDrag
9494

95-
onIsDraggingChanged: {
96-
animationEnable = !isDragging
97-
animationEnableTimer.start()
98-
}
99-
95+
// 启动时关闭动画，10s 后再启用
10096
Timer {
10197
id: animationEnableTimer
102-
interval: 10
98+
interval: 10000
10399
repeat: false
104100
onTriggered: {
105101
animationEnable = true
106102
}
107103
}
108104

109-
implicitWidth: width
110-
width: containerSize.width
111-
implicitHeight: height
112-
height: containerSize.height
105+
implicitWidth: isHorizontal ? trayList.contentItem.childrenRect.width : DDT.TrayItemPositionManager.dockHeight
106+
implicitHeight: isHorizontal ? DDT.TrayItemPositionManager.dockHeight : trayList.contentItem.childrenRect.height
113107

114108
Behavior on width {
115109
enabled: animationEnable
@@ -121,87 +115,81 @@ Item {
121115
NumberAnimation { duration: 200; easing.type: collapsed || !DDT.TraySortOrderModel.isCollapsing ? Easing.OutQuad : Easing.InQuad }
122116
}
123117

124-
// Delegates
125-
TrayItemDelegateChooser {
126-
id: trayItemDelegateChooser
127-
isHorizontal: root.isHorizontal
128-
collapsed: root.collapsed
129-
itemPadding: root.itemPadding
130-
surfaceAcceptor: root.surfaceAcceptor
131-
disableInputEvents: root.isDropping
132-
}
133-
134118
// debug
135119
Rectangle {
136120
color: root.color
137121
anchors.fill: parent
138122
}
139123

140-
DropArea {
141-
id: dropArea
124+
// Tray items
125+
ListView {
126+
id: trayList
142127
anchors.fill: parent
143-
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
144-
onEntered: function (dragEvent) {
145-
console.log(dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId"))
128+
interactive: false
129+
orientation: root.isHorizontal ? Qt.Horizontal : Qt.Vertical
130+
spacing: root.itemSpacing
131+
model: DelegateModel {
132+
id: visualModel
133+
134+
model: DDT.SortFilterProxyModel {
135+
sourceModel: root.model
136+
filterRowCallback: (sourceRow, sourceParent) => {
137+
let index = sourceModel.index(sourceRow, 0, sourceParent)
138+
return sourceModel.data(index, DDT.TraySortOrderModel.SectionTypeRole) !== "stashed" &&
139+
sourceModel.data(index, DDT.TraySortOrderModel.VisibilityRole) === true
140+
}
141+
}
142+
delegate: TrayItemDelegateChooser {
143+
id: delegateRoot
144+
isHorizontal: root.isHorizontal
145+
collapsed: root.collapsed
146+
itemPadding: root.itemPadding
147+
surfaceAcceptor: root.surfaceAcceptor
148+
disableInputEvents: root.isDropping
149+
150+
property int visualIndex: DelegateModel.itemsIndex
151+
}
146152
}
147153

148-
onPositionChanged: function (dragEvent) {
149-
let surfaceId = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
150-
let pos = root.isHorizontal ? drag.x : drag.y
151-
let currentItemIndex = pos / (root.itemVisualSize + root.itemSpacing)
152-
let currentPosMapToItem = pos % (root.itemVisualSize + root.itemSpacing)
153-
let isBefore = currentPosMapToItem < root.itemVisualSize / 2
154-
dropHoverIndex = Math.floor(currentItemIndex)
155-
let isStash = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-sectionType") === "stashed"
156-
// TODO: If this method is used in the stash area, it will cause the drag state to be terminated when dragging to the tray area
157-
if (!isStash) {
158-
if (dropHoverIndex !== 0) {
159-
dropTrayTimer.handleDrop = function() {
160-
DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore)
161-
}
162-
dropTrayTimer.start()
163-
} else if (!surfaceId.startsWith("application-tray")){
164-
dragEvent.accepted = false
165-
}
154+
add: Transition {
155+
enabled: animationEnable
156+
NumberAnimation {
157+
properties: "scale,opacity"
158+
from: 0
159+
to: 1
160+
duration: 200
166161
}
167162
}
168-
onDropped: function (dropEvent) {
169-
let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
170-
let dropIdx = DDT.TrayItemPositionManager.itemIndexByPoint(Qt.point(drag.x, drag.y))
171-
let currentItemIndex = dropIdx.index
172-
let isBefore = dropIdx.isBefore
173-
console.log("dropped", currentItemIndex, isBefore)
174-
DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore);
175-
DDT.TraySortOrderModel.actionsAlwaysVisible = false
163+
remove: Transition {
164+
enabled: animationEnable
165+
NumberAnimation {
166+
properties: "scale,opacity"
167+
from: 1
168+
to: 0
169+
duration: 200
170+
}
176171
}
177-
178-
Timer {
179-
id: dropTrayTimer
180-
interval: 50
181-
repeat: false
182-
property var handleDrop
183-
onTriggered: {
184-
handleDrop()
172+
displaced: Transition {
173+
enabled: animationEnable
174+
NumberAnimation {
175+
properties: "x,y"
176+
easing.type: Easing.OutQuad
185177
}
186178
}
187-
}
188-
189-
// Tray items
190-
Repeater {
191-
anchors.fill: parent
192-
model: root.model
193-
delegate: trayItemDelegateChooser
179+
move: displaced
194180
}
195181

196182
Component.onCompleted: {
197183
DDT.TrayItemPositionManager.orientation = Qt.binding(function() {
198184
return root.isHorizontal ? Qt.Horizontal : Qt.Vertical
199185
});
200186
DDT.TrayItemPositionManager.visualItemCount = Qt.binding(function() {
201-
return root.model.visualItemCount
187+
return root.model.rowCount
202188
});
203189
DDT.TrayItemPositionManager.dockHeight = Qt.binding(function() {
204190
return root.trayHeight
205191
});
192+
193+
animationEnableTimer.start()
206194
}
207195
}

0 commit comments

Comments
 (0)