Skip to content

fix(plugin): set DTK palette for loaded plugin components#3050

Open
add-uos wants to merge 1 commit intolinuxdeepin:masterfrom
add-uos:fix-palette-BUG-298841-BUG-338393
Open

fix(plugin): set DTK palette for loaded plugin components#3050
add-uos wants to merge 1 commit intolinuxdeepin:masterfrom
add-uos:fix-palette-BUG-298841-BUG-338393

Conversation

@add-uos
Copy link
Contributor

@add-uos add-uos commented Mar 5, 2026

Automatically set DTK palette for all plugin components loaded via DccLoader to ensure consistent theming across all modules.

为通过DccLoader加载的插件组件自动设置DTK调色板,确保所有模块的主题一致性。

Log: 修复插件加载时未设置调色板的问题
PMS: BUG-298841, BUG-338393
Influence: 所有加载的插件组件现在都会正确使用DTK调色板,确保界面颜色主题统一,提升视觉一致性。

@deepin-ci-robot
Copy link

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: add-uos

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

sourcery-ai bot commented Mar 5, 2026

Reviewer's Guide

Ensure all plugin UI components loaded in the control center use the DTK palette and improve visual feedback based on window activation, while also updating some QML imports and SPDX year ranges.

Sequence diagram for applying DTK palette when loading plugin components

sequenceDiagram
    actor User
    participant ControlCenter
    participant DccLoader
    participant PluginComponent
    participant DTK as D_DTK

    User ->> ControlCenter: openPlugin(moduleId)
    ControlCenter ->> DccLoader: set dccObj(moduleId)
    DccLoader ->> DccLoader: updateDccObjItem()
    DccLoader ->> PluginComponent: load()
    PluginComponent -->> DccLoader: onLoaded(item)

    alt item has palette property
        DccLoader ->> DTK: access DTK.palette
        DTK -->> DccLoader: palette
        DccLoader ->> PluginComponent: item.palette = DTK.palette
    else item has no palette property
        DccLoader ->> DccLoader: skip palette assignment
    end

    PluginComponent -->> User: display with DTK theming
Loading

Class diagram for updated QML components and DTK palette usage

classDiagram
    class DccLoader {
        +var dccObj
        +var dccObjItem
        +function updateDccObjItem()
        +onDccObjChanged()
        +onDccObjItemChanged()
        +Component_onCompleted()
        +onLoaded()
    }

    class DccRightView {
        +bool empty
        +bool isGroup
        +real margin
        +bool scrollBarVisible
        +palette palette
    }

    class Crumb {
        +var model
        +palette palette
        +signal clicked(model)
        +function updateLayout()
    }

    class SecondPageSidebarItem {
        +bool windowActive
        +real opacity
        +bool checked
        +bool cascadeSelected
    }

    class DccWindowLeftActionButton {
        +bool windowActive
        +real opacity
        +palette windowText
    }

    class D_DTK {
        +palette palette
    }

    class D_ColorSelector {
        +color textColor
    }

    DccLoader --> D_DTK : uses palette
    DccRightView --> D_DTK : uses palette
    Crumb --> D_DTK : uses palette
    DccWindowLeftActionButton --> D_ColorSelector : uses textColor

    SecondPageSidebarItem <.. DccRightView : contained delegate
    DccWindowLeftActionButton <.. DccWindow : contained action button
Loading

File-Level Changes

Change Details Files
Apply DTK palette automatically to dynamically loaded plugin components and key container views to ensure consistent theming.
  • Import the DTK namespace in the plugin loader and relevant view QML files.
  • Set the palette of loaded items in the loader’s onLoaded handler when the item exposes a palette property.
  • Bind the palette of the right-side Flickable view and breadcrumb component to the global DTK palette.
src/dde-control-center/plugin/DccLoader.qml
src/dde-control-center/plugin/DccRightView.qml
src/dde-control-center/plugin/Crumb.qml
Adjust UI behavior based on window active state for better visual feedback.
  • Add a windowActive property driven by Window.window.active and bind opacity to this state in the second-page delegate.
  • Add the same active-state-driven opacity behavior to the main window’s left action button.
src/dde-control-center/plugin/SecondPage.qml
src/dde-control-center/plugin/DccWindow.qml
Perform minor housekeeping updates to QML imports and copyright metadata.
  • Relax some QtQuick imports from versioned to unversioned form.
  • Adjust SPDX copyright year ranges across several QML files.
src/dde-control-center/plugin/DccLoader.qml
src/dde-control-center/plugin/DccRightView.qml
src/dde-control-center/plugin/SecondPage.qml
src/dde-control-center/plugin/Crumb.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

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 - I've found 1 issue, and left some high level feedback:

  • In Crumb.qml you set palette: D.DTK.palette but there is no import org.deepin.dtk 1.0 as D, which will cause a runtime error; add the DTK import as you did in DccRightView.qml.
  • In DccLoader.qml you assign item.palette = D.DTK.palette once in onLoaded, meaning it will not follow palette changes at runtime; consider using a binding (e.g. item.palette = Qt.binding(function() { return D.DTK.palette })) so loaded plugins track theme updates automatically.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In `Crumb.qml` you set `palette: D.DTK.palette` but there is no `import org.deepin.dtk 1.0 as D`, which will cause a runtime error; add the DTK import as you did in `DccRightView.qml`.
- In `DccLoader.qml` you assign `item.palette = D.DTK.palette` once in `onLoaded`, meaning it will not follow palette changes at runtime; consider using a binding (e.g. `item.palette = Qt.binding(function() { return D.DTK.palette })`) so loaded plugins track theme updates automatically.

## Individual Comments

### Comment 1
<location path="src/dde-control-center/plugin/DccRightView.qml" line_range="16" />
<code_context>
     property alias model: repeater.model
     signal clicked(var model)

+    palette: D.DTK.palette
     function updateLayout() {
         let totalWidth = width
</code_context>
<issue_to_address>
**issue (bug_risk):** Using `palette` on `Flickable` is likely invalid and will cause a QML error.

In QtQuick, `Flickable` doesn’t have a `palette` property (that belongs to `QtQuick.Controls::Control` and its subclasses). Unless you have a custom `Flickable` type defining `palette`, this will fail with an invalid property assignment at load time. If you need the DTK palette here, apply it on a `Control`-derived child or wrap the content in a `Control` that owns the palette instead.
</issue_to_address>

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.

autoHideOnFullscreen: true
focus: true
leftContent: D.ActionButton {
property bool windowActive: Window.window ? Window.window.active : true
Copy link
Contributor

Choose a reason for hiding this comment

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

这个是为了什么呀?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

DCI彩色图标,没有inactive状态,需要单独设置

Component.onCompleted: updateDccObjItem()
onLoaded: {
if (item && item.palette !== undefined) {
item.palette = D.DTK.palette
Copy link
Contributor

Choose a reason for hiding this comment

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

需要给每个Item单独设置么?它不继承么?

@deepin-bot
Copy link

deepin-bot bot commented Mar 5, 2026

TAG Bot

New tag: 6.1.75
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #3051

@add-uos add-uos force-pushed the fix-palette-BUG-298841-BUG-338393 branch from 133e060 to f0a5879 Compare March 6, 2026 01:14
Automatically set DTK palette for all plugin components loaded via
DccLoader to ensure consistent theming across all modules.

为通过DccLoader加载的插件组件自动设置DTK调色板,确保所有模块的主题一致性。

Log: 修复插件加载时未设置调色板的问题
PMS: BUG-298841, BUG-338393
Influence: 所有加载的插件组件现在都会正确使用DTK调色板,确保界面颜色主题统一,提升视觉一致性。
@add-uos add-uos force-pushed the fix-palette-BUG-298841-BUG-338393 branch from f0a5879 to 6d8d88f Compare March 6, 2026 01:19
@deepin-ci-robot
Copy link

deepin pr auto review

这份代码修改主要涉及QML文件的版权年份更新、Qt版本导入方式的变更,以及针对DTK(Deepin Tool Kit)主题适配和窗口激活状态的视觉反馈优化。以下是对代码的详细审查意见:

1. 语法逻辑

  • 版权年份更新

    • 修改:将 SPDX-FileCopyrightText 中的年份范围从 2024 - 2027 修改为 2024 - 2026
    • 意见:这属于常规维护,逻辑正确。确保了版权声明的时效性。
  • Qt 模块导入

    • 修改:将 import QtQuick 2.15 修改为 import QtQuick
    • 意见:这是Qt 6推荐的无版本导入方式,依赖于构建系统(如CMake)来解析具体版本。语法上没有问题,但需确保构建环境已正确配置Qt 6。
  • DTK 调色板绑定

    • 修改:在 Crumb.qml, DccRightView.qml, SecondPage.qml 中添加了 palette: D.DTK.palette
    • 意见:逻辑正确。这使得控件能够自动跟随DTK的主题颜色变化。但在 Crumb.qml 中,虽然导入了 org.deepin.dtk 1.0(隐含在D命名空间的使用中,虽然diff中未显示import行,但其他文件有),请确保 Crumb.qml 文件头部也正确导入了 import org.deepin.dtk 1.0 as D,否则会导致运行时错误。
  • 窗口激活状态处理

    • 修改:在 DccWindow.qmlSecondPage.qml 中添加了属性 windowActive 并绑定到 opacity
    • 代码property bool windowActive: Window.window ? Window.window.active : true
    • 意见:逻辑基本正确。使用了安全导航符 (Window.window ? ...) 来防止空引用。默认值设为 true 是合理的,意味着如果无法获取窗口状态,默认显示为完全不透明。

2. 代码质量

  • 硬编码颜色值

    • 问题:在 SecondPage.qml 中,仍然存在硬编码的颜色定义:
      background: Rectangle {
          normal: Qt.rgba(0.97, 0.97, 0.97, 0.95)
          normalDark: Qt.rgba(0.09, 0.09, 0.09, 0.85)
      }
    • 改进建议:既然已经引入了 palette: D.DTK.palette,建议将上述硬编码的背景色也替换为使用 palette 的属性(例如 palette.windowpalette.base),以确保深色/浅色主题切换时的一致性和维护性。保留硬编码会导致在自定义主题下可能出现视觉不协调。
  • 代码一致性

    • 问题DccWindow.qml 中添加了 opacity 绑定,但 SecondPage.qml 中也添加了类似的逻辑。
    • 改进建议:如果在多个控件中都需要"窗口非激活时变透明"的效果,建议考虑将此逻辑封装为一个通用的 QML 组件或者 Mixin(通过附加属性),避免代码重复。

3. 代码性能

  • 属性绑定频率
    • property bool windowActive: Window.window ? Window.window.active : true
    • 这个绑定依赖于 Window.window.active。当窗口激活状态改变时,QML引擎会自动重新计算该属性并更新 opacity。这种性能开销是可以接受的,因为窗口激活/失活不是高频事件。
  • 调色板绑定
    • palette: D.DTK.palette 会建立与全局主题对象的连接。这是DTK应用的标准做法,性能影响在可控范围内。

4. 代码安全

  • 空指针检查
    • Window.window ? Window.window.active : true 做了良好的防御性编程,防止在组件未附加到窗口时访问 active 属性导致崩溃。
  • 导入安全
    • 使用 import QtQuick 而不带版本号,将版本控制权交给了项目环境。这要求项目构建配置必须严格,防止引入不兼容的Qt版本。

总结与建议

  1. 确认导入:请务必确认 Crumb.qml 中已经添加了 import org.deepin.dtk 1.0 as D,否则 palette: D.DTK.palette 会报错。
  2. 消除硬编码:建议重构 SecondPage.qml 中的 background 部分,利用 palette 属性替代 Qt.rgba 硬编码,以完全适配DTK主题系统。
  3. 逻辑封装:对于窗口激活时的透明度变化逻辑,如果未来有更多组件需要此功能,建议进行封装以减少重复代码。

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.

3 participants