feat: add blur background to notification center#1520
Merged
deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom Mar 23, 2026
Merged
feat: add blur background to notification center#1520deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
Conversation
18202781743
requested review from
BLumia,
fly602,
mhduiy,
robertkill,
wjyrich and
yixinshark
Reviewer's GuideImplements blurred, theme-aware backgrounds for the notification center window and notification items, adds a reusable blur component, and updates overlap/notification visuals to support crystal theme opacity and border colors. Class diagram for notification blur and background componentsclassDiagram
class Window_main {
+bool DWindow_enabled
+bool DWindow_enableBlurWindow
+color color
}
class StyledBehindWindowBlur {
+Item control
+int cornerRadius
+color blendColor
+bool valid
}
class NotifyItemBackground {
+int radius
+Palette borderColor
+Palette backgroundColor
}
class NotifyItemContent {
+bool enableDismissed
+Component clearButton
+Item clearButtonItem
+NotifyItemBackground background
}
class NormalNotify {
+NotifyItemBackground background
}
class OverlapNotify {
+NotifyItemBackground background
}
class OverlapIndicator {
+int implicitHeight
+int implicitWidth
+int count
+int radius
+int overlapHeight
+bool revert
+bool enableAnimation
+Component background
}
Window_main --> StyledBehindWindowBlur : uses
NotifyItemContent *-- NotifyItemBackground : has_background
NormalNotify *-- NotifyItemBackground : has_background
OverlapNotify *-- NotifyItemBackground : has_background
OverlapIndicator --> NotifyItemBackground : background_component
StyledBehindWindowBlur --> Window_main : decorates_window
Flow diagram for blur background and theme-aware color selectiongraph TD
A_Open_notification_center["Open notification center window"] --> B_Check_blur_flag["DWindow_enableBlurWindow == true"]
B_Check_blur_flag -->|true| C_Create_blur_layer["Create StyledBehindWindowBlur"]
B_Check_blur_flag -->|false| D_No_blur_layer["Use non_blurred_background_colors"]
C_Create_blur_layer --> E_Check_valid["StyledBehindWindowBlur_valid"]
E_Check_valid -->|true| F_Select_blurred_blend_color["DStyle_Style_control_selectColor_with_blur_alphas"]
E_Check_valid -->|false| G_Select_no_blur_color["DStyle_Style_control_selectColor_no_blur_colors"]
F_Select_blurred_blend_color --> H_Apply_blur_to_window["Apply_blendColor_as_blurred_window_background"]
G_Select_no_blur_color --> H_Apply_blur_to_window
H_Apply_blur_to_window --> I_Notify_items_blurred_background["Notify_items_use_NotifyItemBackground_with_crystal_palette"]
I_Notify_items_blurred_background --> J_Overlap_indicator_background["OverlapIndicator_loads_background_component_with_border_colors"]
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 1 issue, and left some high level feedback:
- The crystal background palettes for
NormalNotify,OverlapNotify, and theOverlapIndicatorbackground repeat similar hard-coded RGBA values; consider centralizing these colors/alpha values (e.g., in a shared theme or constants file) to avoid duplication and make future tweaks easier. - In
main.qml, you always enableDWindow.enabledandDWindow.enableBlurWindow; if blur is meant to be optional (per your comment about only adding blend color when blur is true), consider wiring these flags to an actual configuration/feature toggle so the window behavior and blur effects can still be disabled when needed.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The crystal background palettes for `NormalNotify`, `OverlapNotify`, and the `OverlapIndicator` background repeat similar hard-coded RGBA values; consider centralizing these colors/alpha values (e.g., in a shared theme or constants file) to avoid duplication and make future tweaks easier.
- In `main.qml`, you always enable `DWindow.enabled` and `DWindow.enableBlurWindow`; if blur is meant to be optional (per your comment about only adding blend color when blur is true), consider wiring these flags to an actual configuration/feature toggle so the window behavior and blur effects can still be disabled when needed.
## Individual Comments
### Comment 1
<location path="panels/notification/plugin/OverlapIndicator.qml" line_range="19-24" />
<code_context>
implicitHeight: layout.height
implicitWidth: 360
+ property Component background: NotifyItemBackground {
+ radius: overlapHeight
+ opacity: 0
+ }
+
</code_context>
<issue_to_address>
**suggestion (bug_risk):** `radius` for the background component is now tied to `overlapHeight` while the visual height is based on `root.radius`, which can lead to inconsistent rounding.
With `Loader` using `height: root.radius * 2` and `NotifyItemBackground` using `radius: overlapHeight`, differing values will produce a pill whose corner radius no longer matches its visual height. If the visual radius should still follow `root.radius`, consider basing the background’s `radius` on `root.radius` and using `overlapHeight` only for overlap behavior.
```suggestion
implicitHeight: layout.height
implicitWidth: 360
property Component background: NotifyItemBackground {
radius: root.radius
opacity: 0
}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
BLumia
previously approved these changes
Mar 23, 2026
1. Added blur background effect to notification center window using DWindow.enableBlurWindow and StyledBehindWindowBlur 2. Enabled window radius and disabled system resize/move for better visual integration 3. Added semi-transparent crystal background to NormalNotify and OverlapNotify items 4. Enhanced OverlapIndicator with proper background styling and border colors 5. Extended NotifyItemBackground to support borderColor property for better visual separation 6. Modified OverlapIndicator layout to use Loader for background component with proper positioning Log: Notification center now features blur background with crystal theme support Influence: 1. Test notification center appearance with light and dark themes 2. Verify blur effect works correctly when opening notification center 3. Check notification item backgrounds have proper transparency in crystal theme 4. Test overlapping notification indicators display correctly with new background styling 5. Verify window cannot be resized or moved by system controls 6. Test notification center follows dock screen correctly 7. Check border colors in OverlapIndicator for both light and dark modes feat: 为通知中心添加模糊背景效果 1. 使用 DWindow.enableBlurWindow 和 StyledBehindWindowBlur 为通知中心窗 口添加模糊背景效果 2. 启用窗口圆角并禁用系统调整大小/移动功能，以获得更好的视觉集成效果 3. 为 NormalNotify 和 OverlapNotify 项目添加半透明水晶主题背景 4. 增强 OverlapIndicator，添加适当的背景样式和边框颜色 5. 扩展 NotifyItemBackground 以支持 borderColor 属性，实现更好的视觉分离 效果 6. 修改 OverlapIndicator 布局，使用 Loader 加载背景组件并正确定位 Log: 通知中心现在支持模糊背景效果和水晶主题 Influence: 1. 测试通知中心在浅色和深色主题下的外观 2. 验证打开通知中心时模糊效果正常工作 3. 检查通知项目背景在水晶主题下具有适当的透明度 4. 测试重叠通知指示器在新背景样式下正确显示 5. 验证窗口无法通过系统控件调整大小或移动 6. 测试通知中心正确跟随任务栏屏幕 7. 检查 OverlapIndicator 在浅色和深色模式下的边框颜色 PMS: BUG-338883
mhduiy
approved these changes
Mar 23, 2026
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: 18202781743, mhduiy 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
Author
|
/forcemerge |
|
This pr force merged! (status: blocked) |
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
4 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.
light and dark modes
colors
enabled
improved visual hierarchy
Log: Notification center now features blur background effects for better
visual integration
Influence:
backgrounds
styling
different themes
notifications
feat: 为通知中心添加模糊背景效果
Log: 通知中心现在具有模糊背景效果，提供更好的视觉集成
Influence:
PMS: BUG-338883
Summary by Sourcery
Enable blurred, theme-aware backgrounds for the notification center window and notifications, improving visual integration and hierarchy.
New Features:
Enhancements: