style(ui): adjust font and icon size for keyboard layout#137
style(ui): adjust font and icon size for keyboard layout#137deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
Conversation
Use DTK font manager instead of hardcoded point size, and adjust delete button icon size to better fit the UI design. 使用DTK字体管理器替代硬编码字体大小,并调整删除按钮图标尺寸以更好地适配UI设计。 Log: 调整键盘布局字体和图标大小 PMS: BUG-353825 Influence: 优化键盘布局界面的字体和图标显示效果,提升用户体验。
Reviewer's guide (collapsed on small PRs)Reviewer's GuideSwitches keyboard layout header text to use the DTK font manager preset and reduces the size of the delete/checked icon buttons to better fit the UI in both KeyboardLayout and KeyboardLayoutModule QML components. Flow diagram for applying DTK font manager and icon sizing in keyboard layout UIflowchart TD
A[KeyboardLayout.qml_header_text] --> B[Use_DTK_fontManager_t8_for_font]
C[KeyboardLayoutModule.qml_header_text] --> B
B --> D[Consistent_font_style_across_keyboard_layout_screens]
E[removeButton_icon_in_KeyboardLayout.qml] --> F[Set_icon_width_16_and_height_16]
F --> G[Set_implicitWidth_16_and_implicitHeight_16]
G --> H[Smaller_delete_checked_icons_better_fit_UI]
I[removeButton_icon_in_KeyboardLayoutModule.qml] --> F
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- Reducing the button implicitWidth/implicitHeight to match the 16px icon may make the click target quite small; consider keeping a larger implicit size (or padding) while shrinking only the icon to preserve usability and accessibility.
- KeyboardLayout.qml and KeyboardLayoutModule.qml now carry identical font and removeButton style logic; consider extracting the shared styling into a common component or helper to avoid duplication and keep the UI consistent.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Reducing the button implicitWidth/implicitHeight to match the 16px icon may make the click target quite small; consider keeping a larger implicit size (or padding) while shrinking only the icon to preserve usability and accessibility.
- KeyboardLayout.qml and KeyboardLayoutModule.qml now carry identical font and removeButton style logic; consider extracting the shared styling into a common component or helper to avoid duplication and keep the UI consistent.
## Individual Comments
### Comment 1
<location path="src/dcc-fcitx5configtool/qml/KeyboardLayout.qml" line_range="103-106" />
<code_context>
- icon.height: 24
- implicitWidth: 36
- implicitHeight: 36
+ icon.width: 16
+ icon.height: 16
+ implicitWidth: 16
+ implicitHeight: 16
anchors {
right: itemDelegate.right
</code_context>
<issue_to_address>
**issue:** Reducing the icon and implicit sizes to 16x16 may make the remove button hard to hit and less accessible.
Previously the icon was 24x24 with a 36x36 hit area, which is much more usable on touch and high‑DPI screens. With both `icon.*` and `implicit*` at 16, the hit target shrinks significantly. Please keep a larger `implicitWidth`/`implicitHeight` (or add padding / `Layout.minimumWidth`) while keeping the icon at 16x16 so the visual size is smaller but the clickable area remains comfortable.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
deepin pr auto review这段代码 diff 主要针对 Qt/QML 界面元素(DCC 控制中心模块)进行了视觉样式的调整,涉及字体和图标尺寸的修改。以下是对这段代码的审查意见及改进建议: 1. 代码逻辑与语法
2. 代码质量
3. 代码性能
4. 代码安全
总结与改进建议示例目前的修改在规范化字体方面做得很好,但在图标按钮的可用性方面存在改进空间。 建议修改方案(针对图标按钮部分): // 建议的修改逻辑(仅供参考,具体尺寸需遵循 UI 设计规范)
Button {
id: removeButton
// ...
// 视觉上的图标大小变小
icon.width: 16
icon.height: 16
// 但保留足够的点击热区,或者至少比图标大一点
// 如果必须严格跟随设计改为 16,请忽略此建议,但需注意用户体验
implicitWidth: 32 // 或者 36,视设计规范而定
implicitHeight: 32 // 或者 36
// 也可以通过 padding 来增加点击区域而不改变布局大小
// padding: 8
}结论: |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: add-uos, lzwind 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 |
|
/merge |
|
This pr cannot be merged! (status: blocked) |
|
/merge |
Use DTK font manager instead of hardcoded point size, and adjust delete button icon size to better fit the UI design.
使用DTK字体管理器替代硬编码字体大小,并调整删除按钮图标尺寸以更好地适配UI设计。
Log: 调整键盘布局字体和图标大小
PMS: BUG-353825
Influence: 优化键盘布局界面的字体和图标显示效果,提升用户体验。
Summary by Sourcery
Align keyboard layout editor UI typography and icons with DTK design guidelines.
Enhancements: