ToolButton: 深色模式 hover/pressed 毛玻璃效果 + checked 状态样式重构 - #672
Conversation
|
Hi @zqq-dora. Thanks for your PR. 😃 |
|
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
|
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 GuideRedesigns ToolButton interaction and checked-state rendering by centralizing state palettes, adding a platform-gated dark frosted-glass hover treatment with inset highlights/shadows, and replacing the shared accent-fill checked style with a lightweight overlay chip. State diagram for ToolButton renderingstateDiagram-v2
[*] --> Normal
Normal --> Hovered : hover
Hovered --> Pressed : press
Pressed --> Hovered : release
Normal --> Checked : checked
Hovered --> Checked : checked
Pressed --> Checked : checked
Checked --> Normal : unchecked
state Hovered {
[*] --> LightTint
LightTint --> DarkFrostedGlass : dark theme
DarkFrostedGlass --> DarkTintFallback : InWindowBlur.valid is false
}
state Pressed {
[*] --> PressedTint
}
state Checked {
[*] --> OverlayChip
OverlayChip --> AccentContent
OverlayChip --> InsetShadow
}
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 |
|
关于内阴影在 QWidget 端的实现问题，已在 dtkwidget 中新增了 dtkwidget PR: linuxdeepin/dtkwidget#779 关于性能问题，深色 hover 的模糊和内阴影只在鼠标悬停时触发（ 另外，之前的两个问题也已修复：
|
|
这一个pr只需要一个commit， |
| Binding on visible { | ||
| when: D.DTK.hasAnimation | ||
| value: control.hovered && !control.checked | ||
| when: control.checked |
There was a problem hiding this comment.
when: D.DTK.hasAnimation
value: control.hovered && !control.checked
这个逻辑不需要了么？如果直接为true，直接绑定就好了，应该不需要这个Binding，
There was a problem hiding this comment.
这里我已经删掉了。ButtonPanel 默认的 visible 逻辑本身就覆盖了 button.checked，checked 态仍然会正常显示，所以这个额外的 Binding 确实是冗余的。
|
需要修下ci报错的问题， |
00a3b43 to
2f31602
Compare
|
I have read the CLA Document and I hereby sign the CLA. |
|
recheck |
2f31602 to
10704de
Compare
10704de to
22126b7
Compare
|
recheck |
|
[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. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="qt6/src/qml/ToolButton.qml" line_range="200" />
<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):** The checked-chip shadow reads `control.D.ColorSelector.checkedShadow`, but `checkedShadow` is declared on `control`, not exposed by the `D.ColorSelector` attached object. QML fails to resolve this non-existent attached property when loading `ToolButton.qml`, so ToolButton creation/import fails.
**Triggers:** When a checked ToolButton is loaded and the binding is evaluated.
**Suggested fix:** Use the declared `control.checkedShadow` palette and explicitly select its state, or expose `checkedShadow` as a supported `ColorSelector` property.
</issue_to_address>| visible: control.checked | ||
| z: D.DTK.AboveOrder | ||
| cornerRadius: buttonPanel.radius | ||
| shadowColor: control.D.ColorSelector.checkedShadow |
There was a problem hiding this comment.
issue (bug_risk): The checked-chip shadow reads control.D.ColorSelector.checkedShadow, but checkedShadow is declared on control, not exposed by the D.ColorSelector attached object. QML fails to resolve this non-existent attached property when loading ToolButton.qml, so ToolButton creation/import fails.
Triggers: When a checked ToolButton is loaded and the binding is evaluated.
Suggested fix: Use the declared control.checkedShadow palette and explicitly select its state, or expose checkedShadow as a supported ColorSelector property.
- 深色 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
22126b7 to
4ffe48d
Compare
deepin pr auto review🤖 AI 代码审查报告总体评分： 📊 总体评价
🔍 详细分析1. 语法逻辑 ✅评价： 优秀 ✅ 通过 潜在问题： 建议： 语法正确，逻辑清晰。QML 属性声明、Binding 元素、组件嵌套均符合规范。__darkHover 条件判断逻辑正确，通过 readonly property 组合多个条件判断（非 checked + 深色主题 + HoveredState），确保毛玻璃效果仅在正确的场景下触发。 2. 代码质量 ✅评价： 优秀 ✅ 通过 潜在问题：
建议： 代码结构清晰，注释完整。建议考虑简化 checkedText 调色板的冗余状态定义，如果 DTK Palette API 支持通配状态或默认值继承机制，可减少重复代码。 3. 代码性能 ✅评价： 优秀 ✅ 通过 潜在问题： 建议： 性能良好，资源使用合理。InWindowBlur 使用 offscreen: true 优化渲染性能，且仅在深色模式 hover 且非 checked 状态下激活（通过 __darkHover 条件门控）。BoxInsetShadow 元素轻量级，不会造成性能瓶颈。 4. 代码安全 🔒评价： 优秀 ✅ 通过
安全漏洞详情： 建议： 存在0个安全漏洞。本次修改为纯 QML UI 样式代码，不涉及用户输入处理、网络操作、文件系统访问、命令执行等安全敏感操作，无安全风险。 💡 改进建议代码示例// FlowStyle.qml - checkedText 可简化为单一状态
// 当前所有 6 个状态均为相同值，可考虑简化
property D.Palette checkedText: D.Palette {
normal: D.DTK.makeColor(D.Color.Highlight)
normalDark: D.DTK.makeColor(D.Color.Highlight)
hovered: D.DTK.makeColor(D.Color.Highlight)
hoveredDark: D.DTK.makeColor(D.Color.Highlight)
pressed: D.DTK.makeColor(D.Color.Highlight)
pressedDark: D.DTK.makeColor(D.Color.Highlight)
}
// 如果 DTK Palette 支持通配状态，可简化为：
// property D.Palette checkedText: D.DTK.makeColor(D.Color.Highlight)本报告由 AI 代码审查工具自动生成 |
4 participants
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
Redesign ToolButton state styling to provide polished dark-theme hover feedback and a lightweight checked appearance.
New Features:
Enhancements: