YangWX/crossdesk
1
0
Fork 0
mirror of https://github.com/kunkundi/crossdesk.git synced 2026-11-04 13:02:39 +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/settings_controls.slint
+12 -19
View File
@@ -1,11 +1,10 @@
import { ShadowSeparator, ShadowSurface, UiShadow } from "ui_shadow.slint";
import { SurfaceSeparator, FlatSurface, UiSurface } from "ui_surface.slint";
import { UiRadius } from "ui_radius.slint";
import { CompactComboBox, ToggleSwitch, DialogSurface, IconButton, FontAwesomeIcons, ControlStyle, ButtonStyle } from "common.slint";
import { WorkbenchStyle } from "workbench_controls.slint";
// Shared visual treatment for the global settings pages.
export component SettingsButton inherits ShadowSurface {
shadow-compact: true;
export component SettingsButton inherits FlatSurface {
in property <string> text;
in property <image> icon;
in property <bool> primary: false;
@@ -20,14 +19,11 @@ export component SettingsButton inherits ShadowSurface {
: root.primary ? (touch.pressed ? #1e4fa3 : touch.has-hover ? #2866c9 : #3275dc)
: touch.pressed ? ButtonStyle.pressed : touch.has-hover ? ButtonStyle.hover
: root.quiet ? transparent : ButtonStyle.surface;
border-width: root.quiet || root.primary ? 0px : 1px;
border-color: !root.enabled ? ButtonStyle.disabled-border
outline-enabled: !root.quiet && !root.primary;
outline-color: !root.enabled ? ButtonStyle.disabled-border
: touch.pressed ? ButtonStyle.pressed-border
: touch.has-hover ? ButtonStyle.hover-border : ButtonStyle.border;
shadow-enabled: root.enabled && !root.quiet && !touch.pressed;
shadow-color: root.primary ? UiShadow.focus
: touch.has-hover ? UiShadow.hover : UiShadow.edge;
animate background, border-color { duration: 120ms; }
animate background, outline-color { duration: 120ms; }
accessible-role: button; accessible-label: root.text;
accessible-enabled: root.enabled;
accessible-action-default => { if root.enabled { root.clicked(); } }
@@ -68,10 +64,7 @@ export component SettingsDialog inherits DialogSurface {
callback action();
callback close();
background: #f8fafc;
shadow-color: UiShadow.edge;
drop-shadow-color: #14294424;
drop-shadow-blur: 24px;
drop-shadow-offset-y: 8px;
outline-color: UiSurface.edge;
TouchArea { }
HorizontalLayout {
x: 24px; y: 18px; width: parent.width - 48px; height: 28px;
@@ -120,8 +113,8 @@ export component SettingsDialog inherits DialogSurface {
export component SettingsSelect inherits CompactComboBox {
subtle: true;
show-arrow: true;
normal-shadow-color: UiShadow.edge;
hover-shadow-color: UiShadow.hover;
normal-outline-color: UiSurface.edge;
hover-outline-color: UiSurface.hover;
height: 28px;
}
@@ -133,9 +126,9 @@ export component SettingsGroup inherits Rectangle {
x: 2px; y: 0px; width: parent.width - 4px; height: 18px; text: root.title;
font-size: 11px; font-weight: 600; color: #718096; vertical-alignment: center;
}
ShadowSurface {
FlatSurface {
y: 24px; width: parent.width; height: parent.height - self.y;
background: white; border-radius: UiRadius.surface; shadow-color: UiShadow.edge;
background: white; border-radius: UiRadius.surface; outline-color: UiSurface.edge;
VerticalLayout { padding: 0px; spacing: 0px; @children }
}
}
@@ -151,8 +144,8 @@ export component SettingsRow inherits Rectangle {
text: root.label; color: root.enabled ? #34445a : #9ba5b3;
font-size: 12px; overflow: elide; vertical-alignment: center;
}
if root.divider: ShadowSeparator {
x: 12px; y: parent.height - 1px; width: parent.width - 24px; height: 1px; shadow-color: UiShadow.separator;
if root.divider: SurfaceSeparator {
x: 12px; y: parent.height - 1px; width: parent.width - 24px; height: 1px; outline-color: UiSurface.separator;
}
@children
}