Skip to content

Commit c12b817

Browse files
Kakueeendeepin-bot[bot]
authored andcommitted
feat: optimize search UI icons and layout spacing
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
1 parent 5edd9b5 commit c12b817

9 files changed

Lines changed: 94 additions & 24 deletions

File tree

src/grand-search/gui/entrance/searchedit.cpp

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44

55
#include "searchedit_p.h"
66
#include "searchedit.h"
7+
#include "utils/utils.h"
78

89
#include <DStyle>
910
#include <DIconButton>
1011
#include <DIconTheme>
1112
#include <DFontSizeManager>
1213
#include <DGuiApplicationHelper>
14+
#include <DStyleOptionButton>
1315

1416
#include <QLineEdit>
1517
#include <QHBoxLayout>
@@ -21,7 +23,6 @@
2123
#include <QKeyEvent>
2224
#include <QStyleOption>
2325
#include <QToolButton>
24-
#include <QProxyStyle>
2526

2627
DWIDGET_USE_NAMESPACE
2728
using namespace GrandSearch;
@@ -30,6 +31,34 @@ static constexpr int DelayResponseTime = 50;
3031
static constexpr int AppIconSize = 32;
3132
static constexpr int SearchIconSize = 20;
3233

34+
IconButton::IconButton(QWidget *parent)
35+
: DIconButton(parent)
36+
{
37+
}
38+
39+
void IconButton::paintEvent(QPaintEvent *event)
40+
{
41+
DStyleOptionButton opt;
42+
initStyleOption(&opt);
43+
44+
if (opt.state & (QStyle::State_Sunken | QStyle::State_MouseOver)) {
45+
DPalette dp = DGuiApplicationHelper::instance()->applicationPalette();
46+
QColor bgColor = dp.color(DPalette::ObviousBackground);
47+
if (opt.state & QStyle::State_Sunken)
48+
bgColor.setAlphaF(0.2);
49+
50+
int radius = qMin(width(), height()) / 2;
51+
QPainter p(this);
52+
p.setRenderHint(QPainter::Antialiasing);
53+
p.setPen(Qt::NoPen);
54+
p.setBrush(bgColor);
55+
p.drawEllipse(QPointF(width() / 2.0, height() / 2.0), radius, radius);
56+
}
57+
58+
DStylePainter p(this);
59+
p.drawControl(DStyle::CE_IconButton, opt);
60+
}
61+
3362
SearchEditPrivate::SearchEditPrivate(SearchEdit *qq)
3463
: q(qq)
3564
{
@@ -106,12 +135,13 @@ void SearchEditPrivate::init()
106135
// 左侧搜索图标 action(聚焦后显示)
107136
m_searchAction = new QAction(q);
108137
m_searchAction->setObjectName("_d_search_leftAction");
109-
m_searchAction->setIcon(DStyle::standardIcon(q->style(), DStyle::SP_IndicatorSearch));
138+
QString suffix = Utils::iconThemeSuffix();
139+
m_searchAction->setIcon(QIcon(QString(":/icons/search%1.svg").arg(suffix)));
110140
m_lineEdit->addAction(m_searchAction, QLineEdit::LeadingPosition);
111141
m_searchAction->setVisible(false);
112142

113143
// 应用图标(右侧)
114-
m_appIconLabel = new QLabel;
144+
m_appIconLabel = new QLabel(q);
115145
m_appIconLabel->setFixedSize(AppIconSize, AppIconSize);
116146
m_appIconLabel->setVisible(false);
117147

@@ -120,8 +150,9 @@ void SearchEditPrivate::init()
120150
m_lineEdit->addAction(m_appIconAction, QLineEdit::TrailingPosition);
121151

122152
// 清除按钮(QLineEdit 外部)
123-
m_clearButton = new DIconButton(DStyle::SP_LineEditClearButton);
124-
m_clearButton->setIconSize({ 18, 18 });
153+
m_clearButton = new IconButton(q);
154+
m_clearButton->setIconSize({ 20, 20 });
155+
m_clearButton->setIcon(DDciIcon::fromTheme("clear"));
125156
m_clearButton->setFlat(true);
126157
m_clearButton->setFocusPolicy(Qt::NoFocus);
127158
m_clearButton->setVisible(false);
@@ -133,8 +164,8 @@ void SearchEditPrivate::init()
133164

134165
// 主布局
135166
QHBoxLayout *mainLayout = new QHBoxLayout(q);
136-
mainLayout->setSpacing(8);
137-
mainLayout->setContentsMargins(0, 0, 10, 0);
167+
mainLayout->setSpacing(6 / q->devicePixelRatio());
168+
mainLayout->setContentsMargins(0, 0, 10 / q->devicePixelRatio(), 0);
138169
mainLayout->addWidget(m_lineEdit);
139170
mainLayout->addWidget(m_clearButton);
140171
mainLayout->addWidget(m_appIconLabel);

src/grand-search/gui/entrance/searchedit.h

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
#ifndef SEARCHEDIT_H
66
#define SEARCHEDIT_H
77

8+
#include <DIconButton>
9+
810
#include <QLineEdit>
911
#include <QScopedPointer>
1012

@@ -13,6 +15,16 @@ class QIcon;
1315

1416
namespace GrandSearch {
1517

18+
class IconButton : public Dtk::Widget::DIconButton
19+
{
20+
Q_OBJECT
21+
public:
22+
explicit IconButton(QWidget *parent = nullptr);
23+
24+
protected:
25+
void paintEvent(QPaintEvent *event) override;
26+
};
27+
1628
class SearchEditPrivate;
1729
class SearchEdit : public QWidget
1830
{
Binary file not shown.
Lines changed: 10 additions & 0 deletions
Loading
Lines changed: 10 additions & 0 deletions
Loading
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<RCC>
22
<qresource prefix="/">
33
<file>icons/aisearch.svg</file>
4+
<file>icons/search-light.svg</file>
5+
<file>icons/search-dark.svg</file>
6+
</qresource>
7+
<qresource prefix="/dsg">
8+
<file>built-in-icons/clear.dci</file>
49
</qresource>
510
</RCC>

src/grand-search/gui/exhibition/preview/generalwidget/detailitem.cpp

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ DetailItem::DetailItem(QWidget *parent)
2222
{
2323
setFixedWidth(360);
2424

25-
m_backgroundColor = QColor(0, 0, 0, int(255*0.05));
25+
m_backgroundColor = palette().color(QPalette::BrightText);
26+
m_backgroundColor.setAlphaF(0.05);
2627

2728
setContentsMargins(20, 0, 10, 0);
2829

src/grand-search/gui/exhibition/preview/generalwidget/generaltoolbar.cpp

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,13 @@
1919
#define TOOLBTN_WIDTH_WIDE 108
2020
#define TOOLBTN_MAX_PIXELSIZE 18
2121
#define TOOLBAR_HEIGHT 36
22-
#define TOOLBAR_LEFT_MARGIN 30
23-
#define TOOLBAR_RIGHT_MARGIN 30
2422
#define TOOLBAR_BOTTOM_MARGIN 10
2523

2624
using namespace GrandSearch;
2725
DWIDGET_USE_NAMESPACE
2826
DGUI_USE_NAMESPACE
2927

30-
IconButton::IconButton(QWidget *parent)
28+
ToolButton::ToolButton(QWidget *parent)
3129
: QToolButton(parent)
3230
{
3331
setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
@@ -36,14 +34,14 @@ IconButton::IconButton(QWidget *parent)
3634

3735
if (this->font().pixelSize() < TOOLBTN_MAX_PIXELSIZE) {
3836
setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
39-
setIconSize(QSize(18, 18));
37+
setIconSize(QSize(24, 24));
4038
} else {
4139
setToolButtonStyle(Qt::ToolButtonIconOnly);
4240
setIconSize(size());
4341
}
4442
}
4543

46-
void IconButton::updatePalette()
44+
void ToolButton::updatePalette()
4745
{
4846
bool isDark = DGuiApplicationHelper::instance()->themeType() == DGuiApplicationHelper::DarkType;
4947
QColor textColor = isDark
@@ -58,7 +56,7 @@ void IconButton::updatePalette()
5856
setPalette(pa);
5957
}
6058

61-
void IconButton::paintEvent(QPaintEvent *event)
59+
void ToolButton::paintEvent(QPaintEvent *event)
6260
{
6361
Q_UNUSED(event);
6462
QStylePainter painter(this);
@@ -70,6 +68,7 @@ void IconButton::paintEvent(QPaintEvent *event)
7068
if (!pix.isNull() && active) {
7169
QColor tintColor = palette().color(QPalette::Highlight);
7270
QPainter p(&pix);
71+
p.setRenderHint(QPainter::Antialiasing);
7372
p.setCompositionMode(QPainter::CompositionMode_SourceIn);
7473
p.fillRect(pix.rect(), tintColor);
7574
p.end();
@@ -92,22 +91,22 @@ void GeneralToolBar::initUi()
9291

9392
m_hMainLayout = new QHBoxLayout(this);
9493
// 下边距10
95-
m_hMainLayout->setContentsMargins(TOOLBAR_LEFT_MARGIN, 0, TOOLBAR_RIGHT_MARGIN, TOOLBAR_BOTTOM_MARGIN);
96-
m_hMainLayout->setSpacing(2);
94+
m_hMainLayout->setContentsMargins(0, 0, 0, TOOLBAR_BOTTOM_MARGIN);
95+
m_hMainLayout->setSpacing(0);
9796

9897
QString suffix = Utils::iconThemeSuffix();
9998

100-
m_openBtn = new IconButton(this);
99+
m_openBtn = new ToolButton(this);
101100
m_openBtn->setText(tr("Open"));
102101
m_openBtn->setIcon(QIcon(QString(":/icons/open%1.svg").arg(suffix)));
103102
m_openBtn->setFixedWidth(TOOLBTN_WIDTH_NARROW);
104103

105-
m_openPathBtn = new IconButton(this);
104+
m_openPathBtn = new ToolButton(this);
106105
m_openPathBtn->setText(tr("Open Path"));
107106
m_openPathBtn->setIcon(QIcon(QString(":/icons/openpath%1.svg").arg(suffix)));
108107
m_openPathBtn->setFixedWidth(TOOLBTN_WIDTH_WIDE);
109108

110-
m_copyPathBtn = new IconButton(this);
109+
m_copyPathBtn = new ToolButton(this);
111110
m_copyPathBtn->setText(tr("Copy Path"));
112111
m_copyPathBtn->setIcon(QIcon(QString(":/icons/copypath%1.svg").arg(suffix)));
113112
m_copyPathBtn->setFixedWidth(TOOLBTN_WIDTH_WIDE);
@@ -117,11 +116,13 @@ void GeneralToolBar::initUi()
117116
m_vLine2 = new DVerticalLine(this);
118117
m_vLine2->setFixedHeight(30);
119118

119+
m_hMainLayout->addStretch(1);
120120
m_hMainLayout->addWidget(m_openBtn);
121121
m_hMainLayout->addWidget(m_vLine1);
122122
m_hMainLayout->addWidget(m_openPathBtn);
123123
m_hMainLayout->addWidget(m_vLine2);
124124
m_hMainLayout->addWidget(m_copyPathBtn);
125+
m_hMainLayout->addStretch(1);
125126

126127
this->setLayout(m_hMainLayout);
127128
}

src/grand-search/gui/exhibition/preview/generalwidget/generaltoolbar.h

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ class QHBoxLayout;
1515

1616
namespace GrandSearch {
1717

18-
class IconButton: public QToolButton
18+
class ToolButton: public QToolButton
1919
{
2020
Q_OBJECT
2121
public:
22-
explicit IconButton(QWidget *parent = nullptr);
22+
explicit ToolButton(QWidget *parent = nullptr);
2323

2424
protected:
2525
void paintEvent(QPaintEvent *event) override;
@@ -46,9 +46,9 @@ class GeneralToolBar : public Dtk::Widget::DWidget
4646
private:
4747
QHBoxLayout* m_hMainLayout = nullptr;
4848

49-
IconButton *m_openBtn = nullptr;
50-
IconButton *m_openPathBtn = nullptr;
51-
IconButton *m_copyPathBtn = nullptr;
49+
ToolButton *m_openBtn = nullptr;
50+
ToolButton *m_openPathBtn = nullptr;
51+
ToolButton *m_copyPathBtn = nullptr;
5252

5353
Dtk::Widget::DVerticalLine* m_vLine1 = nullptr;
5454
Dtk::Widget::DVerticalLine* m_vLine2 = nullptr;

0 commit comments

Comments
 (0)