ToolButton: 深色模式 hover/pressed 毛玻璃效果 + checked 状态样式重构 - #672
Open
zqq-dora wants to merge 1 commit into
Open
Conversation
Contributor
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: zqq-dora The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Contributor
|
Hi @zqq-dora. Thanks for your PR. 😃 |
Contributor
|
CLA Assistant Lite bot: You can retrigger this bot by commenting recheck in this Pull Request |
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 Once the patch is verified, the new status will be reflected by the I understand the commands that are listed here. DetailsInstructions 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. |
Reviewer's Guide本 PR 通过新增 ToolButton 专用主题调色板和状态绑定，彻底分离 checked 样式与通用 Button accent 填充，并利用平台能力门控的 InWindowBlur、圆角裁剪及内阴影实现深色 hover 毛玻璃效果；同时扩展 InWindowBlur 的 saturation 配置。 Sequence diagram for ToolButton state-dependent overlayssequenceDiagram
participant User
participant ToolButton
participant ColorSelector
participant ButtonPanel
participant InWindowBlur
participant ItemViewport
participant BoxInsetShadow
User->>ToolButton: hover or press
ToolButton->>ColorSelector: controlState
ColorSelector-->>ButtonPanel: HoveredState or PressedState
alt dark theme hover
ButtonPanel->>InWindowBlur: radius and saturation
InWindowBlur->>ItemViewport: clip hoverBlur.content to radius
InWindowBlur-->>ButtonPanel: blur when valid
ButtonPanel->>BoxInsetShadow: show top highlight and bottom shadow
else non-checked hover or press
ButtonPanel-->>ToolButton: apply hoverBackground
end
alt checked
ToolButton-->>ButtonPanel: apply checkedBackground
ToolButton-->>ToolButton: apply checkedText
ButtonPanel->>BoxInsetShadow: apply checkedShadow
end
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 3 issues
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="qt6/src/qml/FlowStyle.qml" line_range="822-823" />
<code_context>
// the highlight color of main menu item, when submenu is opened.
</code_context>
<issue_to_address>
**issue (bug_risk):** FlowStyle.qml ends with an incomplete `property D.Palette submenuOpenedItemHigh` declaration after deleting the remainder of the style object. QML parsing fails, so the style module cannot be loaded and every component importing `DS.Style` fails to instantiate.
**Suggested fix:** Restore the deleted FlowStyle contents and complete the `submenuOpenedItemHighlight` declaration and closing braces.
</issue_to_address>
### Comment 2
<location path="qt6/src/qml/FlowStyle.qml" line_range="822-823" />
<code_context>
// the highlight color of main menu item, when submenu is opened.
</code_context>
<issue_to_address>
**issue (broader_impact):** The change removes the existing style objects after the toolButton section, including `highlightPanel`, `behindWindowBlur`, `arrowRectangleBlur`, `itemDelegate`, `scrollBar`, `progressBar`, `titleBar`, and related properties that remain referenced by QML components. Those references resolve to undefined style objects at runtime even if the truncated FlowStyle declaration is repaired.
**Triggers:** When any component using one of the removed DS.Style properties is loaded.
**Suggested fix:** Keep all unrelated FlowStyle properties and only add the new toolButton properties.
</issue_to_address>
### Comment 3
<location path="qt6/src/qml/ToolButton.qml" line_range="205" />
<code_context>
+ visible: control.checked
+ z: D.DTK.AboveOrder
+ cornerRadius: buttonPanel.radius
+ shadowColor: control.D.ColorSelector.checkedShadow
+ shadowOffsetX: 0
+ shadowOffsetY: -1
</code_context>
<issue_to_address>
**issue (bug_risk):** `D.ColorSelector` exposes palette colors using the `...Color` naming convention, but the checked shadow is read as `control.D.ColorSelector.checkedShadow`. That attached property is undefined, so the checked chip's `shadowColor` does not receive the configured palette color and can produce an invalid binding/runtime warning.
**Triggers:** When a ToolButton is checked and the checked shadow is evaluated.
**Suggested fix:** Use the ColorSelector-exposed checked shadow color property, such as `control.D.ColorSelector.checkedShadowColor`, or bind directly to the `checkedShadow` palette through a supported selector API.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
/ok-to-test |
18202781743
reviewed
Sep 3, 2026
Author
|
关于内阴影在 QWidget 端的实现问题，已在 dtkwidget 中新增了 dtkwidget PR: linuxdeepin/dtkwidget#779 关于性能问题，深色 hover 的模糊和内阴影只在鼠标悬停时触发（ 另外，之前的两个问题也已修复：
|
Contributor
|
这一个pr只需要一个commit， |
Contributor
deepin pr auto review🤖 AI 代码审查报告总体评分： 📊 总体评价
📝 代码目的分析本 PR 旨在重新设计 ToolButton 的深色模式 hover/pressed 样式，并重构 checked 状态的独立样式：
代码实现与上述目的完全一致，设计思路清晰，实现合理。 🔍 详细分析1. 语法逻辑（25/25）✓ "语法正确，逻辑清晰"
潜在问题： 分析详情：
2. 代码质量（24/25）✓ "代码结构清晰，注释完整"
潜在问题：
建议：
分析详情：
3. 代码性能（19/20）✓ "性能良好，资源使用合理"
潜在问题：
建议：
分析详情：
4. 代码安全（30/30）✓ "存在0个安全漏洞"
漏洞对比统计：新增漏洞 0 个，减少漏洞 0 个，持平 0 个 安全漏洞详情： 分析详情：
📋 修改文件清单
💡 改进建议
本报告由 AI 代码审查工具自动生成 |
18202781743
reviewed
Sep 3, 2026
| Binding on visible { | ||
| when: D.DTK.hasAnimation | ||
| value: control.hovered && !control.checked | ||
| when: control.checked |
Contributor
There was a problem hiding this comment.
when: D.DTK.hasAnimation
value: control.hovered && !control.checked
这个逻辑不需要了么？如果直接为true，直接绑定就好了，应该不需要这个Binding，
Author
There was a problem hiding this comment.
这里我已经删掉了。ButtonPanel 默认的 visible 逻辑本身就覆盖了 button.checked，checked 态仍然会正常显示，所以这个额外的 Binding 确实是冗余的。
Contributor
|
需要修下ci报错的问题， |
- 深色 hover: backdrop blur(radius=15, saturation=100%) + rgba(20,20,20,0.2) tint + 白色顶部/黑色底部内阴影 - 深色 pressed: rgba(0,0,0,0.15) 纯色 tint - checked 状态: 独立 overlay chip 样式(checkedBackground/checkedText/checkedShadow) - InWindowBlur: 新增 saturation 属性别名 - FlowStyle toolButton: 新增 radius/checkedBackground/checkedText/checkedShadow/background - textColor 改为统一使用 toolButton.checkedText，不再按 hasAnimation 切换旧 checkedButton 文本样式 - 移除冗余的 checked visible Binding，复用 ButtonPanel 默认可见性 - 更新 ToolButton SPDX 版权年份到 2026
zqq-dora
force-pushed
the
feat/toolbutton-dark-hover-pressed
branch
from
September 4, 2026 02:43
00a3b43 to
2f31602
Compare
Author
|
I have read the CLA Document and I hereby sign the CLA. |
Author
|
recheck |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ToolButton: 深色模式 hover/pressed 毛玻璃效果 + checked 状态样式重构
背景
ToolButton 在深色模式下的 hover/pressed 样式效果不理想：hover 时使用的是浅灰色 tint（rgba(1,1,1,0.15)），缺乏层次感和质感；checked 状态复用了 Button 的 accent 填充样式，视觉上与 ToolButton 的轻量风格不匹配。
本 PR 重新设计了 ToolButton 的深色模式 hover/pressed 样式，并重构了 checked 状态的独立样式。
修改内容
1. 深色模式 hover 效果（毛玻璃）
深色模式 hover 新增了背景模糊（backdrop blur）效果，模拟设计稿中的磨砂玻璃质感：
radius: 15，saturation: 100%rgba(20, 20, 20, 0.2)半透明深色 tintrgba(255, 255, 255, 0.1)（高光）rgba(0, 0, 0, 0.5)（暗角）6px模糊效果通过
D.InWindowBlur实现，使用D.ItemViewport裁剪到圆角形状。模糊功能受平台限制（valid属性门控），在不支持的平台仅显示 tint + 内阴影。2. 深色模式 pressed 效果
深色模式 pressed 使用纯色 tint
rgba(0, 0, 0, 0.15)，不叠加模糊和内阴影，保持简洁。3. checked 状态样式重构
checked 状态不再复用 Button 的 accent 填充样式，改为独立的 overlay chip 样式：
rgba(0, 0, 0, 0.1~0.15)，深色模式rgba(0, 0, 0, 0.3~0.35)rgba(0, 0, 0, 0.1)，深色rgba(0, 0, 0, 0.5)4. InWindowBlur 组件增强
InWindowBlur.qml新增saturation属性别名，暴露 MultiEffect 的饱和度参数，使 ToolButton 的深色 hover 可以设置 100% 饱和度。涉及文件
qt6/src/qml/overridable/InWindowBlur.qmlsaturation属性别名qt6/src/qml/FlowStyle.qmltoolButtonQtObject 新增radius、checkedBackground、checkedText、checkedShadow、hoverBackground属性qt6/src/qml/ToolButton.qmltextColor、background的 Binding 逻辑，新增深色 hover 毛玻璃和内阴影、checked 状态独立样式已知限制
backgroundPanel动画覆盖层，与本 PR 的 ToolButton hover 样式独立，不在本次修改范围内Summary by Sourcery
Improve ToolButton state styling across themes with dark-mode frosted hover effects and a dedicated checked appearance.
New Features:
Bug Fixes:
Enhancements: