feat: optimize search UI icons and layout spacing#308
Conversation
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
|
[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. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Reviewer's GuideImplements 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 selectionsequenceDiagram
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)
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
deepin pr auto review你好!我是CodeGeeX。我已经仔细审查了你提供的Git Diff代码。本次修改主要涉及UI组件的重构、图标的替换、布局的调整以及自定义绘制逻辑的添加。 总体来说,代码结构清晰,修改目的明确。但为了提升代码的健壮性、性能和安全性,我从语法逻辑、代码质量、代码性能和代码安全四个维度提出以下改进意见: 一、 语法与逻辑
二、 代码质量
三、 代码性能
四、 代码安全
💡 改进后的代码示例针对上述主要问题,我为你修改了 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);
}希望这些审查意见和代码改进能对你有所帮助!如果有任何疑问,欢迎随时提问。 |
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- Using
q->devicePixelRatio()to divide the spacing/margins inSearchEditPrivate::init()is counterintuitive for HiDPI (it shrinks the UI on higher DPR and relies on the widget’s own DPR); consider usingdevicePixelRatioF()and scaling in the more conventional direction or relying on Qt’s logical pixels instead. - The new
DetailItembackground color derives fromQPalette::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.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
light.svg/search-dark.svg)
using circular background
better theme integration
conflict with new IconButton
visibility
compatibility
side margins
hardcoded black
smoother rendering
Log: Improved search bar and toolbar visual appearance with theme-aware
icons and better HiDPI support
Influence:
feat: 优化搜索界面图标和布局间距
dark.svg)
IconButton 命名冲突
Log: 改进搜索栏和工具栏视觉效果,支持主题感知图标和更好的 HiDPI 支持
Influence:
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:
Bug Fixes:
Enhancements: