mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
fixed cupertino spinbox, move more code to base (#4083)
This commit is contained in:
Florian Blasius
GitHub
parent
5d34c8307b
commit
c53a70db8d
5 changed files with 64 additions and 137 deletions
|
|
@ -3,6 +3,12 @@
|
|||
# Changelog
|
||||
All notable changes to this project are documented in this file.
|
||||
|
||||
## Unreleased
|
||||
|
||||
### Slint Language
|
||||
|
||||
- Fixed wrong text input in cupertino SpinBox
|
||||
|
||||
## [1.3.2] - 2023-12-01
|
||||
|
||||
### General
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
|
||||
|
||||
|
||||
export component SpinBoxBase {
|
||||
in property <int> minimum;
|
||||
in property <int> maximum: 100;
|
||||
in property <bool> enabled;
|
||||
in property <brush> color <=> i-text-input.color;
|
||||
in property <length> font-size <=> i-text-input.font-size;
|
||||
in property <int> font-weight <=> i-text-input.font-weight;
|
||||
in property <color> selection-background-color <=> i-text-input.selection-background-color;
|
||||
in property <color> selection-foreground-color <=> i-text-input.selection-foreground-color;
|
||||
out property <bool> has-focus <=> i-text-input.has-focus;
|
||||
in-out property <int> value;
|
||||
|
||||
callback edited(/* value */ int);
|
||||
callback update-text(/* text */ string);
|
||||
|
||||
public function update-value(value: int) {
|
||||
if (value < root.minimum || value > root.maximum) {
|
||||
return;
|
||||
if (value >= root.minimum && value <= root.maximum) {
|
||||
root.value = value;
|
||||
root.edited(value);
|
||||
}
|
||||
|
||||
root.value = value;
|
||||
root.edited(value);
|
||||
i-text-input.text = root.value;
|
||||
}
|
||||
|
||||
public function increment() {
|
||||
|
|
@ -30,6 +34,31 @@ export component SpinBoxBase {
|
|||
|
||||
private property <length> scroll-delta: 2px;
|
||||
|
||||
forward-focus: i-text-input;
|
||||
|
||||
i-text-input := TextInput {
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: left;
|
||||
text: root.value;
|
||||
enabled: root.enabled;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
accepted => {
|
||||
if (!self.text.is-float()) {
|
||||
self.text = root.value;
|
||||
}
|
||||
}
|
||||
|
||||
edited => {
|
||||
if (self.text.is-float() && self.text.to-float() != root.value) {
|
||||
root.update-value(self.text.to-float());
|
||||
} else if (!self.text.is-float()) {
|
||||
self.text = root.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TouchArea {
|
||||
enabled: root.enabled;
|
||||
|
||||
|
|
@ -46,5 +75,9 @@ export component SpinBoxBase {
|
|||
|
||||
return reject;
|
||||
}
|
||||
|
||||
clicked => {
|
||||
i-text-input.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@ export component SpinBox {
|
|||
in property <int> minimum <=> i-base.minimum;
|
||||
in property <int> maximum <=> i-base.maximum;
|
||||
in property <bool> enabled <=> i-base.enabled;
|
||||
out property <bool> has-focus <=> i-text-input.has-focus;
|
||||
out property <bool> has-focus <=> i-base.has-focus;
|
||||
in-out property <int> value <=> i-base.value;
|
||||
|
||||
callback edited(int /* value */);
|
||||
|
|
@ -102,21 +102,11 @@ export component SpinBox {
|
|||
|
||||
states [
|
||||
disabled when !root.enabled : {
|
||||
i-text-input.color: CupertinoPalette.foreground-secondary;
|
||||
i-base.color: CupertinoPalette.foreground-secondary;
|
||||
root.background: CupertinoPalette.surface-tertiary;
|
||||
}
|
||||
]
|
||||
|
||||
i-base := SpinBoxBase {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
edited(value) => {
|
||||
i-text-input.text = value;
|
||||
root.edited(value);
|
||||
}
|
||||
}
|
||||
|
||||
FocusBorder {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
|
|
@ -152,44 +142,15 @@ export component SpinBox {
|
|||
|
||||
Rectangle {
|
||||
clip: true;
|
||||
horizontal-stretch: 1;
|
||||
|
||||
i-text-input := TextInput {
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: left;
|
||||
i-base := SpinBoxBase {
|
||||
width: 100%;
|
||||
color: CupertinoPalette.foreground;
|
||||
font-size: CupertinoFontSettings.body.font-size;
|
||||
font-weight: CupertinoFontSettings.body.font-weight;
|
||||
selection-background-color: CupertinoPalette.accent-quaternary;
|
||||
selection-foreground-color: self.color;
|
||||
horizontal-stretch: 1;
|
||||
text: root.value;
|
||||
enabled: root.enabled;
|
||||
|
||||
accepted => {
|
||||
if (self.text == "") {
|
||||
i-base.update-value(root.minimum);
|
||||
}
|
||||
}
|
||||
|
||||
edited => {
|
||||
if (self.text == "") {
|
||||
i-base.update-value(root.minimum);
|
||||
return;
|
||||
}
|
||||
|
||||
if (self.text.is-float()) {
|
||||
i-base.update-value(root.value + 1);
|
||||
return;
|
||||
}
|
||||
|
||||
self.text = root.value;
|
||||
}
|
||||
}
|
||||
|
||||
i-touch-area := TouchArea {
|
||||
clicked => {
|
||||
i-text-input.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@ export component SpinBox {
|
|||
in property <int> minimum <=> i-base.minimum;
|
||||
in property <int> maximum <=> i-base.maximum;
|
||||
in property <bool> enabled <=> i-base.enabled;
|
||||
out property <bool> has-focus <=> i-text-input.has-focus;
|
||||
out property <bool> has-focus <=> i-base.has-focus;
|
||||
in-out property <int> value <=> i-base.value;
|
||||
|
||||
callback edited( /* value */ int);
|
||||
callback edited <=> i-base.edited;
|
||||
|
||||
min-width: 128px;
|
||||
min-height: 30px;
|
||||
|
|
@ -56,8 +56,8 @@ export component SpinBox {
|
|||
disabled when !root.enabled : {
|
||||
i-background.background: FluentPalette.control-disabled;
|
||||
i-background.border-color: FluentPalette.border;
|
||||
i-text-input.color: FluentPalette.text-disabled;
|
||||
i-text-input.selection-foreground-color: FluentPalette.text-on-accent-disabled;
|
||||
i-base.color: FluentPalette.text-disabled;
|
||||
i-base.selection-foreground-color: FluentPalette.text-on-accent-disabled;
|
||||
}
|
||||
focused when root.has-focus : {
|
||||
i-background.background: FluentPalette.control-input-active;
|
||||
|
|
@ -66,16 +66,6 @@ export component SpinBox {
|
|||
}
|
||||
]
|
||||
|
||||
i-base := SpinBoxBase {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
edited(value) => {
|
||||
i-text-input.text = value;
|
||||
root.edited(value);
|
||||
}
|
||||
}
|
||||
|
||||
i-background := Rectangle {
|
||||
border-radius: 4px;
|
||||
background: FluentPalette.surface;
|
||||
|
|
@ -91,36 +81,15 @@ export component SpinBox {
|
|||
|
||||
Rectangle {
|
||||
clip: true;
|
||||
horizontal-stretch: 1;
|
||||
|
||||
i-text-input := TextInput {
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: left;
|
||||
i-base := SpinBoxBase {
|
||||
width: 100%;
|
||||
color: FluentPalette.on-surface;
|
||||
font-size: FluentFontSettings.body.font-size;
|
||||
font-weight: FluentFontSettings.body.font-weight;
|
||||
selection-background-color: FluentPalette.accent-selected-text;
|
||||
selection-foreground-color: FluentPalette.on-accent;
|
||||
horizontal-stretch: 1;
|
||||
text: root.value;
|
||||
enabled: root.enabled;
|
||||
|
||||
accepted => {
|
||||
if (!self.text.is-float()) {
|
||||
self.text = root.value;
|
||||
}
|
||||
}
|
||||
|
||||
edited => {
|
||||
if (self.text.is-float()) {
|
||||
i-base.update-value(self.text.to-float());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i-touch-area := TouchArea {
|
||||
clicked => {
|
||||
i-text-input.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,12 +63,12 @@ export component SpinBox {
|
|||
in property <int> minimum <=> i-base.minimum;
|
||||
in property <int> maximum <=> i-base.maximum;
|
||||
in property <bool> enabled <=> i-base.enabled;
|
||||
out property <bool> has-focus <=> i-text-input.has-focus;
|
||||
out property <bool> has-focus <=> i-base.has-focus;
|
||||
in-out property <int> value <=> i-base.value;
|
||||
|
||||
callback edited(/* value */ int);
|
||||
|
||||
forward-focus: i-text-input;
|
||||
forward-focus: i-base;
|
||||
horizontal-stretch: 1;
|
||||
vertical-stretch: 0;
|
||||
min-width: i-layout.min-width;
|
||||
|
|
@ -83,25 +83,15 @@ export component SpinBox {
|
|||
disabled when !root.enabled : {
|
||||
i-background.border-color: MaterialPalette.on-surface;
|
||||
i-background.opacity: 0.38;
|
||||
i-text-input.opacity: 0.38;
|
||||
i-base.opacity: 0.38;
|
||||
}
|
||||
focused when root.has-focus : {
|
||||
i-background.border-width: 2px;
|
||||
i-background.border-color: MaterialPalette.accent;
|
||||
i-text-input.color: MaterialPalette.accent;
|
||||
i-base.color: MaterialPalette.accent;
|
||||
}
|
||||
]
|
||||
|
||||
i-base := SpinBoxBase {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
edited(value) => {
|
||||
i-text-input.text = value;
|
||||
root.edited(value);
|
||||
}
|
||||
}
|
||||
|
||||
i-background := Rectangle {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
|
|
@ -116,45 +106,13 @@ export component SpinBox {
|
|||
|
||||
Rectangle {
|
||||
clip: true;
|
||||
horizontal-stretch: 1;
|
||||
|
||||
i-text-input := TextInput {
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: left;
|
||||
text: root.value;
|
||||
// height: 100%;
|
||||
i-base := SpinBoxBase {
|
||||
width: 100%;
|
||||
color: MaterialPalette.on-surface;
|
||||
// FIXME after Roboto font can be loaded
|
||||
//font-family: MaterialFontSettings.body-large.font;
|
||||
font-size: MaterialFontSettings.body-large.font-size;
|
||||
font-weight: MaterialFontSettings.body-large.font-weight;
|
||||
enabled: root.enabled;
|
||||
horizontal-stretch: 1;
|
||||
|
||||
accepted => {
|
||||
if (self.text == "") {
|
||||
i-base.update-value(root.minimum);
|
||||
}
|
||||
}
|
||||
|
||||
edited => {
|
||||
if (self.text == "") {
|
||||
i-base.update-value(root.minimum);
|
||||
return;
|
||||
}
|
||||
|
||||
if (self.text.is-float()) {
|
||||
i-base.update-value(root.value + 1);
|
||||
return;
|
||||
}
|
||||
|
||||
self.text = root.value;
|
||||
}
|
||||
}
|
||||
|
||||
i-touch-area := TouchArea {
|
||||
clicked => {
|
||||
i-text-input.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue