fix: stash container display abnormal

add padding to expand stashitem's width. add padding for trayitem, trayitem's padding is 4, and stashitem's padding is 8. Issue: linuxdeepin/developer-center#9727
linuxdeepin · Jul 16, 2024 · 332f0b2 · 332f0b2
1 parent e9f547b
commit 332f0b2
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 39 deletions.
diff --git a/panels/dock/tray/package/ActionLegacyTrayPluginDelegate.qml b/panels/dock/tray/package/ActionLegacyTrayPluginDelegate.qml
@@ -17,17 +17,15 @@ import org.deepin.ds.dock.tray 1.0 as DDT
 Button {
     property alias inputEventsEnabled: surfaceItem.inputEventsEnabled
 
-    property size visualSize: Qt.size(pluginItem.implicitWidth, pluginItem.implicitHeight)
+    property size visualSize: Qt.size(pluginItem.implicitWidth + itemPadding * 2, pluginItem.implicitHeight + itemPadding * 2)
 
     readonly property int itemWidth: isHorizontal ? 0 : DDT.TrayItemPositionManager.dockHeight
     readonly property int itemHeight: isHorizontal ? DDT.TrayItemPositionManager.dockHeight : 0
-    readonly property int inset: 4
 
-    topInset: -inset
-    bottomInset: -inset
-    leftInset: -inset
-    rightInset: -inset
-    padding: inset
+    topPadding: itemPadding
+    bottomPadding: itemPadding
+    leftPadding: itemPadding
+    rightPadding: itemPadding
 
     contentItem: Item {
         id: pluginItem

diff --git a/panels/dock/tray/package/ActionShowStashDelegate.qml b/panels/dock/tray/package/ActionShowStashDelegate.qml
@@ -12,8 +12,6 @@ import org.deepin.ds.dock 1.0
 D.ToolButton {
     id: root
 
-    width: 16
-    height: 16
     icon.name: {
         switch (Panel.position) {
             case Dock.Right: return "arrow-left"
@@ -22,10 +20,15 @@ D.ToolButton {
             case Dock.Bottom: return "arrow-up"
         }
     }
-    icon.width: width
-    icon.height: height
+    icon.width: 16
+    icon.height: 16
     display: D.IconLabel.IconOnly
 
+    topPadding: itemPadding
+    bottomPadding: itemPadding
+    leftPadding: itemPadding
+    rightPadding: itemPadding
+
     states: [
         State {
             name: "opened"

diff --git a/panels/dock/tray/package/ActionToggleCollapseDelegate.qml b/panels/dock/tray/package/ActionToggleCollapseDelegate.qml
@@ -13,13 +13,16 @@ D.ToolButton {
 
     z: 5
 
-    width: 16
-    height: 16
     icon.name: isHorizontal ? (collapsed ? "expand-left" : "expand-right") : (collapsed ? "expand-up" : "expand-down")
-    icon.width: width
-    icon.height: height
+    icon.width: 16
+    icon.height: 16
     display: D.IconLabel.IconOnly
 
+    topPadding: itemPadding
+    bottomPadding: itemPadding
+    leftPadding: itemPadding
+    rightPadding: itemPadding
+
     onClicked: {
         DDT.TraySortOrderModel.collapsed = !DDT.TraySortOrderModel.collapsed
     }

diff --git a/panels/dock/tray/package/StashContainer.qml b/panels/dock/tray/package/StashContainer.qml
@@ -27,6 +27,7 @@ Item {
 
     readonly property int itemSize: 16
     readonly property int itemSpacing: 10
+    readonly property int itemPadding: 8
 
     readonly property int columnCount: Math.ceil(Math.sqrt(model.count))
     readonly property int rowCount: Math.round(Math.sqrt(model.count))
@@ -43,9 +44,9 @@ Item {
     }
 
     implicitWidth: width
-    width: columnCount * (itemSize + itemSpacing) - itemSpacing
+    width: columnCount * (itemSize + itemPadding * 2 + itemSpacing) - itemSpacing
     implicitHeight: height
-    height: rowCount * (itemSize + itemSpacing) - itemSpacing
+    height: rowCount * (itemSize + itemPadding * 2 + itemSpacing) - itemSpacing
 
     Behavior on width {
         NumberAnimation { duration: 200; easing.type: Easing.OutQuad }
@@ -59,6 +60,7 @@ Item {
     StashedItemDelegateChooser {
         columnCount: root.columnCount
         rowCount: root.rowCount
+        itemPadding: root.itemPadding
         id: stashedItemDelegateChooser
     }
 

diff --git a/panels/dock/tray/package/StashedItemDelegateChooser.qml b/panels/dock/tray/package/StashedItemDelegateChooser.qml
@@ -14,6 +14,7 @@ LQM.DelegateChooser {
 
     required property int columnCount
     required property int rowCount
+    required property int itemPadding
 
     role: "delegateType"
     LQM.DelegateChoice {

diff --git a/panels/dock/tray/package/StashedItemPositioner.qml b/panels/dock/tray/package/StashedItemPositioner.qml
@@ -9,11 +9,8 @@ Control {
     id: root
     property bool itemVisible: true
 
-    width: 16
-    height: 16
-
-    x: (index % columnCount) * (16 + 10)
-    y: Math.floor(index / columnCount) * (16 + 10)
+    x: (index % columnCount) * (16 + itemPadding * 2 + 10)
+    y: Math.floor(index / columnCount) * (16 + itemPadding * 2 + 10)
     Behavior on x {
         NumberAnimation { duration: 200; easing.type: Easing.OutQuad }
     }

diff --git a/panels/dock/tray/package/TrayContainer.qml b/panels/dock/tray/package/TrayContainer.qml
@@ -79,8 +79,9 @@ Item {
     property bool collapsed: false
     property bool isHorizontal: true
 
-    readonly property int itemSize: 16
-    readonly property int itemSpacing: 10
+    readonly property int itemVisualSize: DDT.TrayItemPositionManager.itemVisualSize.width
+    readonly property int itemSpacing: DDT.TrayItemPositionManager.itemSpacing
+    readonly property int itemPadding: DDT.TrayItemPositionManager.itemPadding
 
     property int trayHeight: 50
     property size containerSize: DDT.TrayItemPositionManager.visualSize
@@ -103,6 +104,7 @@ Item {
         id: trayItemDelegateChooser
         isHorizontal: root.isHorizontal
         collapsed: root.collapsed
+        itemPadding: root.itemPadding
     }
 
     // debug
@@ -120,9 +122,9 @@ Item {
         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.itemSize + root.itemSpacing)
-            let currentPosMapToItem = pos % (root.itemSize + root.itemSpacing)
-            let isBefore = currentPosMapToItem < root.itemSize / 2
+            let currentItemIndex = pos / (root.itemVisualSize + root.itemSpacing)
+            let currentPosMapToItem = pos % (root.itemVisualSize + root.itemSpacing)
+            let isBefore = currentPosMapToItem < root.itemVisualSize / 2
             console.log("dragging", surfaceId, Math.floor(currentItemIndex), currentPosMapToItem, isBefore)
             // DDT.TraySortOrderModel.dropToDockTray(surfaceId, Math.floor(currentItemIndex), isBefore);
         }

diff --git a/panels/dock/tray/package/TrayItemDelegateChooser.qml b/panels/dock/tray/package/TrayItemDelegateChooser.qml
@@ -13,6 +13,7 @@ LQM.DelegateChooser {
     id: root
     property bool isHorizontal: false
     property bool collapsed: false
+    required property int itemPadding
 
     role: "delegateType"
     LQM.DelegateChoice {

diff --git a/panels/dock/tray/package/TrayItemPositioner.qml b/panels/dock/tray/package/TrayItemPositioner.qml
@@ -18,8 +18,8 @@ Control {
     DDT.TrayItemPositionRegister.visualIndex: model.visualIndex
     DDT.TrayItemPositionRegister.visualSize: Qt.size(width, height)
 
-    width: visualSize.width !== 0 ? visualSize.width : 16
-    height: visualSize.height !== 0 ? visualSize.height : 16
+    width: visualSize.width !== 0 ? visualSize.width : DDT.TrayItemPositionManager.itemVisualSize.width
+    height: visualSize.height !== 0 ? visualSize.height : DDT.TrayItemPositionManager.itemVisualSize.height
 
     x: visualPosition.x
     y: visualPosition.y

diff --git a/panels/dock/tray/trayitempositionmanager.cpp b/panels/dock/tray/trayitempositionmanager.cpp
@@ -9,17 +9,23 @@
 
 namespace docktray {
 
+// style of UI.
+static const int itemSize = 16;
+static const int itemPadding = 4;
+static const int itemSpacing = 0;
+static const QSize itemVisualSize = QSize(itemSize + itemPadding * 2, itemSize + itemPadding * 2);
+
 void TrayItemPositionManager::registerVisualItemSize(int index, const QSize &size)
 {
     while (m_registeredItemsSize.count() < (index + 1)) {
-        m_registeredItemsSize.append(QSize(16, 16));
+        m_registeredItemsSize.append(itemVisualSize);
     }
     m_registeredItemsSize[index] = size;
 }
 
 QSize TrayItemPositionManager::visualItemSize(int index) const
 {
-    if (m_registeredItemsSize.count() <= index) return QSize(16, 16);
+    if (m_registeredItemsSize.count() <= index) return itemVisualSize;
     return m_registeredItemsSize.at(index);
 }
 
@@ -28,15 +34,15 @@ QSize TrayItemPositionManager::visualSize(int index, bool includeLastSpacing) co
     if (m_orientation == Qt::Horizontal) {
         int width = 0;
         for (int i = 0; i <= index; i++) {
-            width += (visualItemSize(i).width() + 10);
+            width += (visualItemSize(i).width() + itemSpacing);
         }
-        return QSize((!includeLastSpacing && index > 0) ? (width - 10) : width, m_dockHeight);
+        return QSize((!includeLastSpacing && index > 0) ? (width - itemSpacing) : width, m_dockHeight);
     } else {
         int height = 0;
         for (int i = 0; i <= index; i++) {
-            height += (visualItemSize(i).height() + 10);
+            height += (visualItemSize(i).height() + itemSpacing);
         }
-        return QSize(m_dockHeight, (!includeLastSpacing && index > 0) ? (height - 10) : height);
+        return QSize(m_dockHeight, (!includeLastSpacing && index > 0) ? (height - itemSpacing) : height);
     }
 }
 
@@ -47,31 +53,31 @@ DropIndex TrayItemPositionManager::itemIndexByPoint(const QPoint point) const
         int width = 0;
         for (int i = 0; i < m_visualItemCount; i++) {
             int visualWidth = visualItemSize(i).width();
-            if (pos < (width + visualWidth + 10)) {
+            if (pos < (width + visualWidth + itemSpacing)) {
                 pos -= width;
                 return DropIndex {
                     .index = i,
                     .isOnItem = pos <= visualWidth,
                     .isBefore = pos < (visualWidth / 2)
                 };
             }
-            width += (visualWidth + 10);
+            width += (visualWidth + itemSpacing);
         }
         return DropIndex { .index = m_visualItemCount - 1 };
     } else {
         int pos = point.y();
         int height = 0;
         for (int i = 0; i <= m_visualItemCount; i++) {
             int visualHeight = visualItemSize(i).height();
-            if (pos < (height + visualHeight + 10)) {
+            if (pos < (height + visualHeight + itemSpacing)) {
                 pos -= height;
                 return DropIndex {
                     .index = i,
                     .isOnItem = pos <= visualHeight,
                     .isBefore = pos < (visualHeight / 2)
                 };
             }
-            height += (visualHeight + 10);
+            height += (visualHeight + itemSpacing);
         }
         return DropIndex { .index = m_visualItemCount - 1 };
     }
@@ -110,6 +116,10 @@ void TrayItemPositionManager::layoutHealthCheck(int delayMs)
 TrayItemPositionManager::TrayItemPositionManager(QObject *parent)
     : QObject(parent)
 {
+    m_itemSpacing = itemSpacing;
+    m_itemPadding = itemPadding;
+    m_itemVisualSize = itemVisualSize;
+
     connect(this, &TrayItemPositionManager::visualItemCountChanged,
             this, &TrayItemPositionManager::updateVisualSize);
     connect(this, &TrayItemPositionManager::dockHeightChanged,

diff --git a/panels/dock/tray/trayitempositionmanager.h b/panels/dock/tray/trayitempositionmanager.h
@@ -32,6 +32,9 @@ class TrayItemPositionManager : public QObject
     Q_PROPERTY(QSize visualSize MEMBER m_visualSize NOTIFY visualSizeChanged)
     // position manager properties, use to know how to calculate the actual width of visualSize
     Q_PROPERTY(int visualItemCount MEMBER m_visualItemCount NOTIFY visualItemCountChanged)
+    Q_PROPERTY(QSize itemVisualSize MEMBER m_itemVisualSize CONSTANT FINAL)
+    Q_PROPERTY(int itemSpacing MEMBER m_itemSpacing CONSTANT FINAL)
+    Q_PROPERTY(int itemPadding MEMBER m_itemPadding CONSTANT FINAL)
     QML_ELEMENT
     QML_SINGLETON
 public:
@@ -72,6 +75,9 @@ class TrayItemPositionManager : public QObject
     int m_dockHeight;
     int m_visualItemCount;
     QList<QSize> m_registeredItemsSize;
+    QSize m_itemVisualSize;
+    int m_itemSpacing;
+    int m_itemPadding;
 };
 
 }