mirror of
https://github.com/kunkundi/crossdesk.git
synced 2026-11-11 02:06:38 +08:00
[ui] flatten desktop surfaces and controls
This commit is contained in:
dijunkun
@@ -1,4 +1,4 @@
|
||||
import { ShadowSeparator, ShadowSurface, UiShadow } from "ui_shadow.slint";
|
||||
import { SurfaceSeparator, FlatSurface, UiSurface } from "ui_surface.slint";
|
||||
import { LanStrings } from "lan_strings.slint";
|
||||
import { AboutPanel, AboutPage, AboutComponent, AboutStrings, AboutNavigationRow, AboutNavigationGroup, AboutRowSeparator } from "about_panel.slint";
|
||||
import { UiRadius } from "ui_radius.slint";
|
||||
@@ -210,7 +210,7 @@ component DialogPromptText inherits Rectangle {
|
||||
}
|
||||
|
||||
// Use the same plain-text field for connection and password changes.
|
||||
component PasswordInput inherits ShadowSurface {
|
||||
component PasswordInput inherits FlatSurface {
|
||||
in-out property <string> text;
|
||||
in property <int> max-length: 0;
|
||||
in property <length> text-size: ImGuiFontStyle.base;
|
||||
@@ -221,9 +221,8 @@ component PasswordInput inherits ShadowSurface {
|
||||
width: 70px;
|
||||
height: 23px;
|
||||
background: editor.has-focus ? ControlStyle.input-focused : ControlStyle.input-surface;
|
||||
shadow-color: root.error ? UiShadow.error : editor.has-focus ? UiShadow.focus : UiShadow.edge;
|
||||
shadow-focused: editor.has-focus || root.error;
|
||||
shadow-compact: true;
|
||||
outline-color: root.error ? UiSurface.error : editor.has-focus ? UiSurface.focus : UiSurface.edge;
|
||||
outline-focused: editor.has-focus || root.error;
|
||||
border-radius: UiRadius.control;
|
||||
clip: true;
|
||||
forward-focus: editor;
|
||||
@@ -943,10 +942,10 @@ export component MainWindow inherits Window {
|
||||
clicked => { root.close-main-window(); }
|
||||
}
|
||||
}
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
y: parent.height - 1px;
|
||||
height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1030,10 +1029,10 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
close-touch := TouchArea { clicked => { root.close-main-window(); } }
|
||||
}
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
y: parent.height - 1px;
|
||||
height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1096,12 +1095,12 @@ export component MainWindow inherits Window {
|
||||
// Slint owns the client area below the native macOS title bar. Draw
|
||||
// the boundary here because AppKit's titlebar separator is not shown
|
||||
// reliably when winit creates a window without an NSToolbar.
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
x: 0px;
|
||||
y: 0px;
|
||||
width: parent.width;
|
||||
height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
z: 7;
|
||||
}
|
||||
|
||||
@@ -1168,13 +1167,13 @@ export component MainWindow inherits Window {
|
||||
clicked => { root.gallery-action("release", ""); root.menu-open = !root.menu-open; }
|
||||
}
|
||||
// Unread messages take precedence so the menu has only one indicator.
|
||||
if !root.gallery-mode && root.update-available && root.announcement-unread <= 0: ShadowSurface {
|
||||
if !root.gallery-mode && root.update-available && root.announcement-unread <= 0: FlatSurface {
|
||||
x: menu-button.x + menu-button.width - self.width + 4px;
|
||||
y: menu-button.y - 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
background: WorkbenchStyle.accent;
|
||||
opacity: root.menu-open || mod(animation-tick(), 2s) < 1s ? 1 : 0;
|
||||
z: 9;
|
||||
@@ -1208,13 +1207,13 @@ export component MainWindow inherits Window {
|
||||
clicked => { root.gallery-action("release", ""); root.menu-open = !root.menu-open; }
|
||||
}
|
||||
}
|
||||
if !root.gallery-mode && root.announcement-unread > 0: ShadowSurface {
|
||||
if !root.gallery-mode && root.announcement-unread > 0: FlatSurface {
|
||||
x: menu-button.x + menu-button.width - self.width + 4px;
|
||||
y: menu-button.y - 1px;
|
||||
width: max(16px, unread-badge-label.preferred-width + 8px);
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
background: #d92d20;
|
||||
z: 9;
|
||||
accessible-role: button;
|
||||
@@ -1286,7 +1285,7 @@ export component MainWindow inherits Window {
|
||||
lan-port-editor.select-all();
|
||||
}
|
||||
}
|
||||
local-address-field := ShadowSurface {
|
||||
local-address-field := FlatSurface {
|
||||
x: 16px; y: 90px; width: parent.width - 32px; height: 40px;
|
||||
// Size the endpoint as one line; reserve five port digits so
|
||||
// editing never shifts the IP or changes the font size.
|
||||
@@ -1305,14 +1304,13 @@ export component MainWindow inherits Window {
|
||||
// parent's stacking order above the following password row.
|
||||
z: 1;
|
||||
background: ControlStyle.input-surface; border-radius: UiRadius.control;
|
||||
shadow-compact: true;
|
||||
shadow-color: !root.lan-mode ? UiShadow.edge
|
||||
: root.lan-endpoint-error != "" ? UiShadow.error
|
||||
: lan-ip-picker.has-focus || root.lan-port-editing ? UiShadow.focus
|
||||
: UiShadow.edge;
|
||||
animate shadow-color { duration: 120ms; }
|
||||
outline-color: !root.lan-mode ? UiSurface.edge
|
||||
: root.lan-endpoint-error != "" ? UiSurface.error
|
||||
: lan-ip-picker.has-focus || root.lan-port-editing ? UiSurface.focus
|
||||
: UiSurface.edge;
|
||||
animate outline-color { duration: 120ms; }
|
||||
if !root.lan-mode: Text { x: 12px; width: parent.width - 64px; height: parent.height; text: root.local-id; font-size: 24px; font-weight: 600; letter-spacing: 1px; overflow: elide; color: WorkbenchStyle.text; vertical-alignment: center; }
|
||||
ShadowSeparator { x: parent.width - 48px; y: 10px; width: 1px; height: parent.height - 20px; vertical: true; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { x: parent.width - 48px; y: 10px; width: 1px; height: parent.height - 20px; vertical: true; outline-color: UiSurface.separator; }
|
||||
lan-ip-picker := GroupFilter {
|
||||
visible: root.lan-mode;
|
||||
x: 4px; y: 2px;
|
||||
@@ -1325,9 +1323,9 @@ export component MainWindow inherits Window {
|
||||
model: root.lan-interfaces; system-count: 0;
|
||||
current-index <=> root.lan-interface-draft-index;
|
||||
enabled: root.lan-mode && !root.lan-password-pending && root.lan-interfaces.length > 0;
|
||||
normal-shadow-color: UiShadow.edge;
|
||||
hover-shadow-color: UiShadow.hover;
|
||||
focus-shadow-color: WorkbenchStyle.accent;
|
||||
normal-outline-color: UiSurface.edge;
|
||||
hover-outline-color: UiSurface.hover;
|
||||
focus-outline-color: WorkbenchStyle.accent;
|
||||
accessible-label: GalleryStrings.tr("切换本机 IP", "Switch local IP", "Сменить локальный IP");
|
||||
selected(index) => {
|
||||
root.copy-feedback = CopyFeedback.idle;
|
||||
@@ -1352,7 +1350,7 @@ export component MainWindow inherits Window {
|
||||
font-weight: 600; color: WorkbenchStyle.text;
|
||||
horizontal-alignment: center; vertical-alignment: center;
|
||||
}
|
||||
lan-port-field := ShadowSurface {
|
||||
lan-port-field := FlatSurface {
|
||||
visible: root.lan-mode;
|
||||
x: lan-ip-picker.x + lan-ip-picker.width + 2px; y: 2px;
|
||||
width: lan-port-metrics.preferred-width * local-address-field.lan-font-scale + 4px;
|
||||
@@ -1360,8 +1358,8 @@ export component MainWindow inherits Window {
|
||||
background: lan-port-editor.has-focus ? ControlStyle.input-focused
|
||||
: lan-port-hover.has-hover ? ControlStyle.hover : transparent;
|
||||
border-radius: UiRadius.control;
|
||||
shadow-color: lan-port-editor.has-focus ? UiShadow.focus : transparent;
|
||||
animate background, shadow-color { duration: 120ms; }
|
||||
outline-color: lan-port-editor.has-focus ? UiSurface.focus : transparent;
|
||||
animate background, outline-color { duration: 120ms; }
|
||||
lan-port-hover := TouchArea {
|
||||
enabled: root.lan-mode && !root.lan-password-pending;
|
||||
mouse-cursor: text;
|
||||
@@ -1444,13 +1442,12 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
Text { x: 16px; y: 138px; height: 18px; text: UiStrings.password; font-size: 12px; color: WorkbenchStyle.muted; }
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
x: 16px; y: 158px; width: parent.width - 32px; height: 36px;
|
||||
background: ControlStyle.input-surface; border-radius: UiRadius.control;
|
||||
shadow-color: UiShadow.edge;
|
||||
shadow-compact: true;
|
||||
outline-color: UiSurface.edge;
|
||||
Text { x: 12px; width: parent.width - 132px; height: parent.height; text: root.active-password == "" ? "—" : root.active-password-visible ? root.active-password : "••••••"; font-size: 20px; font-weight: 500; letter-spacing: 2px; color: WorkbenchStyle.text; vertical-alignment: center; }
|
||||
ShadowSeparator { x: parent.width - 118px; y: 8px; width: 1px; height: parent.height - 16px; vertical: true; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { x: parent.width - 118px; y: 8px; width: 1px; height: parent.height - 16px; vertical: true; outline-color: UiSurface.separator; }
|
||||
WorkbenchButton {
|
||||
x: parent.width - 112px; y: 0px; width: 36px; quiet: true;
|
||||
icon: root.active-password-visible ? FontAwesomeIcons.eye : FontAwesomeIcons.eye-slash;
|
||||
@@ -1477,14 +1474,13 @@ export component MainWindow inherits Window {
|
||||
Text { x: 16px; y: 14px; width: parent.width - 32px; height: 24px; overflow: elide; text: UiStrings.remote-desktop; font-size: 16px; font-weight: 600; color: WorkbenchStyle.text; }
|
||||
Text { x: 16px; y: 38px; width: parent.width - 32px; height: 18px; text: root.lan-mode ? GalleryStrings.tr("输入 IP:端口，通过局域网连接", "Enter IP:port to connect over LAN", "Введите IP:порт для подключения по LAN") : GalleryStrings.tr("输入设备 ID，连接远程桌面", "Enter a device ID to start a remote session", "Введите ID для удалённого подключения"); font-size: 11px; color: WorkbenchStyle.muted; overflow: elide; }
|
||||
Text { x: 16px; y: 68px; height: 18px; text: root.lan-mode ? GalleryStrings.tr("远端 IP / 端口", "Remote IP / Port", "Удалённый IP / Порт") : UiStrings.remote-id; font-size: 12px; color: WorkbenchStyle.muted; }
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
x: 16px; y: 90px; width: parent.width - 32px; height: 40px;
|
||||
background: remote-id-editor.has-focus ? ControlStyle.input-focused : ControlStyle.input-surface;
|
||||
shadow-compact: true;
|
||||
border-radius: UiRadius.control;
|
||||
shadow-color: root.connection-input-error != "" ? UiShadow.error : remote-id-editor.has-focus ? UiShadow.focus : UiShadow.edge;
|
||||
shadow-focused: remote-id-editor.has-focus || root.connection-input-error != "";
|
||||
animate shadow-color { duration: 120ms; }
|
||||
outline-color: root.connection-input-error != "" ? UiSurface.error : remote-id-editor.has-focus ? UiSurface.focus : UiSurface.edge;
|
||||
outline-focused: remote-id-editor.has-focus || root.connection-input-error != "";
|
||||
animate outline-color { duration: 120ms; }
|
||||
if root.remote-id-input == "": Text {
|
||||
x: 12px; width: parent.width - 24px; height: parent.height;
|
||||
text: root.lan-mode ? "192.168.1.20:52888" : GalleryStrings.tr("请输入 9 位设备 ID", "Enter a 9-digit device ID", "Введите ID из 9 цифр");
|
||||
@@ -1538,24 +1534,23 @@ export component MainWindow inherits Window {
|
||||
x: parent.width - self.width - 20px; y: 0px;
|
||||
width: 155px; height: 32px;
|
||||
normal-background: white;
|
||||
normal-shadow-color: UiShadow.edge;
|
||||
hover-shadow-color: UiShadow.hover;
|
||||
focus-shadow-color: WorkbenchStyle.accent;
|
||||
normal-outline-color: UiSurface.edge;
|
||||
hover-outline-color: UiSurface.hover;
|
||||
focus-outline-color: WorkbenchStyle.accent;
|
||||
model: root.recent-groups;
|
||||
current-index <=> root.recent-group-index;
|
||||
selected(index) => { root.recent-group-selected(index); }
|
||||
}
|
||||
|
||||
recent-list := ShadowSurface {
|
||||
recent-list := FlatSurface {
|
||||
x: 20px;
|
||||
y: 36px;
|
||||
width: parent.width - 40px;
|
||||
height: 142px;
|
||||
// A continuous inset surface groups the cards into one
|
||||
// horizontal scrolling lane, including its scrollbar.
|
||||
background: root.recent-connections.length > 0 ? #e6edf6 : transparent;
|
||||
shadow-enabled: root.recent-connections.length > 0;
|
||||
shadow-color: UiShadow.edge;
|
||||
// A light flat surface groups the cards and their scrollbar.
|
||||
background: root.recent-connections.length > 0 ? #f5f7fb : transparent;
|
||||
outline-enabled: root.recent-connections.length > 0;
|
||||
outline-color: UiSurface.edge;
|
||||
border-radius: UiRadius.surface;
|
||||
clip: true;
|
||||
|
||||
@@ -1627,11 +1622,10 @@ export component MainWindow inherits Window {
|
||||
width: parent.width;
|
||||
height: root.recent-preview-height;
|
||||
background: !connection-card.available ? DeviceCardStyle.offline-preview :
|
||||
connection.platform == "windows" ? @linear-gradient(135deg, #1f61b3, #337ac4) :
|
||||
connection.platform == "macos" ? @linear-gradient(135deg, #6e4aad, #8c63c4) :
|
||||
connection.platform == "linux" ? @linear-gradient(135deg, #a14f14, #ba631f) :
|
||||
connection.platform == "ios" ? @linear-gradient(135deg, #146e66, #1f8278) :
|
||||
@linear-gradient(135deg, #596675, #737d8c);
|
||||
connection.platform == "windows" ? #296ebc :
|
||||
connection.platform == "macos" ? #7d57b9 :
|
||||
connection.platform == "linux" ? #ad591a :
|
||||
connection.platform == "ios" ? #19786f : #667282;
|
||||
if connection.has-thumbnail: Image {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
@@ -1678,7 +1672,7 @@ export component MainWindow inherits Window {
|
||||
width: parent.width;
|
||||
height: 44px;
|
||||
background: white;
|
||||
ShadowSeparator { x: 0px; y: 0px; width: parent.width; height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { x: 0px; y: 0px; width: parent.width; height: 1px; outline-color: UiSurface.separator; }
|
||||
Text {
|
||||
x: 12px; y: 5px; height: 19px;
|
||||
width: parent.width - 56px;
|
||||
@@ -1812,11 +1806,11 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
}
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
width: parent.width; height: 124px;
|
||||
border-radius: UiRadius.surface;
|
||||
shadow-color: card-touch.has-hover || card-menu.menu-open ? UiShadow.hover : UiShadow.edge;
|
||||
animate shadow-color { duration: 120ms; }
|
||||
outline-color: card-touch.has-hover || card-menu.menu-open ? UiSurface.hover : UiSurface.edge;
|
||||
animate outline-color { duration: 120ms; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1873,10 +1867,10 @@ export component MainWindow inherits Window {
|
||||
y: parent.height - 28px;
|
||||
height: 28px;
|
||||
background: white;
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
y: 0px;
|
||||
height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
}
|
||||
Rectangle {
|
||||
x: 20px; y: 11px; width: 6px; height: 6px; border-radius: 3px;
|
||||
@@ -1927,7 +1921,7 @@ export component MainWindow inherits Window {
|
||||
// Shared device details sit outside the clipped recent list and wall rail,
|
||||
// below the modal layer (z >= 39).
|
||||
if (root.gallery-mode ? gallery.hovered-device.id != "" : root.recent-tooltip-visible)
|
||||
&& !root.connection-dialog-open && !root.lan-open: device-tip := ShadowSurface {
|
||||
&& !root.connection-dialog-open && !root.lan-open: device-tip := FlatSurface {
|
||||
private property <string> device-name: root.gallery-mode ? gallery.hovered-device.name : root.recent-tooltip-name;
|
||||
private property <string> host-name: root.gallery-mode ? gallery.hovered-device.host-name : root.recent-tooltip-host;
|
||||
private property <string> device-id: root.gallery-mode ? gallery.hovered-device.id : root.recent-tooltip-id;
|
||||
@@ -1954,11 +1948,8 @@ export component MainWindow inherits Window {
|
||||
self.label-width + max(tooltip-id.preferred-width, tooltip-groups.preferred-width) + 32px));
|
||||
height: tooltip-groups.y + tooltip-groups.height + 10px;
|
||||
background: WorkbenchStyle.surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
border-radius: UiRadius.menu;
|
||||
drop-shadow-color: #14294424;
|
||||
drop-shadow-blur: 14px;
|
||||
drop-shadow-offset-y: 4px;
|
||||
z: 20;
|
||||
|
||||
tooltip-name-label := Text {
|
||||
@@ -1997,11 +1988,11 @@ export component MainWindow inherits Window {
|
||||
color: WorkbenchStyle.muted; font-size: 10px;
|
||||
wrap: word-wrap;
|
||||
}
|
||||
tooltip-divider := ShadowSeparator {
|
||||
tooltip-divider := SurfaceSeparator {
|
||||
x: 12px; y: tooltip-name.y + tooltip-name.height
|
||||
+ (device-tip.has-host-name ? tooltip-host.height + 3px : 0px) + 8px;
|
||||
width: parent.width - 24px; height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
}
|
||||
tooltip-id-label := Text {
|
||||
x: 12px; y: tooltip-divider.y + 7px;
|
||||
@@ -2048,7 +2039,7 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
|
||||
// Expand downward from the application toolbar.
|
||||
if !root.gallery-mode && root.menu-open: ShadowSurface {
|
||||
if !root.gallery-mode && root.menu-open: FlatSurface {
|
||||
x: menu-button.x + menu-button.width - self.width;
|
||||
y: menu-button.y + menu-button.height + 6px;
|
||||
width: max(128px, max(menu-settings-label.preferred-width,
|
||||
@@ -2056,7 +2047,7 @@ export component MainWindow inherits Window {
|
||||
menu-about-label.preferred-width + (root.update-available ? menu-update-badge.width + 8px : 0px))) + 28px);
|
||||
height: application-menu-content.preferred-height;
|
||||
background: WorkbenchStyle.surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
border-radius: UiRadius.menu;
|
||||
z: 10;
|
||||
TouchArea { }
|
||||
@@ -2089,9 +2080,9 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
Rectangle {
|
||||
height: 7px;
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
x: 8px; y: 3px; width: parent.width - 16px; height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
}
|
||||
}
|
||||
menu-messages := Rectangle {
|
||||
@@ -2138,9 +2129,9 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
Rectangle {
|
||||
height: 7px;
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
x: 8px; y: 3px; width: parent.width - 16px; height: 1px;
|
||||
shadow-color: UiShadow.separator;
|
||||
outline-color: UiSurface.separator;
|
||||
}
|
||||
}
|
||||
menu-about := Rectangle {
|
||||
@@ -2311,7 +2302,7 @@ export component MainWindow inherits Window {
|
||||
DialogPromptText { prompt: UiStrings.edit-alias; }
|
||||
RoundedLineEdit {
|
||||
height: 28px;
|
||||
normal-shadow-color: UiShadow.edge;
|
||||
normal-outline-color: UiSurface.edge;
|
||||
text <=> root.alias-input;
|
||||
accepted => {
|
||||
root.recent-edit-alias(root.alias-remote-id, root.alias-input);
|
||||
@@ -2386,7 +2377,7 @@ export component MainWindow inherits Window {
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: min(420px, parent.width - 40px);
|
||||
height: disconnect-content.preferred-height;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
TouchArea { scroll-event(event) => { accept } }
|
||||
disconnect-content := VerticalLayout {
|
||||
padding: 24px;
|
||||
@@ -2535,8 +2526,7 @@ export component MainWindow inherits Window {
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: min(400px, parent.width - 40px);
|
||||
height: permission-content.preferred-height;
|
||||
background: #f8fafc; shadow-color: UiShadow.edge;
|
||||
drop-shadow-color: #14294424; drop-shadow-blur: 24px; drop-shadow-offset-y: 8px;
|
||||
background: #f8fafc; outline-color: UiSurface.edge;
|
||||
TouchArea { clicked => { focus-sink.focus(); } }
|
||||
permission-content := VerticalLayout {
|
||||
padding: 24px; spacing: 20px;
|
||||
@@ -2607,7 +2597,7 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
ShadowSeparator { height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { height: 1px; outline-color: UiSurface.separator; }
|
||||
Text {
|
||||
text: GalleryStrings.tr("请在系统设置中允许 CrossDesk 访问。如系统提示重新打开应用，请按提示操作。",
|
||||
"Allow CrossDesk access in System Settings. Reopen the app if macOS asks you to.",
|
||||
@@ -2628,13 +2618,12 @@ export component MainWindow inherits Window {
|
||||
// Center every content section; the scrollbar sits in the right margin.
|
||||
private property <length> content-inset: 26px;
|
||||
private property <length> scrollbar-gutter: 22px;
|
||||
private property <length> shadow-gutter: 6px;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: min(400px, parent.width - 40px);
|
||||
height: min(446px, parent.height - 16px);
|
||||
background: #f8fafc; border-radius: UiRadius.surface; shadow-color: UiShadow.edge;
|
||||
drop-shadow-color: #14294424; drop-shadow-blur: 24px; drop-shadow-offset-y: 8px;
|
||||
background: #f8fafc; border-radius: UiRadius.surface; outline-color: UiSurface.edge;
|
||||
|
||||
TouchArea { clicked => { focus-sink.focus(); } }
|
||||
Text {
|
||||
x: settings-dialog.content-inset; y: 18px;
|
||||
@@ -2642,12 +2631,12 @@ export component MainWindow inherits Window {
|
||||
text: UiStrings.settings; font-size: 20px; font-weight: 600; color: #22324a;
|
||||
}
|
||||
// Match the compact connection-mode switch, centered in the tab row.
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
x: settings-dialog.content-inset; y: 62px;
|
||||
width: parent.width - 2 * settings-dialog.content-inset; height: 28px;
|
||||
background: WorkbenchStyle.field-surface; border-radius: UiRadius.control;
|
||||
border-width: 1px; border-color: WorkbenchStyle.accent;
|
||||
shadow-compact: true; shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
Rectangle {
|
||||
x: root.settings-tab == 1 ? parent.width / 2 + 1px : 2px;
|
||||
y: 2px; width: (parent.width - 6px) / 2; height: parent.height - 4px;
|
||||
@@ -2672,9 +2661,9 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
if root.settings-tab == 0: settings-scroll := ScrollView {
|
||||
x: settings-dialog.content-inset - settings-dialog.shadow-gutter; y: 108px;
|
||||
x: settings-dialog.content-inset; y: 108px;
|
||||
width: parent.width - 2 * settings-dialog.content-inset
|
||||
+ settings-dialog.scrollbar-gutter + settings-dialog.shadow-gutter;
|
||||
+ settings-dialog.scrollbar-gutter;
|
||||
height: parent.height - 174px - (root.settings-save-error == "" ? 0px : 28px);
|
||||
viewport-width: self.visible-width;
|
||||
viewport-height: settings-content.preferred-height;
|
||||
@@ -2688,9 +2677,7 @@ export component MainWindow inherits Window {
|
||||
width: settings-scroll.viewport-width;
|
||||
height: settings-scroll.viewport-height;
|
||||
settings-content := VerticalLayout {
|
||||
// Keep the six outer shadow layers inside the scroll clip
|
||||
// without moving or narrowing the settings cards.
|
||||
padding: 0px; padding-left: settings-dialog.shadow-gutter;
|
||||
padding: 0px;
|
||||
padding-right: settings-dialog.scrollbar-gutter; padding-bottom: 4px;
|
||||
spacing: 14px;
|
||||
SettingsGroup {
|
||||
@@ -2785,9 +2772,9 @@ export component MainWindow inherits Window {
|
||||
width: parent.width - 2 * settings-dialog.content-inset; height: 24px;
|
||||
text: root.settings-save-error; font-size: 11px; color: #c53e3e; wrap: word-wrap;
|
||||
}
|
||||
ShadowSeparator {
|
||||
SurfaceSeparator {
|
||||
x: settings-dialog.content-inset; y: parent.height - 64px;
|
||||
width: parent.width - 2 * settings-dialog.content-inset; height: 1px; shadow-color: UiShadow.separator;
|
||||
width: parent.width - 2 * settings-dialog.content-inset; height: 1px; outline-color: UiSurface.separator;
|
||||
}
|
||||
HorizontalLayout {
|
||||
x: settings-dialog.content-inset; y: parent.height - 50px;
|
||||
@@ -2813,8 +2800,7 @@ export component MainWindow inherits Window {
|
||||
x: (parent.width - self.width) / 2; y: (parent.height - self.height) / 2;
|
||||
width: min(460px, parent.width - 32px);
|
||||
height: min(380px, parent.height - 24px);
|
||||
background: #f8fafc; shadow-color: UiShadow.edge;
|
||||
drop-shadow-color: #14294424; drop-shadow-blur: 18px; drop-shadow-offset-y: 6px;
|
||||
background: #f8fafc; outline-color: UiSurface.edge;
|
||||
TouchArea { clicked => { focus-sink.focus(); } }
|
||||
Text {
|
||||
x: 24px; y: 18px; width: parent.width - 48px; height: 26px;
|
||||
@@ -2867,8 +2853,7 @@ export component MainWindow inherits Window {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 360px; height: root.self-host-settings-error == "" ? 266px : 322px;
|
||||
border-radius: UiRadius.surface; shadow-color: UiShadow.edge; background: #f8fafc;
|
||||
drop-shadow-color: #14294424; drop-shadow-blur: 18px; drop-shadow-offset-y: 6px;
|
||||
border-radius: UiRadius.surface; outline-color: UiSurface.edge; background: #f8fafc;
|
||||
TouchArea { clicked => { focus-sink.focus(); } }
|
||||
Text {
|
||||
x: 18px; y: 18px; width: parent.width - 36px; height: 24px;
|
||||
@@ -2878,21 +2863,21 @@ export component MainWindow inherits Window {
|
||||
RoundedLineEdit {
|
||||
x: 18px; y: 80px; width: parent.width - 36px; height: 30px;
|
||||
surrounding-background: #f8fafc;
|
||||
normal-shadow-color: UiShadow.edge;
|
||||
normal-outline-color: UiSurface.edge;
|
||||
text <=> root.server-host;
|
||||
}
|
||||
Text { x: 18px; y: 120px; width: parent.width - 36px; height: 20px; text: UiStrings.server-port; color: #34445a; font-size: 12px; overflow: elide; vertical-alignment: center; }
|
||||
RoundedLineEdit {
|
||||
x: 18px; y: 144px; width: parent.width - 36px; height: 30px;
|
||||
surrounding-background: #f8fafc;
|
||||
normal-shadow-color: UiShadow.edge;
|
||||
normal-outline-color: UiSurface.edge;
|
||||
text <=> root.server-port; input-type: InputType.number;
|
||||
}
|
||||
if root.self-host-settings-error != "": Text {
|
||||
x: 18px; y: 186px; width: parent.width - 36px; height: 48px;
|
||||
text: root.self-host-settings-error; color: #c53e3e; font-size: 11px; wrap: word-wrap;
|
||||
}
|
||||
ShadowSeparator { x: 18px; y: parent.height - 66px; width: parent.width - 36px; height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { x: 18px; y: parent.height - 66px; width: parent.width - 36px; height: 1px; outline-color: UiSurface.separator; }
|
||||
SettingsButton { x: parent.width - 114px; y: parent.height - 50px; width: 92px; primary: true; text: UiStrings.ok; clicked => { if root.save-self-hosted-settings() { root.self-host-settings-open = false; } } }
|
||||
SettingsButton { x: parent.width - 204px; y: parent.height - 50px; width: 80px; text: UiStrings.cancel; clicked => { root.cancel-self-hosted-settings(); root.self-host-settings-open = false; } }
|
||||
}
|
||||
@@ -2930,7 +2915,7 @@ export component MainWindow inherits Window {
|
||||
color: WorkbenchStyle.muted; font-size: 12px; wrap: word-wrap;
|
||||
font-family: "CrossDesk Message Spacing";
|
||||
}
|
||||
ShadowSeparator { height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { height: 1px; outline-color: UiSurface.separator; }
|
||||
HorizontalLayout {
|
||||
alignment: end;
|
||||
SettingsButton {
|
||||
@@ -2998,11 +2983,11 @@ export component MainWindow inherits Window {
|
||||
width: about-scroll.width; height: self.preferred-height;
|
||||
// Keep the expanding scrollbar outside the content.
|
||||
padding: 0px; padding-right: 22px; spacing: 16px;
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
height: max(80px, product-info.preferred-height + 32px);
|
||||
background: WorkbenchStyle.surface;
|
||||
border-radius: UiRadius.surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
Image {
|
||||
x: 16px; y: (parent.height - self.height) / 2;
|
||||
width: 56px; height: 56px;
|
||||
@@ -3019,11 +3004,11 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
}
|
||||
if root.update-available: ShadowSurface {
|
||||
if root.update-available: FlatSurface {
|
||||
height: update-summary.preferred-height + 24px;
|
||||
background: WorkbenchStyle.field-surface;
|
||||
border-radius: UiRadius.control;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
update-summary := VerticalLayout {
|
||||
x: 12px; y: 12px; width: parent.width - 24px;
|
||||
height: self.preferred-height;
|
||||
@@ -3093,7 +3078,7 @@ export component MainWindow inherits Window {
|
||||
x: 24px; y: parent.height - self.height - 24px;
|
||||
width: parent.width - 48px; height: self.preferred-height;
|
||||
spacing: 16px;
|
||||
ShadowSeparator { height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { height: 1px; outline-color: UiSurface.separator; }
|
||||
if root.update-status-text != "": Text {
|
||||
text: root.update-status-text;
|
||||
color: root.update-check-status == UpdateCheckStatus.failed ? #b3261e
|
||||
@@ -3137,10 +3122,7 @@ export component MainWindow inherits Window {
|
||||
// Use the same content area for sizing and centering the dialog.
|
||||
height: min(488px, parent.height - 32px);
|
||||
border-radius: UiRadius.surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
drop-shadow-color: #07142b24;
|
||||
drop-shadow-blur: 24px;
|
||||
drop-shadow-offset-y: 8px;
|
||||
outline-color: UiSurface.edge;
|
||||
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
@@ -3193,9 +3175,9 @@ export component MainWindow inherits Window {
|
||||
font-weight: 600;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
background: WorkbenchStyle.field-surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
border-radius: UiRadius.control;
|
||||
// Inset the viewport so text and the scrollbar stay clear
|
||||
// of the rounded frame, including at either scroll limit.
|
||||
@@ -3242,7 +3224,7 @@ export component MainWindow inherits Window {
|
||||
VerticalLayout {
|
||||
vertical-stretch: 0;
|
||||
spacing: 16px;
|
||||
ShadowSeparator { height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { height: 1px; outline-color: UiSurface.separator; }
|
||||
if root.update-install-status != "": Text {
|
||||
text: root.update-install-status;
|
||||
font-size: 12px;
|
||||
@@ -3315,7 +3297,7 @@ export component MainWindow inherits Window {
|
||||
width: min(440px, parent.width - 40px);
|
||||
height: update-confirm-content.preferred-height;
|
||||
border-radius: UiRadius.surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
TouchArea {}
|
||||
update-confirm-content := VerticalLayout {
|
||||
padding: 24px;
|
||||
@@ -3369,10 +3351,7 @@ export component MainWindow inherits Window {
|
||||
width: 512px;
|
||||
height: wayland-notice-content.preferred-height;
|
||||
border-radius: UiRadius.surface;
|
||||
shadow-color: UiShadow.edge;
|
||||
drop-shadow-color: #07142b30;
|
||||
drop-shadow-blur: 28px;
|
||||
drop-shadow-offset-y: 10px;
|
||||
outline-color: UiSurface.edge;
|
||||
|
||||
wayland-notice-content := VerticalLayout {
|
||||
padding: 24px; spacing: 18px;
|
||||
@@ -3393,9 +3372,9 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
background: #fff8eb;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
|
||||
border-radius: UiRadius.surface;
|
||||
VerticalLayout {
|
||||
@@ -3416,9 +3395,9 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
|
||||
ShadowSurface {
|
||||
FlatSurface {
|
||||
background: #f3f7fd;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
|
||||
border-radius: UiRadius.surface;
|
||||
VerticalLayout {
|
||||
@@ -3439,7 +3418,7 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
|
||||
ShadowSeparator { height: 1px; shadow-color: UiShadow.separator; }
|
||||
SurfaceSeparator { height: 1px; outline-color: UiSurface.separator; }
|
||||
HorizontalLayout {
|
||||
height: 34px; alignment: end;
|
||||
PrimaryButton {
|
||||
@@ -3472,8 +3451,8 @@ export component MainWindow inherits Window {
|
||||
text-size: ImGuiFontStyle.prominent;
|
||||
text-weight: 600;
|
||||
}
|
||||
ShadowSurface {
|
||||
background: #f7f8fa; shadow-color: UiShadow.edge; border-radius: UiRadius.surface;
|
||||
FlatSurface {
|
||||
background: #f7f8fa; outline-color: UiSurface.edge; border-radius: UiRadius.surface;
|
||||
Text { x: 14px; y: 22px; width: parent.width - 28px; height: parent.height - 24px; text: UiStrings.service-setup-message; color: #3d434d; wrap: word-wrap; vertical-alignment: center; }
|
||||
}
|
||||
if root.portable-service-status != "": Text {
|
||||
@@ -3544,13 +3523,13 @@ export component MainWindow inherits Window {
|
||||
z: 250;
|
||||
}
|
||||
|
||||
if root.custom-titlebar: ShadowSurface {
|
||||
if root.custom-titlebar: FlatSurface {
|
||||
x: 0px;
|
||||
y: 0px;
|
||||
width: root.width;
|
||||
height: root.height;
|
||||
background: transparent;
|
||||
shadow-color: UiShadow.edge;
|
||||
outline-color: UiSurface.edge;
|
||||
border-radius:
|
||||
root.wayland-titlebar ? root.wayland-corner-radius : 0px;
|
||||
z: 200;
|
||||
|
||||
Reference in New Issue
Block a user