Skip to content

feat: optimize search UI icons and layout spacing#308

Open
Kakueeen wants to merge 1 commit into
linuxdeepin:masterfrom
Kakueeen:master
Open

feat: optimize search UI icons and layout spacing#308
Kakueeen wants to merge 1 commit into
linuxdeepin:masterfrom
Kakueeen:master

Conversation

@Kakueeen
Copy link
Copy Markdown
Contributor

@Kakueeen Kakueeen commented May 22, 2026

  1. Replace standard search icon with theme-aware SVG icons (search-
    light.svg/search-dark.svg)
  2. Add custom IconButton class with hover/sunken state visual feedback
    using circular background
  3. Replace clear button with DCI icon and custom paint handling for
    better theme integration
  4. Rename IconButton to ToolButton in generaltoolbar to avoid naming
    conflict with new IconButton
  5. Update toolbar button icon size from 18x18 to 24x24 for better
    visibility
  6. Fix layout margins to use devicePixelRatio for HiDPI screen
    compatibility
  7. Adjust toolbar layout to use stretch for centering and remove fixed
    side margins
  8. Fix DetailItem background color to use palette-based color instead of
    hardcoded black
  9. Add antialiasing to icon tinting in ToolButton paintEvent for
    smoother rendering
  10. Update resource.qrc to include new icon files with proper prefixes

Log: Improved search bar and toolbar visual appearance with theme-aware
icons and better HiDPI support

Influence:

  1. Test search bar appearance in both light and dark themes
  2. Verify search icon changes correctly with theme switching
  3. Test clear button hover and pressed state visual feedback
  4. Verify toolbar button icons display correctly at 24x24 size
  5. Test layout on HiDPI displays (devicePixelRatio scaling)
  6. Verify toolbar buttons are centered with proper spacing
  7. Test DetailItem background color in different themes
  8. Verify all new SVG and DCI icons load correctly from resources

feat: 优化搜索界面图标和布局间距

  1. 将标准搜索图标替换为主题感知 SVG 图标(search-light.svg/search-
    dark.svg)
  2. 添加自定义 IconButton 类,使用圆形背景实现悬停/按下状态视觉反馈
  3. 将清除按钮替换为 DCI 图标并自定义绘制处理,以更好地集成主题
  4. 将 generaltoolbar 中的 IconButton 重命名为 ToolButton,避免与新
    IconButton 命名冲突
  5. 将工具栏按钮图标大小从 18x18 更新为 24x24,提高可见性
  6. 修复布局边距以使用 devicePixelRatio,支持 HiDPI 屏幕
  7. 调整工具栏布局使用 stretch 进行居中,并移除固定侧边边距
  8. 修复 DetailItem 背景颜色,使用基于调色板的颜色替代硬编码黑色
  9. 在 ToolButton 绘制事件中为图标着色添加抗锯齿,实现更平滑的渲染
  10. 更新 resource.qrc 以包含具有正确前缀的新图标文件

Log: 改进搜索栏和工具栏视觉效果,支持主题感知图标和更好的 HiDPI 支持

Influence:

  1. 测试搜索栏在浅色和深色主题下的外观
  2. 验证搜索图标在主题切换时正确变化
  3. 测试清除按钮悬停和按下状态的视觉反馈
  4. 验证工具栏按钮图标在 24x24 尺寸下正确显示
  5. 在 HiDPI 显示器上测试布局(devicePixelRatio 缩放)
  6. 验证工具栏按钮居中且间距正确
  7. 测试 DetailItem 背景颜色在不同主题下的表现
  8. 验证所有新的 SVG 和 DCI 图标从资源中正确加载

BUG: https://pms.uniontech.com/bug-view-361081.html

Summary by Sourcery

Improve search bar and general toolbar visuals with theme-aware icons, refined button styling, and better layout behavior, especially on HiDPI and themed displays.

New Features:

  • Introduce a custom search clear IconButton with circular hover/pressed background and theme-aware DCI icon.
  • Add theme-suffixed SVG search icons for light and dark modes in the match result resources.

Bug Fixes:

  • Make DetailItem background color palette-based instead of hardcoded black to respect light/dark themes.
  • Adjust search bar layout margins using devicePixelRatio for correct spacing on HiDPI screens.
  • Center general toolbar buttons using stretch-based layout instead of fixed side margins.

Enhancements:

  • Increase general toolbar button icon size from 18x18 to 24x24 for improved legibility.
  • Rename the general toolbar IconButton control to ToolButton to avoid conflicts with the new search IconButton class.
  • Apply antialiasing when tinting toolbar icons for smoother rendering.

1. Replace standard search icon with theme-aware SVG icons (search-
light.svg/search-dark.svg)
2. Add custom IconButton class with hover/sunken state visual feedback
using circular background
3. Replace clear button with DCI icon and custom paint handling for
better theme integration
4. Rename IconButton to ToolButton in generaltoolbar to avoid naming
conflict with new IconButton
5. Update toolbar button icon size from 18x18 to 24x24 for better
visibility
6. Fix layout margins to use devicePixelRatio for HiDPI screen
compatibility
7. Adjust toolbar layout to use stretch for centering and remove fixed
side margins
8. Fix DetailItem background color to use palette-based color instead of
hardcoded black
9. Add antialiasing to icon tinting in ToolButton paintEvent for
smoother rendering
10. Update resource.qrc to include new icon files with proper prefixes

Log: Improved search bar and toolbar visual appearance with theme-aware
icons and better HiDPI support

Influence:
1. Test search bar appearance in both light and dark themes
2. Verify search icon changes correctly with theme switching
3. Test clear button hover and pressed state visual feedback
4. Verify toolbar button icons display correctly at 24x24 size
5. Test layout on HiDPI displays (devicePixelRatio scaling)
6. Verify toolbar buttons are centered with proper spacing
7. Test DetailItem background color in different themes
8. Verify all new SVG and DCI icons load correctly from resources

feat: 优化搜索界面图标和布局间距

1. 将标准搜索图标替换为主题感知 SVG 图标(search-light.svg/search-
dark.svg)
2. 添加自定义 IconButton 类,使用圆形背景实现悬停/按下状态视觉反馈
3. 将清除按钮替换为 DCI 图标并自定义绘制处理,以更好地集成主题
4. 将 generaltoolbar 中的 IconButton 重命名为 ToolButton,避免与新
IconButton 命名冲突
5. 将工具栏按钮图标大小从 18x18 更新为 24x24,提高可见性
6. 修复布局边距以使用 devicePixelRatio,支持 HiDPI 屏幕
7. 调整工具栏布局使用 stretch 进行居中,并移除固定侧边边距
8. 修复 DetailItem 背景颜色,使用基于调色板的颜色替代硬编码黑色
9. 在 ToolButton 绘制事件中为图标着色添加抗锯齿,实现更平滑的渲染
10. 更新 resource.qrc 以包含具有正确前缀的新图标文件

Log: 改进搜索栏和工具栏视觉效果,支持主题感知图标和更好的 HiDPI 支持

Influence:
1. 测试搜索栏在浅色和深色主题下的外观
2. 验证搜索图标在主题切换时正确变化
3. 测试清除按钮悬停和按下状态的视觉反馈
4. 验证工具栏按钮图标在 24x24 尺寸下正确显示
5. 在 HiDPI 显示器上测试布局(devicePixelRatio 缩放)
6. 验证工具栏按钮居中且间距正确
7. 测试 DetailItem 背景颜色在不同主题下的表现
8. 验证所有新的 SVG 和 DCI 图标从资源中正确加载

BUG: https://pms.uniontech.com/bug-view-361081.html
@deepin-ci-robot
Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Kakueeen

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

sourcery-ai Bot commented May 22, 2026

Reviewer's Guide

Implements theme-aware search/toolbar icons, introduces a custom circular-hover IconButton for the search field, renames the existing toolbar IconButton to ToolButton, increases toolbar icon size, adjusts layouts for HiDPI and centering, and makes palette-based color/antialiasing improvements, including new SVG resources.

Sequence diagram for theme-aware search icon selection

sequenceDiagram
    participant SearchEditPrivate
    participant Utils
    participant QIcon

    SearchEditPrivate->>Utils: iconThemeSuffix()
    Utils-->>SearchEditPrivate: suffix
    SearchEditPrivate->>QIcon: QIcon(":/icons/search" + suffix + ".svg")
    SearchEditPrivate->>SearchEditPrivate: m_searchAction.setIcon(QIcon)
Loading

File-Level Changes

Change Details Files
Introduce a custom DIconButton-based IconButton for the search edit clear button with theme-aware icon, hover/pressed circular background, and HiDPI-adjusted layout spacing.
  • Add IconButton subclass in searchedit.{h,cpp} derived from Dtk::Widget::DIconButton and override paintEvent to draw a circular background when hovered or pressed using the application palette
  • Use Utils::iconThemeSuffix() to select search-light.svg/search-dark.svg instead of DStyle::standardIcon for the left search icon
  • Replace the external clear DIconButton with the new IconButton, set its icon to DDciIcon::fromTheme("clear") and adjust icon size from 18x18 to 20x20
  • Make m_appIconLabel parented to the SearchEdit widget instead of being unparented
  • Adjust SearchEdit main layout spacing and right margin to divide by devicePixelRatio() for HiDPI support
src/grand-search/gui/entrance/searchedit.h
src/grand-search/gui/entrance/searchedit.cpp
Rename the existing toolbar IconButton to ToolButton, increase toolbar icon size, add antialiasing to active-state icon tinting, and re-center toolbar layout without fixed side margins.
  • Rename the QToolButton subclass from IconButton to ToolButton in generaltoolbar.{h,cpp}, updating all member types and constructors accordingly
  • Increase toolbar button icon size from 18x18 to 24x24 when text is shown beside the icon
  • Enable QPainter::Antialiasing when tinting the active icon in paintEvent for smoother edges
  • Remove hardcoded left/right toolbar margins, set horizontal layout spacing to 0, and add stretches on both sides so the three buttons are centered with only bottom margin remaining
src/grand-search/gui/exhibition/preview/generalwidget/generaltoolbar.h
src/grand-search/gui/exhibition/preview/generalwidget/generaltoolbar.cpp
Make DetailItem background color palette-aware instead of hardcoded black with alpha.
  • Initialize m_backgroundColor from palette().color(QPalette::BrightText) and then set its alpha to 0.05 instead of constructing a fixed QColor(0,0,0,alpha)
src/grand-search/gui/exhibition/preview/generalwidget/detailitem.cpp
Add theme-specific search icons to resources for the match result UI.
  • Register new search-light.svg and search-dark.svg under the matchresult icons path in resource.qrc
  • Add the corresponding SVG files under src/grand-search/gui/exhibition/matchresult/icons/
src/grand-search/gui/exhibition/matchresult/resource.qrc
src/grand-search/gui/exhibition/matchresult/icons/search-dark.svg
src/grand-search/gui/exhibition/matchresult/icons/search-light.svg

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

deepin pr auto review

你好!我是CodeGeeX。我已经仔细审查了你提供的Git Diff代码。本次修改主要涉及UI组件的重构、图标的替换、布局的调整以及自定义绘制逻辑的添加。

总体来说,代码结构清晰,修改目的明确。但为了提升代码的健壮性、性能和安全性,我从语法逻辑、代码质量、代码性能和代码安全四个维度提出以下改进意见:

一、 语法与逻辑

  1. IconButton::paintEvent 中的 QPainter 重复创建与状态丢失风险

    • 问题:在 searchedit.cppIconButton::paintEvent 中,你首先创建了一个 QPainter p(this) 来绘制背景圆,结束后该 QPainter 析构;紧接着又创建了一个 DStylePainter p(this)(注意变量名也是 p,发生了遮蔽)来绘制图标。这不仅导致 QPainter 的重复创建,而且 DStylePainter 不会继承前一个 QPainter 的状态(如裁剪区、渲染提示等),可能导致绘制结果不符合预期。
    • 建议:合并绘制逻辑,复用同一个 QPainter。如果 DStylePainter 必须单独使用,请确保渲染提示被正确设置,并避免变量名遮蔽。
  2. DetailItem 背景色未跟随主题变化

    • 问题:在 detailitem.cpp 中,m_backgroundColor 仅在构造函数中通过 palette().color(QPalette::BrightText) 获取一次。如果用户在程序运行期间切换了深色/浅色主题,这个颜色不会更新,导致界面显示异常。
    • 建议:重写 QWidget::changeEvent,监听 QEvent::PaletteChange 事件,或在 paintEvent 中实时获取当前调色板的颜色。
  3. IconButton 悬停背景透明度逻辑不完整

    • 问题:在 searchedit.cpp 中,if (opt.state & QStyle::State_Sunken) bgColor.setAlphaF(0.2);。这意味着只有在按下时才设置0.2的透明度,而悬停时由于没有设置透明度,将使用 ObviousBackground 的原始透明度(通常是不透明的),这可能导致悬停时背景完全遮挡图标。
    • 建议:为悬停状态也设置合适的透明度,例如 else if (opt.state & QStyle::State_MouseOver) bgColor.setAlphaF(0.1);

二、 代码质量

  1. 类名冲突与命名规范

    • 问题:原代码在 generaltoolbar.h 中定义了 IconButton,你将其重命名为 ToolButton,这很好。但在 searchedit.h 中,你又新建了一个继承自 DIconButton 的类,名字也叫 IconButton。虽然它们在不同的命名空间或编译单元中不会直接报错,但在同一个项目中使用相同的类名极易引起混淆,且不符合单一职责和清晰命名原则。
    • 建议:将 searchedit.h 中的 IconButton 重命名为更具描述性的名字,例如 SearchClearButtonTransparentBgIconButton
  2. SVG 文件命名反直觉

    • 问题:新增的 search-light.svg 内部 <title> 是 "icon/搜索",fill="#000000"(黑色);而 search-dark.svg 内部 <title> 是 "icon/搜索dark",fill="#FFFFFF"(白色)。文件名与内容/标题的对应关系反了,通常 light 主题对应深色图标,dark 主题对应浅色图标,当前命名极易导致后续维护者传错参数。
    • 建议:确认 Utils::iconThemeSuffix() 返回的逻辑。如果 suffix 为 "-dark" 时加载浅色图标,那么当前的文件名可能是反的,建议修正文件名或调整 SVG 内容的标题和颜色逻辑。
  3. 硬编码的魔法数字

    • 问题bgColor.setAlphaF(0.2); 以及 setAlphaF(0.05) 等透明度设置直接硬编码在代码中。
    • 建议:将其提取为具名常量(如 static constexpr qreal kHoverAlpha = 0.2;),方便后续UI微调。

三、 代码性能

  1. 布局边距的浮点数除法

    • 问题mainLayout->setSpacing(6 / q->devicePixelRatio());10 / q->devicePixelRatio()devicePixelRatio() 返回的是 qreal(浮点数),这会导致布局的 Spacing 和 Margin 变成浮点数。Qt 的布局系统在处理浮点数边距时,会不断进行子像素对齐和舍入,在窗口频繁 resize 时可能引发额外的重绘计算,甚至导致边缘模糊。
    • 建议:使用 qRound() 将其转换为整数:qRound(6.0 / q->devicePixelRatio())
  2. 避免在绘制事件中频繁获取调色板实例

    • 问题DGuiApplicationHelper::instance()->applicationPalette();IconButton::paintEvent 中被调用。paintEvent 是高频触发事件。
    • 建议:直接使用 this->palette() 获取当前控件的调色板,或者使用 DStyleHelper::getPalette(this),这比获取全局单例并拷贝 Application Palette 开销要小。

四、 代码安全

  1. 资源文件路径注入风险
    • 问题QIcon(QString(":/icons/search%1.svg").arg(suffix))。如果 Utils::iconThemeSuffix() 返回了包含路径跳转字符(如 ../)的字符串,可能会导致加载预期之外的资源文件。虽然 Qt 资源系统相对封闭,加载恶意文件造成代码执行的风险极低,但这依然是一个不良的编程习惯。
    • 建议:对 suffix 进行合法性校验,或者确保 Utils::iconThemeSuffix() 的返回值被严格限定为枚举或常量字符串。

💡 改进后的代码示例

针对上述主要问题,我为你修改了 searchedit.cpp 中的 IconButton::paintEvent 和布局部分,以及 detailitem.cpp 的颜色处理:

1. searchedit.h (重命名类)

// 建议将 IconButton 重命名为 SearchClearButton 避免混淆
class SearchClearButton : public Dtk::Widget::DIconButton
{
    Q_OBJECT
public:
    explicit SearchClearButton(QWidget *parent = nullptr);

protected:
    void paintEvent(QPaintEvent *event) override;
};

2. searchedit.cpp (优化绘制与布局)

SearchClearButton::SearchClearButton(QWidget *parent)
    : DIconButton(parent)
{
}

void SearchClearButton::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
    
    DStyleOptionButton opt;
    initStyleOption(&opt);

    // 优化:使用 DStylePainter 统一绘制,避免 QPainter 重复创建
    DStylePainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    // 绘制悬停/按下背景
    if (opt.state & (QStyle::State_Sunken | QStyle::State_MouseOver)) {
        // 优化:使用 this->palette() 代替获取全局 applicationPalette
        DPalette dp = this->palette(); 
        QColor bgColor = dp.color(DPalette::ObviousBackground);
        
        // 修复:补充悬停状态的透明度逻辑
        if (opt.state & QStyle::State_Sunken) {
            bgColor.setAlphaF(0.2);
        } else { // State_MouseOver
            bgColor.setAlphaF(0.1); // 建议悬停透明度低于按下
        }

        int radius = qMin(width(), height()) / 2;
        painter.setPen(Qt::NoPen);
        painter.setBrush(bgColor);
        painter.drawEllipse(QPointF(width() / 2.0, height() / 2.0), radius, radius);
    }

    // 绘制图标
    painter.drawControl(DStyle::CE_IconButton, opt);
}

// ... 在 SearchEditPrivate::init() 中 ...
// 修改为 SearchClearButton
m_clearButton = new SearchClearButton(q);

// 优化:使用 qRound 避免浮点数布局造成的性能损耗和模糊
mainLayout->setSpacing(qRound(6.0 / q->devicePixelRatio()));
mainLayout->setContentsMargins(0, 0, qRound(10.0 / q->devicePixelRatio()), 0);

3. detailitem.cpp (支持主题切换)

// 构造函数中:
m_backgroundColor = palette().color(QPalette::BrightText);
m_backgroundColor.setAlphaF(0.05);

// 增加事件过滤/重写 changeEvent 以响应主题变化
void DetailItem::changeEvent(QEvent *event)
{
    if (event->type() == QEvent::PaletteChange) {
        // 重新获取颜色
        m_backgroundColor = palette().color(QPalette::BrightText);
        m_backgroundColor.setAlphaF(0.05);
        update(); // 触发重绘
    }
    QWidget::changeEvent(event);
}

希望这些审查意见和代码改进能对你有所帮助!如果有任何疑问,欢迎随时提问。

Copy link
Copy Markdown

@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 left some high level feedback:

  • Using q->devicePixelRatio() to divide the spacing/margins in SearchEditPrivate::init() is counterintuitive for HiDPI (it shrinks the UI on higher DPR and relies on the widget’s own DPR); consider using devicePixelRatioF() and scaling in the more conventional direction or relying on Qt’s logical pixels instead.
  • The new DetailItem background color derives from QPalette::BrightText, which is primarily a foreground/text role and may produce unexpected contrast in some themes; consider using a background-related role (e.g. Base, AlternateBase, or a mid-tone role) as the source for the tinted background instead.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Using `q->devicePixelRatio()` to divide the spacing/margins in `SearchEditPrivate::init()` is counterintuitive for HiDPI (it shrinks the UI on higher DPR and relies on the widget’s own DPR); consider using `devicePixelRatioF()` and scaling in the more conventional direction or relying on Qt’s logical pixels instead.
- The new `DetailItem` background color derives from `QPalette::BrightText`, which is primarily a foreground/text role and may produce unexpected contrast in some themes; consider using a background-related role (e.g. `Base`, `AlternateBase`, or a mid-tone role) as the source for the tinted background instead.

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.

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.

2 participants