Skip to content

style(ui): adjust font and icon size for keyboard layout#137

Merged
deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
add-uos:fix-353825
Mar 21, 2026
Merged

style(ui): adjust font and icon size for keyboard layout#137
deepin-bot[bot] merged 1 commit intolinuxdeepin:masterfrom
add-uos:fix-353825

Conversation

@add-uos
Copy link
Copy Markdown
Contributor

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

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:

  • Use DTK font manager preset for the keyboard layout edit/done button text instead of a hardcoded point size.
  • Reduce the delete/check icon size and implicit button size in the keyboard layout list to better match the surrounding UI in both layout components.

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: 优化键盘布局界面的字体和图标显示效果,提升用户体验。
@sourcery-ai
Copy link
Copy Markdown

sourcery-ai Bot commented Mar 21, 2026

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Switches 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 UI

flowchart 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
Loading

File-Level Changes

Change Details Files
Use DTK font manager preset for the keyboard layout header edit/done button text instead of a hardcoded point size.
  • Replace explicit font.pointSize assignment with a font binding to D.DTK.fontManager.t8 for the header action button text.
  • Apply the same font change to both KeyboardLayout and KeyboardLayoutModule components to keep styling consistent.
src/dcc-fcitx5configtool/qml/KeyboardLayout.qml
src/dcc-fcitx5configtool/qml/KeyboardLayoutModule.qml
Adjust the delete/current-language icon button sizing to match updated UI design guidelines.
  • Reduce icon.width and icon.height from 24 to 16 to shrink the displayed icon size.
  • Reduce implicitWidth and implicitHeight from 36 to 16 so the button’s clickable area matches the new visual size.
  • Mirror these icon sizing changes in both KeyboardLayout and KeyboardLayoutModule item delegate remove buttons.
src/dcc-fcitx5configtool/qml/KeyboardLayout.qml
src/dcc-fcitx5configtool/qml/KeyboardLayoutModule.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
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 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>

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.

Comment thread src/dcc-fcitx5configtool/qml/KeyboardLayout.qml
@deepin-ci-robot
Copy link
Copy Markdown

deepin pr auto review

这段代码 diff 主要针对 Qt/QML 界面元素(DCC 控制中心模块)进行了视觉样式的调整,涉及字体和图标尺寸的修改。以下是对这段代码的审查意见及改进建议:

1. 代码逻辑与语法

  • 语法正确性:代码修改符合 QML 语法规范,属性赋值正确。
  • 逻辑一致性
    • KeyboardLayout.qmlKeyboardLayoutModule.qml 两个文件中进行了相同的修改,保持了代码逻辑的一致性。
    • icon.width/heightimplicitWidth/implicitHeight 被同时修改,确保了按钮的点击区域和图标显示区域的大小保持一致(均为 16),这在逻辑上是合理的,避免了点击区域过大而图标过小(或反之)的视觉错位。

2. 代码质量

  • 样式规范化(优点)
    • font.pointSize: 12 修改为 font: D.DTK.fontManager.t8 是一个非常好的改进。这从硬编码的像素大小转变为使用 DTK (Deepin Tool Kit) 的字体管理器定义的标准字体大小。这样做有助于保持整个应用程序的 UI 风格统一,且更容易适配不同的 DPI 屏幕。
  • UI 细节(建议)
    • 图标尺寸:将图标从 24x24 (点击区域 36x36) 缩小到 16x16 (点击区域 16x16)。
      • 潜在问题:16x16 的点击区域对于鼠标用户来说可能过小,不符合 Fitts's Law(费茨定律),会增加用户点击的难度。
      • 改进建议:虽然为了视觉紧凑可能需要将图标显示为 16x16,但建议保留 implicitWidthimplicitHeight 为较大的值(例如 32 或 36),或者增加 padding,以确保用户有一个足够大的点击热区。如果设计意图确实是缩小整体占用空间,请务必在触摸屏设备上进行测试,确认是否易于点击。

3. 代码性能

  • 性能影响:此次修改仅涉及属性值的变更,不涉及复杂的绑定、循环或动态对象创建,因此对运行时性能几乎没有影响。
  • 渲染:使用 DTK 的字体管理器通常比硬编码更利于渲染引擎的优化。

4. 代码安全

  • 安全性:本次修改仅涉及前端 UI 展示,不涉及数据处理、网络请求或系统命令执行,因此不存在代码注入或权限提升等安全隐患。

总结与改进建议示例

目前的修改在规范化字体方面做得很好,但在图标按钮的可用性方面存在改进空间。

建议修改方案(针对图标按钮部分):
如果设计要求图标视觉上变小,但为了保证可点击性,建议将 implicitWidth/Height 保持或适当调整,而只改变 icon 的大小。

// 建议的修改逻辑(仅供参考,具体尺寸需遵循 UI 设计规范)
Button {
    id: removeButton
    // ...
    // 视觉上的图标大小变小
    icon.width: 16
    icon.height: 16
    
    // 但保留足够的点击热区,或者至少比图标大一点
    // 如果必须严格跟随设计改为 16,请忽略此建议,但需注意用户体验
    implicitWidth: 32  // 或者 36,视设计规范而定
    implicitHeight: 32 // 或者 36
    
    // 也可以通过 padding 来增加点击区域而不改变布局大小
    // padding: 8 
}

结论
代码修改在语法和逻辑上没有问题,采用了更规范的字体管理方式。主要的关注点在于将按钮的点击区域缩小至 16x16 可能会降低用户体验(难以点击)。建议确认 UI 设计规范,在视觉紧凑和操作便捷性之间取得平衡。

@deepin-ci-robot
Copy link
Copy Markdown

[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.

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

@add-uos
Copy link
Copy Markdown
Contributor Author

add-uos commented Mar 21, 2026

/merge

@deepin-bot
Copy link
Copy Markdown

deepin-bot Bot commented Mar 21, 2026

This pr cannot be merged! (status: blocked)

@add-uos
Copy link
Copy Markdown
Contributor Author

add-uos commented Mar 21, 2026

/merge

@deepin-bot deepin-bot Bot merged commit fc3a2e4 into linuxdeepin:master Mar 21, 2026
14 checks passed
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