Skip to content

fix(network): improve copy button interaction and icon on network details page#578

Open
iCancely wants to merge 2 commits into
linuxdeepin:masterfrom
iCancely:fix/network-details-copy-button
Open

fix(network): improve copy button interaction and icon on network details page#578
iCancely wants to merge 2 commits into
linuxdeepin:masterfrom
iCancely:fix/network-details-copy-button

Conversation

@iCancely

@iCancely iCancely commented Jul 22, 2026

Copy link
Copy Markdown

fix(network): improve copy button interaction and icon on network details page

Replace IconLabel with ActionButton for better hover/pressed feedback.
Add 30x30px hover/pressed background with 6px radius.
Right-align the copy button in the header.
Update copy icon resource to match foreground color.

Log: Improved copy button UX on network details page
PMS: https://pms.uniontech.com/bug-view-370975.html
Influence: Network details page copy button interaction and appearance

fix(network): 优化网络详情页复制按钮交互和图标

将 IconLabel 替换为 ActionButton 以支持 hover/pressed 反馈。
添加 30x30px hover/pressed 背景,圆角 6px。
复制按钮在标题栏中右对齐。
更新 copy 图标资源以匹配前景色。

Log: 优化网络详情页复制按钮交互和外观
PMS: https://pms.uniontech.com/bug-view-370975.html
Influence: 网络详情页复制按钮的交互和外观

1. Set left label text to T6 font size on detail list items
2. Set right content text to T7 font size on detail list items

Log: Adjusted font sizes for labels and content on network details page
Influence: Detail page text follows design spec font sizes

fix(network): 调整网络详情页面字体大小

1. 将详情列表左侧标签文字字号设置为 T6
2. 将详情列表右侧内容文字字号设置为 T7

Log: 调整网络详情页面的标签和内容字体大小
PMS: BUG-370973
Influence: 详情页文字符合设计规范字号
@deepin-ci-robot

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: iCancely

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

@sourcery-ai

sourcery-ai Bot commented Jul 22, 2026

Copy link
Copy Markdown

Reviewer's Guide

Refactors the copy action on the Network Details page to use a proper action button with hover/pressed feedback, a dedicated background hit area, and updated typography for list items to align with design guidelines.

Sequence diagram for updated copy action on Network Details page

sequenceDiagram
    actor User
    participant PageDetails
    participant ActionButton
    participant dccData
    participant ToolTip

    User->>ActionButton: click
    ActionButton->>ActionButton: onClicked
    ActionButton->>ActionButton: build text from infoItem.name and infoItem.details
    ActionButton->>dccData: setClipboard(text)
    ActionButton->>ToolTip: show("Details has been copied", 2000)
Loading

File-Level Changes

Change Details Files
Replace the copy IconLabel with an ActionButton that has proper hover/pressed states and a dedicated clickable background area.
  • Swap D.IconLabel for D.ActionButton for the copy control next to the network title.
  • Add layout alignment to vertically center the button and fix right alignment.
  • Constrain the button to a 30x30px preferred size for consistent hit area.
  • Enable hover and focus handling on the button.
dcc-network/qml/PageDetails.qml
Implement visual feedback via a rounded Rectangle background that reacts to hover and press, while keeping the copy logic on the button itself.
  • Add a Rectangle as the ActionButton.background that fills the button area.
  • Define pressed and hovered palette properties with semi-transparent colors for light/dark themes.
  • Set a 6px corner radius and dynamic color based on pressed/hovered state.
  • Move the clipboard copy logic to the ActionButton.onClicked handler and keep the tooltip behavior unchanged.
dcc-network/qml/PageDetails.qml
Adjust typography of the details list items to match updated design typography scale.
  • Set the ItemDelegate text font to D.DTK.fontManager.t6.
  • Set the read-only text input font to D.DTK.fontManager.t7 for the detail value field.
dcc-network/qml/PageDetails.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 - I've found 2 issues, and left some high level feedback:

  • The Rectangle background defines pressedColor and hoveredColor as D.Palette properties but the color binding uses D.ColorSelector.pressedColor/hoveredColor instead of those properties, so either wire the D.Palette into D.ColorSelector or remove the unused properties and rely consistently on one mechanism.
  • The hover/pressed background colors are hard-coded with Qt.rgba(...); consider deriving these from the existing theme/color system (e.g., via D.ColorSelector or palette tokens) so the button appearance remains consistent with the rest of the UI and adapts to theme changes.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The `Rectangle` background defines `pressedColor` and `hoveredColor` as `D.Palette` properties but the `color` binding uses `D.ColorSelector.pressedColor/hoveredColor` instead of those properties, so either wire the `D.Palette` into `D.ColorSelector` or remove the unused properties and rely consistently on one mechanism.
- The hover/pressed background colors are hard-coded with `Qt.rgba(...)`; consider deriving these from the existing theme/color system (e.g., via `D.ColorSelector` or palette tokens) so the button appearance remains consistent with the rest of the UI and adapts to theme changes.

## Individual Comments

### Comment 1
<location path="dcc-network/qml/PageDetails.qml" line_range="80-89" />
<code_context>
-                                    }
-                                    dccData.setClipboard(text.join("\n"))
-                                    tip.show(qsTr("Details has been copied"), 2000)
+                                property D.Palette pressedColor: D.Palette {
+                                    normal: Qt.rgba(0, 0, 0, 0.2)
+                                    normalDark: Qt.rgba(1, 1, 1, 0.25)
+                                }
+                                property D.Palette hoveredColor: D.Palette {
+                                    normal: Qt.rgba(0, 0, 0, 0.1)
+                                    normalDark: Qt.rgba(1, 1, 1, 0.1)
+                                }
+                                radius: 6
+                                color: parent.pressed ? D.ColorSelector.pressedColor : (parent.hovered ? D.ColorSelector.hoveredColor : "transparent")
+                            }
+                            focusPolicy: Qt.StrongFocus
</code_context>
<issue_to_address>
**issue (bug_risk):** Rectangle color binding ignores the local pressed/hovered palettes and may use the wrong type/value.

`pressedColor` and `hoveredColor` are declared as `D.Palette`, but the `color` binding uses `D.ColorSelector.pressedColor/hoveredColor` instead, leaving the local palettes unused and risking a type mismatch if `D.ColorSelector.*` isn’t a plain color. Bind `color` to the local palettes instead, e.g. `color: parent.pressed ? pressedColor.normal : parent.hovered ? hoveredColor.normal : "transparent"`, or whichever variant matches your theme API.
</issue_to_address>

### Comment 2
<location path="dcc-network/qml/PageDetails.qml" line_range="98" />
<code_context>
-                                        text.push(infoItem.details[i][0] + "\t" + infoItem.details[i][1])
-                                    }
-                                    dccData.setClipboard(text.join("\n"))
-                                    tip.show(qsTr("Details has been copied"), 2000)
+                                property D.Palette pressedColor: D.Palette {
+                                    normal: Qt.rgba(0, 0, 0, 0.2)
</code_context>
<issue_to_address>
**nitpick (typo):** Tooltip text is slightly ungrammatical and might be clearer as plural.

Minor wording nit: consider changing `qsTr("Details has been copied")` to something like `qsTr("Details have been copied")` or `qsTr("Details copied to clipboard")` for more natural, grammatical text.

```suggestion
                                    tip.show(qsTr("Details copied to clipboard"), 2000)
```
</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 on lines +80 to +89
property D.Palette pressedColor: D.Palette {
normal: Qt.rgba(0, 0, 0, 0.2)
normalDark: Qt.rgba(1, 1, 1, 0.25)
}
property D.Palette hoveredColor: D.Palette {
normal: Qt.rgba(0, 0, 0, 0.1)
normalDark: Qt.rgba(1, 1, 1, 0.1)
}
radius: 6
color: parent.pressed ? D.ColorSelector.pressedColor : (parent.hovered ? D.ColorSelector.hoveredColor : "transparent")

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

issue (bug_risk): Rectangle color binding ignores the local pressed/hovered palettes and may use the wrong type/value.

pressedColor and hoveredColor are declared as D.Palette, but the color binding uses D.ColorSelector.pressedColor/hoveredColor instead, leaving the local palettes unused and risking a type mismatch if D.ColorSelector.* isn’t a plain color. Bind color to the local palettes instead, e.g. color: parent.pressed ? pressedColor.normal : parent.hovered ? hoveredColor.normal : "transparent", or whichever variant matches your theme API.

text.push(infoItem.details[i][0] + "\t" + infoItem.details[i][1])
}
dccData.setClipboard(text.join("\n"))
tip.show(qsTr("Details has been copied"), 2000)

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

nitpick (typo): Tooltip text is slightly ungrammatical and might be clearer as plural.

Minor wording nit: consider changing qsTr("Details has been copied") to something like qsTr("Details have been copied") or qsTr("Details copied to clipboard") for more natural, grammatical text.

Suggested change
tip.show(qsTr("Details has been copied"), 2000)
tip.show(qsTr("Details copied to clipboard"), 2000)

…ails page

Replace IconLabel with ActionButton for better hover/pressed feedback.
Add 30x30px hover/pressed background with 6px radius.
Right-align the copy button in the header.
Update copy icon resource to match foreground color.

Log: Improved copy button UX on network details page
PMS: https://pms.uniontech.com/bug-view-370975.html
Influence: Network details page copy button interaction and appearance

fix(network): 优化网络详情页复制按钮交互和图标

将 IconLabel 替换为 ActionButton 以支持 hover/pressed 反馈。
添加 30x30px hover/pressed 背景,圆角 6px。
复制按钮在标题栏中右对齐。
更新 copy 图标资源以匹配前景色。

Log: 优化网络详情页复制按钮交互和外观
PMS: https://pms.uniontech.com/bug-view-370975.html
Influence: 网络详情页复制按钮的交互和外观
@iCancely
iCancely force-pushed the fix/network-details-copy-button branch from 5b660db to a706fb2 Compare July 22, 2026 08:35
@deepin-bot

deepin-bot Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

TAG Bot

New tag: 2.0.97
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #580

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