YangWX/crossdesk
1
0
Fork 0
mirror of https://github.com/kunkundi/crossdesk.git synced 2026-10-28 00:33:06 +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/common.slint
+29 -46
View File
@@ -1,4 +1,4 @@
import { ShadowSurface, UiShadow } from "ui_shadow.slint";
import { FlatSurface, UiSurface } from "ui_surface.slint";
import { UiRadius } from "ui_radius.slint";
export global FloatingBarStyle {
out property <length> corner-radius: UiRadius.menu;
@@ -199,15 +199,14 @@ export component ImageButton inherits Rectangle {
}
}
export component CompactComboBox inherits ShadowSurface {
shadow-compact: true;
export component CompactComboBox inherits FlatSurface {
in property <[string]> model;
in-out property <int> current-index: 0;
in property <bool> enabled: true;
in property <bool> subtle: false;
in property <bool> show-arrow: true;
in property <color> normal-shadow-color: UiShadow.edge;
in property <color> hover-shadow-color: UiShadow.hover;
in property <color> normal-outline-color: ButtonStyle.border;
in property <color> hover-outline-color: ButtonStyle.hover-border;
property <bool> popup-animation-enabled: false;
property <float> popup-progress: 0.0;
callback selected(int);
@@ -234,17 +233,13 @@ export component CompactComboBox inherits ShadowSurface {
background: !root.enabled ? ControlStyle.disabled
: combo-touch.pressed ? ButtonStyle.pressed
: combo-popup.is-open || combo-touch.has-hover ? ButtonStyle.hover : ButtonStyle.surface;
border-width: 1px;
border-color: !root.enabled ? ButtonStyle.disabled-border
: combo-popup.is-open ? UiShadow.focus
outline-focused: root.enabled && combo-popup.is-open;
outline-color: !root.enabled ? ButtonStyle.disabled-border
: combo-popup.is-open ? UiSurface.focus
: combo-touch.pressed ? ButtonStyle.pressed-border
: combo-touch.has-hover ? ButtonStyle.hover-border : ButtonStyle.border;
shadow-enabled: root.enabled && !combo-touch.pressed;
shadow-focused: root.enabled && combo-popup.is-open;
shadow-color: combo-popup.is-open ? UiShadow.focus
: root.enabled && combo-touch.has-hover ? root.hover-shadow-color : root.normal-shadow-color;
: combo-touch.has-hover ? root.hover-outline-color : root.normal-outline-color;
border-radius: UiRadius.control;
animate background, border-color, shadow-color { duration: 120ms; }
animate background, outline-color { duration: 120ms; }
accessible-role: combobox;
accessible-enabled: root.enabled;
accessible-expandable: true;
@@ -267,7 +262,7 @@ export component CompactComboBox inherits ShadowSurface {
width: 18px; height: parent.height;
// Switch glyphs so the software renderer also shows the open state.
text: combo-popup.is-open ? FontAwesomeIcons.angle-up : FontAwesomeIcons.angle-down;
color: !root.enabled ? #98a2b3 : combo-popup.is-open ? UiShadow.focus : ControlStyle.icon;
color: !root.enabled ? #98a2b3 : combo-popup.is-open ? UiSurface.focus : ControlStyle.icon;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 10px;
@@ -306,7 +301,7 @@ export component CompactComboBox inherits ShadowSurface {
height: root.model.length * 23px + 8px;
close-policy: close-on-click-outside;
ShadowSurface {
FlatSurface {
// Keep the reveal anchored to the popup's top edge while the
// content settles downward into its final position.
y: (1.0 - root.popup-progress) * -8px;
@@ -314,7 +309,7 @@ export component CompactComboBox inherits ShadowSurface {
height: parent.height * root.popup-progress;
opacity: root.popup-progress;
background: white;
shadow-color: root.normal-shadow-color;
outline-color: root.normal-outline-color;
border-radius: UiRadius.menu;
clip: true;
for choice[index] in root.model: Rectangle {
@@ -333,7 +328,7 @@ export component CompactComboBox inherits ShadowSurface {
}
if index == root.current-index: Text {
x: parent.width - 20px; width: 14px; height: parent.height;
text: FontAwesomeIcons.check; color: UiShadow.focus;
text: FontAwesomeIcons.check; color: UiSurface.focus;
font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px;
horizontal-alignment: center; vertical-alignment: center;
accessible-role: none;
@@ -353,23 +348,20 @@ export component CompactComboBox inherits ShadowSurface {
}
}
}
ShadowSurface {
FlatSurface {
width: parent.width;
height: parent.height;
background: transparent;
clip: true;
shadow-color: root.normal-shadow-color;
outline-color: root.normal-outline-color;
border-radius: UiRadius.menu;
border-width: 1px;
border-color: ButtonStyle.border;
z: 2;
}
}
}
}
export component ImGuiCheckBox inherits ShadowSurface {
shadow-compact: true;
export component ImGuiCheckBox inherits FlatSurface {
in-out property <bool> checked;
in property <bool> enabled: true;
@@ -378,7 +370,7 @@ export component ImGuiCheckBox inherits ShadowSurface {
background: !root.enabled ? ControlStyle.disabled
: root.checked ? (check-touch.pressed ? #254cc0 : check-touch.has-hover ? #4574f0 : #3564e3)
: check-touch.pressed ? ControlStyle.pressed : check-touch.has-hover ? ControlStyle.hover : ControlStyle.surface;
shadow-color: check-touch.has-hover && root.enabled ? UiShadow.focus : UiShadow.edge;
outline-color: check-touch.has-hover && root.enabled ? UiSurface.focus : UiSurface.edge;
border-radius: 4px;
if root.checked: Text {
text: FontAwesomeIcons.check;
@@ -419,8 +411,7 @@ export component MiniToggleSwitch inherits Rectangle {
}
}
export component CompactButton inherits ShadowSurface {
shadow-compact: true;
export component CompactButton inherits FlatSurface {
in property <string> text;
in property <length> text-size: ImGuiFontStyle.body;
in property <bool> primary: false;
@@ -434,15 +425,13 @@ export component CompactButton inherits ShadowSurface {
: button-touch.pressed ? (root.primary ? #82b8f2 : ButtonStyle.pressed)
: button-touch.has-hover ? (root.primary ? #b8d9fb : ButtonStyle.hover)
: root.primary ? #a8d0fa : root.quiet ? transparent : ButtonStyle.surface;
border-width: root.quiet ? 0px : 1px;
border-color: !root.enabled ? ButtonStyle.disabled-border
: root.primary ? UiShadow.focus
outline-enabled: !root.quiet;
outline-color: !root.enabled ? ButtonStyle.disabled-border
: root.primary ? UiSurface.focus
: button-touch.pressed ? ButtonStyle.pressed-border
: button-touch.has-hover ? ButtonStyle.hover-border : ButtonStyle.border;
shadow-enabled: root.enabled && !root.quiet && !button-touch.pressed;
shadow-color: root.primary ? UiShadow.focus : button-touch.has-hover ? UiShadow.hover : UiShadow.edge;
border-radius: UiRadius.control;
animate background, border-color { duration: 100ms; }
animate background, outline-color { duration: 100ms; }
Text {
text: root.text;
color: root.enabled ? #24272d : #8e9298;
@@ -454,7 +443,7 @@ export component CompactButton inherits ShadowSurface {
button-touch := TouchArea { enabled: root.enabled; mouse-cursor: pointer; clicked => { root.clicked(); } }
}
export component PrimaryButton inherits ShadowSurface {
export component PrimaryButton inherits FlatSurface {
in property <string> text;
in property <length> text-size: 12px;
in property <bool> enabled: true;
@@ -466,9 +455,7 @@ export component PrimaryButton inherits ShadowSurface {
: touch.pressed ? #254cc0
: touch.has-hover ? #4574f0
: #3564e3;
shadow-compact: true;
shadow-enabled: root.enabled && !touch.pressed;
shadow-color: UiShadow.focus;
outline-enabled: false;
border-radius: UiRadius.control;
animate background { duration: 100ms; }
@@ -487,7 +474,7 @@ export component PrimaryButton inherits ShadowSurface {
}
}
export component SecondaryButton inherits ShadowSurface {
export component SecondaryButton inherits FlatSurface {
in property <string> text;
in property <length> text-size: 12px;
in property <bool> enabled: true;
@@ -498,15 +485,11 @@ export component SecondaryButton inherits ShadowSurface {
background: !root.enabled ? ControlStyle.disabled
: touch.pressed ? ButtonStyle.pressed
: touch.has-hover ? ButtonStyle.hover : ButtonStyle.surface;
border-width: 1px;
border-color: !root.enabled ? ButtonStyle.disabled-border
outline-color: !root.enabled ? ButtonStyle.disabled-border
: touch.pressed ? ButtonStyle.pressed-border
: touch.has-hover ? ButtonStyle.hover-border : ButtonStyle.border;
shadow-color: touch.has-hover ? UiShadow.hover : UiShadow.edge;
shadow-compact: true;
shadow-enabled: root.enabled && !touch.pressed;
border-radius: UiRadius.control;
animate background, border-color { duration: 100ms; }
animate background, outline-color { duration: 100ms; }
Text {
text: root.text;
@@ -565,8 +548,8 @@ export component SectionTitle inherits Text {
vertical-alignment: center;
}
export component DialogSurface inherits ShadowSurface {
export component DialogSurface inherits FlatSurface {
background: white;
shadow-color: UiShadow.edge;
outline-color: UiSurface.edge;
border-radius: UiRadius.surface;
}