From 2c2646d296a0acfee02878bc7f5abb65ae13a4f7 Mon Sep 17 00:00:00 2001 From: wjyrich Date: Fri, 6 Feb 2026 13:46:21 +0800 Subject: [PATCH] feat: add hover background and adjust window indicator position MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added AppletItemBackground component to AppItem for better visual feedback during hover and active states. The background features dynamic sizing based on title visibility with smooth opacity transitions. Updated window indicator positioning to align with the new background dimensions instead of icon size, ensuring consistent spacing. Modified TaskManager spacing to zero to accommodate new background layout. Log: Improved dock app item visual feedback with hover background and adjusted window indicator positioning Influence: 1. Test hover effects on dock app items in both normal and dark themes 2. Verify window indicator positioning at all dock edges (top, bottom, left, right) 3. Check active state visual feedback for running applications 4. Test background appearance with and without title display 5. Verify smooth opacity transitions during hover state changes 6. Test layout consistency when dock items are rearranged or dragged feat: 添加悬停背景并调整窗口指示器位置 为AppItem添加AppletItemBackground组件，提供悬停和激活状态下的视觉反 馈。背景根据标题可见性动态调整尺寸，具有平滑的透明度过渡效果。更新窗 口指示器定位，使其与新的背景尺寸对齐而非图标尺寸，确保间距一致性。修改 TaskManager间距为零以适应新的背景布局。 Log: 改进任务栏应用项视觉反馈，添加悬停背景并调整窗口指示器定位 Influence: 1. 在正常和深色主题下测试任务栏应用项的悬停效果 2. 验证窗口指示器在所有任务栏边缘（顶部、底部、左侧、右侧）的定位 3. 检查运行中应用的激活状态视觉反馈 4. 测试带标题和不带标题显示时的背景外观 5. 验证悬停状态变化时的平滑透明度过渡 6. 测试任务栏项目重新排列或拖动时的布局一致性 PMS: BUG-345931 --- panels/dock/taskmanager/package/AppItem.qml | 72 +++++++++++++++---- .../dock/taskmanager/package/TaskManager.qml | 9 +-- 2 files changed, 62 insertions(+), 19 deletions(-) diff --git a/panels/dock/taskmanager/package/AppItem.qml b/panels/dock/taskmanager/package/AppItem.qml index e2bb2fd49..f34613ba6 100644 --- a/panels/dock/taskmanager/package/AppItem.qml +++ b/panels/dock/taskmanager/package/AppItem.qml @@ -79,15 +79,61 @@ Item { Control { anchors.fill: parent id: appItem - implicitWidth: root.titleActive ? (iconContainer.width + titleLoader.width + root.appTitleSpacing) : iconContainer.width + implicitWidth: root.titleActive ? (iconContainer.width + titleLoader.width + root.appTitleSpacing) : iconContainer.width + root.appTitleSpacing visible: !root.Drag.active // When in dragging, hide app item - + background: AppletItemBackground { + id: hoverBackground + + readonly property int verticalSpacing: Math.round(root.iconSize / 8) + 1 + readonly property int horizontalSpacing: Math.round(root.iconSize / 8) + readonly property int nonSplitHeight: root.iconSize + verticalSpacing * 2 + readonly property int hoverPadding: Math.round((Panel.rootObject.dockItemMaxSize * 0.8 - root.iconSize) / 2) + readonly property int splitWidth: Math.round(icon.width + titleLoader.width + hoverPadding * 2) + readonly property int nonSplitWidth: Math.round(root.iconSize + horizontalSpacing * 2) + + enabled: false + + width: root.titleActive ? splitWidth : nonSplitWidth + height: nonSplitHeight + radius: height / 5 + anchors.centerIn: parent + isActive: root.active + opacity: (hoverHandler.hovered || (root.active && root.windows.length > 0)) ? 1.0 : 0.0 + Behavior on opacity { + NumberAnimation { duration: 150 } + } + } Item { id: iconContainer - anchors.verticalCenter: root.useColumnLayout ? undefined : parent.verticalCenter - anchors.horizontalCenter: root.useColumnLayout ? parent.horizontalCenter : undefined - width: root.titleActive ? root.iconSize : Panel.rootObject.dockItemMaxSize * 0.8 + width: root.iconSize height: parent.height + anchors.verticalCenter: parent.verticalCenter + states: [ + State { + name: "titleActive" + when: root.titleActive + + AnchorChanges { + target: iconContainer + anchors.left: parent.left + anchors.horizontalCenter: undefined + } + PropertyChanges { + target: iconContainer + anchors.leftMargin: hoverBackground.horizontalSpacing + } + }, + State { + name: "nonTitleActive" + when: !root.titleActive + + AnchorChanges { + target: iconContainer + anchors.horizontalCenter: parent.horizontalCenter + anchors.left: undefined + } + } + ] StatusIndicator { id: statusIndicator palette: itemPalette @@ -171,26 +217,26 @@ Item { switch(Panel.position) { case Dock.Top: { windowIndicator.anchors.horizontalCenter = iconContainer.horizontalCenter - windowIndicator.anchors.top = parent.top - windowIndicator.anchors.topMargin = Qt.binding(() => {return Math.max((root.height - iconSize) / 2 - 8, (root.height - iconSize) / 2 / 3)}) + windowIndicator.anchors.top = hoverBackground.top + windowIndicator.anchors.topMargin = 1 return } case Dock.Bottom: { windowIndicator.anchors.horizontalCenter = iconContainer.horizontalCenter - windowIndicator.anchors.bottom = parent.bottom - windowIndicator.anchors.bottomMargin = Qt.binding(() => {return Math.max((root.height - iconSize) / 2 - 8, (root.height - iconSize) / 2 / 3)}) + windowIndicator.anchors.bottom = hoverBackground.bottom + windowIndicator.anchors.bottomMargin = 1 return } case Dock.Left: { windowIndicator.anchors.verticalCenter = parent.verticalCenter - windowIndicator.anchors.left = parent.left - windowIndicator.anchors.leftMargin = Qt.binding(() => {return Math.max((root.width - iconSize) / 2 - 8, (root.width - iconSize) / 2 / 3)}) + windowIndicator.anchors.left = hoverBackground.left + windowIndicator.anchors.leftMargin = 1 return } case Dock.Right:{ windowIndicator.anchors.verticalCenter = parent.verticalCenter - windowIndicator.anchors.right = parent.right - windowIndicator.anchors.rightMargin = Qt.binding(() => {return Math.max((root.width - iconSize) / 2 - 8, (root.width - iconSize) / 2 / 3)}) + windowIndicator.anchors.right = hoverBackground.right + windowIndicator.anchors.rightMargin = 1 return } } diff --git a/panels/dock/taskmanager/package/TaskManager.qml b/panels/dock/taskmanager/package/TaskManager.qml index 698c5c168..3360995cb 100644 --- a/panels/dock/taskmanager/package/TaskManager.qml +++ b/panels/dock/taskmanager/package/TaskManager.qml @@ -16,12 +16,9 @@ ContainmentItem { property int dockOrder: 16 property real remainingSpacesForTaskManager: Panel.itemAlignment === Dock.LeftAlignment ? Panel.rootObject.dockLeftSpaceForCenter : Panel.rootObject.dockRemainingSpaceForCenter - readonly property int appItemIconSize: Math.round(Panel.rootObject.dockItemMaxSize * 9 / 14) - readonly property int appItemCellWidth: Math.round(Panel.rootObject.dockItemMaxSize * 0.8) - readonly property int appItemSpacing: Math.max(0, Math.max(10, Math.round(appItemIconSize / 3)) - Math.max(0, appItemCellWidth - appItemIconSize)) - readonly property int appTitleSpacing: Math.max(10, appItemIconSize / 3) + readonly property int appTitleSpacing: Math.max(10, Math.round(Panel.rootObject.dockItemMaxSize * 9 / 14) / 3) property real remainingSpacesForSplitWindow: Panel.rootObject.dockLeftSpaceForCenter - ( - (Panel.rootObject.dockCenterPartCount - 1) * (visualModel.cellWidth + appContainer.spacing) + (Panel.rootObject.dockCenterPartCount) * Panel.rootObject.dockPartSpacing) + (Panel.rootObject.dockCenterPartCount - 1) * (visualModel.cellWidth + appTitleSpacing) + (Panel.rootObject.dockCenterPartCount) * Panel.rootObject.dockPartSpacing) // 用于居中计算的实际应用区域尺寸 property int appContainerWidth: useColumnLayout ? Panel.rootObject.dockSize : appContainer.implicitWidth property int appContainerHeight: useColumnLayout ? appContainer.implicitHeight : Panel.rootObject.dockSize @@ -77,7 +74,7 @@ ContainmentItem { id: appContainer anchors.fill: parent useColumnLayout: taskmanager.useColumnLayout - spacing: taskmanager.appItemSpacing + spacing: 0 remove: Transition { NumberAnimation { properties: "scale,opacity"