Skip to content

feat: update control styles to DTK 25 specifications#535

Closed
mhduiy wants to merge 1 commit into
linuxdeepin:masterfrom
mhduiy:dtk25
Closed

feat: update control styles to DTK 25 specifications#535
mhduiy wants to merge 1 commit into
linuxdeepin:masterfrom
mhduiy:dtk25

Conversation

@mhduiy

@mhduiy mhduiy commented Oct 9, 2025

Copy link
Copy Markdown
Contributor

Updated multiple control styling properties to align with DTK 25 design specifications:

  1. Changed control radius from 8 to 6 for more modern appearance
  2. Reduced button height from 36 to 30 for compact layout
  3. Updated comboBox height from 36 to 30 for consistency
  4. Adjusted dialogWindow content horizontal margin from 10 to 6 for better spacing

These changes ensure visual consistency with the latest DTK 25 design system and improve the overall user interface aesthetics.

Log: Updated control styling to match DTK 25 design standards

Influence:

  1. Verify button appearance and layout in various states
  2. Test comboBox dropdown functionality and visual alignment
  3. Check dialog window content spacing and margins
  4. Validate overall UI consistency across different controls
  5. Test responsive behavior with updated dimensions

feat: 更新控件样式以符合 DTK 25 规范

更新多个控件样式属性以符合 DTK 25 设计规范:

  1. 将控件圆角从 8 改为 6,实现更现代的外观
  2. 将按钮高度从 36 减少到 30,实现更紧凑的布局
  3. 将组合框高度从 36 更新为 30,保持一致性
  4. 将对话框窗口内容水平边距从 10 调整为 6,优化间距

这些更改确保与最新的 DTK 25 设计系统保持视觉一致性,并改善整体用户界面美
观度。

Log: 更新控件样式以符合 DTK 25 设计标准

Influence:

  1. 验证各种状态下按钮的外观和布局
  2. 测试组合框下拉功能和视觉对齐
  3. 检查对话框窗口内容间距和边距
  4. 验证不同控件之间的整体 UI 一致性
  5. 测试更新尺寸后的响应行为

Summary by Sourcery

Update control styling to align with DTK 25 design specifications

Enhancements:

  • Reduce control corner radius from 8 to 6
  • Decrease button height from 36 to 30
  • Adjust comboBox height from 36 to 30
  • Reduce horizontal margin in dialogWindow content from 10 to 6

Updated multiple control styling properties to align with DTK 25 design
specifications:
1. Changed control radius from 8 to 6 for more modern appearance
2. Reduced button height from 36 to 30 for compact layout
3. Updated comboBox height from 36 to 30 for consistency
4. Adjusted dialogWindow content horizontal margin from 10 to 6 for
better spacing

These changes ensure visual consistency with the latest DTK 25 design
system and improve the overall user interface aesthetics.

Log: Updated control styling to match DTK 25 design standards

Influence:
1. Verify button appearance and layout in various states
2. Test comboBox dropdown functionality and visual alignment
3. Check dialog window content spacing and margins
4. Validate overall UI consistency across different controls
5. Test responsive behavior with updated dimensions

feat: 更新控件样式以符合 DTK 25 规范

更新多个控件样式属性以符合 DTK 25 设计规范:
1. 将控件圆角从 8 改为 6,实现更现代的外观
2. 将按钮高度从 36 减少到 30,实现更紧凑的布局
3. 将组合框高度从 36 更新为 30,保持一致性
4. 将对话框窗口内容水平边距从 10 调整为 6,优化间距

这些更改确保与最新的 DTK 25 设计系统保持视觉一致性,并改善整体用户界面美
观度。

Log: 更新控件样式以符合 DTK 25 设计标准

Influence:
1. 验证各种状态下按钮的外观和布局
2. 测试组合框下拉功能和视觉对齐
3. 检查对话框窗口内容间距和边距
4. 验证不同控件之间的整体 UI 一致性
5. 测试更新尺寸后的响应行为
@deepin-ci-robot

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: mhduiy

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

deepin-ci-robot added a commit to linuxdeepin/dtk6declarative that referenced this pull request Oct 9, 2025
Synchronize source files from linuxdeepin/dtkdeclarative.

Source-pull-request: linuxdeepin/dtkdeclarative#535
@deepin-ci-robot

Copy link
Copy Markdown
Contributor

deepin pr auto review

我来审查这个git diff,这是一个关于Qt6 QML样式文件的变更,主要涉及一些UI尺寸参数的调整。以下是详细的分析和建议:

1. 语法逻辑分析

  • 语法上没有问题,所有变更都是简单的数值修改。
  • 使用了Qt的属性系统,语法规范正确。

2. 代码质量分析

  • 代码结构清晰,使用了嵌套的QtObject来组织不同UI组件的样式。
  • 样式属性命名规范,具有可读性。

3. 代码性能影响

  • 这些是静态样式属性的修改,不会影响运行时性能。
  • 属性值减小(如按钮高度从36减到30)可能会减少渲染元素的大小,对性能有轻微正面影响。

4. 代码安全性分析

  • 没有引入安全风险,只是UI尺寸的调整。

5. 改进建议

5.1 一致性考虑

  • control.radius 从8改为6,而 button.vPadding 使用 control.radius / 2.0(现在是3),这可能会导致内边距计算不一致。建议检查是否所有使用radius的地方都按比例调整。

5.2 响应式设计考虑

  • 当前使用固定像素值,在不同屏幕密度下可能表现不一致。建议考虑:
    property real scaleFactor: Qt.application.font.pointSize / 12.0
    property int radius: Math.round(6 * scaleFactor)

5.3 可维护性建议

  • 对于频繁调整的尺寸值,建议使用命名常量:
    readonly property int defaultControlHeight: 30
    property QtObject button: QtObject {
        property int height: defaultControlHeight
        // ...
    }

5.4 具体修改建议

  1. button.vPadding: control.radius / 2.0 - 使用浮点数可能导致像素对齐问题,建议使用整数:

    property int vPadding: Math.round(control.radius / 2.0)
  2. dialogWindow.contentHMargin 从10改为6,与其他尺寸调整一致,但需要确保不会导致内容溢出或布局问题。

6. 测试建议

  • 建议进行UI测试,确保尺寸调整后:
    • 文本内容不会溢出
    • 图标与文字的对齐仍然正确
    • 不同分辨率下显示正常
    • 可访问性(如触摸目标大小)仍然符合标准

总体而言,这些修改主要是UI尺寸的微调,不会引入严重问题,但建议进行充分的UI测试以确保视觉效果和用户体验不受影响。

@sourcery-ai

sourcery-ai Bot commented Oct 9, 2025

Copy link
Copy Markdown
Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

This PR updates key styling parameters in FlowStyle.qml to align with DTK 25 design specifications by adjusting control radius, element heights, and dialog margins.

Class diagram for updated FlowStyle control properties

classDiagram
    class FlowStyle {
      +control: QtObject
      +button: QtObject
      +comboBox: QtObject
      +dialogWindow: QtObject
    }
    class control {
      +radius: int
      +spacing: int
      +padding: int
      +borderWidth: int
    }
    class button {
      +width: int
      +height: int
      +hPadding: int
      +vPadding: float
      +iconSize: int
    }
    class comboBox {
      +width: int
      +height: int
      +padding: int
      +spacing: int
      +iconSize: int
    }
    class dialogWindow {
      +width: int
      +height: int
      +contentHMargin: int
      +footerMargin: int
      +titleBarHeight: int
      +iconSize: int
    }
    FlowStyle --> control
    FlowStyle --> button
    FlowStyle --> comboBox
    FlowStyle --> dialogWindow
    %% Highlight updated properties
    control : radius = 6
    button : height = 30
    comboBox : height = 30
    dialogWindow : contentHMargin = 6
Loading

File-Level Changes

Change Details Files
Reduced control corner radius for a more modern look
  • Changed radius property from 8 to 6
qt6/src/qml/FlowStyle.qml
Adjusted control element heights for a compact layout
  • Updated button height from 36 to 30
  • Updated comboBox height from 36 to 30
qt6/src/qml/FlowStyle.qml
Optimized dialog content horizontal margin
  • Reduced contentHMargin from 10 to 6
qt6/src/qml/FlowStyle.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

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey there - I've reviewed your changes - here's some feedback:

  • Consider extracting repeated numeric style values (e.g., radius, heights, margins) into named constants or design tokens to simplify future DTK spec updates.
  • Ensure the reduced control heights still meet accessibility and touch-target size guidelines to avoid potential text clipping or usability issues.
  • Verify that other related components (such as input fields or panels) have been updated for consistent radius and padding to fully align with DTK 25 specifications.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Consider extracting repeated numeric style values (e.g., radius, heights, margins) into named constants or design tokens to simplify future DTK spec updates.
- Ensure the reduced control heights still meet accessibility and touch-target size guidelines to avoid potential text clipping or usability issues.
- Verify that other related components (such as input fields or panels) have been updated for consistent radius and padding to fully align with DTK 25 specifications.

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.

@mhduiy mhduiy marked this pull request as draft October 9, 2025 08:41
@mhduiy

mhduiy commented Oct 9, 2025

Copy link
Copy Markdown
Contributor Author

dtk25还是统一全部一起改吧,单独改一两个控件比较割裂,暂不考虑合并此pr

@mhduiy mhduiy closed this Oct 9, 2025
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