Compare commits

...
2 Commits
2 changed files with 205 additions and 61 deletions
+140 -56
View File
@@ -1,5 +1,5 @@
import { UiRadius } from "ui_radius.slint";
import { WorkbenchStyle, WorkbenchButton, WorkbenchCard } from "workbench_controls.slint";
import { WorkbenchStyle, WorkbenchButton, WorkbenchCard, WorkbenchNotice } from "workbench_controls.slint";
import { GalleryStrings } from "device_strings.slint";
import { DeviceCardActions, DeviceCardStyle } from "device_card_actions.slint";
import { DeviceGroupDialog, DeviceGroupOption } from "device_group_dialog.slint";
@@ -11,7 +11,7 @@ import { GroupFilter } from "group_filter.slint";
import { ScrollView } from "std-widgets.slint";
import { RoundedLineEdit } from "rounded_line_edit.slint";
import { AnnouncementItem, MessagePanel, MessageStrings } from "message_panel.slint";
import { FontAwesomeIcons, IconButton, CompactComboBox, ImGuiCheckBox, MiniToggleSwitch, CompactButton, PrimaryButton, SecondaryButton, ToggleSwitch, SectionTitle, DialogSurface, ImGuiLineStyle, ImGuiFontStyle } from "common.slint";
import { FontAwesomeIcons, IconButton, CompactComboBox, ImGuiCheckBox, CompactButton, PrimaryButton, SecondaryButton, ToggleSwitch, SectionTitle, DialogSurface, ImGuiLineStyle, ImGuiFontStyle } from "common.slint";
import "../assets/fonts/message_spacing.ttf";
export struct RecentConnection {
@@ -32,6 +32,7 @@ export struct ReleaseNoteBlock {
}
export enum UpdateCheckStatus { idle, checking, up-to-date, available, failed }
enum CopyFeedback { idle, success, failed }
export global UiStrings {
in-out property <string> local-desktop: "Local Desktop";
@@ -467,7 +468,7 @@ 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;
private property <bool> copy-toast: false;
private property <CopyFeedback> copy-feedback: idle;
private property <bool> compact-language: root.language-index == 0;
private property <bool> recent-tooltip-visible: false;
private property <string> recent-tooltip-name: "";
@@ -478,7 +479,9 @@ export component MainWindow inherits Window {
private property <length> recent-tooltip-pointer-x: 0px;
private property <length> recent-tooltip-pointer-y: 0px;
changed menu-open => { if root.menu-open { root.gallery-action("release", ""); } }
changed menu-open => {
if root.menu-open { root.copy-feedback = CopyFeedback.idle; root.gallery-action("release", ""); }
}
changed connection-dialog-open => { if root.connection-dialog-open { root.gallery-action("release", ""); } }
changed permission-dialog-open => { if root.permission-dialog-open { root.gallery-action("release", ""); } }
changed settings-open => {
@@ -544,6 +547,7 @@ export component MainWindow inherits Window {
width: parent.width - 80px;
property <int> phase: self.pressed ? 1 : 0;
changed phase => {
if self.pressed { root.copy-feedback = CopyFeedback.idle; }
root.main-title-drag(phase, self.mouse-x, self.mouse-y);
}
moved => {
@@ -643,7 +647,10 @@ export component MainWindow inherits Window {
x: 0px;
width: parent.width - 92px;
property <int> phase: self.pressed ? 1 : 0;
changed phase => { root.main-title-drag(phase, self.mouse-x, self.mouse-y); }
changed phase => {
if self.pressed { root.copy-feedback = CopyFeedback.idle; }
root.main-title-drag(phase, self.mouse-x, self.mouse-y);
}
moved => { if (self.pressed) { root.main-title-drag(2, self.mouse-x, self.mouse-y); } }
}
minimize-button := Rectangle {
@@ -735,7 +742,12 @@ export component MainWindow inherits Window {
return reject;
}
}
TouchArea { clicked => { focus-sink.focus(); } }
TouchArea {
pointer-event(event) => {
if event.kind == PointerEventKind.down { root.copy-feedback = CopyFeedback.idle; }
}
clicked => { focus-sink.focus(); }
}
// Slint owns the client area below the native macOS title bar. Draw
// the boundary here because AppKit's titlebar separator is not shown
@@ -860,11 +872,21 @@ export component MainWindow inherits Window {
border-width: 1px; border-color: WorkbenchStyle.border;
Text { x: 12px; width: parent.width - 64px; height: parent.height; text: root.local-id; font-size: 24px; font-weight: 600; letter-spacing: 1px; color: WorkbenchStyle.text; vertical-alignment: center; }
Rectangle { x: parent.width - 48px; y: 10px; width: 1px; height: parent.height - 20px; background: WorkbenchStyle.border; }
WorkbenchButton {
copy-button := WorkbenchButton {
x: parent.width - 42px; y: 2px; width: 36px; quiet: true;
icon: root.copy-toast ? FontAwesomeIcons.check : FontAwesomeIcons.copy;
tooltip: root.copy-toast ? UiStrings.copied : GalleryStrings.tr("复制本机 ID", "Copy local ID", "Копировать ID");
clicked => { if root.copy-local-id() { root.copy-toast = true; copy-timer.restart(); } }
icon: root.copy-feedback == CopyFeedback.success ? FontAwesomeIcons.check : FontAwesomeIcons.copy;
icon-color: root.copy-feedback == CopyFeedback.success ? WorkbenchStyle.success : WorkbenchStyle.muted;
tooltip: GalleryStrings.tr("复制本机 ID", "Copy local ID", "Копировать ID");
tooltip-suppressed: root.copy-feedback != CopyFeedback.idle;
// Let other controls receive the original click; moving
// focus away from Copy dismisses its transient feedback.
changed has-focus => {
if !self.has-focus { root.copy-feedback = CopyFeedback.idle; }
}
clicked => {
root.copy-feedback = root.copy-local-id() ? CopyFeedback.success : CopyFeedback.failed;
copy-timer.restart();
}
}
}
Text { x: 16px; y: 138px; height: 18px; text: UiStrings.password; font-size: 12px; color: WorkbenchStyle.muted; }
@@ -994,7 +1016,10 @@ export component MainWindow inherits Window {
width: parent.width - 12px;
height: parent.height - 6px;
horizontal-stretch: 1;
changed viewport-x => { root.recent-tooltip-visible = false; }
changed viewport-x => {
root.recent-tooltip-visible = false;
root.copy-feedback = CopyFeedback.idle;
}
HorizontalLayout {
padding: 0px;
@@ -1094,7 +1119,7 @@ export component MainWindow inherits Window {
width: connection-card.content-width;
height: 124px;
mouse-cursor: pointer;
clicked => { root.recent-connect(connection.remote-id); }
clicked => { root.copy-feedback = CopyFeedback.idle; root.recent-connect(connection.remote-id); }
image-touch := TouchArea {
x: 0px; y: 0px;
width: parent.width;
@@ -1111,7 +1136,7 @@ export component MainWindow inherits Window {
root.recent-tooltip-groups = self.group-names;
}
}
clicked => { root.recent-connect(connection.remote-id); }
clicked => { root.copy-feedback = CopyFeedback.idle; root.recent-connect(connection.remote-id); }
function show-details() {
if !self.has-hover { return; }
root.recent-tooltip-name = connection.display-name;
@@ -1145,18 +1170,20 @@ export component MainWindow inherits Window {
remove-label: GalleryStrings.tr("删除记录", "Delete record", "Удалить запись");
connected: connection.connected;
edit-alias => {
root.copy-feedback = CopyFeedback.idle;
root.alias-remote-id = connection.remote-id;
root.alias-input = connection.display-name;
root.alias-open = true;
}
edit-groups => { root.open-device-groups(connection.remote-id, connection.display-name); }
edit-groups => { root.copy-feedback = CopyFeedback.idle; root.open-device-groups(connection.remote-id, connection.display-name); }
remove-device => {
root.copy-feedback = CopyFeedback.idle;
root.delete-remote-id = connection.remote-id;
root.delete-from-gallery = false;
root.delete-open = true;
}
connect-device => { root.recent-connect(connection.remote-id); }
disconnect-device => { root.recent-disconnect(connection.remote-id); }
connect-device => { root.copy-feedback = CopyFeedback.idle; root.recent-connect(connection.remote-id); }
disconnect-device => { root.copy-feedback = CopyFeedback.idle; root.recent-disconnect(connection.remote-id); }
}
}
Rectangle {
@@ -1261,6 +1288,7 @@ export component MainWindow inherits Window {
TouchArea {
mouse-cursor: pointer;
clicked => {
root.copy-feedback = CopyFeedback.idle;
root.signal-reconnect-requested();
}
}
@@ -1516,8 +1544,9 @@ export component MainWindow inherits Window {
}
copy-timer := Timer {
interval: 1000ms;
triggered => { root.copy-toast = false; }
interval: root.copy-feedback == CopyFeedback.failed ? 4s : 2500ms;
running: root.copy-feedback != CopyFeedback.idle;
triggered => { root.copy-feedback = CopyFeedback.idle; }
}
remote-id-format-timer := Timer {
interval: 1ms;
@@ -1530,14 +1559,17 @@ export component MainWindow inherits Window {
formatted.character-count, formatted.character-count);
}
}
if root.copy-toast: Rectangle {
x: (parent.width - self.width) / 2; y: parent.height - 92px; width: 280px; height: 40px;
background: #fffffff2;
border-radius: UiRadius.surface;
border-width: 1px;
border-color: ImGuiLineStyle.border;
// Float above the workbench while keeping modal dialogs in front.
if !root.gallery-mode && root.copy-feedback != CopyFeedback.idle: WorkbenchNotice {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2 - 24px;
width-limit: min(440px, parent.width - 40px);
error: root.copy-feedback == CopyFeedback.failed;
icon: self.error ? FontAwesomeIcons.xmark : FontAwesomeIcons.check;
text: self.error
? GalleryStrings.tr("复制失败,请重试", "Couldn’t copy. Try again", "Не удалось скопировать. Повторите попытку")
: UiStrings.copied;
z: 30;
Text { text: UiStrings.copied; color: #333840; horizontal-alignment: center; vertical-alignment: center; }
}
// Reset password modal.
@@ -1724,42 +1756,94 @@ export component MainWindow inherits Window {
// macOS permission gate. On other platforms this remains hidden.
if root.permission-dialog-open: Rectangle {
background: transparent;
background: #15223850;
z: 50;
TouchArea { clicked => { focus-sink.focus(); } }
DialogSurface {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
width: root.compact-language ? 130px : 260px;
height: 125px;
border-radius: UiRadius.surface;
Rectangle {
x: 0px;
y: 0px;
width: parent.width;
height: 21px;
background: #d3d3d3;
border-top-left-radius: UiRadius.surface;
border-top-right-radius: UiRadius.surface;
z: 5;
Text { x: 6px; text: UiStrings.request-permissions; font-size: ImGuiFontStyle.base; font-weight: 600; color: #202124; vertical-alignment: center; }
}
Text { x: 10px; y: 32px; width: root.compact-language ? 110px : 240px; height: 24px; text: UiStrings.permission-required; color: #202124; font-size: 8px; wrap: word-wrap; }
Text { x: 10px; y: 61px; width: root.compact-language ? 78px : 198px; height: 18px; text: "1. " + UiStrings.accessibility-permission + ":"; color: #202124; font-size: 8px; overflow: elide; vertical-alignment: center; }
MiniToggleSwitch {
x: root.compact-language ? 90px : 210px;
y: 61px;
checked: root.accessibility-granted;
enabled: !root.accessibility-granted;
toggled(value) => { if (value) { root.request-accessibility-permission(); } }
}
Text { x: 10px; y: 85px; width: root.compact-language ? 78px : 198px; height: 18px; text: "2. " + UiStrings.screen-recording-permission + ":"; color: #202124; font-size: 8px; overflow: elide; vertical-alignment: center; }
MiniToggleSwitch {
x: root.compact-language ? 90px : 210px;
y: 85px;
checked: root.screen-recording-granted;
enabled: !root.screen-recording-granted;
toggled(value) => { if (value) { root.request-screen-recording-permission(); } }
width: min(400px, parent.width - 40px);
height: permission-content.preferred-height;
background: #f8fafc; border-color: WorkbenchStyle.separator;
drop-shadow-color: #14294424; drop-shadow-blur: 24px; drop-shadow-offset-y: 8px;
TouchArea { clicked => { focus-sink.focus(); } }
permission-content := VerticalLayout {
padding: 24px; spacing: 20px;
VerticalLayout {
spacing: 8px;
Text {
text: UiStrings.request-permissions;
font-size: 20px; font-weight: 600; color: WorkbenchStyle.text;
wrap: word-wrap;
}
Text {
text: UiStrings.permission-required;
font-size: 12px; color: WorkbenchStyle.muted; wrap: word-wrap;
}
}
VerticalLayout {
spacing: 12px;
for permission[index] in [
{label: UiStrings.accessibility-permission, granted: root.accessibility-granted,
description: GalleryStrings.tr("允许远程键盘和鼠标控制", "Allow remote keyboard and mouse input", "Разрешить удалённый ввод с клавиатуры и мыши")},
{label: UiStrings.screen-recording-permission, granted: root.screen-recording-granted,
description: GalleryStrings.tr("允许共享此 Mac 的屏幕画面", "Allow sharing this Mac’s screen", "Разрешить показ экрана этого Mac")},
]: WorkbenchCard {
height: max(80px, permission-labels.preferred-height + 32px);
permission-labels := VerticalLayout {
x: 16px; y: 16px; width: parent.width - permission-action.width - 48px;
height: parent.height - 32px; spacing: 6px; alignment: center;
Text {
text: permission.label; font-size: 13px; font-weight: 600;
color: WorkbenchStyle.text; wrap: word-wrap;
}
Text {
text: permission.description; font-size: 11px;
color: WorkbenchStyle.muted; wrap: word-wrap;
}
}
permission-action := Rectangle {
x: parent.width - self.width - 16px; y: (parent.height - self.height) / 2;
width: max(96px, permission-action-metrics.preferred-width + 24px);
height: 36px;
permission-action-metrics := Text {
visible: false; font-size: 13px; font-weight: 600;
text: GalleryStrings.tr("前往设置", "Open settings", "Настройки");
}
if !permission.granted: WorkbenchButton {
width: parent.width; height: parent.height; primary: true;
text: permission-action-metrics.text;
accessible-label: permission.label + ": " + self.text;
clicked => {
if index == 0 { root.request-accessibility-permission(); }
else { root.request-screen-recording-permission(); }
}
}
if permission.granted: HorizontalLayout {
alignment: center; spacing: 6px;
Text {
text: FontAwesomeIcons.check; font-family: "Font Awesome 6 Free";
font-weight: 900; font-size: 12px; color: WorkbenchStyle.success;
vertical-alignment: center; accessible-role: none;
}
Text {
text: GalleryStrings.tr("已授权", "Granted", "Разрешено");
font-size: 12px; color: WorkbenchStyle.success; vertical-alignment: center;
}
}
}
}
}
VerticalLayout {
spacing: 12px;
Rectangle { height: 1px; background: WorkbenchStyle.separator; }
Text {
text: GalleryStrings.tr("请在系统设置中允许 CrossDesk 访问。如系统提示重新打开应用,请按提示操作。",
"Allow CrossDesk access in System Settings. Reopen the app if macOS asks you to.",
"Разрешите доступ для CrossDesk в Системных настройках. Перезапустите приложение, если macOS попросит об этом.");
font-size: 11px; color: WorkbenchStyle.muted; wrap: word-wrap;
}
}
}
}
}
@@ -20,11 +20,19 @@ export component WorkbenchButton inherits Rectangle {
in property <string> text;
in property <string> icon;
in property <string> tooltip;
in property <bool> tooltip-suppressed: false;
in property <color> icon-color: root.primary ? white : WorkbenchStyle.muted;
in property <bool> primary: false;
in property <bool> quiet: false;
in property <bool> enabled: true;
out property <bool> has-focus: button-focus.has-focus;
private property <bool> keyboard-focus: false;
private property <bool> show-focus: button-focus.has-focus && root.keyboard-focus;
private property <bool> tooltip-active: root.enabled && root.tooltip != ""
&& !root.tooltip-suppressed && !touch.pressed
&& (touch.has-hover || root.show-focus);
private property <bool> tooltip-visible: false;
changed tooltip-active => { root.tooltip-visible = false; }
callback clicked;
width: 112px;
height: 36px;
@@ -55,7 +63,7 @@ export component WorkbenchButton inherits Rectangle {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 14px;
color: root.primary ? white : WorkbenchStyle.muted;
color: root.icon-color;
vertical-alignment: center;
accessible-role: none;
}
@@ -98,24 +106,76 @@ export component WorkbenchButton inherits Rectangle {
clicked => { root.keyboard-focus = false; button-focus.focus(); root.clicked(); }
}
}
if touch.has-hover && root.tooltip != "": Rectangle {
tooltip-timer := Timer {
interval: 450ms;
running: root.tooltip-active && !root.tooltip-visible;
triggered => { root.tooltip-visible = true; }
}
if root.tooltip-active && root.tooltip-visible: Rectangle {
x: min(0px, root.width - self.width);
y: root.height + 6px;
width: tip.preferred-width + 16px;
height: 28px;
width: min(260px, tip.preferred-width + 20px);
height: max(28px, tip.preferred-height + 12px);
background: #24324a;
border-radius: UiRadius.control;
z: 20;
tip := Text {
x: 10px; y: 6px;
width: parent.width - 20px;
height: parent.height - 12px;
text: root.tooltip;
font-size: 11px;
font-size: 12px;
color: white;
wrap: word-wrap;
horizontal-alignment: center;
vertical-alignment: center;
}
}
}
// A raised surface keeps transient action feedback distinct from the workbench.
export component WorkbenchNotice inherits Rectangle {
in property <string> text;
in property <string> icon;
in property <bool> error: false;
in property <length> width-limit: 360px;
private property <color> foreground: root.error ? #b42318 : #146c49;
width: min(root.width-limit, max(280px, message.preferred-width + 64px));
height: 64px;
background: root.error ? #fff1f0 : #e9f6ef;
border-width: 1px;
border-color: root.error ? #f0c4bf : #b9dfc9;
border-radius: UiRadius.surface;
drop-shadow-color: #14294424;
drop-shadow-blur: 24px;
drop-shadow-offset-y: 6px;
accessible-role: AccessibleRole.text;
accessible-label: root.text;
Text {
x: message.x - 28px; width: 18px; height: parent.height;
text: root.icon;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 16px;
color: root.foreground;
horizontal-alignment: center;
vertical-alignment: center;
accessible-role: none;
}
message := Text {
x: (parent.width - self.width + 28px) / 2;
width: min(self.preferred-width, parent.width - 64px);
height: parent.height;
text: root.text;
font-size: 14px;
font-weight: 600;
color: root.foreground;
overflow: elide;
vertical-alignment: center;
accessible-role: none;
}
}
export component WorkbenchCard inherits Rectangle {
background: WorkbenchStyle.surface;
border-width: 1px;