Skip to content

feat: add hover background and adjust window indicator position#1437

Open
wjyrich wants to merge 1 commit intolinuxdeepin:masterfrom
wjyrich:fix-bug-345931
Open

feat: add hover background and adjust window indicator position#1437
wjyrich wants to merge 1 commit intolinuxdeepin:masterfrom
wjyrich:fix-bug-345931

Conversation

@wjyrich
Copy link
Contributor

@wjyrich wjyrich commented Feb 6, 2026

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

Summary by Sourcery

Improve dock app item visual feedback with a dynamic hover background and align window indicators with the new background layout.

New Features:

  • Add a dedicated hover/active background component to dock app items that adapts to icon/title configurations and supports theme-aware styling.

Enhancements:

  • Adjust window indicator positioning to align with the hover background dimensions for consistent spacing across dock edges.
  • Set task manager app item spacing to zero to better integrate the new background layout.

@deepin-ci-robot
Copy link

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: 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

@sourcery-ai
Copy link

sourcery-ai bot commented Feb 6, 2026

Reviewer's Guide

Introduces an AppletItemBackground hover/active background for dock app items, aligns the window indicator margins to this new background size across all dock edges, and removes inter-item spacing in the TaskManager layout to accommodate the new visual design.

Sequence diagram for hover-triggered AppletItemBackground behavior

sequenceDiagram
  actor User
  participant HoverHandler as hoverHandler
  participant AppItem as appItem
  participant AppletItemBackground as hoverBackground
  participant WindowIndicator as windowIndicator

  User->>HoverHandler: move_pointer_over_app_item
  HoverHandler->>AppItem: hovered_changed_true
  AppItem->>hoverBackground: set_hovered_true
  hoverBackground->>hoverBackground: compute_width_height_based_on_title_and_icon
  hoverBackground->>hoverBackground: set_opacity_1_with_NumberAnimation_150ms
  hoverBackground->>hoverBackground: update_palette_for_hovered_state

  User->>HoverHandler: move_pointer_away
  HoverHandler->>AppItem: hovered_changed_false
  AppItem->>hoverBackground: set_hovered_false
  hoverBackground->>hoverBackground: set_opacity_0_with_NumberAnimation_150ms

  AppItem->>windowIndicator: update_margins_using_hoverBackground_nonSplitHeight_and_nonSplitWidth
  windowIndicator->>windowIndicator: align_to_dock_edge_with_consistent_spacing
Loading

Class diagram for AppItem, AppletItemBackground, WindowIndicator, and TaskManager changes

classDiagram
  class AppItem {
    int iconSize
    bool titleActive
    bool active
    var windows
    AppletItemBackground hoverBackground
    Item iconContainer
    void updateWindowIndicatorAnchors(DockEdge edge)
  }

  class AppletItemBackground {
    int verticalSpacing
    int horizontalSpacing
    int nonSplitHeight
    int hoverPadding
    int splitWidth
    int nonSplitWidth
    bool enabled
    int z
    int width
    int height
    int radius
    real opacity
    bool visible
    bool isActive
    DPalette backgroundColor
    DPalette insideBorderColor
    DPalette outsideBorderColor
    void animateOpacity(NumberAnimation animation)
  }

  class WindowIndicator {
    AnchorGroup anchors
    void setTopMargin(int margin)
    void setBottomMargin(int margin)
    void setLeftMargin(int margin)
    void setRightMargin(int margin)
  }

  class TaskManager {
    bool useColumnLayout
    int appItemSpacing
  }

  class AppContainer {
    bool useColumnLayout
    int spacing
  }

  AppItem --> AppletItemBackground : owns_hoverBackground
  AppItem --> WindowIndicator : positions
  AppItem --> AppContainer : contained_in
  TaskManager --> AppContainer : configures_useColumnLayout_and_spacing

  class DPalette {
    color normal_common
    color normal_crystal
    color normalDark_crystal
    color hovered_crystal
    color hoveredDark_crystal
    color pressed_crystal
    color pressedDark_crystal
  }
Loading

File-Level Changes

Change Details Files
Add AppletItemBackground hover/active background behind each app item with theme-aware colors and animated opacity.
  • Wrap AppItem content with an AppletItemBackground assigned to the delegate's background property.
  • Compute dynamic background dimensions based on icon size, title visibility, and dock item maximum size.
  • Drive visibility and opacity from hover and active state, with a short NumberAnimation for opacity transitions.
  • Configure light/dark theme palettes for background and border colors, and bind hovered/pressed states to existing handlers.
panels/dock/taskmanager/package/AppItem.qml
Retarget window indicator positioning to the new hover background dimensions instead of icon metrics.
  • Replace top/bottom indicator margins with bindings based on the non-split hover background height.
  • Replace left/right indicator margins with bindings based on the non-split hover background width.
  • Keep edge-specific anchoring (top, bottom, left, right) but ensure consistent spacing around the new background.
panels/dock/taskmanager/package/AppItem.qml
Tighten TaskManager layout by eliminating inter-item spacing.
  • Set app container spacing to zero, overriding the previous taskmanager.appItemSpacing value so items visually align with the new background sizing.
panels/dock/taskmanager/package/TaskManager.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 1 issue, and left some high level feedback:

  • The AppletItemBackground only has anchors.verticalCenter set and its x binding is commented out, so it will default to x: 0; consider restoring or simplifying the horizontal positioning binding so the background is centered/aligned with the icon as intended.
  • The windowIndicator margin bindings now duplicate similar expressions for each dock edge using hoverBackground.nonSplitHeight/nonSplitWidth; consider extracting this into a small helper or shared binding to avoid subtle inconsistencies between edges when tweaking the layout in the future.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The `AppletItemBackground` only has `anchors.verticalCenter` set and its `x` binding is commented out, so it will default to `x: 0`; consider restoring or simplifying the horizontal positioning binding so the background is centered/aligned with the icon as intended.
- The `windowIndicator` margin bindings now duplicate similar expressions for each dock edge using `hoverBackground.nonSplitHeight/nonSplitWidth`; consider extracting this into a small helper or shared binding to avoid subtle inconsistencies between edges when tweaking the layout in the future.

## Individual Comments

### Comment 1
<location> `panels/dock/taskmanager/package/AppItem.qml:145-151` </location>
<code_context>
+                    common: ("transparent")
+                    crystal: Qt.rgba(1.0, 1.0, 1.0, 0.20)
+                }
+                normalDark: {
+                    crystal: Qt.rgba(1.0, 1.0, 1.0, 0.05)
+                }
+                hovered: normal
+                hoveredDark: normalDark
+                pressed: hovered
+                pressedDark: normalDark
+            }
+            outsideBorderColor: D.Palette {
</code_context>

<issue_to_address>
**issue (bug_risk):** The `normalDark:` syntax here likely breaks QML object syntax for the palette group.

Other `D.Palette` groups use `stateName { ... }` without a colon. `normalDark: { ... }` is not valid QML object syntax and may fail to parse or be ignored, which also makes `hoveredDark: normalDark` and `pressedDark: normalDark` unreliable. This should be `normalDark { ... }` to match the other palette groups and ensure these bindings work correctly.
</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.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This pull request adds visual feedback improvements to dock app items by introducing a hover/active background component and adjusting window indicator positioning to align with the new background layout.

Changes:

  • Added AppletItemBackground component to AppItem with dynamic sizing based on title visibility and smooth opacity transitions
  • Updated window indicator positioning formulas to align with hover background dimensions instead of icon size
  • Modified TaskManager spacing from calculated value to zero to accommodate the new background-based layout

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File Description
panels/dock/taskmanager/package/TaskManager.qml Changed app container spacing from taskmanager.appItemSpacing to 0 to accommodate new background layout
panels/dock/taskmanager/package/AppItem.qml Added AppletItemBackground component with dynamic sizing and updated window indicator positioning to align with background dimensions

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

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
@deepin-ci-robot
Copy link

deepin pr auto review

这份代码变更主要针对 Dock(任务栏)的应用图标项(AppItem)进行了视觉和布局逻辑的重构,重点在于引入了 AppletItemBackground 作为悬停背景,并调整了图标、标题和指示器的布局计算方式。

以下是从语法逻辑代码质量代码性能代码安全四个方面的详细审查意见:

1. 语法逻辑

  • 布局逻辑冲突风险

    • AppItem.qml 中,implicitWidth 的计算逻辑被修改为:
      implicitWidth: root.titleActive ? (iconContainer.width + titleLoader.width + root.appTitleSpacing) : iconContainer.width + root.appTitleSpacing
      这意味着即使在非标题激活(!titleActive)状态下,宽度也会增加 root.appTitleSpacing
    • 然而,iconContainerwidth 被硬编码为 root.iconSize
    • AppletItemBackground (即 hoverBackground) 的宽度逻辑是:
      width: root.titleActive ? splitWidth : nonSplitWidth
      其中 nonSplitWidth 包含了 horizontalSpacing
    • 问题implicitWidth 决定了父容器分配给该 Item 的空间,而 hoverBackground 是居中(anchors.centerIn: parent)的。如果 implicitWidth 的计算结果与 hoverBackground 的期望宽度不一致,或者与 iconContainer 的对齐逻辑冲突,可能会导致布局抖动或留白不均。建议确保 implicitWidth 的计算能容纳下背景宽度的最大值。
  • WindowIndicator 的锚定逻辑变更

    • 代码将 windowIndicator 的锚点从 parent 改为了 hoverBackground,并将 margin 设置为固定值 1
    • 潜在问题:原来的逻辑使用了复杂的 Qt.binding 计算 margin,新逻辑简化为 1。这依赖于 hoverBackground 的尺寸和位置精确包裹了视觉区域。如果 hoverBackgroundradiuspadding 设置不当,指示器可能会被遮挡或位置显得突兀。需要确保视觉上指示器紧贴背景边缘且不被圆角裁剪。

2. 代码质量

  • 魔法数字

    • hoverBackground 中定义了大量基于 root.iconSize 的计算属性,如 Math.round(root.iconSize / 8)
    • 虽然使用了 readonly property 进行了封装,但这些比例系数(如 1/8, 0.8, 1/5)散落在代码中。如果未来需要调整设计规范(如调整背景与图标的间距),需要多处修改。
    • 建议:将此类设计常量提取到全局配置文件或顶层的 QtObject 中,统一管理。
  • 状态管理

    • iconContainer 使用了 StateAnchorChanges 来处理 titleActive 状态切换。
    • 优点:这种方式逻辑清晰,将不同状态下的属性集中管理。
    • 注意AnchorChanges 是一种较重的状态切换机制。虽然在这里性能影响可能不大,但需确保状态切换不会引起不必要的布局重排。
  • TaskManager 中的变量清理

    • TaskManager.qml 删除了 appItemIconSize, appItemCellWidth, appItemSpacing 等属性。
    • 意见:这是好的做法,减少了冗余计算。但需要确认这些被删除的属性是否在其他文件(如其他 QML 组件或 JS 文件)中有引用,否则会导致运行时错误。

3. 代码性能

  • 频繁的数学计算

    • hoverBackground 的定义中,多个 readonly property 依赖于 root.iconSizePanel.rootObject.dockItemMaxSize。每当这些根属性变化时,所有的计算属性都会重新求值。
    • 影响:考虑到这些是属性绑定,在 Dock 调整大小或配置更改时会有一定的计算开销。不过,由于 Dock 尺寸变化不是高频事件(通常只在拖动调整大小时发生),这部分性能开销是可以接受的。
  • 绑定循环风险

    • implicitWidth 依赖于 titleLoader.width,而 titleLoader 的宽度可能又受限于父容器(即 AppItem)的宽度。
    • 建议:务必测试在标题文本非常长的情况下,是否会出现宽度计算的死循环或布局崩溃。通常需要给 titleLoader 设置一个 maximumWidth 或使用 Layout.preferredWidth 配合约束。

4. 代码安全

  • 除零风险

    • 代码中包含除法运算,例如 root.iconSize / 8
    • 审查root.iconSize 作为 UI 尺寸属性,理论上不应为 0 或负数。但在初始化阶段或极端配置错误下,如果出现 0,会导致 NaNInfinity,进而破坏布局。
    • 建议:虽然通常由框架保证,但在关键计算处增加 Math.max(1, root.iconSize) 防御性编程会更稳健。
  • 属性访问的安全性

    • 代码大量访问 Panel.rootObject.dockItemMaxSize
    • 风险:这种深层属性链访问非常脆弱。如果 PanelrootObject 为 null,或者 dockItemMaxSize 未定义,程序将报错。
    • 建议:确保在组件加载时 Panel 及其 rootObject 已经完全初始化,或者在访问前进行 null 检查(尽管在 QML 中这可能会降低代码可读性,但在关键路径上是有必要的)。

总结与改进建议

  1. 统一宽度计算逻辑:建议将 implicitWidth 的计算逻辑与 hoverBackgroundwidth 计算逻辑对齐,确保背景能完整填充内容区域,避免边缘溢出或留白。
  2. 防御性编程:对除数和深层属性访问进行必要的非空和非零检查,或者使用 ?. (可选链) 操作符(如果 QML 环境支持)。
  3. 常量提取:将 0.8, 1/8, 1/5 等视觉比例常数提取为命名常量,提高代码可维护性。
  4. 测试边界情况:重点测试 titleLoader 文本过长、图标尺寸极小或极大时的布局表现,确保没有绑定循环或 UI 错乱。

总体而言,这次修改使得布局结构更加模块化(引入了独立的背景组件),但需要仔细校对尺寸计算的一致性,以保证视觉效果的稳定性。

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
Copy link
Contributor

Choose a reason for hiding this comment

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

把textcalcator这个计算方式也同步一下呀,

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