language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-09-30 13:51:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added placeholder-text to TextEdit (#5239)

Browse source 
---------

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>
This commit is contained in:
Florian Blasius 2024-05-15 10:20:13 +00:00 • committed by GitHub
parent bd777b4312
commit a3d4112897
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 140 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -2,6 +2,13 @@
# Changelog
All notable changes to this project are documented in this file.
## Unreleased
### Widgets
- Added `placeholder-text` property to `TextEdit`.
## [1.6.0] - 2024-05-13
## General

1
docs/reference/src/language/widgets/textedit.md
View file

@ -15,6 +15,7 @@ shortcut will be implemented in a future version: <https://github.com/slint-ui/s
- **`read-only`** (_in_ _bool_): When set to true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programmatically (default value: `false`)
- **`wrap`** (_in_ _enum [`TextWrap`](../builtins/enums.md#textwrap)_): The way the text wraps (default: word-wrap).
- **`horizontal-alignment`** (_in_ _enum [`TextHorizontalAlignment`](../builtins/enums.md#texthorizontalalignment)_): The horizontal alignment of the text.
- **`placeholder-text`**: (_in_ _string_): A placeholder text being shown when there is no text in the edit field.
### Functions

1
examples/gallery/ui/pages/text_edit_page.slint
View file

@ -16,6 +16,7 @@ export component TextEditPage inherits Page {
te1 := TextEdit {
// min-width: 200px;
text: @tr("This is our TextEdit widget, which allows for editing text that spans over multiple paragraphs.\nFor example this line starts in a new paragraph.\n\nWhen the amount of lines - due to wrapping and number of paragraphs - exceeds the available vertical height, a vertical scrollbar is shown that allows scrolling.\nYou may want to enter a bit of text here then in order to make them visible.");
placeholder-text: @tr("Add some text");
wrap: word-wrap;
enabled: GallerySettings.widgets-enabled;
}

31
internal/compiler/widgets/common/textedit-base.slint
View file

@ -25,29 +25,32 @@ export component TextEditBase inherits Rectangle {
in property <brush> selection-background-color;
in property <brush> selection-foreground-color;
in property <string> placeholder-text;
in property <brush> placeholder-color;
callback edited(/* text */ string);
public function set-selection-offsets(start: int, end: int) {
public function set-selection-offsets(start: int,end: int){
text-input.set-selection-offsets(start, end);
}
public function select-all() {
public function select-all(){
text-input.select-all();
}
public function clear-selection() {
public function clear-selection(){
text-input.clear-selection();
}
public function cut() {
public function cut(){
text-input.cut();
}
public function copy() {
public function copy(){
text-input.copy();
}
public function paste() {
public function paste(){
text-input.paste();
}
@ -88,5 +91,21 @@ export component TextEditBase inherits Rectangle {
}
}
placeholder := Text {
x: scroll-view.x;
y: scroll-view.y;
width: scroll-view.width;
vertical-alignment: top;
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;
overflow: elide;
// the label is set on the TextEdit itself
accessible-role: none;
}
@children
}

2
internal/compiler/widgets/cosmic-base/textedit.slint
View file

@ -11,6 +11,7 @@ export component TextEdit {
in property <bool> read-only <=> base.read-only;
in property <length> font-size <=> base.font-size;
in property <bool> enabled <=> base.enabled;
in property <string> placeholder-text <=> base.placeholder-text;
in-out property <bool> has-focus: base.has-focus;
out property <length> visible-width <=> base.visible-width;
out property <length> visible-height <=> base.visible-height;
@ -71,6 +72,7 @@ export component TextEdit {
font-weight: CosmicFontSettings.body.font-weight;
selection-background-color: CosmicPalette.selection-background;
selection-foreground-color: CosmicPalette.selection-foreground;
placeholder-color: CosmicPalette.placeholder-foreground;
if root.has-focus && root.enabled: Rectangle {
width: parent.width + 2px;
height: parent.height + 2px;

138
internal/compiler/widgets/cupertino-base/textedit.slint
View file

@ -8,12 +8,12 @@ import { FocusBorder } from "components.slint";
// FIXME: After auto-hiding of scrollbars is implemented, use TextEditBase
component ScrollView {
in property <bool> enabled: true;
out property <length> visible-width <=> i-flickable.width;
out property <length> visible-height <=> i-flickable.height;
in-out property <length> viewport-width <=> i-flickable.viewport-width;
in-out property <length> viewport-height <=> i-flickable.viewport-height;
in-out property <length> viewport-x <=> i-flickable.viewport-x;
in-out property <length> viewport-y <=> i-flickable.viewport-y;
out property <length> visible-width <=> flickable.width;
out property <length> visible-height <=> flickable.height;
in-out property <length> viewport-width <=> flickable.viewport-width;
in-out property <length> viewport-height <=> flickable.viewport-height;
in-out property <length> viewport-x <=> flickable.viewport-x;
in-out property <length> viewport-y <=> flickable.viewport-y;
// FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
in-out property <bool> has-focus;
@ -24,98 +24,98 @@ component ScrollView {
preferred-height: 100%;
preferred-width: 100%;
i-flickable := Flickable {
flickable := Flickable {
x: 2px;
y: 2px;
interactive: false;
viewport-y <=> i-vertical-bar.value;
viewport-x <=> i-horizontal-bar.value;
width: parent.width - 16px;
viewport-y <=> vertical-bar.value;
viewport-x <=> horizontal-bar.value;
width: parent.width - 16px;
height: 100%;
@children
}
i-vertical-bar := ScrollBar {
vertical-bar := ScrollBar {
enabled: root.enabled;
x: parent.width - self.width;
x: parent.width - self.width;
y: 0;
width: self.has-hover ? 20px : 12px;
height: i-horizontal-bar.visible ? parent.height - i-horizontal-bar.height : parent.height;
height: horizontal-bar.visible ? parent.height - horizontal-bar.height : parent.height;
horizontal: false;
maximum: i-flickable.viewport-height - i-flickable.height;
page-size: i-flickable.height;
visible: i-flickable.viewport-height > i-flickable.height;
maximum: flickable.viewport-height - flickable.height;
page-size: flickable.height;
visible: flickable.viewport-height > flickable.height;
}
i-horizontal-bar := ScrollBar {
horizontal-bar := ScrollBar {
enabled: root.enabled;
width: i-vertical-bar.visible ? parent.width - i-vertical-bar.width : parent.width;
width: vertical-bar.visible ? parent.width - vertical-bar.width : parent.width;
height: self.has-hover ? 20px : 12px;
y: parent.height - self.height;
x: 0;
horizontal: true;
maximum: i-flickable.viewport-width - i-flickable.width;
page-size: i-flickable.width;
visible: i-flickable.viewport-width > i-flickable.width;
maximum: flickable.viewport-width - flickable.width;
page-size: flickable.width;
visible: flickable.viewport-width > flickable.width;
}
}
export component TextEdit {
in property <TextWrap> wrap <=> i-text-input.wrap;
in property <TextHorizontalAlignment> horizontal-alignment <=> i-text-input.horizontal-alignment;
in property <bool> read-only <=> i-text-input.read-only;
in property <length> font-size <=> i-text-input.font-size;
in property <bool> enabled <=> i-text-input.enabled;
out property <length> visible-width <=> i-scroll-view.visible-width;
out property <length> visible-height <=> i-scroll-view.visible-height;
in-out property <bool> has-focus: i-text-input.has-focus;
in-out property <string> text <=> i-text-input.text;
in-out property <length> viewport-x <=> i-scroll-view.viewport-x;
in-out property <length> viewport-y <=> i-scroll-view.viewport-y;
in-out property <length> viewport-width <=> i-scroll-view.viewport-width;
in-out property <length> viewport-height <=> i-scroll-view.viewport-height;
in property <TextWrap> wrap <=> text-input.wrap;
in property <TextHorizontalAlignment> horizontal-alignment <=> text-input.horizontal-alignment;
in property <bool> read-only <=> text-input.read-only;
in property <length> font-size <=> text-input.font-size;
in property <bool> enabled <=> text-input.enabled;
out property <length> visible-width <=> scroll-view.visible-width;
out property <length> visible-height <=> scroll-view.visible-height;
in-out property <bool> has-focus: text-input.has-focus;
in-out property <string> text <=> text-input.text;
in-out property <length> viewport-x <=> scroll-view.viewport-x;
in-out property <length> viewport-y <=> scroll-view.viewport-y;
in-out property <length> viewport-width <=> scroll-view.viewport-width;
in-out property <length> viewport-height <=> scroll-view.viewport-height;
in property <string> placeholder-text;
callback edited(/* text */ string);
accessible-role: AccessibleRole.text-input;
accessible-value <=> text;
public function set-selection-offsets(start: int, end: int) {
i-text-input.set-selection-offsets(start, end);
public function set-selection-offsets(start: int,end: int){
text-input.set-selection-offsets(start, end);
}
public function select-all() {
i-text-input.select-all();
public function select-all(){
text-input.select-all();
}
public function clear-selection() {
i-text-input.clear-selection();
public function clear-selection(){
text-input.clear-selection();
}
public function cut() {
i-text-input.cut();
public function cut(){
text-input.cut();
}
public function copy() {
i-text-input.copy();
public function copy(){
text-input.copy();
}
public function paste() {
i-text-input.paste();
public function paste(){
text-input.paste();
}
forward-focus: i-text-input;
forward-focus: text-input;
horizontal-stretch: 1;
vertical-stretch: 1;
states [
disabled when !root.enabled : {
i-text-input.color: CupertinoPalette.foreground-secondary;
i-background.background: CupertinoPalette.tertiary-control-background;
disabled when !root.enabled: {
text-input.color: CupertinoPalette.foreground-secondary;
background.background: CupertinoPalette.tertiary-control-background;
}
focused when root.has-focus : {
i-background.background: CupertinoPalette.control-background;
focused when root.has-focus: {
background.background: CupertinoPalette.control-background;
}
]
@ -127,21 +127,21 @@ export component TextEdit {
has-focus: root.has-focus;
}
i-background := Rectangle {
background := Rectangle {
background: CupertinoPalette.alternate-background;
border-color: CupertinoPalette.border;
border-width: 1px;
}
i-scroll-view := ScrollView {
scroll-view := ScrollView {
x: 8px;
y: 8px;
width: parent.width - 16px;
height: parent.height - 16px;
viewport-width: root.wrap == TextWrap.word-wrap ? self.visible-width : max(self.visible-width, i-text-input.preferred-width);
viewport-height: max(self.visible-height, i-text-input.preferred-height);
viewport-width: root.wrap == TextWrap.word-wrap ? self.visible-width : max(self.visible-width, text-input.preferred-width);
viewport-height: max(self.visible-height, text-input.preferred-height);
i-text-input := TextInput {
text-input := TextInput {
enabled: true;
color: CupertinoPalette.foreground;
font-size: CupertinoFontSettings.body.font-size;
@ -157,12 +157,12 @@ export component TextEdit {
cursor-position-changed(cpos) => {
if (cpos.x + root.viewport-x < 12px) {
root.viewport-x = min(0px, max(parent.visible-width - self.width, - cpos.x + 12px ));
root.viewport-x = min(0px, max(parent.visible-width - self.width, - cpos.x + 12px));
} else if (cpos.x + root.viewport-x > parent.visible-width - 12px) {
root.viewport-x = min(0px, max(parent.visible-width - self.width, parent.visible-width - cpos.x - 12px ));
root.viewport-x = min(0px, max(parent.visible-width - self.width, parent.visible-width - cpos.x - 12px));
}
if (cpos.y + root.viewport-y < 12px) {
root.viewport-y = min(0px, max(parent.visible-height - self.height, - cpos.y + 12px ));
root.viewport-y = min(0px, max(parent.visible-height - self.height, - cpos.y + 12px));
} else if (cpos.y + root.viewport-y > parent.visible-height - 12px - 20px) {
// FIXME: font-height hardcoded to 20px
root.viewport-y = min(0px, max(parent.visible-height - self.height, parent.visible-height - cpos.y - 12px - 20px));
@ -170,4 +170,20 @@ export component TextEdit {
}
}
}
placeholder := Text {
x: scroll-view.x;
y: scroll-view.y;
width: scroll-view.width;
vertical-alignment: top;
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: CupertinoPalette.foreground-secondary;
overflow: elide;
// the label is set on the TextEdit itself
accessible-role: none;
}
}

14
internal/compiler/widgets/fluent-base/textedit.slint
View file

@ -11,6 +11,7 @@ export component TextEdit {
in property <bool> read-only <=> base.read-only;
in property <length> font-size <=> base.font-size;
in property <bool> enabled <=> base.enabled;
in property <string> placeholder-text <=> base.placeholder-text;
in-out property <bool> has-focus: base.has-focus;
out property <length> visible-width <=> base.visible-width;
out property <length> visible-height <=> base.visible-height;
@ -24,27 +25,27 @@ export component TextEdit {
accessible-role: AccessibleRole.text-input;
accessible-value <=> text;
public function set-selection-offsets(start: int, end: int) {
public function set-selection-offsets(start: int,end: int){
base.set-selection-offsets(start, end);
}
public function select-all() {
public function select-all(){
base.select-all();
}
public function clear-selection() {
public function clear-selection(){
base.clear-selection();
}
public function cut() {
public function cut(){
base.cut();
}
public function copy() {
public function copy(){
base.copy();
}
public function paste() {
public function paste(){
base.paste();
}
@ -77,6 +78,7 @@ export component TextEdit {
foreground: FluentPalette.foreground;
font-size: FluentFontSettings.body.font-size;
font-weight: FluentFontSettings.body.font-weight;
placeholder-color: FluentPalette.text-secondary;
selection-background-color: FluentPalette.selection-background;
selection-foreground-color: FluentPalette.selection-foreground;

16
internal/compiler/widgets/material-base/textedit.slint
View file

@ -11,6 +11,7 @@ export component TextEdit {
in property <bool> read-only <=> base.read-only;
in property <length> font-size <=> base.font-size;
in property <bool> enabled <=> base.enabled;
in property <string> placeholder-text <=> base.placeholder-text;
in-out property <bool> has-focus: base.has-focus;
out property <length> visible-width <=> base.visible-width;
out property <length> visible-height <=> base.visible-height;
@ -24,27 +25,27 @@ export component TextEdit {
accessible-role: AccessibleRole.text-input;
accessible-value <=> text;
public function set-selection-offsets(start: int, end: int) {
public function set-selection-offsets(start: int,end: int){
base.set-selection-offsets(start, end);
}
public function select-all() {
public function select-all(){
base.select-all();
}
public function clear-selection() {
public function clear-selection(){
base.clear-selection();
}
public function cut() {
public function cut(){
base.cut();
}
public function copy() {
public function copy(){
base.copy();
}
public function paste() {
public function paste(){
base.paste();
}
@ -56,7 +57,7 @@ export component TextEdit {
disabled when !root.enabled: {
root.opacity: 0.5;
}
focused when base.has-focus: {
focused when base.has-focus: {
base.border-width: 2px;
base.border-color: MaterialPalette.accent-background;
}
@ -72,6 +73,7 @@ export component TextEdit {
foreground: MaterialPalette.foreground;
font-size: MaterialFontSettings.body-large.font-size;
font-weight: MaterialFontSettings.body-large.font-weight;
placeholder-color: MaterialPalette.border-variant;
selection-background-color: MaterialPalette.selection-background;
selection-foreground-color: MaterialPalette.selection-foreground;
}

17
internal/compiler/widgets/qt/textedit.slint
View file

@ -2,6 +2,7 @@
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
import { TextEditBase } from "../common/textedit-base.slint";
import { StyleMetrics } from "std-widgets-impl.slint";
export component TextEdit {
in property <TextWrap> wrap <=> base.wrap;
@ -9,6 +10,7 @@ export component TextEdit {
in property <bool> read-only <=> base.read-only;
in property <length> font-size <=> base.font-size;
in property <bool> enabled <=> base.enabled;
in property <string> placeholder-text <=> base.placeholder-text;
in-out property <bool> has-focus: base.has-focus;
out property <length> visible-width <=> base.visible-width;
out property <length> visible-height <=> base.visible-height;
@ -22,27 +24,27 @@ export component TextEdit {
accessible-role: AccessibleRole.text-input;
accessible-value <=> text;
public function set-selection-offsets(start: int, end: int) {
public function set-selection-offsets(start: int,end: int){
base.set-selection-offsets(start, end);
}
public function select-all() {
public function select-all(){
base.select-all();
}
public function clear-selection() {
public function clear-selection(){
base.clear-selection();
}
public function cut() {
public function cut(){
base.cut();
}
public function copy() {
public function copy(){
base.copy();
}
public function paste() {
public function paste(){
base.paste();
}
@ -54,7 +56,7 @@ export component TextEdit {
disabled when !root.enabled: {
root.opacity: 0.5;
}
focused when base.has-focus: {
focused when base.has-focus: {
base.border-width: 2px;
base.border-color: NativePalette.accent-background;
}
@ -68,6 +70,7 @@ export component TextEdit {
border-color: NativePalette.border;
scroll-view-padding: 4px;
foreground: NativePalette.foreground;
placeholder-color: self.enabled ? StyleMetrics.placeholder-color : StyleMetrics.placeholder-color-disabled;
selection-background-color: NativePalette.selection-background;
selection-foreground-color: NativePalette.selection-foreground;
}