[ui] highlight disconnect buttons and confirm session closure

This commit is contained in:
dijunkun
2026-10-23 14:19:18 +08:00
parent ff7b954949
commit 80ea75ff78
2 changed files with 117 additions and 5 deletions
+108 -1
View File
@@ -554,6 +554,7 @@ export component MainWindow inherits Window {
&& !(root.update-open && root.update-available) && !root.messages-open
&& !root.update-confirm-open
&& !root.reset-password-open && !root.alias-open && !root.delete-open
&& !root.disconnect-open
&& !root.device-group-open && !root.connection-dialog-open
&& !root.permission-dialog-open && !root.wayland-notice-open
&& !root.portable-service-dialog-open
@@ -577,6 +578,15 @@ export component MainWindow inherits Window {
in-out property <bool> delete-open: false;
private property <string> delete-remote-id: "";
private property <bool> delete-from-gallery: false;
in-out property <bool> disconnect-open: false;
private property <string> disconnect-remote-id: "";
private property <string> disconnect-device-name: "";
function dismiss-disconnect() {
root.disconnect-open = false;
root.disconnect-remote-id = "";
root.disconnect-device-name = "";
focus-sink.focus();
}
private property <CopyFeedback> copy-feedback: idle;
private property <bool> compact-language: root.language-index == 0;
private property <bool> recent-tooltip-visible: false;
@@ -1383,13 +1393,18 @@ export component MainWindow inherits Window {
width: 28px; height: 28px;
soft: true;
primary: !connection.connected;
destructive: connection.connected;
icon: connection.connected ? FontAwesomeIcons.xmark : FontAwesomeIcons.arrow-right-long;
tooltip: connection.connected ? GalleryStrings.tr("断开连接", "Disconnect", "Отключить") : UiStrings.connect;
tooltip-above: true;
clicked => {
root.copy-feedback = CopyFeedback.idle;
root.recent-tooltip-visible = false;
if connection.connected { root.recent-disconnect(connection.remote-id); }
if connection.connected {
root.disconnect-remote-id = connection.remote-id;
root.disconnect-device-name = connection.display-name;
root.disconnect-open = true;
}
else { root.recent-connect(connection.remote-id); }
}
}
@@ -1924,6 +1939,98 @@ export component MainWindow inherits Window {
}
}
// Confirm the selected recent session before disconnecting it.
if root.disconnect-open: Rectangle {
background: #14233b66;
z: 48;
TouchArea { scroll-event(event) => { accept } }
FocusScope {
width: parent.width;
height: parent.height;
key-pressed(event) => {
if event.text == Key.Escape {
root.dismiss-disconnect();
return accept;
}
if event.text == Key.Tab {
if disconnect-cancel.has-focus {
disconnect-confirm.focus();
} else {
disconnect-cancel.focus();
}
return accept;
}
return reject;
}
Timer {
interval: 1ms;
running: true;
triggered => {
self.running = false;
// Defer focus until after Slint's accessibility update.
disconnect-cancel.focus();
}
}
DialogSurface {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
width: min(420px, parent.width - 40px);
height: disconnect-content.preferred-height;
border-color: WorkbenchStyle.border;
TouchArea { scroll-event(event) => { accept } }
disconnect-content := VerticalLayout {
padding: 24px;
spacing: 16px;
Text {
text: GalleryStrings.tr("确认断开连接?", "Disconnect this session?", "Отключить этот сеанс?");
color: WorkbenchStyle.text;
font-size: 18px;
font-weight: 600;
wrap: word-wrap;
}
VerticalLayout {
spacing: 6px;
Text {
text: root.disconnect-device-name;
color: WorkbenchStyle.text;
font-size: 14px;
font-weight: 600;
overflow: elide;
}
Text {
text: root.disconnect-remote-id;
color: WorkbenchStyle.muted;
font-size: 12px;
}
}
Text {
text: GalleryStrings.tr("当前远程控制会话将结束。", "The current remote session will end.", "Текущий сеанс удалённого управления завершится.");
color: WorkbenchStyle.muted;
font-size: 13px;
wrap: word-wrap;
}
HorizontalLayout {
alignment: end;
spacing: 8px;
disconnect-cancel := WorkbenchButton {
text: UiStrings.cancel;
clicked => { root.dismiss-disconnect(); }
}
disconnect-confirm := WorkbenchButton {
text: GalleryStrings.tr("断开连接", "Disconnect", "Отключить");
destructive: true;
clicked => {
let remote-id = root.disconnect-remote-id;
root.dismiss-disconnect();
root.recent-disconnect(remote-id);
}
}
}
}
}
}
}
// Offline/error warning modal.
if root.offline-warning != "": Rectangle {
background: #00000042;
@@ -19,16 +19,17 @@ 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> text-color: root.destructive || 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;
in property <bool> tooltip-suppressed: false;
in property <color> icon-color: root.primary
in property <color> icon-color: root.destructive ? white : root.primary
? (root.soft && !touch.has-hover && !root.show-focus ? WorkbenchStyle.accent : white)
: WorkbenchStyle.muted;
in property <bool> primary: false;
in property <bool> destructive: false;
in property <bool> soft: false;
in property <bool> quiet: false;
in property <bool> enabled: true;
@@ -45,11 +46,15 @@ export component WorkbenchButton inherits Rectangle {
height: 36px;
border-radius: UiRadius.control;
border-width: root.show-focus ? 2px : root.soft ? 0px : 1px;
border-color: root.show-focus ? (root.primary ? #193da0 : WorkbenchStyle.accent)
border-color: root.destructive
? (root.show-focus ? #7a271a : touch.pressed ? #912018 : touch.has-hover ? #b42318 : #d92d20)
: root.show-focus ? (root.primary ? #193da0 : WorkbenchStyle.accent)
: root.primary ? WorkbenchStyle.accent
: touch.has-hover ? WorkbenchStyle.hover-border
: root.quiet ? transparent : root.normal-border-color;
background: root.soft
background: root.destructive
? (touch.pressed ? #912018 : touch.has-hover ? #b42318 : #d92d20)
: root.soft
? (root.primary
? (touch.pressed ? #254cc0 : touch.has-hover || root.show-focus ? WorkbenchStyle.accent : #edf2ff)
: (touch.pressed ? WorkbenchStyle.pressed-surface : touch.has-hover ? WorkbenchStyle.hover-surface : WorkbenchStyle.field-surface))