[feat] add file transfer cancellation controls

This commit is contained in:
dijunkun
2026-10-19 11:11:00 +08:00
parent b2d3834944
commit 7df0b6118e
11 changed files with 173 additions and 21 deletions
@@ -1,6 +1,6 @@
import { FileTransferEntry } from "stream_window.slint";
import { DialogSurface, FontAwesomeIcons, IconButton, ImGuiFontStyle } from "common.slint";
import { WorkbenchStyle } from "workbench_controls.slint";
import { WorkbenchStyle, WorkbenchButton } from "workbench_controls.slint";
export component FileTransferNotification inherits Window {
title: "CrossDesk";
@@ -17,7 +17,11 @@ export component FileTransferNotification inherits Window {
in property <bool> completed;
in property <bool> failed;
in property <bool> transferring;
in property <bool> cancelled;
in property <bool> can-cancel;
in property <string> cancel-text;
callback dismissed;
callback cancel-requested;
DialogSurface {
width: parent.width; height: parent.height;
@@ -75,14 +79,26 @@ export component FileTransferNotification inherits Window {
Rectangle {
x: 0px; y: 0px;
width: parent.width * max(0, min(1, root.entry.progress)); height: parent.height;
background: root.failed ? #d92d20 : root.completed ? WorkbenchStyle.success : WorkbenchStyle.accent;
background: root.failed ? #d92d20 : root.completed ? WorkbenchStyle.success
: root.cancelled ? WorkbenchStyle.muted : WorkbenchStyle.accent;
border-radius: 3px;
}
}
Text {
x: 16px; y: 103px; width: parent.width - 32px; height: 17px;
text: root.entry.size; color: WorkbenchStyle.muted;
font-size: ImGuiFontStyle.body; vertical-alignment: center; overflow: elide;
HorizontalLayout {
x: 16px; y: 100px; width: parent.width - 32px; height: 24px; spacing: 12px;
Text {
text: root.entry.size; color: WorkbenchStyle.muted;
font-size: ImGuiFontStyle.body; vertical-alignment: center; overflow: elide;
horizontal-stretch: 1;
}
if root.can-cancel: WorkbenchButton {
width: 72px; height: 24px; horizontal-stretch: 0;
text: root.cancel-text;
text-size: ImGuiFontStyle.base;
text-color: WorkbenchStyle.muted;
normal-border-color: WorkbenchStyle.border;
clicked => { root.cancel-requested(); }
}
}
}
}
@@ -18,6 +18,9 @@ export global WorkbenchStyle {
export component WorkbenchButton inherits Rectangle {
in property <string> text;
in property <length> text-size: 13px;
in property <color> text-color: root.primary ? white : WorkbenchStyle.text;
in property <color> normal-border-color: WorkbenchStyle.control-border;
in property <string> icon;
in property <string> tooltip;
in property <bool> tooltip-above: false;
@@ -45,7 +48,7 @@ export component WorkbenchButton inherits Rectangle {
border-color: root.show-focus ? (root.primary ? #193da0 : WorkbenchStyle.accent)
: root.primary ? WorkbenchStyle.accent
: touch.has-hover ? WorkbenchStyle.hover-border
: root.quiet ? transparent : WorkbenchStyle.control-border;
: root.quiet ? transparent : root.normal-border-color;
background: root.soft
? (root.primary
? (touch.pressed ? #254cc0 : touch.has-hover || root.show-focus ? WorkbenchStyle.accent : #edf2ff)
@@ -77,9 +80,9 @@ export component WorkbenchButton inherits Rectangle {
}
if root.text != "": Text {
text: root.text;
font-size: 13px;
font-size: root.text-size;
font-weight: root.primary ? 600 : 500;
color: root.primary ? white : WorkbenchStyle.text;
color: root.text-color;
vertical-alignment: center;
accessible-role: none;
}