fluent: fixed foreground of switch (#6613)

* fluent: formatting
* fluent: fixed foreground color of Switch
This commit is contained in:
FloVanGH 2024-10-22 09:24:18 +02:00 committed by GitHub
parent 7f8da7bf28
commit 25607a9706
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 53 deletions

View file

@ -6,15 +6,15 @@ import { FocusBorder } from "components.slint";
export component CheckBox {
in property <string> text;
in property <bool> enabled <=> i-touch-area.enabled;
out property <bool> has-focus: i-focus-scope.has-focus;
in property <bool> enabled <=> touch-area.enabled;
out property <bool> has-focus: focus-scope.has-focus;
in-out property <bool> checked;
callback toggled;
private property <color> text-color: FluentPalette.foreground;
min-height: max(32px, i-layout.min-height);
min-height: max(32px, layout.min-height);
accessible-checkable: true;
accessible-label: root.text;
accessible-checked <=> root.checked;
@ -23,36 +23,36 @@ export component CheckBox {
root.checked = !root.checked;
root.toggled();
}
forward-focus: i-focus-scope;
forward-focus: focus-scope;
states [
disabled when !root.enabled : {
i-border.border-color: FluentPalette.control-strong-stroke-disabled;
i-background.background: root.checked ? FluentPalette.accent-disabled : FluentPalette.control-alt-disabled;
i-icon.colorize: FluentPalette.text-accent-foreground-disabled;
border.border-color: FluentPalette.control-strong-stroke-disabled;
background.background: root.checked ? FluentPalette.accent-disabled : FluentPalette.control-alt-disabled;
icon.colorize: FluentPalette.text-accent-foreground-disabled;
root.text-color: FluentPalette.text-disabled;
}
pressed when i-touch-area.pressed : {
i-border.border-color: FluentPalette.control-strong-stroke-disabled;
i-background.background: root.checked ? FluentPalette.tertiary-accent-background : FluentPalette.control-alt-quartiary;
i-icon.colorize: FluentPalette.text-accent-foreground-secondary;
pressed when touch-area.pressed : {
border.border-color: FluentPalette.control-strong-stroke-disabled;
background.background: root.checked ? FluentPalette.tertiary-accent-background : FluentPalette.control-alt-quartiary;
icon.colorize: FluentPalette.text-accent-foreground-secondary;
}
hover when i-touch-area.has-hover : {
i-background.background: root.checked ? FluentPalette.secondary-accent-background : FluentPalette.control-alt-tertiary;
hover when touch-area.has-hover : {
background.background: root.checked ? FluentPalette.secondary-accent-background : FluentPalette.control-alt-tertiary;
}
checked when root.checked && root.enabled : {
i-background.background: FluentPalette.accent-background;
background.background: FluentPalette.accent-background;
}
]
animate text-color { duration: 200ms; }
i-layout := HorizontalLayout {
layout := HorizontalLayout {
padding-left: 8px;
padding-right: root.text == "" ? 8px : 12px;
spacing: 12px;
i-background := Rectangle {
background := Rectangle {
width: 18px;
height: self.width;
y: (parent.height - self.height) / 2;
@ -61,13 +61,13 @@ export component CheckBox {
animate background, border-color { duration: 150ms; }
i-border := Rectangle {
border := Rectangle {
border-color: FluentPalette.control-strong-stroke;
border-width: root.checked ? 0 : 1px;
border-radius: parent.border-radius;
}
i-icon := Image {
icon := Image {
image-fit: contain;
visible: root.checked;
source: Icons.check-mark;
@ -78,7 +78,7 @@ export component CheckBox {
}
}
if (root.text != "") : Text {
if root.text != "" : Text {
text: root.text;
color: root.text-color;
font-size: FluentFontSettings.body.font-size;
@ -88,7 +88,7 @@ export component CheckBox {
}
}
i-touch-area := TouchArea {
touch-area := TouchArea {
clicked => {
if (root.enabled) {
root.checked = !root.checked;
@ -97,14 +97,14 @@ export component CheckBox {
}
}
i-focus-scope := FocusScope {
focus-scope := FocusScope {
x: 0;
width: 0; // Do not react on clicks
enabled <=> root.enabled;
key-pressed(event) => {
if (event.text == " " || event.text == "\n") {
i-touch-area.clicked();
touch-area.clicked();
return accept;
}
return reject;
@ -112,7 +112,7 @@ export component CheckBox {
}
// focus border
if (root.has-focus && root.enabled) : FocusBorder {
if root.has-focus && root.enabled : FocusBorder {
border-radius: 4px;
}
}