Skip to content

fix(MenuItem): show gray background for parent item when submenu is open - #734

Merged
18202781743 merged 1 commit into
linuxdeepin:v25-flowstylefrom
zqq-dora:fix-menu-submenu-gray-highlight
Oct 23, 2026
Merged

18202781743 merged 1 commit into
linuxdeepin:v25-flowstylefrom
zqq-dora:fix-menu-submenu-gray-highlight

Conversation

@zqq-dora

@zqq-dora zqq-dora commented Oct 22, 2026 •

Copy link
Copy Markdown

Background

When a menu item has a submenu and the user moves the mouse into the submenu, the parent item was showing the active highlight color (HighlightPanel) instead of a subtle gray background. This was because highlighted was bound to hovered || (subMenu && subMenu.visible), keeping the item highlighted as long as the submenu was visible — regardless of whether the mouse was still on the parent item.

Additionally, the subMenuOpenedBackground palette only defined a normal (light mode) value, leaving dark mode to fall back to the same black 15% overlay that is nearly invisible on a dark menu background. A separate submenuOpenedItemHighlight palette with both light and dark values already existed in FlowStyle.qml but was unused.

Changes

MenuItem.qml

  • Change highlighted binding from enabled && (hovered || (subMenu && subMenu.visible)) to enabled && hovered, so the item is only highlighted while actually hovered.
  • Change subMenuBackgroundColor from DS.Style.menu.subMenuOpenedBackground to DS.Style.menu.submenuOpenedItemHighlight, which has both light (rgba(0, 0, 0, 0.15)) and dark (rgba(1, 1, 1, 0.2)) values defined.
  • Restore the dual-Loader background pattern:
    • First Loader: renders a gray Rectangle when !hovered && subMenu && subMenu.visible.
    • Second Loader: renders HighlightPanel (active color) when down || highlighted.

Effect

  • Hovering a parent menu item: shows active highlight color (HighlightPanel), same as before.
  • Moving mouse into the submenu: parent item switches to gray background instead of staying active-highlighted.
  • Dark mode: gray background is now visible (white 20% overlay) instead of falling back to an invisible black 15%.

Only the Qt6 (qt6/src/qml/) implementation is changed; Qt5 is left unchanged as v25 ships Qt6 only.


背景

当菜单项有子菜单时,用户将鼠标移入子菜单后,一级菜单项仍然显示活动高亮色(HighlightPanel),而非灰色背景。原因是 highlighted 绑定为 hovered || (subMenu && subMenu.visible),子菜单可见期间一级菜单始终处于高亮状态——无论鼠标是否还在一级菜单上。

此外,subMenuOpenedBackground 调色板只定义了浅色模式(normal)的值,深色模式回退到同样的黑色 15% 叠加,在深色菜单背景上几乎不可见。FlowStyle.qml 中已存在 submenuOpenedItemHighlight 调色板,同时定义了浅色和深色值,但一直未被使用。

改动

MenuItem.qml

  • 将 highlighted 绑定从 enabled && (hovered || (subMenu && subMenu.visible)) 改为 enabled && hovered,仅在鼠标 hover 时高亮。
  • 将 subMenuBackgroundColor 从 DS.Style.menu.subMenuOpenedBackground 改为 DS.Style.menu.submenuOpenedItemHighlight,后者同时定义了浅色(rgba(0, 0, 0, 0.15))和深色(rgba(1, 1, 1, 0.2))值。
  • 恢复双 Loader 背景结构:
    • 第一个 Loader:!hovered && subMenu && subMenu.visible 时渲染灰色 Rectangle。
    • 第二个 Loader:down || highlighted 时渲染 HighlightPanel(活动色)。

效果

  • hover 在一级菜单上:显示活动高亮色(HighlightPanel),与之前一致。
  • 鼠标移入子菜单:一级菜单切换为灰色背景,不再保持活动高亮色。
  • 深色模式:灰色背景可见(白色 20% 叠加),不再回退到不可见的黑色 15%。

仅修改 Qt6(qt6/src/qml/)实现,Qt5 保持不变,v25 仅使用 Qt6。

Summary by Sourcery

Fix Qt6 menu item highlighting so parent items visibly transition to the appropriate submenu-open background when the pointer enters a submenu.

Bug Fixes:

  • Correct parent menu item styling when its submenu is open by showing a subtle background instead of retaining the active highlight.

Enhancements:

  • Use light- and dark-mode submenu-open styling and preserve active highlighting only while the item is hovered or pressed.

@sourcery-ai

sourcery-ai Bot commented Oct 22, 2026

Copy link
Copy Markdown

Reviewer's Guide

The Qt6 menu implementation now distinguishes parent hover highlighting from the submenu-open state: hovered or pressed items use the active HighlightPanel, while a parent whose submenu is open but no longer hovered uses a theme-aware gray overlay. The PR also includes unrelated-looking Qt6 menu geometry/separator palette adjustments and Bloom checkbox asset updates that should be reviewed separately.

State diagram for Qt6 menu item and submenu highlighting

stateDiagram-v2
    [*] --> ParentIdle
    ParentIdle --> ParentHovered: hovered
    ParentHovered --> ParentIdle: !hovered
    ParentHovered --> SubmenuOpenHovered: subMenu.visible
    SubmenuOpenHovered --> SubmenuOpenParent: !hovered
    SubmenuOpenParent --> SubmenuOpenHovered: hovered
    SubmenuOpenParent --> ParentIdle: !subMenu.visible

    ParentHovered: HighlightPanel active color
    SubmenuOpenHovered: HighlightPanel active color
    SubmenuOpenParent: theme-aware gray overlay
Loading

File-Level Changes

Change Details Files
Separate parent-item hover highlighting from the visual state shown while its submenu remains open.
  • Restrict highlighted to enabled items that are currently hovered.
  • Render the submenu-open gray background only when the parent is not hovered.
  • Keep the active HighlightPanel for pressed or hovered states.
qt6/src/qml/MenuItem.qml
Use palette values that provide visible submenu-open styling in both light and dark themes.
  • Switch the submenu-open background to submenuOpenedItemHighlight, including its dark-mode value.
  • Add a dark-mode separator line color.
qt6/src/qml/MenuItem.qml
qt6/src/qml/FlowStyle.qml
Align Qt6 menu geometry and spacing with the updated menu styling.
  • Adjust menu and item padding, item height, and separator spacing.
  • Add menu-item padding and update the copyright range.
qt6/src/qml/FlowStyle.qml
qt6/src/qml/MenuItem.qml
Update Bloom checkbox icon assets.
  • Replace the checked, focus, mixed, and unchecked checkbox DCI binaries.
src/icons/bloom/checkbox_checked.dci
src/icons/bloom/checkbox_focus.dci
src/icons/bloom/checkbox_mix.dci
src/icons/bloom/checkbox_unchecked.dci

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

@deepin-ci-robot

Copy link
Copy Markdown
Contributor

Hi @zqq-dora. Thanks for your PR.

I'm waiting for a linuxdeepin member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

… is open

Log: fix parent menu item showing active highlight color instead of gray
when submenu is open and mouse is not hovering the parent item
Influence: parent menu items with open submenus now display gray
background instead of active highlight color

fix(MenuItem): 修复子菜单打开时一级菜单显示活动色而非灰色的问题

Log: 修复子菜单打开后鼠标移入子菜单时一级菜单仍显示活动高亮色的问题
Influence: 子菜单打开时一级菜单在未 hover 状态下显示灰色背景,而非活动高亮色
@zqq-dora
zqq-dora force-pushed the fix-menu-submenu-gray-highlight branch from 9f9003b to 60cb738 Compare October 22, 2026 09:01
@deepin-ci-robot

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: 18202781743, zqq-dora

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

@18202781743
18202781743 merged commit 54b1243 into linuxdeepin:v25-flowstyle Oct 23, 2026
18 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants