mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
fluent: fixed foreground of switch (#6613)
* fluent: formatting * fluent: fixed foreground color of Switch
This commit is contained in:
parent
7f8da7bf28
commit
25607a9706
2 changed files with 53 additions and 53 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue