Skip to content

fix(floating-message): adjust no-button height, adapt system radius, fix invalid bindings - #741

Open
zqq-dora wants to merge 1 commit into
linuxdeepin:v25-flowstylefrom
zqq-dora:fix-floating-message-height-radius
Open

zqq-dora wants to merge 1 commit into
linuxdeepin:v25-flowstylefrom
zqq-dora:fix-floating-message-height-radius

Conversation

@zqq-dora

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

Copy link
Copy Markdown

Background

The in-app notification (FloatingMessage) had several issues:

  1. The height was always fixed at minimumHeight (40px) regardless of whether a close button was present. A previous attempt hardcoded 30 inline in three places without extracting it to a Style token.
  2. Two children.height and one children.width bindings in the RowLayout were invalid: accessing a scalar property on a QML list (children) only returns the first child's value (or 0), so the Math.max(..., children.height) always fell back to the constant, and a runtime binding-loop warning was emitted.
  3. The floating panel corner radius was hardcoded to 14 and did not follow the system window-radius setting, unlike menu.radius which already used D.DTK.platformTheme.windowRadius.
  4. The Qt6 FloatingPanel lacked a panelHeight property, so the panelHeight override in FloatingMessage was a no-op dynamic property — the panel height always stayed at DS.Style.floatingPanel.height (40px).
  5. The Qt5 FloatingPanel.blurRadius was bound to floatingPanel.radius, so making the radius dynamic would cause the blur amount to change with the system setting.
  6. The icon sourceSize was 20 on Qt6 but 16 on Qt5, an inconsistency.

Changes

src/qml/FlowStyle.qml & qt6/src/qml/FlowStyle.qml

  • Added property int minimumHeightWithoutButton: 30 to floatingMessage, replacing the inline hardcoded 30.
  • Changed floatingPanel.radius from 14 to D.DTK.platformTheme.windowRadius < 0 ? 12 : Math.min(D.DTK.platformTheme.windowRadius, 12), adapting to the system window-radius setting with the mapping: none(0)->0, small(8)->8, medium(12)->12, large(18)->12 (capped).

src/qml/FloatingMessage.qml & qt6/src/qml/FloatingMessage.qml

  • Three height bindings (FloatingPanel.panelHeight, RowLayout.height, contentLoader.Layout.preferredHeight) now use Math.max(closeButton.active ? minimumHeight : minimumHeightWithoutButton, implicitHeight), so no-button notifications are 30px and with-button notifications are 40px, expanding for taller content.
  • Replaced invalid children.height with implicitHeight and children.width with implicitWidth in the RowLayout.
  • Unified icon sourceSize to 16x16 on both Qt5 and Qt6.
  • Qt6: added panelHeight assignment to FloatingPanel.

qt6/src/qml/FloatingPanel.qml

  • Added property int panelHeight: DS.Style.floatingPanel.height and wired InWindowBlur.implicitHeight to control.panelHeight, mirroring the Qt5 version so the height override takes effect.

src/qml/FloatingPanel.qml

  • Decoupled blurRadius from the now-dynamic floatingPanel.radius, pinning it to a fixed 14 to prevent blur jitter when the system radius changes.

Effect

  • In-app notifications without a close button (auto-dismiss, duration >= 0) are now 30px tall; notifications with a close button (persistent, duration < 0) remain 40px. Taller content expands the panel as expected.
  • The notification panel corner radius follows the system window-radius setting: none->square, small->8, medium->12, large->12 (capped at 12). Previously a fixed 14 that ignored the system setting.
  • The invalid children.height/children.width bindings no longer emit runtime warnings; the panel correctly sizes itself using implicitHeight/implicitWidth.
  • Qt5 and Qt6 implementations are now consistent in height (30/40px), icon size (16x16), and radius behavior.

背景

应用内通知(FloatingMessage)存在以下问题:

  1. 高度始终固定为 minimumHeight(40px),不区分是否有关闭按钮。此前有一处改动在三处内联硬编码了 30,但没有提取为样式常量。
  2. RowLayout 中的两处 children.height 和一处 children.width 绑定无效:对 QML 列表属性(children)取标量只会返回第一个子项的值(或 0),导致 Math.max(..., children.height) 始终退回常量,并产生运行时绑定告警。
  3. 浮层面板圆角硬编码为 14,未跟随系统窗口圆角设置,而 menu.radius 已经使用了 D.DTK.platformTheme.windowRadius。
  4. Qt6 的 FloatingPanel 缺少 panelHeight 属性,导致 FloatingMessage 中对 panelHeight 的赋值是不生效的动态属性,面板高度始终为 DS.Style.floatingPanel.height(40px)。
  5. Qt5 的 FloatingPanel.blurRadius 绑定到 floatingPanel.radius,圆角改为动态后模糊量会随系统设置变化。
  6. Qt6 的图标 sourceSize 为 20,而 Qt5 为 16,两版不一致。

改动

src/qml/FlowStyle.qml 与 qt6/src/qml/FlowStyle.qml

  • 在 floatingMessage 中新增 property int minimumHeightWithoutButton: 30,替换内联硬编码的 30。
  • 将 floatingPanel.radius 从 14 改为 D.DTK.platformTheme.windowRadius < 0 ? 12 : Math.min(D.DTK.platformTheme.windowRadius, 12),适配系统窗口圆角设置,映射关系为:无(0)->0,小(8)->8,中(12)->12,大(18)->12(封顶)。

src/qml/FloatingMessage.qml 与 qt6/src/qml/FloatingMessage.qml

  • 三处高度绑定(FloatingPanel.panelHeight、RowLayout.height、contentLoader.Layout.preferredHeight)改为 Math.max(closeButton.active ? minimumHeight : minimumHeightWithoutButton, implicitHeight),无按钮通知 30px、有按钮通知 40px,内容更高时自动撑开。
  • 将无效的 children.height 替换为 implicitHeight、children.width 替换为 implicitWidth。
  • Qt5/Qt6 图标 sourceSize 统一为 16x16。
  • Qt6:补充 FloatingPanel 的 panelHeight 赋值。

qt6/src/qml/FloatingPanel.qml

  • 新增 property int panelHeight: DS.Style.floatingPanel.height,InWindowBlur.implicitHeight 改为 control.panelHeight,与 Qt5 版本对齐,使高度覆盖生效。

src/qml/FloatingPanel.qml

  • 将 blurRadius 与动态 floatingPanel.radius 解耦,固定为 14,避免圆角变化时模糊量抖动。

效果

  • 无关闭按钮的应用内通知(自动消失,duration >= 0)高度为 30px;有关闭按钮的通知(常驻,duration < 0)保持 40px。内容更高时面板自动撑开。
  • 通知面板圆角跟随系统窗口圆角设置:无->直角,小->8,中->12,大->12(封顶)。此前为固定 14 且不跟随系统设置。
  • 无效的 children.height/children.width 绑定不再产生运行时告警,面板通过 implicitHeight/implicitWidth 正确计算自身尺寸。
  • Qt5 与 Qt6 实现在高度(30/40px)、图标尺寸(16x16)、圆角行为上完全一致。

Summary by Sourcery

Fix FloatingMessage sizing, layout bindings, and system-radius integration across Qt5 and Qt6.

Bug Fixes:

  • Correct FloatingMessage sizing so notifications use distinct minimum heights based on close-button presence and expand for taller content.
  • Fix invalid layout bindings that prevented reliable notification sizing and could emit runtime warnings.
  • Apply system window-radius settings to floating panels while preserving stable blur behavior.
  • Align Qt5 and Qt6 notification presentation by standardizing icon sizing and height behavior.

Enhancements:

  • Add the missing Qt6 floating-panel height configuration needed for FloatingMessage overrides to take effect.

@deepin-ci-robot

Copy link
Copy Markdown
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.

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

sourcery-ai Bot commented Oct 29, 2026

Copy link
Copy Markdown

Reviewer's Guide

Updates Qt5 and Qt6 FloatingMessage implementations to correctly size notifications at 30px without a close button or 40px with one, expand for implicit content size, and eliminate invalid QML bindings. The change also centralizes the no-button height, applies capped system window-radius mapping, stabilizes Qt5 blur radius, standardizes icon sizing, and makes the Qt6 panelHeight override effective.

Flow diagram for FloatingMessage sizing

flowchart TD
    Message[FloatingMessage]
    Button{closeButton.active}
    MinHeight[minimumHeight: 40]
    MinNoButton[minimumHeightWithoutButton: 30]
    Implicit[implicitHeight]
    Panel[FloatingPanel.panelHeight]

    Message --> Button
    Button -->|true| MinHeight
    Button -->|false| MinNoButton
    MinHeight --> Panel
    MinNoButton --> Panel
    Implicit --> Panel
    Panel -->|Math.max| Panel
Loading

File-Level Changes

Change Details Files
Make FloatingMessage sizing responsive to close-button presence and content, while fixing invalid QML list bindings.
  • Extract the 30px no-button minimum into the shared style.
  • Use close-button state plus implicit content height for panel, layout, and loader sizing.
  • Replace children scalar accesses with implicitHeight/implicitWidth.
  • Add the missing Qt6 panelHeight property and connect it to the blur background height.
src/qml/FloatingMessage.qml
qt6/src/qml/FloatingMessage.qml
src/qml/FloatingPanel.qml
qt6/src/qml/FloatingPanel.qml
src/qml/FlowStyle.qml
qt6/src/qml/FlowStyle.qml
Align floating-message appearance with system radius behavior and keep blur sizing stable across Qt versions.
  • Derive the panel radius from the platform window radius, capped at 12px with the specified fallback.
  • Decouple Qt5 blur radius from the dynamic panel corner radius.
  • Standardize icon source size to 16x16 in both implementations.
  • Add the Qt6 panel-height override support to match Qt5 behavior.
src/qml/FlowStyle.qml
qt6/src/qml/FlowStyle.qml
src/qml/FloatingMessage.qml
qt6/src/qml/FloatingMessage.qml
src/qml/FloatingPanel.qml
qt6/src/qml/FloatingPanel.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

@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 found 1 issue

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/qml/FloatingMessage.qml" line_range="40" />
<code_context>
         contentItem: RowLayout {
-            height: DS.Style.floatingMessage.minimumHeight
-            width: Math.min(DS.Style.floatingMessage.maximumWidth, children.width + floatingPanel.leftPadding - floatingPanel.rightPadding)
+            height: Math.max(closeButton.active ? DS.Style.floatingMessage.minimumHeight : DS.Style.floatingMessage.minimumHeightWithoutButton, implicitHeight)
+            width: Math.min(DS.Style.floatingMessage.maximumWidth, implicitWidth + floatingPanel.leftPadding - floatingPanel.rightPadding)
             spacing: 10
</code_context>
<issue_to_address>
**Message text elides too early**

When a Qt5 FloatingMessage uses content near its available width, `RowLayout.width` resolves to `implicitWidth - 2` because the 8 px left padding is offset by the 10 px right padding, leaving the loader two pixels short and making its label elide text earlier than necessary.

Size the row against the panel’s content area without letting the unequal left and right padding reduce its implicit width.
</issue_to_address>

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

Comment thread src/qml/FloatingMessage.qml Outdated
contentItem: RowLayout {
height: DS.Style.floatingMessage.minimumHeight
width: Math.min(DS.Style.floatingMessage.maximumWidth, children.width + floatingPanel.leftPadding - floatingPanel.rightPadding)
height: Math.max(closeButton.active ? DS.Style.floatingMessage.minimumHeight : DS.Style.floatingMessage.minimumHeightWithoutButton, implicitHeight)

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚪ Low · Message text elides too early

When a Qt5 FloatingMessage uses content near its available width, RowLayout.width resolves to implicitWidth - 2 because the 8 px left padding is offset by the 10 px right padding, leaving the loader two pixels short and making its label elide text earlier than necessary.

Size the row against the panel’s content area without letting the unequal left and right padding reduce its implicit width.

Prompt for AI agents
In `src/qml/FloatingMessage.qml` at line 40:

**Message text elides too early**

When a Qt5 FloatingMessage uses content near its available width, `RowLayout.width` resolves to `implicitWidth - 2` because the 8 px left padding is offset by the 10 px right padding, leaving the loader two pixels short and making its label elide text earlier than necessary.

Size the row against the panel’s content area without letting the unequal left and right padding reduce its implicit width.

@zqq-dora
zqq-dora force-pushed the fix-floating-message-height-radius branch 2 times, most recently from 302e879 to b8f44ff Compare October 30, 2026 01:52
Comment thread qt6/src/qml/FloatingMessage.qml Outdated
id: floatingPanel
property bool animationFinished: false
implicitWidth: DS.Style.control.contentImplicitWidth(floatingPanel)
panelHeight: Math.max(closeButton.active ? DS.Style.floatingMessage.minimumHeight : DS.Style.floatingMessage.minimumHeightWithoutButton, contentItem.height)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

这个panelHeight是不是就是FloatingPanel这个控件的高度呀,

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

是的,panelHeight 就是 FloatingPanel 这个控件的高度。之前 Qt6 的 FloatingPanel 没有暴露 panelHeight 属性,implicitHeight 直接写死了 DS.Style.floatingPanel.height(40px),所以 FloatingMessage 里对 panelHeight 赋值不生效。这次补上 panelHeight 属性并接到 InWindowBlur.implicitHeight,这样无按钮时 30px 的高度覆盖才能真正生效。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

那直接用Control提供的height是不是就行了,不需要新增panelHeight这个属性,

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

好的,已改为直接使用 Control 提供的 height 属性,去掉了新增的 panelHeight。FloatingMessage 里现在直接设 height: Math.max(...),FloatingPanel 的 InWindowBlur.implicitHeight 恢复为默认的 DS.Style.floatingPanel.height 作为隐式值,被 height 覆盖时自动生效。

Comment thread src/qml/FloatingMessage.qml Outdated
id: floatingPanel
implicitWidth: DS.Style.control.contentImplicitWidth(floatingPanel)
leftPadding: 10
panelHeight: Math.max(closeButton.active ? DS.Style.floatingMessage.minimumHeight : DS.Style.floatingMessage.minimumHeightWithoutButton, contentItem.height)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

不用维护qt5的qml代码样式,只用修改qt6下面的qml,

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

好的,已经撤掉了 Qt5(src/qml/)下的所有改动,现在只保留 Qt6(qt6/src/qml/)的修改。

@zqq-dora
zqq-dora force-pushed the fix-floating-message-height-radius branch from b8f44ff to 474fbfc Compare October 30, 2026 02:38
…fix invalid bindings

The in-app notification (FloatingMessage) had several issues:

1. Height was always fixed at 40px regardless of whether a close button
   was present. Inline hardcoded 30 was used in three places without
   extracting it to a Style token.
2. children.height and children.width bindings in RowLayout were invalid
   (QML list property scalar access returns first child or 0), causing
   Math.max to always fall back to the constant with runtime warnings.
3. Floating panel corner radius was hardcoded to 14, not following the
   system window-radius setting unlike menu.radius.
4. Qt6 FloatingPanel lacked panelHeight property, so the height override
   in FloatingMessage was a no-op.
5. Icon sourceSize was 20 on Qt6 but 16 on Qt5.

Changes:
- Add minimumHeightWithoutButton (30) style token, use it for no-button
  notifications (40px with button).
- Adapt floatingPanel.radius to system windowRadius: none->0, small->8,
  medium->12, large->12 (capped).
- Replace children.height/width with implicitHeight/implicitWidth.
- Unify icon sourceSize to 16x16.
- Use Control height instead of custom panelHeight property so the height
  override takes effect.

Only Qt6 QML is modified per reviewer feedback; Qt5 code is left unchanged.

Also update SPDX copyright year to 2026.
@zqq-dora
zqq-dora force-pushed the fix-floating-message-height-radius branch from 474fbfc to 6bc8fde Compare October 30, 2026 03:17

This branch has not been deployed

No deployments
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