mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-03 18:29:09 +00:00
LineEdit: fixes cursor draws out of bounds (#6382)
This commit is contained in:
FloVanGH
GitHub
parent
2e15a35afe
commit
b3f19e446e
5 changed files with 147 additions and 141 deletions
|
|
@ -18,6 +18,7 @@ All notable changes to this project are documented in this file.
|
|||
### Widgets
|
||||
|
||||
- Checkbox: fix text color in fluent style (#6239)
|
||||
- LineEdit: fix cursor draws out of bounds (#6243)
|
||||
|
||||
### LSP and tooling
|
||||
|
||||
|
|
|
|||
|
|
@ -3,68 +3,69 @@
|
|||
|
||||
export component LineEditBase inherits Rectangle {
|
||||
in property <string> placeholder-text;
|
||||
in property <length> font-size <=> i-text-input.font-size;
|
||||
in-out property <string> text <=> i-text-input.text;
|
||||
in property <length> font-size <=> text-input.font-size;
|
||||
in-out property <string> text <=> text-input.text;
|
||||
in-out property <brush> placeholder-color;
|
||||
in property <bool> enabled <=> i-text-input.enabled;
|
||||
out property <bool> has-focus: i-text-input.has-focus;
|
||||
in property <InputType> input-type <=> i-text-input.input-type;
|
||||
in property <TextHorizontalAlignment> horizontal-alignment <=> i-text-input.horizontal-alignment;
|
||||
in property <bool> read-only <=> i-text-input.read-only;
|
||||
in property <int> font-weight <=> i-text-input.font-weight;
|
||||
in property <bool> enabled <=> text-input.enabled;
|
||||
out property <bool> has-focus: text-input.has-focus;
|
||||
in property <InputType> input-type <=> text-input.input-type;
|
||||
in property <TextHorizontalAlignment> horizontal-alignment <=> text-input.horizontal-alignment;
|
||||
in property <bool> read-only <=> text-input.read-only;
|
||||
in property <int> font-weight <=> text-input.font-weight;
|
||||
in property <brush> text-color;
|
||||
in property <color> selection-background-color <=> i-text-input.selection-background-color;
|
||||
in property <color> selection-foreground-color <=> i-text-input.selection-foreground-color;
|
||||
in property <color> selection-background-color <=> text-input.selection-background-color;
|
||||
in property <color> selection-foreground-color <=> text-input.selection-foreground-color;
|
||||
in property <length> margin;
|
||||
|
||||
callback accepted( /* text */ string);
|
||||
callback accepted(/* text */ string);
|
||||
callback edited(/* text */ string);
|
||||
|
||||
public function set-selection-offsets(start: int, end: int) {
|
||||
i-text-input.set-selection-offsets(start, end);
|
||||
text-input.set-selection-offsets(start, end);
|
||||
}
|
||||
|
||||
public function select-all() {
|
||||
i-text-input.select-all();
|
||||
text-input.select-all();
|
||||
}
|
||||
|
||||
public function clear-selection() {
|
||||
i-text-input.clear-selection();
|
||||
text-input.clear-selection();
|
||||
}
|
||||
|
||||
public function cut() {
|
||||
i-text-input.cut();
|
||||
text-input.cut();
|
||||
}
|
||||
|
||||
public function copy() {
|
||||
i-text-input.copy();
|
||||
text-input.copy();
|
||||
}
|
||||
|
||||
public function paste() {
|
||||
i-text-input.paste();
|
||||
text-input.paste();
|
||||
}
|
||||
|
||||
min-height: i-text-input.preferred-height;
|
||||
min-width: max(50px, i-placeholder.min-width);
|
||||
// on width < 1px or if the `TextInput` is clipped it cannot be focused therefore min-width 1px
|
||||
min-width: 1px;
|
||||
min-height: text-input.preferred-height;
|
||||
clip: true;
|
||||
forward-focus: i-text-input;
|
||||
forward-focus: text-input;
|
||||
|
||||
i-placeholder := Text {
|
||||
placeholder := Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-alignment: center;
|
||||
text: (root.text == "" && i-text-input.preedit-text == "") ? root.placeholder-text : "";
|
||||
font-size: i-text-input.font-size;
|
||||
font-italic: i-text-input.font-italic;
|
||||
font-weight: i-text-input.font-weight;
|
||||
font-family: i-text-input.font-family;
|
||||
text: (root.text == "" && text-input.preedit-text == "") ? root.placeholder-text : "";
|
||||
font-size: text-input.font-size;
|
||||
font-italic: text-input.font-italic;
|
||||
font-weight: text-input.font-weight;
|
||||
font-family: text-input.font-family;
|
||||
color: root.placeholder-color;
|
||||
horizontal-alignment: root.horizontal-alignment;
|
||||
// the label is set on the LineEdit itself
|
||||
accessible-role: none;
|
||||
}
|
||||
|
||||
i-text-input := TextInput {
|
||||
text-input := TextInput {
|
||||
property <length> computed-x;
|
||||
|
||||
x: min(0px, max(parent.width - self.width - self.text-cursor-width, self.computed-x));
|
||||
|
|
@ -74,16 +75,20 @@ export component LineEditBase inherits Rectangle {
|
|||
single-line: true;
|
||||
color: root.text-color;
|
||||
|
||||
cursor-position-changed(cpos) => {
|
||||
if (cpos.x + self.computed_x < root.margin) {
|
||||
self.computed_x = - cpos.x + root.margin;
|
||||
} else if (cpos.x + self.computed_x > parent.width - root.margin - self.text-cursor-width) {
|
||||
self.computed_x = parent.width - cpos.x - root.margin - self.text-cursor-width;
|
||||
cursor-position-changed(cursor-position) => {
|
||||
if cursor-position.x + self.computed_x < root.margin {
|
||||
self.computed_x = - cursor-position.x + root.margin;
|
||||
} else if cursor-position.x + self.computed_x > parent.width - root.margin - self.text-cursor-width {
|
||||
self.computed_x = parent.width - cursor-position.x - root.margin - self.text-cursor-width;
|
||||
}
|
||||
}
|
||||
|
||||
accepted => { root.accepted(self.text); }
|
||||
accepted => {
|
||||
root.accepted(self.text);
|
||||
}
|
||||
|
||||
edited => { root.edited(self.text); }
|
||||
edited => {
|
||||
root.edited(self.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,60 +6,60 @@ import { FocusBorder } from "components.slint";
|
|||
import { LineEditBase} from "../common/lineedit-base.slint";
|
||||
|
||||
export component LineEdit {
|
||||
in property <bool> enabled <=> i-base.enabled;
|
||||
in property <InputType> input-type <=> i-base.input-type;
|
||||
in property <TextHorizontalAlignment> horizontal-alignment <=> i-base.horizontal-alignment;
|
||||
in property <bool> read-only <=> i-base.read-only;
|
||||
in property <length> font-size <=> i-base.font-size;
|
||||
in property <string> placeholder-text <=> i-base.placeholder-text;
|
||||
out property <bool> has-focus <=> i-base.has-focus;
|
||||
in-out property <string> text <=> i-base.text;
|
||||
in property <bool> enabled <=> base.enabled;
|
||||
in property <InputType> input-type <=> base.input-type;
|
||||
in property <TextHorizontalAlignment> horizontal-alignment <=> base.horizontal-alignment;
|
||||
in property <bool> read-only <=> base.read-only;
|
||||
in property <length> font-size <=> base.font-size;
|
||||
in property <string> placeholder-text <=> base.placeholder-text;
|
||||
out property <bool> has-focus <=> base.has-focus;
|
||||
in-out property <string> text <=> base.text;
|
||||
|
||||
callback accepted <=> i-base.accepted;
|
||||
callback edited <=> i-base.edited;
|
||||
callback accepted <=> base.accepted;
|
||||
callback edited <=> base.edited;
|
||||
accessible-role: text-input;
|
||||
accessible-value <=> text;
|
||||
accessible-placeholder-text: text == "" ? placeholder-text : "";
|
||||
accessible-action-set-value(v) => { text = v; edited(v); }
|
||||
|
||||
public function set-selection-offsets(start: int, end: int) {
|
||||
i-base.set-selection-offsets(start, end);
|
||||
base.set-selection-offsets(start, end);
|
||||
}
|
||||
|
||||
public function select-all() {
|
||||
i-base.select-all();
|
||||
base.select-all();
|
||||
}
|
||||
|
||||
public function clear-selection() {
|
||||
i-base.clear-selection();
|
||||
base.clear-selection();
|
||||
}
|
||||
|
||||
public function cut() {
|
||||
i-base.cut();
|
||||
base.cut();
|
||||
}
|
||||
|
||||
public function copy() {
|
||||
i-base.copy();
|
||||
base.copy();
|
||||
}
|
||||
|
||||
public function paste() {
|
||||
i-base.paste();
|
||||
base.paste();
|
||||
}
|
||||
|
||||
vertical-stretch: 0;
|
||||
horizontal-stretch: 1;
|
||||
min-width: max(160px, i-layout.min-width);
|
||||
min-height: max(22px, i-layout.min-height);
|
||||
forward-focus: i-base;
|
||||
min-width: max(160px, layout.min-width);
|
||||
min-height: max(22px, layout.min-height);
|
||||
forward-focus: base;
|
||||
|
||||
states [
|
||||
disabled when !root.enabled : {
|
||||
i-base.text-color: CupertinoPalette.foreground-secondary;
|
||||
i-base.placeholder-color: CupertinoPalette.foreground-secondary;
|
||||
i-background.background: CupertinoPalette.tertiary-control-background;
|
||||
base.text-color: CupertinoPalette.foreground-secondary;
|
||||
base.placeholder-color: CupertinoPalette.foreground-secondary;
|
||||
background.background: CupertinoPalette.tertiary-control-background;
|
||||
}
|
||||
focused when root.has-focus : {
|
||||
i-background.background: CupertinoPalette.control-background;
|
||||
background.background: CupertinoPalette.control-background;
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -71,24 +71,24 @@ export component LineEdit {
|
|||
has-focus: root.has-focus;
|
||||
}
|
||||
|
||||
i-background := Rectangle {
|
||||
background := Rectangle {
|
||||
background: CupertinoPalette.alternate-background;
|
||||
border-color: CupertinoPalette.border;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
i-layout := HorizontalLayout {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
layout := HorizontalLayout {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
|
||||
i-base := LineEditBase {
|
||||
font-size: CupertinoFontSettings.body.font-size;
|
||||
font-weight: CupertinoFontSettings.body.font-weight;
|
||||
selection-background-color: CupertinoPalette.selection-background;
|
||||
selection-foreground-color: CupertinoPalette.selection-foreground;
|
||||
text-color: CupertinoPalette.foreground;
|
||||
margin: i-layout.padding-left + i-layout.padding-right;
|
||||
placeholder-color: CupertinoPalette.foreground-secondary;
|
||||
base := LineEditBase {
|
||||
font-size: CupertinoFontSettings.body.font-size;
|
||||
font-weight: CupertinoFontSettings.body.font-weight;
|
||||
selection-background-color: CupertinoPalette.selection-background;
|
||||
selection-foreground-color: CupertinoPalette.selection-foreground;
|
||||
text-color: CupertinoPalette.foreground;
|
||||
margin: layout.padding-left + layout.padding-right;
|
||||
placeholder-color: CupertinoPalette.foreground-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,90 +5,90 @@ import { FluentFontSettings, FluentPalette } from "styling.slint";
|
|||
import { LineEditBase} from "../common/lineedit-base.slint";
|
||||
|
||||
export component LineEdit {
|
||||
in property <bool> enabled <=> i-base.enabled;
|
||||
in property <InputType> input-type <=> i-base.input-type;
|
||||
in property <TextHorizontalAlignment> horizontal-alignment <=> i-base.horizontal-alignment;
|
||||
in property <bool> read-only <=> i-base.read-only;
|
||||
in property <length> font-size <=> i-base.font-size;
|
||||
in property <string> placeholder-text <=> i-base.placeholder-text;
|
||||
out property <bool> has-focus <=> i-base.has-focus;
|
||||
in-out property <string> text <=> i-base.text;
|
||||
in property <bool> enabled <=> base.enabled;
|
||||
in property <InputType> input-type <=> base.input-type;
|
||||
in property <TextHorizontalAlignment> horizontal-alignment <=> base.horizontal-alignment;
|
||||
in property <bool> read-only <=> base.read-only;
|
||||
in property <length> font-size <=> base.font-size;
|
||||
in property <string> placeholder-text <=> base.placeholder-text;
|
||||
out property <bool> has-focus <=> base.has-focus;
|
||||
in-out property <string> text <=> base.text;
|
||||
|
||||
callback accepted <=> i-base.accepted;
|
||||
callback edited <=> i-base.edited;
|
||||
callback accepted <=> base.accepted;
|
||||
callback edited <=> base.edited;
|
||||
accessible-role: text-input;
|
||||
accessible-value <=> text;
|
||||
accessible-placeholder-text: text == "" ? placeholder-text : "";
|
||||
accessible-action-set-value(v) => { text = v; edited(v); }
|
||||
|
||||
public function set-selection-offsets(start: int, end: int) {
|
||||
i-base.set-selection-offsets(start, end);
|
||||
base.set-selection-offsets(start, end);
|
||||
}
|
||||
|
||||
public function select-all() {
|
||||
i-base.select-all();
|
||||
base.select-all();
|
||||
}
|
||||
|
||||
public function clear-selection() {
|
||||
i-base.clear-selection();
|
||||
base.clear-selection();
|
||||
}
|
||||
|
||||
public function cut() {
|
||||
i-base.cut();
|
||||
base.cut();
|
||||
}
|
||||
|
||||
public function copy() {
|
||||
i-base.copy();
|
||||
base.copy();
|
||||
}
|
||||
|
||||
public function paste() {
|
||||
i-base.paste();
|
||||
base.paste();
|
||||
}
|
||||
|
||||
vertical-stretch: 0;
|
||||
horizontal-stretch: 1;
|
||||
min-width: max(160px, i-layout.min-width);
|
||||
min-height: max(32px, i-layout.min-height);
|
||||
forward-focus: i-base;
|
||||
min-width: max(160px, layout.min-width);
|
||||
min-height: max(32px, layout.min-height);
|
||||
forward-focus: base;
|
||||
|
||||
states [
|
||||
disabled when !root.enabled : {
|
||||
i-background.background: FluentPalette.control-disabled;
|
||||
i-background.border-color: FluentPalette.border;
|
||||
i-base.text-color: FluentPalette.text-disabled;
|
||||
i-base.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
|
||||
i-base.placeholder-color: FluentPalette.text-disabled;
|
||||
background.background: FluentPalette.control-disabled;
|
||||
background.border-color: FluentPalette.border;
|
||||
base.text-color: FluentPalette.text-disabled;
|
||||
base.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
|
||||
base.placeholder-color: FluentPalette.text-disabled;
|
||||
}
|
||||
focused when root.has-focus : {
|
||||
i-background.background: FluentPalette.control-input-active;
|
||||
i-background.border-color: FluentPalette.border;
|
||||
i-focus-border.background: FluentPalette.accent-background;
|
||||
i-base.placeholder-color: FluentPalette.text-tertiary;
|
||||
background.background: FluentPalette.control-input-active;
|
||||
background.border-color: FluentPalette.border;
|
||||
focus-border.background: FluentPalette.accent-background;
|
||||
base.placeholder-color: FluentPalette.text-tertiary;
|
||||
}
|
||||
]
|
||||
|
||||
i-background := Rectangle {
|
||||
background := Rectangle {
|
||||
border-radius: 4px;
|
||||
background: FluentPalette.control-background;
|
||||
border-width: 1px;
|
||||
border-color: FluentPalette.text-control-border;
|
||||
|
||||
i-layout := HorizontalLayout {
|
||||
layout := HorizontalLayout {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
|
||||
i-base := LineEditBase {
|
||||
base := LineEditBase {
|
||||
font-size: FluentFontSettings.body.font-size;
|
||||
font-weight: FluentFontSettings.body.font-weight;
|
||||
selection-background-color: FluentPalette.selection-background;
|
||||
selection-foreground-color: FluentPalette.accent-foreground;
|
||||
text-color: FluentPalette.foreground;
|
||||
placeholder-color: FluentPalette.text-secondary;
|
||||
margin: i-layout.padding-left + i-layout.padding-right;
|
||||
margin: layout.padding-left + layout.padding-right;
|
||||
}
|
||||
}
|
||||
|
||||
i-focus-border := Rectangle {
|
||||
focus-border := Rectangle {
|
||||
x: parent.border-radius;
|
||||
y: parent.height - self.height;
|
||||
width: parent.width - 2 * parent.border-radius;
|
||||
|
|
|
|||
|
|
@ -6,78 +6,78 @@ import { LineEditBase} from "../common/lineedit-base.slint";
|
|||
|
||||
// Single line text input field with Material Design Outline TextField look and feel.
|
||||
export component LineEdit {
|
||||
in property <length> font-size <=> i-base.font-size;
|
||||
in property <string> placeholder-text <=> i-base.placeholder-text;
|
||||
in property <bool> enabled <=> i-base.enabled;
|
||||
in property input-type <=> i-base.input-type;
|
||||
in property horizontal-alignment <=> i-base.horizontal-alignment;
|
||||
in property read-only <=> i-base.read-only;
|
||||
out property <bool> has-focus: i-base.has-focus;
|
||||
in-out property <string> text <=> i-base.text;
|
||||
in property <length> font-size <=> base.font-size;
|
||||
in property <string> placeholder-text <=> base.placeholder-text;
|
||||
in property <bool> enabled <=> base.enabled;
|
||||
in property input-type <=> base.input-type;
|
||||
in property horizontal-alignment <=> base.horizontal-alignment;
|
||||
in property read-only <=> base.read-only;
|
||||
out property <bool> has-focus: base.has-focus;
|
||||
in-out property <string> text <=> base.text;
|
||||
|
||||
callback accepted <=> i-base.accepted;
|
||||
callback edited <=> i-base.edited;
|
||||
callback accepted <=> base.accepted;
|
||||
callback edited <=> base.edited;
|
||||
accessible-role: text-input;
|
||||
accessible-value <=> text;
|
||||
accessible-placeholder-text: text == "" ? placeholder-text : "";
|
||||
accessible-action-set-value(v) => { text = v; edited(v); }
|
||||
|
||||
public function set-selection-offsets(start: int, end: int) {
|
||||
i-base.set-selection-offsets(start, end);
|
||||
base.set-selection-offsets(start, end);
|
||||
}
|
||||
|
||||
public function select-all() {
|
||||
i-base.select-all();
|
||||
base.select-all();
|
||||
}
|
||||
public function clear-selection() {
|
||||
i-base.clear-selection();
|
||||
base.clear-selection();
|
||||
}
|
||||
public function cut() {
|
||||
i-base.cut();
|
||||
base.cut();
|
||||
}
|
||||
public function copy() {
|
||||
i-base.copy();
|
||||
base.copy();
|
||||
}
|
||||
public function paste() {
|
||||
i-base.paste();
|
||||
base.paste();
|
||||
}
|
||||
|
||||
min-width: max(120px, i-layout.min-width);
|
||||
min-height: max(56px, i-layout.min-height);
|
||||
forward-focus: i-base;
|
||||
min-width: max(120px, layout.min-width);
|
||||
min-height: max(56px, layout.min-height);
|
||||
forward-focus: base;
|
||||
|
||||
states [
|
||||
disabled when !root.enabled : {
|
||||
i-background.border-color: MaterialPalette.control-foreground;
|
||||
i-background.opacity: 0.38;
|
||||
i-base.opacity: 0.38;
|
||||
background.border-color: MaterialPalette.control-foreground;
|
||||
background.opacity: 0.38;
|
||||
base.opacity: 0.38;
|
||||
}
|
||||
focused when root.has-focus : {
|
||||
i-background.border-width: 2px;
|
||||
i-background.border-color: MaterialPalette.accent-background;
|
||||
background.border-width: 2px;
|
||||
background.border-color: MaterialPalette.accent-background;
|
||||
}
|
||||
]
|
||||
|
||||
i-background := Rectangle {
|
||||
background := Rectangle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-color: MaterialPalette.border;
|
||||
}
|
||||
|
||||
i-layout := HorizontalLayout {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
layout := HorizontalLayout {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
||||
i-base := LineEditBase {
|
||||
text-color: MaterialPalette.foreground;
|
||||
font-size: MaterialFontSettings.body-large.font-size;
|
||||
font-weight: MaterialFontSettings.body-large.font-weight;
|
||||
selection-foreground-color: MaterialPalette.selection-foreground;
|
||||
margin: i-layout.padding-left + i-layout.padding-right;
|
||||
placeholder-color: MaterialPalette.border-variant;
|
||||
selection-background-color: MaterialPalette.selection-background;
|
||||
base := LineEditBase {
|
||||
text-color: MaterialPalette.foreground;
|
||||
font-size: MaterialFontSettings.body-large.font-size;
|
||||
font-weight: MaterialFontSettings.body-large.font-weight;
|
||||
selection-foreground-color: MaterialPalette.selection-foreground;
|
||||
margin: layout.padding-left + layout.padding-right;
|
||||
placeholder-color: MaterialPalette.border-variant;
|
||||
selection-background-color: MaterialPalette.selection-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue