Skip to content

Commit

Permalink
chore: switch tray items to listview
Browse files Browse the repository at this point in the history 
* tray 使用 listview 实现
* stashed 使用 grid 实现
* 修改 traysortordermodel

Issues: linuxdeepin/developer-center#10198
  • Loading branch information
@zsien
zsien committed Aug 30, 2024
1 parent 638c6f4 commit 6fd51ad
Show file tree
Hide file tree
Showing 10 changed files with 646 additions and 395 deletions.
47 changes: 46 additions & 1 deletion panels/dock/tray/package/ActionLegacyTrayPluginDelegate.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ AppletItemButton {

required property bool itemVisible
property bool dragable: true
property string dropOnSurfaceId: ""
property bool dropOnBefore: true

padding: 0

Expand Down Expand Up @@ -160,7 +162,7 @@ AppletItemButton {
Drag.dragType: Drag.Automatic
DQuickDrag.overlay: overlayWindow
DQuickDrag.active: Drag.active
DQuickDrag.hotSpotScale: Qt.size(0.5, 1)
DQuickDrag.hotSpotScale: Qt.size(0.5, 0.5)
Drag.mimeData: {
"text/x-dde-shell-tray-dnd-surfaceId": model.surfaceId,
"text/x-dde-shell-tray-dnd-sectionType": model.sectionType
Expand All @@ -172,6 +174,11 @@ AppletItemButton {
// reset position on drop
Qt.callLater(() => { x = 0; y = 0; });
}

if (!Drag.active && dropOnSurfaceId != "") {
DDT.TraySortOrderModel.move(model.surfaceId, dropOnSurfaceId, dropOnBefore);
dropOnSurfaceId = "";
}
}

DragHandler {
Expand All @@ -182,4 +189,42 @@ AppletItemButton {
Qt.callLater(function(){ root.Drag.active = dragHandler.active })
}
}

DropArea {
enabled: dragable
anchors.fill: parent
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]

onEntered: function(drag) {
let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
if (!legacyTrayPlugin) {
return
}

const sourceSurfaceId = drag.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
const sourceSectionType = drag.getDataAsString("text/x-dde-shell-tray-dnd-sectionType")
if (model.sectionType != "stashed" && sourceSectionType == "stashed") {
DDT.TraySortOrderModel.move(sourceSurfaceId, model.surfaceId, false);
return
}

if (model.sectionType == "stashed" && sourceSectionType != "stashed") {
if (!sourceSurfaceId.startsWith("application-tray::")) {
drag.accepted = false
return
}
DDT.TraySortOrderModel.move(surfaceId, model.surfaceId, false);
return
}

if (DelegateModel.itemsIndex == legacyTrayPlugin.DelegateModel.itemsIndex) {
return
}

visualModel.items.move(legacyTrayPlugin.DelegateModel.itemsIndex, DelegateModel.itemsIndex)

legacyTrayPlugin.dropOnSurfaceId = model.surfaceId
legacyTrayPlugin.dropOnBefore = DelegateModel.itemsIndex > legacyTrayPlugin.DelegateModel.itemsIndex
}
}
}
22 changes: 22 additions & 0 deletions panels/dock/tray/package/ActionShowStashDelegate.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,26 @@ AppletItemButton {
}
}
}

DropArea {
anchors.fill: parent
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]

onEntered: function(drag) {
let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
if (!legacyTrayPlugin) {
return
}

let surfaceId = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
if (!surfaceId.startsWith("application-tray::")) {
dragEvent.accepted = false
return
}
}
onDropped: function (dropEvent) {
let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
DDT.TraySortOrderModel.move(surfaceId, "internal/action-stash-placeholder", true);
}
}
}
19 changes: 19 additions & 0 deletions panels/dock/tray/package/ActionToggleCollapseDelegate.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,23 @@ AppletItemButton {
}
}
}

DropArea {
anchors.fill: parent
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]

onEntered: function(drag) {
let legacyTrayPlugin = drag.source as ActionLegacyTrayPluginDelegate
if (legacyTrayPlugin) {
if (DelegateModel.itemsIndex == legacyTrayPlugin.DelegateModel.itemsIndex) {
return
}

visualModel.items.move(legacyTrayPlugin.DelegateModel.itemsIndex, DelegateModel.itemsIndex)

legacyTrayPlugin.dropOnSurfaceId = model.surfaceId
legacyTrayPlugin.dropOnBefore = DelegateModel.itemsIndex > legacyTrayPlugin.DelegateModel.itemsIndex
}
}
}
}
13 changes: 13 additions & 0 deletions panels/dock/tray/package/DebugRectangle.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import QtQuick 2.15

Rectangle {
property var toFill: parent // instantiation site "can" (optionally) override
property color customColor: 'yellow' // instantiation site "can" (optionally) override
property int customThickness: 1 // instantiation site "can" (optionally) override

anchors.fill: toFill
z: 200
color: 'transparent'
border.color: customColor
border.width: customThickness
}
59 changes: 36 additions & 23 deletions panels/dock/tray/package/StashContainer.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,12 @@ import org.deepin.ds.dock.tray 1.0 as DDT
Item {
id: root

property var model: ListModel {
ListElement {
delegateType: "dummy"
surfaceId: "folder-trash"
visualIndex: 0
}
ListElement {
delegateType: "dummy"
visualIndex: 1
required property DDT.SortFilterProxyModel model: DDT.SortFilterProxyModel {
sourceModel: DDT.TraySortOrderModel
filterRowCallback: (sourceRow, sourceParent) => {
let index = sourceModel.index(sourceRow, 0, sourceParent)
return sourceModel.data(index, DDT.TraySortOrderModel.SectionTypeRole) === "stashed" &&
sourceModel.data(index, DDT.TraySortOrderModel.VisibilityRole) === true
}
}

Expand Down Expand Up @@ -59,14 +56,6 @@ Item {
}

// Delegates
StashedItemDelegateChooser {
columnCount: root.columnCount
rowCount: root.rowCount
itemPadding: root.itemPadding
id: stashedItemDelegateChooser
stashedSurfacePopup: stashSurfacePopup
}

// tooltip and menu
DDT.SurfacePopup {
id: stashSurfacePopup
Expand Down Expand Up @@ -101,19 +90,43 @@ Item {
}
onDropped: function (dropEvent) {
let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
DDT.TraySortOrderModel.dropToStashTray(surfaceId, 0, false);
DDT.TraySortOrderModel.move(surfaceId, "internal/action-stash-placeholder", true);
}
}

Item {
Flow {
id: stashedList
anchors.fill: parent
anchors.margins: 0
spacing: root.itemSpacing

add: Transition {
NumberAnimation {
properties: "scale,opacity"
from: 0
to: 1
duration: 200
}
}
move: Transition {
NumberAnimation {
properties: "x,y"
easing.type: Easing.OutQuad
}
}

// Tray items
Repeater {
anchors.fill: parent
model: root.model
delegate: stashedItemDelegateChooser
model: DelegateModel {
id: visualModel
model: root.model
delegate: StashedItemDelegateChooser {
columnCount: root.columnCount
rowCount: root.rowCount
itemPadding: root.itemPadding
id: stashedItemDelegateChooser
stashedSurfacePopup: stashSurfacePopup
}
}
}
}
}
124 changes: 56 additions & 68 deletions panels/dock/tray/package/TrayContainer.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,30 +86,24 @@ Item {
property int trayHeight: 50
property size containerSize: DDT.TrayItemPositionManager.visualSize
property bool isDragging: DDT.TraySortOrderModel.actionsAlwaysVisible
property bool animationEnable: true
property bool animationEnable: false
// visiualIndex default value is -1
property int dropHoverIndex: -1
required property var surfaceAcceptor
readonly property bool isDropping: dropArea.containsDrag

onIsDraggingChanged: {
animationEnable = !isDragging
animationEnableTimer.start()
}

// 启动时关闭动画，10s 后再启用
Timer {
id: animationEnableTimer
interval: 10
interval: 10000
repeat: false
onTriggered: {
animationEnable = true
}
}

implicitWidth: width
width: containerSize.width
implicitHeight: height
height: containerSize.height
implicitWidth: isHorizontal ? trayList.contentItem.childrenRect.width : DDT.TrayItemPositionManager.dockHeight
implicitHeight: isHorizontal ? DDT.TrayItemPositionManager.dockHeight : trayList.contentItem.childrenRect.height

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

// Delegates
TrayItemDelegateChooser {
id: trayItemDelegateChooser
isHorizontal: root.isHorizontal
collapsed: root.collapsed
itemPadding: root.itemPadding
surfaceAcceptor: root.surfaceAcceptor
disableInputEvents: root.isDropping
}

// debug
Rectangle {
color: root.color
anchors.fill: parent
}

DropArea {
id: dropArea
// Tray items
ListView {
id: trayList
anchors.fill: parent
keys: ["text/x-dde-shell-tray-dnd-surfaceId"]
onEntered: function (dragEvent) {
console.log(dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId"))
interactive: false
orientation: root.isHorizontal ? Qt.Horizontal : Qt.Vertical
spacing: root.itemSpacing
model: DelegateModel {
id: visualModel

model: DDT.SortFilterProxyModel {
sourceModel: root.model
filterRowCallback: (sourceRow, sourceParent) => {
let index = sourceModel.index(sourceRow, 0, sourceParent)
return sourceModel.data(index, DDT.TraySortOrderModel.SectionTypeRole) !== "stashed" &&
sourceModel.data(index, DDT.TraySortOrderModel.VisibilityRole) === true
}
}
delegate: TrayItemDelegateChooser {
id: delegateRoot
isHorizontal: root.isHorizontal
collapsed: root.collapsed
itemPadding: root.itemPadding
surfaceAcceptor: root.surfaceAcceptor
disableInputEvents: root.isDropping

property int visualIndex: DelegateModel.itemsIndex
}
}

onPositionChanged: function (dragEvent) {
let surfaceId = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
let pos = root.isHorizontal ? drag.x : drag.y
let currentItemIndex = pos / (root.itemVisualSize + root.itemSpacing)
let currentPosMapToItem = pos % (root.itemVisualSize + root.itemSpacing)
let isBefore = currentPosMapToItem < root.itemVisualSize / 2
dropHoverIndex = Math.floor(currentItemIndex)
let isStash = dragEvent.getDataAsString("text/x-dde-shell-tray-dnd-sectionType") === "stashed"
// 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
if (!isStash) {
if (dropHoverIndex !== 0) {
dropTrayTimer.handleDrop = function() {
DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore)
}
dropTrayTimer.start()
} else if (!surfaceId.startsWith("application-tray")){
dragEvent.accepted = false
}
add: Transition {
enabled: animationEnable
NumberAnimation {
properties: "scale,opacity"
from: 0
to: 1
duration: 200
}
}
onDropped: function (dropEvent) {
let surfaceId = dropEvent.getDataAsString("text/x-dde-shell-tray-dnd-surfaceId")
let dropIdx = DDT.TrayItemPositionManager.itemIndexByPoint(Qt.point(drag.x, drag.y))
let currentItemIndex = dropIdx.index
let isBefore = dropIdx.isBefore
console.log("dropped", currentItemIndex, isBefore)
DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore);
DDT.TraySortOrderModel.actionsAlwaysVisible = false
remove: Transition {
enabled: animationEnable
NumberAnimation {
properties: "scale,opacity"
from: 1
to: 0
duration: 200
}
}

Timer {
id: dropTrayTimer
interval: 50
repeat: false
property var handleDrop
onTriggered: {
handleDrop()
displaced: Transition {
enabled: animationEnable
NumberAnimation {
properties: "x,y"
easing.type: Easing.OutQuad
}
}
}

// Tray items
Repeater {
anchors.fill: parent
model: root.model
delegate: trayItemDelegateChooser
move: displaced
}

Component.onCompleted: {
DDT.TrayItemPositionManager.orientation = Qt.binding(function() {
return root.isHorizontal ? Qt.Horizontal : Qt.Vertical
});
DDT.TrayItemPositionManager.visualItemCount = Qt.binding(function() {
return root.model.visualItemCount
return root.model.rowCount
});
DDT.TrayItemPositionManager.dockHeight = Qt.binding(function() {
return root.trayHeight
});

animationEnableTimer.start()
}
}
Loading

0 comments on commit 6fd51ad

Please sign in to comment.