ToolButton: 深色模式 hover/pressed 毛玻璃效果 + checked 状态样式重构 - #672
Open
zqq-dora wants to merge 1 commit into
Open
Conversation
- 深色 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/hoverBackground - 简化 textColor 冗余 if/else 死代码
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: |
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.
Comment on lines
822
to
+823
| // the highlight color of main menu item, when submenu is opened. | ||
| property D.Palette submenuOpenedItemHighlight: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.15) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.2) | ||
| } | ||
|
|
||
| property D.Palette itemHighlightShadow: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.2) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.1) | ||
| } | ||
|
|
||
| property D.Palette itemText: D.Palette { | ||
| normal: ("black") | ||
| normalDark: ("white") | ||
| } | ||
|
|
||
| property D.Palette separatorText: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.5) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.4) | ||
| } | ||
| } | ||
|
|
||
| // Panel | ||
| property QtObject highlightPanel: QtObject { | ||
| property int width: 180 | ||
| property int height: 30 | ||
| property int radius: 8 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight) | ||
| normalDark: D.DTK.makeColor(D.Color.Highlight) | ||
| hovered: D.DTK.makeColor(D.Color.Highlight).lightness(+10) | ||
| hoveredDark: D.DTK.makeColor(D.Color.Highlight).lightness(+10) | ||
| } | ||
| property D.Palette dropShadow: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).lightness(+20).opacity(-80) | ||
| normalDark: D.DTK.makeColor(D.Color.Highlight).lightness(+20).opacity(-80) | ||
| } | ||
| property D.Palette innerShadow: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).lightness(-20) | ||
| normalDark: D.DTK.makeColor(D.Color.Highlight).lightness(-20) | ||
| } | ||
| } | ||
|
|
||
| property QtObject behindWindowBlur: QtObject { | ||
| property color lightColor: Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, 0.6) | ||
| property color lightNoBlurColor: Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, 1.0) | ||
| property color darkColor: "#55000000" | ||
| property color darkNoBlurColor: Qt.rgba(35 / 255.0, 35 / 255.0, 35 / 255.0, 1.0) | ||
| } | ||
|
|
||
| property QtObject arrowRectangleBlur: QtObject { | ||
| property int borderWidth: 1 | ||
| property int roundJoinRadius: 8 | ||
| property color outBorderColor: Qt.rgba(0, 0, 0, 0.06) | ||
| property color darkOutBorderColor: Qt.rgba(0, 0, 0, 0.8) | ||
| property color inBorderColor: Qt.rgba(1, 1, 1, 0.1) | ||
| property color darkInBorderColor: Qt.rgba(1, 1, 1, 0.8) | ||
| property color backgroundColor: behindWindowBlur.lightColor | ||
| property color darkBackgroundColor: behindWindowBlur.darkColor | ||
| property color backgroundNoBlurColor: behindWindowBlur.lightNoBlurColor | ||
| property color darkBackgroundNoBlurColor: behindWindowBlur.darkNoBlurColor | ||
| property color shadowColor: Qt.rgba(0, 0, 0, 0.2) | ||
| property color darkShadowColor: Qt.rgba(0, 0, 0, 0.2) | ||
| } | ||
|
|
||
| property QtObject arrowListView: QtObject { | ||
| property int width: 180 | ||
| property size stepButtonSize: Qt.size(16, 16) | ||
| property size stepButtonIconSize: Qt.size(12, 12) | ||
| property int maxVisibleItems: 16 | ||
| property int itemHeight: 30 | ||
| property string upButtonIconName: "arrow_ordinary_up" | ||
| property string downButtonIconName: "arrow_ordinary_down" | ||
| } | ||
|
|
||
| property QtObject itemDelegate: QtObject { | ||
| property int width: 204 | ||
| property int height: 40 | ||
| property color normalColor: Qt.rgba(0, 0, 0, 0.05) | ||
| property color cascadeColor: Qt.rgba(0, 0, 0, 0.15) | ||
| property int iconSize: 24 | ||
| property int checkIndicatorIconSize: 24 | ||
| property D.Palette checkBackgroundColor: D.Palette { | ||
| hovered: Qt.rgba(0, 0, 0, 0.1) | ||
| normal: Qt.rgba(0, 0, 0, 0.05) | ||
| } | ||
| property color checkedColor: Qt.rgba(0, 0, 0, 0.15) | ||
| } | ||
|
|
||
| property QtObject stackView: QtObject { | ||
| property int animationDuration: 200 | ||
| property int animationEasingType: Easing.OutCubic | ||
| } | ||
|
|
||
| // Indicator | ||
| property QtObject busyIndicator: QtObject { | ||
| property int size: 16 | ||
| property int paddingFactor: 16 | ||
| property D.Palette fillColor: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight) | ||
| } | ||
| property int animationDuration: 800 | ||
| property string spinnerSource: "qrc:/dtk/declarative/resources/spinner-blue.webp" | ||
| } | ||
|
|
||
| property QtObject buttonIndicator: QtObject { | ||
| property int size: 16 | ||
| property int iconSize: 12 | ||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(1, 1, 1, 0.2) | ||
| normalDark: ("#ffffff") | ||
| } | ||
| } | ||
|
|
||
| // Bar | ||
| property QtObject scrollBar: QtObject { | ||
| property int padding: 2 | ||
| property int width: 4 | ||
| property int activeWidth: 12 | ||
| property real hideOpacity: 0.0 | ||
| property int hidePauseDuration: 450 | ||
| property int hideDuration: 1500 | ||
| property int hideWidthDuration: 100 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.3) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.3) | ||
|
|
||
| hovered: Qt.rgba(0, 0, 0, 0.4) | ||
| hoveredDark: Qt.rgba(1, 1, 1, 0.6) | ||
|
|
||
| pressed: Qt.rgba(0, 0, 0, 0.4) | ||
| pressedDark: Qt.rgba(1, 1, 1, 0.3) | ||
| } | ||
|
|
||
| property D.Palette outsideBorder: D.Palette { | ||
| normal: Qt.rgba(1, 1, 1, 0.1) | ||
| normalDark: Qt.rgba(0, 0, 0, 0.1) | ||
| } | ||
|
|
||
| property D.Palette insideBorder: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.05) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.1) | ||
| } | ||
| } | ||
|
|
||
| property QtObject progressBar: QtObject { | ||
| property int width: 300 | ||
| property int height: 36 | ||
| property int indeterminateProgressBarWidth: 90 | ||
| property int indeterminateProgressBarAnimationDuration: 2000 | ||
|
|
||
| property D.Palette shadowColor: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).opacity(-60) | ||
| } | ||
|
|
||
| property D.Palette handleGradientColor: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).hue(-0).saturation(+30).lightness(+30) | ||
| } | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.1) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.1) | ||
| } | ||
| } | ||
|
|
||
| property QtObject embeddedProgressBar: QtObject { | ||
| property int width: 48 | ||
| property int height: 6 | ||
| property int contentHeight: 4 | ||
| property int backgroundRadius: 3 | ||
| property int contentRadius: 2 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.7) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.2) | ||
| } | ||
|
|
||
| property D.Palette progressBackground: D.Palette { | ||
| normal: ("white") | ||
| normalDark: Qt.rgba(1, 1, 1, 0.7) | ||
| } | ||
| } | ||
|
|
||
| property QtObject waterProgressBar: QtObject { | ||
| property int width: 98 | ||
| property int height: 98 | ||
| property string waterFrontImagePath: "qrc:/dtk/declarative/resources/water_front.png" | ||
| property string waterBackImagePath: "qrc:/dtk/declarative/resources/water_back.png" | ||
|
|
||
| property D.Palette background1: D.Palette { | ||
| normal: ("#1f08ff") | ||
| } | ||
|
|
||
| property D.Palette background2: D.Palette { | ||
| normal: ("#50fff7") | ||
| } | ||
|
|
||
| property D.Palette dropShadow: D.Palette { | ||
| normal: Qt.rgba(42 / 255, 154 / 255, 248 / 255, 0.3) | ||
| } | ||
|
|
||
| property D.Palette popBackground: D.Palette { | ||
| normal: Qt.rgba(255, 255, 255, 0.3) | ||
| } | ||
|
|
||
| property D.Palette textColor: D.Palette { | ||
| normal: ("white") | ||
| } | ||
| } | ||
|
|
||
| property QtObject titleBar: QtObject { | ||
| property int height: 50 | ||
| property int iconSize: 32 | ||
| property int leftMargin: 10 | ||
| } | ||
|
|
||
| // Other | ||
| property QtObject slider: QtObject { | ||
| property int width: 120 | ||
| property int height: 60 | ||
| property int highlightMargin: -4 | ||
|
|
||
| property QtObject handle: QtObject { | ||
| property int width: 20 | ||
| property int height: 24 | ||
| } | ||
|
|
||
| property QtObject groove: QtObject { | ||
| property int width: 100 | ||
| property int height: 4 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.2) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.2) | ||
| } | ||
| } | ||
|
|
||
| property QtObject tick: QtObject { | ||
| property int width: 1 | ||
| property int height: 12 | ||
| property int radius: 8 | ||
| property int textMargin: 2 | ||
| property int hPadding: 10 | ||
| property int vPadding: 2 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.4) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.4) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Dial | ||
| property QtObject dial: QtObject { | ||
| property int size: 100 | ||
| } | ||
|
|
||
| // PageIndicator | ||
| property QtObject pageIndicator: QtObject { | ||
| property int width: 8 | ||
| property int height: 8 | ||
| } | ||
| } | ||
| property D.Palette submenuOpenedItemHigh |
There was a problem hiding this comment.
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.
Comment on lines
822
to
+823
| // the highlight color of main menu item, when submenu is opened. | ||
| property D.Palette submenuOpenedItemHighlight: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.15) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.2) | ||
| } | ||
|
|
||
| property D.Palette itemHighlightShadow: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.2) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.1) | ||
| } | ||
|
|
||
| property D.Palette itemText: D.Palette { | ||
| normal: ("black") | ||
| normalDark: ("white") | ||
| } | ||
|
|
||
| property D.Palette separatorText: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.5) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.4) | ||
| } | ||
| } | ||
|
|
||
| // Panel | ||
| property QtObject highlightPanel: QtObject { | ||
| property int width: 180 | ||
| property int height: 30 | ||
| property int radius: 8 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight) | ||
| normalDark: D.DTK.makeColor(D.Color.Highlight) | ||
| hovered: D.DTK.makeColor(D.Color.Highlight).lightness(+10) | ||
| hoveredDark: D.DTK.makeColor(D.Color.Highlight).lightness(+10) | ||
| } | ||
| property D.Palette dropShadow: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).lightness(+20).opacity(-80) | ||
| normalDark: D.DTK.makeColor(D.Color.Highlight).lightness(+20).opacity(-80) | ||
| } | ||
| property D.Palette innerShadow: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).lightness(-20) | ||
| normalDark: D.DTK.makeColor(D.Color.Highlight).lightness(-20) | ||
| } | ||
| } | ||
|
|
||
| property QtObject behindWindowBlur: QtObject { | ||
| property color lightColor: Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, 0.6) | ||
| property color lightNoBlurColor: Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, 1.0) | ||
| property color darkColor: "#55000000" | ||
| property color darkNoBlurColor: Qt.rgba(35 / 255.0, 35 / 255.0, 35 / 255.0, 1.0) | ||
| } | ||
|
|
||
| property QtObject arrowRectangleBlur: QtObject { | ||
| property int borderWidth: 1 | ||
| property int roundJoinRadius: 8 | ||
| property color outBorderColor: Qt.rgba(0, 0, 0, 0.06) | ||
| property color darkOutBorderColor: Qt.rgba(0, 0, 0, 0.8) | ||
| property color inBorderColor: Qt.rgba(1, 1, 1, 0.1) | ||
| property color darkInBorderColor: Qt.rgba(1, 1, 1, 0.8) | ||
| property color backgroundColor: behindWindowBlur.lightColor | ||
| property color darkBackgroundColor: behindWindowBlur.darkColor | ||
| property color backgroundNoBlurColor: behindWindowBlur.lightNoBlurColor | ||
| property color darkBackgroundNoBlurColor: behindWindowBlur.darkNoBlurColor | ||
| property color shadowColor: Qt.rgba(0, 0, 0, 0.2) | ||
| property color darkShadowColor: Qt.rgba(0, 0, 0, 0.2) | ||
| } | ||
|
|
||
| property QtObject arrowListView: QtObject { | ||
| property int width: 180 | ||
| property size stepButtonSize: Qt.size(16, 16) | ||
| property size stepButtonIconSize: Qt.size(12, 12) | ||
| property int maxVisibleItems: 16 | ||
| property int itemHeight: 30 | ||
| property string upButtonIconName: "arrow_ordinary_up" | ||
| property string downButtonIconName: "arrow_ordinary_down" | ||
| } | ||
|
|
||
| property QtObject itemDelegate: QtObject { | ||
| property int width: 204 | ||
| property int height: 40 | ||
| property color normalColor: Qt.rgba(0, 0, 0, 0.05) | ||
| property color cascadeColor: Qt.rgba(0, 0, 0, 0.15) | ||
| property int iconSize: 24 | ||
| property int checkIndicatorIconSize: 24 | ||
| property D.Palette checkBackgroundColor: D.Palette { | ||
| hovered: Qt.rgba(0, 0, 0, 0.1) | ||
| normal: Qt.rgba(0, 0, 0, 0.05) | ||
| } | ||
| property color checkedColor: Qt.rgba(0, 0, 0, 0.15) | ||
| } | ||
|
|
||
| property QtObject stackView: QtObject { | ||
| property int animationDuration: 200 | ||
| property int animationEasingType: Easing.OutCubic | ||
| } | ||
|
|
||
| // Indicator | ||
| property QtObject busyIndicator: QtObject { | ||
| property int size: 16 | ||
| property int paddingFactor: 16 | ||
| property D.Palette fillColor: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight) | ||
| } | ||
| property int animationDuration: 800 | ||
| property string spinnerSource: "qrc:/dtk/declarative/resources/spinner-blue.webp" | ||
| } | ||
|
|
||
| property QtObject buttonIndicator: QtObject { | ||
| property int size: 16 | ||
| property int iconSize: 12 | ||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(1, 1, 1, 0.2) | ||
| normalDark: ("#ffffff") | ||
| } | ||
| } | ||
|
|
||
| // Bar | ||
| property QtObject scrollBar: QtObject { | ||
| property int padding: 2 | ||
| property int width: 4 | ||
| property int activeWidth: 12 | ||
| property real hideOpacity: 0.0 | ||
| property int hidePauseDuration: 450 | ||
| property int hideDuration: 1500 | ||
| property int hideWidthDuration: 100 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.3) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.3) | ||
|
|
||
| hovered: Qt.rgba(0, 0, 0, 0.4) | ||
| hoveredDark: Qt.rgba(1, 1, 1, 0.6) | ||
|
|
||
| pressed: Qt.rgba(0, 0, 0, 0.4) | ||
| pressedDark: Qt.rgba(1, 1, 1, 0.3) | ||
| } | ||
|
|
||
| property D.Palette outsideBorder: D.Palette { | ||
| normal: Qt.rgba(1, 1, 1, 0.1) | ||
| normalDark: Qt.rgba(0, 0, 0, 0.1) | ||
| } | ||
|
|
||
| property D.Palette insideBorder: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.05) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.1) | ||
| } | ||
| } | ||
|
|
||
| property QtObject progressBar: QtObject { | ||
| property int width: 300 | ||
| property int height: 36 | ||
| property int indeterminateProgressBarWidth: 90 | ||
| property int indeterminateProgressBarAnimationDuration: 2000 | ||
|
|
||
| property D.Palette shadowColor: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).opacity(-60) | ||
| } | ||
|
|
||
| property D.Palette handleGradientColor: D.Palette { | ||
| normal: D.DTK.makeColor(D.Color.Highlight).hue(-0).saturation(+30).lightness(+30) | ||
| } | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.1) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.1) | ||
| } | ||
| } | ||
|
|
||
| property QtObject embeddedProgressBar: QtObject { | ||
| property int width: 48 | ||
| property int height: 6 | ||
| property int contentHeight: 4 | ||
| property int backgroundRadius: 3 | ||
| property int contentRadius: 2 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.7) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.2) | ||
| } | ||
|
|
||
| property D.Palette progressBackground: D.Palette { | ||
| normal: ("white") | ||
| normalDark: Qt.rgba(1, 1, 1, 0.7) | ||
| } | ||
| } | ||
|
|
||
| property QtObject waterProgressBar: QtObject { | ||
| property int width: 98 | ||
| property int height: 98 | ||
| property string waterFrontImagePath: "qrc:/dtk/declarative/resources/water_front.png" | ||
| property string waterBackImagePath: "qrc:/dtk/declarative/resources/water_back.png" | ||
|
|
||
| property D.Palette background1: D.Palette { | ||
| normal: ("#1f08ff") | ||
| } | ||
|
|
||
| property D.Palette background2: D.Palette { | ||
| normal: ("#50fff7") | ||
| } | ||
|
|
||
| property D.Palette dropShadow: D.Palette { | ||
| normal: Qt.rgba(42 / 255, 154 / 255, 248 / 255, 0.3) | ||
| } | ||
|
|
||
| property D.Palette popBackground: D.Palette { | ||
| normal: Qt.rgba(255, 255, 255, 0.3) | ||
| } | ||
|
|
||
| property D.Palette textColor: D.Palette { | ||
| normal: ("white") | ||
| } | ||
| } | ||
|
|
||
| property QtObject titleBar: QtObject { | ||
| property int height: 50 | ||
| property int iconSize: 32 | ||
| property int leftMargin: 10 | ||
| } | ||
|
|
||
| // Other | ||
| property QtObject slider: QtObject { | ||
| property int width: 120 | ||
| property int height: 60 | ||
| property int highlightMargin: -4 | ||
|
|
||
| property QtObject handle: QtObject { | ||
| property int width: 20 | ||
| property int height: 24 | ||
| } | ||
|
|
||
| property QtObject groove: QtObject { | ||
| property int width: 100 | ||
| property int height: 4 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.2) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.2) | ||
| } | ||
| } | ||
|
|
||
| property QtObject tick: QtObject { | ||
| property int width: 1 | ||
| property int height: 12 | ||
| property int radius: 8 | ||
| property int textMargin: 2 | ||
| property int hPadding: 10 | ||
| property int vPadding: 2 | ||
|
|
||
| property D.Palette background: D.Palette { | ||
| normal: Qt.rgba(0, 0, 0, 0.4) | ||
| normalDark: Qt.rgba(1, 1, 1, 0.4) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Dial | ||
| property QtObject dial: QtObject { | ||
| property int size: 100 | ||
| } | ||
|
|
||
| // PageIndicator | ||
| property QtObject pageIndicator: QtObject { | ||
| property int width: 8 | ||
| property int height: 8 | ||
| } | ||
| } | ||
| property D.Palette submenuOpenedItemHigh |
There was a problem hiding this comment.
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.
| 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): 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.
|
/ok-to-test |
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
3 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
Refine ToolButton state styling to provide polished dark-mode interactions and a lightweight checked appearance.
New Features:
Enhancements: