mirror of
https://github.com/kunkundi/crossdesk.git
synced 2026-10-20 19:14:39 +08:00
282 lines
15 KiB
Plaintext
282 lines
15 KiB
Plaintext
import { ScrollView } from "std-widgets.slint";
|
|
import { FontAwesomeIcons, ImGuiLineStyle, FloatingBarStyle } from "common.slint";
|
|
|
|
export struct ControllerEntry {
|
|
remote-id: string,
|
|
display-name: string,
|
|
}
|
|
|
|
export global ServerStrings {
|
|
in property <string> controlled: "被控中";
|
|
in property <string> heading: "此设备被控中";
|
|
in property <string> connected: "已连接";
|
|
in property <string> send-file: "发送文件";
|
|
in property <string> disconnect: "断开";
|
|
in property <string> disconnect-one: "断开连接";
|
|
in property <string> disconnect-all: "全部断开";
|
|
in property <string> confirm-disconnect: "断开所有控制端的连接？";
|
|
in property <string> cancel: "取消";
|
|
}
|
|
|
|
component SessionButton inherits Rectangle {
|
|
in property <string> text;
|
|
in property <bool> danger: false;
|
|
in property <bool> enabled: true;
|
|
private property <bool> keyboard-focus: false;
|
|
private property <bool> pointer-feedback: true;
|
|
callback clicked;
|
|
width: label.preferred-width + 20px;
|
|
height: 28px;
|
|
border-radius: 5px;
|
|
border-width: 1px;
|
|
border-color: root.danger ? #d92d20 : #c9ced7;
|
|
background: root.danger ? (root.pointer-feedback && touch.pressed ? #b42318 : root.pointer-feedback && touch.has-hover ? #f04438 : #d92d20)
|
|
: (root.pointer-feedback && touch.pressed ? #dfe3e9 : root.pointer-feedback && touch.has-hover ? #f3f4f6 : white);
|
|
opacity: root.enabled ? 1 : 0.5;
|
|
accessible-role: button;
|
|
accessible-label: root.text;
|
|
accessible-action-default => { if root.enabled { root.pointer-feedback = false; root.clicked(); } }
|
|
label := Text {
|
|
text: root.text; color: root.danger ? white : #24272d;
|
|
font-size: 12px; horizontal-alignment: center; vertical-alignment: center;
|
|
}
|
|
forward-focus: keyboard;
|
|
keyboard := FocusScope {
|
|
enabled: root.enabled;
|
|
focus-gained(reason) => {
|
|
if reason == FocusReason.tab-navigation {
|
|
root.keyboard-focus = true;
|
|
} else if reason == FocusReason.pointer-click {
|
|
root.keyboard-focus = false;
|
|
}
|
|
// Preserve the input method when returning from the file picker.
|
|
}
|
|
key-pressed(event) => {
|
|
root.keyboard-focus = true;
|
|
if root.enabled && (event.text == Key.Return || event.text == " ") {
|
|
root.pointer-feedback = false;
|
|
root.clicked(); return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
}
|
|
touch := TouchArea {
|
|
enabled: root.enabled;
|
|
pointer-event(event) => {
|
|
if event.kind == PointerEventKind.down || event.kind == PointerEventKind.move {
|
|
root.pointer-feedback = true;
|
|
}
|
|
}
|
|
// A native dialog may not deliver a pointer exit to the owner window.
|
|
// Restore hover feedback only after a fresh pointer move or press.
|
|
clicked => { root.pointer-feedback = false; root.keyboard-focus = false; keyboard.focus(); root.clicked(); }
|
|
}
|
|
if root.enabled && keyboard.has-focus && root.keyboard-focus: Rectangle {
|
|
x: 2px; y: 2px; width: parent.width - 4px; height: parent.height - 4px;
|
|
border-radius: 3px; border-width: 1px; border-color: root.danger ? white : #2463c7;
|
|
}
|
|
}
|
|
|
|
// A separate native window keeps the collapsed footprint as small as the bar.
|
|
export component ServerStatusBar inherits Window {
|
|
title: "CrossDesk";
|
|
no-frame: true;
|
|
always-on-top: true;
|
|
background: transparent;
|
|
in property <int> controller-count: 1;
|
|
in property <bool> expanded: false;
|
|
in property <bool> opens-above: false;
|
|
in property <bool> dragged: false;
|
|
out property <length> bar-width: label.preferred-width + 48px;
|
|
preferred-width: root.bar-width;
|
|
preferred-height: 36px;
|
|
min-width: root.bar-width; max-width: root.bar-width;
|
|
min-height: 36px; max-height: 36px;
|
|
callback toggle-panel;
|
|
callback dismiss-panel;
|
|
callback title-drag(int, length, length);
|
|
callback move-anchor(float);
|
|
forward-focus: keyboard;
|
|
keyboard := FocusScope {
|
|
key-pressed(event) => {
|
|
if event.text == Key.Return || event.text == " " { root.toggle-panel(); return accept; }
|
|
if event.text == Key.Escape { root.dismiss-panel(); return accept; }
|
|
if event.text == Key.UpArrow { root.move-anchor(-0.05); return accept; }
|
|
if event.text == Key.DownArrow { root.move-anchor(0.05); return accept; }
|
|
return reject;
|
|
}
|
|
}
|
|
Rectangle {
|
|
x: 0px; y: 0px; width: parent.width; height: parent.height;
|
|
background: touch.pressed ? #dfe3e9 : touch.has-hover ? #f3f4f6 : white;
|
|
border-width: 1px; border-color: ImGuiLineStyle.border;
|
|
border-radius: FloatingBarStyle.corner-radius;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
}
|
|
label := Text {
|
|
x: 10px; width: root.width - 38px; height: root.height;
|
|
text: ServerStrings.controlled + (root.controller-count > 1 ? " · " + root.controller-count : "");
|
|
color: #24272d; font-size: 14px; vertical-alignment: center;
|
|
}
|
|
Text {
|
|
x: root.width - 26px; width: 18px; height: root.height;
|
|
text: root.opens-above != root.expanded ? FontAwesomeIcons.angle-up : FontAwesomeIcons.angle-down;
|
|
color: #24272d; font-family: "Font Awesome 6 Free"; font-weight: 900;
|
|
font-size: 12px; horizontal-alignment: center; vertical-alignment: center;
|
|
}
|
|
touch := TouchArea {
|
|
property <int> phase: self.pressed ? 1 : 0;
|
|
changed phase => { root.title-drag(self.phase, self.mouse-x, self.mouse-y); }
|
|
moved => { if self.pressed { root.title-drag(2, self.mouse-x, self.mouse-y); } }
|
|
clicked => { keyboard.focus(); if !root.dragged { root.toggle-panel(); } }
|
|
}
|
|
accessible-role: button;
|
|
accessible-label: label.text;
|
|
accessible-action-default => { root.toggle-panel(); }
|
|
}
|
|
|
|
export component ServerWindow inherits Window {
|
|
title: "CrossDesk";
|
|
icon: @image-url("../../../resources/linux/crossdesk_256x256.png");
|
|
preferred-width: 225px; min-width: 225px; max-width: 225px;
|
|
preferred-height: root.content-height;
|
|
no-frame: true;
|
|
always-on-top: true;
|
|
background: transparent;
|
|
default-font-size: 12px;
|
|
in property <[ControllerEntry]> controllers;
|
|
in-out property <int> selected-controller: 0;
|
|
in property <bool> sending-file: false;
|
|
in property <bool> file-transfer-visible: false;
|
|
in property <float> file-progress: 0;
|
|
in property <string> file-progress-text;
|
|
in property <string> current-file-name;
|
|
in property <string> file-size-text;
|
|
in-out property <bool> confirming-disconnect: false;
|
|
private property <length> footer-height: send-file.width + disconnect-all.width + 6px > 205px ? 62px : 28px;
|
|
private property <string> hovered-name;
|
|
private property <length> tooltip-y;
|
|
out property <length> content-height: 10px + 24px + (root.controllers.length > 1 ? min(root.controllers.length, 6) * 34px : 28px) + 8px + root.footer-height + 10px + (root.confirming-disconnect ? 36px : 0px) + (root.file-transfer-visible ? 58px : 0px);
|
|
callback controller-selected(int);
|
|
callback select-file;
|
|
callback disconnect-controller(string);
|
|
callback disconnect-all;
|
|
callback dismiss-panel;
|
|
forward-focus: keyboard;
|
|
keyboard := FocusScope {
|
|
key-pressed(event) => {
|
|
if event.text == Key.Escape { root.dismiss-panel(); return accept; }
|
|
return reject;
|
|
}
|
|
Rectangle {
|
|
width: root.width; height: root.height;
|
|
background: white; border-width: 1px; border-color: ImGuiLineStyle.border;
|
|
border-radius: 8px;
|
|
Text {
|
|
x: 10px; y: 10px; width: parent.width - 20px; height: 24px;
|
|
text: ServerStrings.heading + (root.controllers.length > 1 ? " · " + root.controllers.length : "");
|
|
color: #24272d; font-size: 13px; font-weight: 500; vertical-alignment: center; overflow: elide;
|
|
}
|
|
list := ScrollView {
|
|
x: 10px; y: 34px; width: parent.width - 20px;
|
|
height: max(0px, root.height - 34px - root.footer-height - 18px - (root.confirming-disconnect ? 36px : 0px) - (root.file-transfer-visible ? 58px : 0px));
|
|
viewport-width: self.visible-width;
|
|
viewport-height: root.controllers.length * (root.controllers.length > 1 ? 34px : 28px);
|
|
for controller[index] in root.controllers: row := Rectangle {
|
|
x: 0px; y: index * (root.controllers.length > 1 ? 34px : 28px);
|
|
width: list.visible-width; height: root.controllers.length > 1 ? 32px : 28px;
|
|
select := Rectangle {
|
|
x: 0px; y: 0px;
|
|
width: parent.width - (root.controllers.length > 1 ? disconnect.width + 4px : status.preferred-width + 8px);
|
|
height: parent.height; border-radius: 4px;
|
|
background: root.controllers.length > 1 && index == root.selected-controller ? #eef5fd : select-touch.has-hover ? #f3f4f6 : transparent;
|
|
if root.controllers.length > 1: Rectangle {
|
|
x: 4px; y: (parent.height - 13px) / 2; width: 13px; height: 13px;
|
|
border-radius: 7px; border-width: 1px; border-color: index == root.selected-controller ? #2463c7 : #8c939e;
|
|
if index == root.selected-controller: Rectangle { x: 3px; y: 3px; width: 7px; height: 7px; border-radius: 4px; background: #2463c7; }
|
|
}
|
|
name := Text {
|
|
x: root.controllers.length > 1 ? 23px : 0px; width: parent.width - self.x - 4px;
|
|
height: parent.height; text: controller.display-name; color: #24272d;
|
|
font-size: 13px; vertical-alignment: center; overflow: elide;
|
|
}
|
|
forward-focus: selection-keyboard;
|
|
selection-keyboard := FocusScope {
|
|
key-pressed(event) => {
|
|
if event.text == Key.Return || event.text == " " {
|
|
root.selected-controller = index; root.controller-selected(index); return accept;
|
|
}
|
|
if event.text == Key.UpArrow || event.text == Key.DownArrow {
|
|
root.selected-controller = max(0, min(root.controllers.length - 1, root.selected-controller + (event.text == Key.UpArrow ? -1 : 1)));
|
|
root.controller-selected(root.selected-controller); return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
}
|
|
select-touch := TouchArea {
|
|
clicked => { selection-keyboard.focus(); root.selected-controller = index; root.controller-selected(index); }
|
|
changed has-hover => {
|
|
root.hovered-name = self.has-hover && name.preferred-width > name.width ? controller.display-name : "";
|
|
root.tooltip-y = max(0px, min(root.height - 52px, list.y + row.y + list.viewport-y + row.height));
|
|
}
|
|
}
|
|
accessible-role: radio-button;
|
|
accessible-label: controller.display-name;
|
|
accessible-checked: index == root.selected-controller;
|
|
accessible-action-default => { root.selected-controller = index; root.controller-selected(index); }
|
|
|
|
}
|
|
status := Text {
|
|
visible: root.controllers.length == 1;
|
|
x: parent.width - self.preferred-width; height: parent.height;
|
|
text: ServerStrings.connected; color: #16a34a; font-size: 12px; vertical-alignment: center;
|
|
}
|
|
disconnect := SessionButton {
|
|
visible: root.controllers.length > 1;
|
|
x: parent.width - self.width; y: 2px;
|
|
text: ServerStrings.disconnect; danger: true;
|
|
clicked => { root.confirming-disconnect = false; root.disconnect-controller(controller.remote-id); }
|
|
}
|
|
}
|
|
}
|
|
footer := Rectangle {
|
|
x: 10px; y: list.y + list.height + 8px; width: parent.width - 20px; height: root.footer-height;
|
|
send-file := SessionButton {
|
|
x: root.footer-height > 28px ? parent.width - self.width : disconnect-all.x - self.width - 6px;
|
|
y: 0px;
|
|
text: root.confirming-disconnect ? ServerStrings.cancel : ServerStrings.send-file;
|
|
enabled: root.confirming-disconnect || !root.sending-file;
|
|
clicked => { if root.confirming-disconnect { root.confirming-disconnect = false; } else { root.select-file(); } }
|
|
}
|
|
disconnect-all := SessionButton {
|
|
x: parent.width - self.width; y: root.footer-height - 28px;
|
|
text: root.controllers.length > 1 ? ServerStrings.disconnect-all : ServerStrings.disconnect-one;
|
|
danger: true;
|
|
clicked => {
|
|
if root.controllers.length == 1 { root.disconnect-controller(root.controllers[0].remote-id); }
|
|
else if root.confirming-disconnect { root.confirming-disconnect = false; root.disconnect-all(); }
|
|
else { root.confirming-disconnect = true; }
|
|
}
|
|
}
|
|
}
|
|
if root.confirming-disconnect: Text {
|
|
x: 10px; y: footer.y + footer.height + 6px; width: parent.width - 20px; height: 30px;
|
|
text: ServerStrings.confirm-disconnect; color: #d92d20; font-size: 12px; wrap: word-wrap;
|
|
}
|
|
if root.file-transfer-visible: VerticalLayout {
|
|
x: 10px; y: root.height - 62px; width: parent.width - 20px; height: 52px; spacing: 2px;
|
|
Text { text: root.current-file-name; color: #596575; font-size: 11px; overflow: elide; }
|
|
Text { text: root.file-size-text; color: #596575; font-size: 11px; overflow: elide; }
|
|
Text { text: round(root.file-progress * 100) + "% " + root.file-progress-text; color: #2463c7; font-size: 11px; overflow: elide; }
|
|
}
|
|
}
|
|
// Draw outside the scrolling list so its last row can reveal its name.
|
|
if root.hovered-name != "": Rectangle {
|
|
x: 10px; y: root.tooltip-y; width: 205px; height: tip.preferred-height + 12px; z: 20;
|
|
background: #24272d; border-radius: 5px;
|
|
tip := Text { x: 6px; y: 6px; width: parent.width - 12px; text: root.hovered-name; color: white; font-size: 12px; wrap: word-wrap; }
|
|
}
|
|
}
|
|
}
|