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] refine desktop shadows and control contrast

Browse Source
This commit is contained in:
dijunkun
2026-10-26 11:18:41 +08:00
parent e3b3f78b06
commit e551e04e8f
16 changed files with 557 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/gui/ui/server_window.slint
+14 -13
View File
@@ -1,6 +1,7 @@
import { ShadowSurface, UiShadow } from "ui_shadow.slint";
import { UiRadius } from "ui_radius.slint";
import { ScrollView } from "std-widgets.slint";
import { FontAwesomeIcons, ImGuiLineStyle, FloatingBarStyle } from "common.slint";
import { FontAwesomeIcons, FloatingBarStyle, ControlStyle } from "common.slint";
export struct ControllerEntry {
remote-id: string,
@@ -19,7 +20,7 @@ export global ServerStrings {
in property <string> cancel: "取消";
}
component SessionButton inherits Rectangle {
component SessionButton inherits ShadowSurface {
in property <string> text;
in property <bool> danger: false;
in property <bool> enabled: true;
@@ -29,10 +30,10 @@ component SessionButton inherits Rectangle {
width: label.preferred-width + 20px;
height: 28px;
border-radius: UiRadius.control;
border-width: 1px;
border-color: root.danger ? #d92d20 : #c9ced7;
shadow-color: root.danger ? UiShadow.error : UiShadow.edge;
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);
: (root.pointer-feedback && touch.pressed ? ControlStyle.pressed
: root.pointer-feedback && touch.has-hover ? ControlStyle.hover : ControlStyle.surface);
opacity: root.enabled ? 1 : 0.5;
accessible-role: button;
accessible-label: root.text;
@@ -72,9 +73,9 @@ component SessionButton inherits Rectangle {
// 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 {
if root.enabled && keyboard.has-focus && root.keyboard-focus: ShadowSurface {
x: 2px; y: 2px; width: parent.width - 4px; height: parent.height - 4px;
border-radius: UiRadius.control - 2px; border-width: 1px; border-color: root.danger ? white : #2463c7;
border-radius: UiRadius.control - 2px; shadow-color: root.danger ? white : UiShadow.focus;
}
}
@@ -107,10 +108,10 @@ export component ServerStatusBar inherits Window {
return reject;
}
}
Rectangle {
ShadowSurface {
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;
shadow-color: UiShadow.edge;
border-radius: FloatingBarStyle.corner-radius;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
@@ -170,9 +171,9 @@ export component ServerWindow inherits Window {
if event.text == Key.Escape { root.dismiss-panel(); return accept; }
return reject;
}
Rectangle {
ShadowSurface {
width: root.width; height: root.height;
background: white; border-width: 1px; border-color: ImGuiLineStyle.border;
background: white; shadow-color: UiShadow.edge;
border-radius: UiRadius.surface;
Text {
x: 10px; y: 10px; width: parent.width - 20px; height: 24px;
@@ -192,9 +193,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: Rectangle {
if root.controllers.length > 1: ShadowSurface {
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;
border-radius: 7px; shadow-color: index == root.selected-controller ? UiShadow.focus : UiShadow.edge;
if index == root.selected-controller: Rectangle { x: 3px; y: 3px; width: 7px; height: 7px; border-radius: 4px; background: #2463c7; }
}
name := Text {