Skip to content

Conversation

@18202781743
Copy link
Contributor

@18202781743 18202781743 commented Mar 26, 2025

According to v25 in sketch.
sketch.com/s/af485842-d50e-4969-9c0c-e027cfc7c0d2

Summary by Sourcery

Update OSD (On-Screen Display) UI components to match v25 design specifications, improving visual consistency and user experience across different notification panels.

New Features:

  • Add support for new window effect OSD type in test script

Enhancements:

  • Redesign OSD components with improved layout, spacing, and visual styling
  • Update QtQuick imports to use newer module syntax
  • Implement more consistent theming and color palettes across OSD panels
  • Enhance icon and text rendering with DTK theming

Chores:

  • Refactor OSD QML components to use more modern Qt Quick practices

@sourcery-ai
Copy link

sourcery-ai bot commented Mar 26, 2025

Reviewer's Guide by Sourcery

This pull request updates the OSD UI to match the v25 design specifications. It includes changes to the layout, styling, and component usage of various OSD applets, such as window effect, display mode, audio, brightness, keyboard layout, and default notifications. The test script was also updated to use the correct D-Bus destination and interface.

Updated class diagram for AppletItem

classDiagram
    class AppletItem {
        implicitWidth: int
        implicitHeight: int
        singleView: bool
        selectIndex: int
        checkedIndex: int
        update(osdType)
        match(osdType)
        indexByValue(value)
    }
    note for AppletItem "Added singleView property and updated implicitWidth and implicitHeight"
Loading

Updated class diagram for D.ItemDelegate

classDiagram
    class D.ItemDelegate {
        padding: int
        spacing: int
        checkable: bool
        index: int
        iconName: string
        title: string
        description: string
        backgroundColor: D.Palette
        checkedBackgroundColor: D.Palette
        dropShadowColor: D.Palette
        innerShadowColor: D.Palette
        isCurrent: bool
    }
    note for D.ItemDelegate "Added properties for styling and current state"
Loading

Updated class diagram for D.ProgressBar

classDiagram
    class D.ProgressBar {
        from: real
        value: real
        to: real
        contentColor: D.Palette
        backgroundColor: D.Palette
    }
    note for D.ProgressBar "Added properties for styling"
Loading

Updated class diagram for Window

classDiagram
    class Window {
        visible: bool
        osdView: Item
        isSingleView: bool
    }
    note for Window "Added isSingleView property"
Loading

File-Level Changes

Change Details Files
Refactored the UI of the OSD (On-Screen Display) applets to align with the v25 design, including changes to layout, styling, and component usage.
  • Updated dimensions and margins for better visual appearance.
  • Adjusted spacing between elements for improved readability.
  • Modified color palettes to match the new design.
  • Replaced standard QtQuick components with custom components from org.deepin.ds and org.deepin.dtk for consistent styling.
  • Added shadows and background effects for enhanced visual appeal.
  • Adjusted font sizes and styles for better readability.
  • Modified icon sizes and alignments.
  • Added checked icons to indicate the selected item.
  • Added a singleView property to control the window radius.
  • Adjusted the bottom margin of the DLayerShellWindow.
panels/notification/osd/windoweffect/package/main.qml
panels/notification/osd/displaymode/package/main.qml
panels/notification/osd/audio/package/main.qml
panels/notification/osd/brightness/package/main.qml
panels/notification/osd/kblayout/package/main.qml
panels/notification/osd/default/package/main.qml
panels/notification/osd/package/main.qml
Updated the test script to use the correct D-Bus destination and interface for triggering OSD events.
  • Changed the D-Bus destination from org.deepin.dde.Shell to org.deepin.dde.Osd1.
  • Changed the D-Bus interface from org.deepin.osdService to org.deepin.dde.Osd1.
  • Added windoweffect to the test script.
panels/notification/osd/test.sh

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!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

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

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @18202781743 - I've reviewed your changes - here's some feedback:

Overall Comments:

  • Consider defining a standard height for AppletItem to ensure consistent sizing across different OSD types.
  • It looks like you're adding shadows to the items - make sure these work well with dark and light themes.
Here's what I looked at during the review
  • 🟡 General issues: 1 issue found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +70 to +144
Component.onCompleted: {
Qt.callLater(function () {
view.implicitWidth = view.maxItemWidth()
Copy link

Choose a reason for hiding this comment

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

suggestion: Recalculate ListView implicitWidth on model changes.

Currently the implicitWidth is updated only after the delegate’s completion. It might be beneficial to also update it when the model changes to handle dynamic content sizing.

Suggested implementation:

        model: Applet.layouts
        onCountChanged: {
            Qt.callLater(function () {
                view.implicitWidth = view.maxItemWidth()
            })
        }

Ensure that the ListView element has an id "view" so that the above changes correctly reference it. Also, if there are any other parts of the code which manipulate the model, double-check that the implicitWidth is recalculated appropriately.

BLumia
BLumia previously approved these changes Mar 26, 2025
@deepin-ci-robot
Copy link

deepin pr auto review

代码审查意见:

  1. main.qml文件中,AppletItemimplicitWidthimplicitHeight属性被硬编码为固定值,这可能会导致在不同屏幕尺寸的设备上显示不正确。建议使用响应式设计来动态计算这些值。

  2. main.qml文件中,RowLayoutspacing属性被设置为0,这可能会导致元素之间的间距不一致。建议根据设计需求调整间距。

  3. main.qml文件中,Text元素的颜色属性被设置为palette.windowText,但是palette属性在AppletItem中并没有被定义。这可能会导致运行时错误。建议检查AppletItem的定义,确保palette属性被正确设置。

  4. main.qml文件中,ListViewdelegate中的Text元素使用了D.DTK.fontManager.t5D.DTK.fontManager.t6字体,但是这些字体在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些字体被正确设置。

  5. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  6. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  7. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  8. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  9. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  10. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  11. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  12. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  13. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  14. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  15. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  16. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  17. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  18. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  19. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  20. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  21. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  22. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  23. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  24. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  25. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  26. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  27. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  28. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  29. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  30. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  31. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  32. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  33. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  34. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  35. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  36. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  37. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  38. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  39. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  40. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  41. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  42. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  43. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  44. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  45. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  46. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  47. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  48. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  49. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  50. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeTypeD.DTK.makeIconPalette(control.palette)方法,但是这些方法在D.DTK模块中并没有定义。这可能会导致运行时错误。建议检查D.DTK模块的定义,确保这些方法被正确实现。

  51. main.qml文件中,ListViewdelegate中的D.DciIcon元素使用了D.DTK.themeType和`D

@18202781743 18202781743 requested a review from BLumia March 27, 2025 02:32
According to v25 in sketch.
sketch.com/s/af485842-d50e-4969-9c0c-e027cfc7c0d2
@deepin-ci-robot
Copy link

[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.

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

@18202781743
Copy link
Contributor Author

/forcemerge

@deepin-bot
Copy link

deepin-bot bot commented Mar 27, 2025

This pr force merged! (status: blocked)

@deepin-bot deepin-bot bot merged commit f059689 into linuxdeepin:master Mar 27, 2025
7 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants