YangWX/crossdesk
1
0
Fork 0
mirror of https://github.com/kunkundi/crossdesk.git synced 2026-11-11 02:06:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ui] flatten desktop surfaces and controls

Browse Source
This commit is contained in:
dijunkun
2026-10-26 14:53:09 +08:00
parent 38d0ce7728
commit c3ea4eb8fc
18 changed files with 337 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/gui/ui/server_window.slint
+17 -14
View File
@@ -1,7 +1,7 @@
import { ShadowSurface, UiShadow } from "ui_shadow.slint";
import { FlatSurface, UiSurface } from "ui_surface.slint";
import { UiRadius } from "ui_radius.slint";
import { ScrollView } from "std-widgets.slint";
import { FontAwesomeIcons, FloatingBarStyle, ControlStyle } from "common.slint";
import { FontAwesomeIcons, FloatingBarStyle, ButtonStyle } from "common.slint";
export struct ControllerEntry {
remote-id: string,
@@ -20,7 +20,7 @@ export global ServerStrings {
in property <string> cancel: "取消";
}
component SessionButton inherits ShadowSurface {
component SessionButton inherits FlatSurface {
in property <string> text;
in property <bool> danger: false;
in property <bool> enabled: true;
@@ -30,10 +30,13 @@ component SessionButton inherits ShadowSurface {
width: label.preferred-width + 20px;
height: 28px;
border-radius: UiRadius.control;
shadow-color: root.danger ? UiShadow.error : UiShadow.edge;
outline-enabled: !root.danger;
outline-color: root.pointer-feedback && touch.pressed ? ButtonStyle.pressed-border
: root.pointer-feedback && touch.has-hover ? ButtonStyle.hover-border : ButtonStyle.border;
background: root.danger ? (root.pointer-feedback && touch.pressed ? #b42318 : root.pointer-feedback && touch.has-hover ? #f04438 : #d92d20)
: (root.pointer-feedback && touch.pressed ? ControlStyle.pressed
: root.pointer-feedback && touch.has-hover ? ControlStyle.hover : ControlStyle.surface);
: (root.pointer-feedback && touch.pressed ? ButtonStyle.pressed
: root.pointer-feedback && touch.has-hover ? ButtonStyle.hover : ButtonStyle.surface);
animate background, outline-color { duration: 120ms; }
opacity: root.enabled ? 1 : 0.5;
accessible-role: button;
accessible-label: root.text;
@@ -73,9 +76,9 @@ component SessionButton inherits ShadowSurface {
// 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: ShadowSurface {
if root.enabled && keyboard.has-focus && root.keyboard-focus: FlatSurface {
x: 2px; y: 2px; width: parent.width - 4px; height: parent.height - 4px;
border-radius: UiRadius.control - 2px; shadow-color: root.danger ? white : UiShadow.focus;
border-radius: UiRadius.control - 2px; outline-color: root.danger ? white : UiSurface.focus;
}
}
@@ -108,10 +111,10 @@ export component ServerStatusBar inherits Window {
return reject;
}
}
ShadowSurface {
FlatSurface {
x: 0px; y: 0px; width: parent.width; height: parent.height;
background: touch.pressed ? #dfe3e9 : touch.has-hover ? #f3f4f6 : white;
shadow-color: UiShadow.edge;
outline-color: UiSurface.edge;
border-radius: FloatingBarStyle.corner-radius;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
@@ -171,9 +174,9 @@ export component ServerWindow inherits Window {
if event.text == Key.Escape { root.dismiss-panel(); return accept; }
return reject;
}
ShadowSurface {
FlatSurface {
width: root.width; height: root.height;
background: white; shadow-color: UiShadow.edge;
background: white; outline-color: UiSurface.edge;
border-radius: UiRadius.surface;
Text {
x: 10px; y: 10px; width: parent.width - 20px; height: 24px;
@@ -193,9 +196,9 @@ export component ServerWindow inherits Window {
width: parent.width - (root.controllers.length > 1 ? disconnect.width + 4px : status.preferred-width + 8px);
height: parent.height; border-radius: UiRadius.control;
background: root.controllers.length > 1 && index == root.selected-controller ? #eef5fd : select-touch.has-hover ? #f3f4f6 : transparent;
if root.controllers.length > 1: ShadowSurface {
if root.controllers.length > 1: FlatSurface {
x: 4px; y: (parent.height - 13px) / 2; width: 13px; height: 13px;
border-radius: 7px; shadow-color: index == root.selected-controller ? UiShadow.focus : UiShadow.edge;
border-radius: 7px; outline-color: index == root.selected-controller ? UiSurface.focus : UiSurface.edge;
if index == root.selected-controller: Rectangle { x: 3px; y: 3px; width: 7px; height: 7px; border-radius: 4px; background: #2463c7; }
}
name := Text {