Skip to content

feat: add hover background and adjust spacing for dock app items#1435

Merged
deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
wjyrich:fix-bug-343365
Feb 5, 2026
Merged

feat: add hover background and adjust spacing for dock app items#1435
deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
wjyrich:fix-bug-343365

Conversation

@wjyrich
Copy link
Contributor

@wjyrich wjyrich commented Feb 5, 2026

  1. Added AppletItemBackground component to AppItem.qml for visual feedback on hover and active states
  2. Introduced appTitleSpaceing property to control spacing between icon and title
  3. Updated implicitWidth calculation to use appTitleSpaceing instead of fixed value
  4. Added hoverHandler ID to HoverHandler for background control
  5. Added new properties in TaskManager.qml for consistent spacing calculations
  6. Modified appContainer spacing to adjust based on textCalculator state
  7. Updated textcalculator.cpp to include appTitleSpacing in width calculations
  8. Implemented smooth opacity transitions for hover background

Log: Added hover effect and improved spacing for dock application items

Influence:

  1. Test hover effects on dock app items with and without titles
  2. Verify spacing between icons and titles in different display modes
  3. Check background appearance during hover, press, and active states
  4. Test with both light and dark themes
  5. Verify smooth opacity transitions
  6. Test with multiple apps in dock to ensure consistent spacing
  7. Check behavior when dragging app items

feat: 为任务栏应用项添加悬停背景并调整间距

  1. 在 AppItem.qml 中添加 AppletItemBackground 组件,为悬停和活动状态提供 视觉反馈
  2. 引入 appTitleSpaceing 属性以控制图标和标题之间的间距
  3. 更新 implicitWidth 计算以使用 appTitleSpaceing 替代固定值
  4. 为 HoverHandler 添加 hoverHandler ID 以控制背景
  5. 在 TaskManager.qml 中添加新属性以实现一致的间距计算
  6. 修改 appContainer 间距以根据 textCalculator 状态进行调整
  7. 更新 textcalculator.cpp 以在宽度计算中包含 appTitleSpacing
  8. 为悬停背景实现平滑的不透明度过渡效果

Log: 新增任务栏应用项悬停效果并优化间距显示

Influence:

  1. 测试带标题和不带标题的任务栏应用项悬停效果
  2. 验证不同显示模式下图标和标题之间的间距
  3. 检查悬停、按下和活动状态下的背景外观
  4. 测试浅色和深色主题下的显示效果
  5. 验证平滑的不透明度过渡效果
  6. 测试多个应用在任务栏中的间距一致性
  7. 检查拖拽应用项时的行为表现

PMS: TASK-384101

Summary by Sourcery

Add hover background feedback and spacing refinements for dock task manager application items.

New Features:

  • Introduce configurable title spacing for dock app items and expose it from TaskManager to AppItem.
  • Add a hover and active state background for dock app items with theme-aware colors and fade animations.

Enhancements:

  • Unify app item icon size, cell width, and inter-item spacing calculations in TaskManager for consistent layout.
  • Include title spacing in text width calculations to improve dock item sizing with labels.

@sourcery-ai
Copy link

sourcery-ai bot commented Feb 5, 2026

Reviewer's Guide

Adds a hover/active background and refines spacing behavior for dock app items by introducing a reusable background component, centralizing spacing constants in TaskManager, wiring them into AppItem, and updating text width calculations in textcalculator.cpp.

Sequence diagram for new hover background behavior on dock app items

sequenceDiagram
actor User
participant Dock
participant AppItem
participant HoverHandler
participant AppletItemBackground

User->>Dock: move_cursor_over_app_item
Dock->>HoverHandler: set_hovered(true)
HoverHandler->>AppItem: onHoveredChanged()
AppItem->>AppletItemBackground: update_opacity(1.0)
AppletItemBackground->>AppletItemBackground: NumberAnimation_opacity(duration 150ms)

User->>Dock: move_cursor_away
Dock->>HoverHandler: set_hovered(false)
HoverHandler->>AppItem: onHoveredChanged()
AppItem->>AppletItemBackground: update_opacity(0.0)
AppletItemBackground->>AppletItemBackground: NumberAnimation_opacity(duration 150ms)
Loading

Class diagram for updated dock TaskManager, AppItem, and TextCalculator spacing and hover background

classDiagram
class TaskManager {
  int dockOrder
  real remainingSpacesForTaskManager
  int appItemIconSize
  int appItemCellWidth
  int appItemSpacing
  int appTitleSpaceing
  real remainingSpacesForSplitWindow
}

class AppItem {
  int iconSize
  bool enableTitle
  bool titleActive
  int appTitleSpaceing
}

class TextCalculator {
  qreal m_iconSize
  qreal m_itemPadding
  qreal m_cellSize
  void calculateOptimalTextWidth()
}

class AppletItemBackground {
  int hoverHeight
  int nonSplitWidth
  int hoverPadding
  int splitWidth
  bool enabled
  real opacity
}

class HoverHandler {
  bool hovered
}

TaskManager "1" --> "*" AppItem : providesSpacing
AppItem "1" o-- "1" AppletItemBackground : hoverBackground
AppItem "1" --> "1" HoverHandler : hoverHandler
TextCalculator "1" --> "1" TaskManager : mirrorsSpacingLogic
Loading

File-Level Changes

Change Details Files
Introduce AppletItemBackground overlay for dock app items to provide hover/active visual feedback with animated opacity and theme-aware colors.
  • Wrap AppItem Control with an AppletItemBackground background element sized based on icon/title layout and dock metrics
  • Compute dynamic width, height, radius, x positioning, and vertical centering for the hover background depending on whether a title is shown
  • Drive opacity and visibility off HoverHandler hover state and window activity, with a short NumberAnimation for smooth transitions
  • Configure D.ColorSelector states and D.Palette colors for normal, hovered, pressed, and dark variants, plus inside/outside border palettes
panels/dock/taskmanager/package/AppItem.qml
Make icon-title spacing configurable and consistent across QML and C++ sizing logic.
  • Add appTitleSpaceing property to AppItem and use it in implicitWidth calculation instead of a hardcoded constant
  • Define appItemIconSize, appItemCellWidth, appItemSpacing, and appTitleSpaceing properties in TaskManager for centralized spacing computation based on dockItemMaxSize
  • Pass TaskManager.appTitleSpaceing into AppItem so item layout uses the shared spacing value
  • Update textcalculator.cpp to add a computed appTitleSpacing between icon and text when text is present, mirroring the QML spacing rules
panels/dock/taskmanager/package/AppItem.qml
panels/dock/taskmanager/package/TaskManager.qml
panels/dock/taskmanager/textcalculator.cpp
Adjust inter-item spacing in the dock task manager container based on whether titles are enabled.
  • Change appContainer.spacing to depend on textCalculator.enabled, using a slightly larger spacing when titles are shown
  • Use derived appItemSpacing from TaskManager instead of direct Panel.rootObject.itemSpacing
panels/dock/taskmanager/package/TaskManager.qml
Expose hover state via a named HoverHandler for coordination with the new background component.
  • Add an id (hoverHandler) to the existing HoverHandler in AppItem and wire it into the background for hover state and color selection
panels/dock/taskmanager/package/AppItem.qml

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues, and left some high level feedback:

  • The appTitleSpaceing property is misspelled and used in multiple places (QML and C++); consider renaming it consistently to appTitleSpacing to avoid confusion and future mistakes.
  • The title spacing logic is duplicated: TaskManager.qml computes appTitleSpaceing while textcalculator.cpp recomputes a similar value (qMax(10.0, m_iconSize / 3.0)); aligning both to a single shared source of truth would make future layout changes less error-prone.
  • The constants used in spacing (e.g., + 2 in appItemSpacing +2, the 0.8 multiplier, and the / 3 divisor) look like magic numbers; consider extracting them into named properties or adding brief inline comments to clarify their intent.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The `appTitleSpaceing` property is misspelled and used in multiple places (QML and C++); consider renaming it consistently to `appTitleSpacing` to avoid confusion and future mistakes.
- The title spacing logic is duplicated: `TaskManager.qml` computes `appTitleSpaceing` while `textcalculator.cpp` recomputes a similar value (`qMax(10.0, m_iconSize / 3.0)`); aligning both to a single shared source of truth would make future layout changes less error-prone.
- The constants used in spacing (e.g., `+ 2` in `appItemSpacing +2`, the `0.8` multiplier, and the `/ 3` divisor) look like magic numbers; consider extracting them into named properties or adding brief inline comments to clarify their intent.

## Individual Comments

### Comment 1
<location> `panels/dock/taskmanager/package/AppItem.qml:45` </location>
<code_context>
     property bool enableTitle: false
     property bool titleActive: enableTitle && titleLoader.active
-
+    property int appTitleSpaceing: 0
     property var iconGlobalPoint: {
         var a = icon
</code_context>

<issue_to_address>
**suggestion (typo):** The `appTitleSpaceing` property name has a typo that may propagate inconsistently through the codebase.

The property is misspelled as `Spaceing` instead of `Spacing`. If you can still change the API, please rename it to `appTitleSpacing` and update all references to keep naming clear and consistent.

Suggested implementation:

```
    property bool enableTitle: false
    property bool titleActive: enableTitle && titleLoader.active
    property int appTitleSpacing: 0
    property var iconGlobalPoint: {

```

```
        id: appItem
        implicitWidth: root.titleActive ? (iconContainer.width + titleLoader.width + root.appTitleSpacing) : iconContainer.width
        visible: !root.Drag.active // When in dragging, hide app item

```

There may be other usages of `appTitleSpaceing` across the codebase (QML bindings, JS helpers, or tests). A project-wide search/replace from `appTitleSpaceing` to `appTitleSpacing` should be performed to keep the API consistent and avoid runtime binding errors.
</issue_to_address>

### Comment 2
<location> `panels/dock/taskmanager/package/AppItem.qml:82-91` </location>
<code_context>
         anchors.fill: parent
         id: appItem
-        implicitWidth: root.titleActive ? (iconContainer.width + 4 + titleLoader.width) : iconContainer.width
+        implicitWidth: root.titleActive ? (iconContainer.width + titleLoader.width + root.appTitleSpaceing) : iconContainer.width
         visible: !root.Drag.active // When in dragging, hide app item

+        background:AppletItemBackground {
+            id: hoverBackground
+
+            readonly property int hoverHeight: Math.round(root.height * 5 / 6)
+            readonly property int nonSplitWidth: Math.max(hoverHeight - 2, 0)
+            readonly property int hoverPadding: Math.max(Math.round((Panel.rootObject.dockItemMaxSize * 0.8 - root.iconSize) / 2), 0)
+            readonly property int splitWidth: Math.round(icon.width + titleLoader.width + hoverPadding * 3)
+
+            enabled: false
</code_context>

<issue_to_address>
**issue (bug_risk):** Hover background width for split mode doesn’t account for the same title spacing as `implicitWidth`, which may cause visual mismatch.

`implicitWidth` uses `iconContainer.width + titleLoader.width + root.appTitleSpaceing`, while `hoverBackground.splitWidth` uses `icon.width + titleLoader.width + hoverPadding * 3`, omitting `appTitleSpaceing`. This can make the hover background misaligned with the visible/control width. Please derive `splitWidth` from the same components as `implicitWidth` (or centralize the calculation) so the hover state matches the rendered item width.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@wjyrich wjyrich force-pushed the fix-bug-343365 branch 2 times, most recently from f7ae5de to 66a9ef6 Compare February 5, 2026 08:59
1. Added AppletItemBackground component to AppItem.qml for visual
feedback on hover and active states
2. Introduced appTitleSpaceing property to control spacing between icon
and title
3. Updated implicitWidth calculation to use appTitleSpaceing instead of
fixed value
4. Added hoverHandler ID to HoverHandler for background control
5. Added new properties in TaskManager.qml for consistent spacing
calculations
6. Modified appContainer spacing to adjust based on textCalculator state
7. Updated textcalculator.cpp to include appTitleSpacing in width
calculations
8. Implemented smooth opacity transitions for hover background

Log: Added hover effect and improved spacing for dock application items

Influence:
1. Test hover effects on dock app items with and without titles
2. Verify spacing between icons and titles in different display modes
3. Check background appearance during hover, press, and active states
4. Test with both light and dark themes
5. Verify smooth opacity transitions
6. Test with multiple apps in dock to ensure consistent spacing
7. Check behavior when dragging app items

feat: 为任务栏应用项添加悬停背景并调整间距

1. 在 AppItem.qml 中添加 AppletItemBackground 组件,为悬停和活动状态提供
视觉反馈
2. 引入 appTitleSpaceing 属性以控制图标和标题之间的间距
3. 更新 implicitWidth 计算以使用 appTitleSpaceing 替代固定值
4. 为 HoverHandler 添加 hoverHandler ID 以控制背景
5. 在 TaskManager.qml 中添加新属性以实现一致的间距计算
6. 修改 appContainer 间距以根据 textCalculator 状态进行调整
7. 更新 textcalculator.cpp 以在宽度计算中包含 appTitleSpacing
8. 为悬停背景实现平滑的不透明度过渡效果

Log: 新增任务栏应用项悬停效果并优化间距显示

Influence:
1. 测试带标题和不带标题的任务栏应用项悬停效果
2. 验证不同显示模式下图标和标题之间的间距
3. 检查悬停、按下和活动状态下的背景外观
4. 测试浅色和深色主题下的显示效果
5. 验证平滑的不透明度过渡效果
6. 测试多个应用在任务栏中的间距一致性
7. 检查拖拽应用项时的行为表现

PMS: TASK-384101
@deepin-ci-robot
Copy link

deepin pr auto review

这段,我将从语法逻辑、代码质量、代码性能和代码安全四个方面对这段 Git diff 进行审查。

1. 语法逻辑

审查意见:通过。

  • 语法正确:代码符合 QML 语法规范。
  • 逻辑连贯
    • AppItem.qml 中新增了 appTitleSpacing 属性,并在计算 implicitWidth 时将其纳入考量,逻辑自洽。
    • TaskManager.qml 中定义了 appTitleSpacing 的计算逻辑,并将其传递给 AppItem,数据流向清晰。
    • HoverHandler 添加了 id,虽然在这个 diff 中未直接引用,但不影响现有逻辑,属于为后续功能或重构做的准备(见下文代码质量部分)。
  • 计算逻辑appItemSpacing 的计算公式 Math.max(0, Math.max(10, Math.round(appItemIconSize / 3)) - Math.max(0, appItemCellWidth - appItemIconSize)) 看起来是为了根据图标大小和单元格宽度动态调整间距,逻辑意图明确。

2. 代码质量

审查意见:良好,有改进空间。

  • 可维护性与可读性

    • 魔法数字消除:原代码中 implicitWidth 计算里的硬编码 4 被替换为具有语义的属性 appTitleSpacing,这是一个很好的改进,提高了代码的可维护性。
    • 复杂的内联计算TaskManager.qmlappItemSpacing 的计算逻辑非常冗长且直接写在属性定义中。建议将其提取为一个私有函数(例如 calculateAppItemSpacing()),以提高代码的可读性和可测试性。
      • 示例改进
        readonly property int appItemSpacing: calculateAppItemSpacing()
        
        function calculateAppItemSpacing() {
            const baseSpacing = Math.max(10, Math.round(appItemIconSize / 3));
            const widthDiff = Math.max(0, appItemCellWidth - appItemIconSize);
            return Math.max(0, baseSpacing - widthDiff);
        }
    • 属性命名appTitleSpacing 命名清晰,准确表达了其用途。
    • HoverHandler ID:在 HoverHandler 中添加 id: hoverHandler 是个好习惯,方便后续在代码中引用(例如手动触发悬停逻辑或测试),但在本次 diff 中并未体现其用途,建议确认是否为当前提交必须,或者是否属于重构的一部分。
  • 一致性

    • spacing 的赋值从 Panel.rootObject.itemSpacing + visualModel.count % 2 改为 taskmanager.appItemSpacing。这表明间距计算策略发生了变化,从依赖全局面板设置和奇偶数修正,改为基于图标尺寸的动态计算。请确保这种策略变更符合 UI 设计规范,并且在不同的 Dock 模式下(如不同大小、不同对齐方式)表现一致。

3. 代码性能

审查意见:影响较小,需注意绑定频繁更新。

  • 属性绑定:新增的属性(如 appItemIconSize, appItemSpacing 等)都依赖于 Panel.rootObject.dockItemMaxSize
    • 潜在风险:如果 dockItemMaxSize 在运行时频繁变化(例如用户拖拽调整 Dock 大小),这些 readonly property 会频繁重新计算。虽然目前的计算主要是数学运算,开销不大,但如果 appItemSpacing 的计算逻辑变得复杂,可能会造成 UI 渲染压力。
  • 布局计算implicitWidth 的改变会触发 Item 的重新布局。由于这是在 Control 内部,且通常只在状态改变(如标题显示/隐藏)时触发,对性能影响可控。

4. 代码安全

审查意见:安全。

  • 输入验证:使用了 Math.max(0, ...) 确保间距不会为负数,这是一种很好的防御性编程实践,防止因计算错误导致布局崩溃。
  • 数据类型:使用了 Math.round() 确保像素值为整数,避免亚像素渲染导致的模糊或布局对齐问题。
  • 无注入风险:纯 UI 逻辑,不涉及用户输入处理或外部命令执行,无安全风险。

总结与建议

这段代码主要目的是优化 Dock 任务栏中应用图标的间距和标题布局,使其更加动态化和可配置。

建议修改点:

  1. 重构复杂计算:将 TaskManager.qmlappItemSpacing 的复杂计算逻辑提取为单独的函数,提高可读性。
  2. 代码注释:建议为 appItemSpacingappTitleSpacing 的计算公式添加注释,解释其背后的设计意图(例如:为什么是 iconSize / 3?),方便后续维护。
  3. HoverHandler ID:如果 hoverHandler 的 ID 在当前版本中未被使用,建议确认是否应该移除,或者补充相关的使用逻辑,以免造成代码冗余。

总体而言,这是一次质量较高的代码提交,消除了魔法数字,增强了布局的灵活性。

@deepin-ci-robot
Copy link

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: 18202781743, wjyrich

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@wjyrich
Copy link
Contributor Author

wjyrich commented Feb 5, 2026

/forcemerge

@deepin-bot
Copy link

deepin-bot bot commented Feb 5, 2026

This pr force merged! (status: behind)

@deepin-bot deepin-bot bot merged commit 1c3b76a into linuxdeepin:master Feb 5, 2026
8 of 11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants