language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 02:39:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fluent style: cleanup unwanted properties

Browse source 
Don't make our widgets inherit element that we didn't want to expose in the API

The other styles will be synchronized with later
This commit is contained in:
Olivier Goffart 2023-02-03 17:20:17 +01:00 • committed by Olivier Goffart
parent ed8ea3c85c
commit 9c20369653
6 changed files with 180 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.github/workflows/ci.yaml vendored
View file

@ -285,6 +285,7 @@ jobs:
# Skip the test that use impure functions in property bindings (this is also warning in previous version)
# Skip the example that did not exist or that are broken
# Skip the path layout related tests as the element has been removed
# Skip the booker as it use api from the LineEdit that wasn"t meant to be used
run: |
cargo test --bin test-driver-interpreter -- \
--skip test_interpreter_text_cursor_move \
@ -303,4 +304,5 @@ jobs:
--skip example_carousel \
--skip example_fancy_demo \
--skip test_interpreter_elements_path_fit \
--skip test_interpreter_layout_path
--skip test_interpreter_layout_path \
--skip test_interpreter_7guis_booker \

28
examples/7guis/booker.slint
View file

@ -1,9 +1,9 @@
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
import { LineEdit, Button, ComboBox, VerticalBox } from "std-widgets.slint";
import { LineEdit, Button, ComboBox, GridBox } from "std-widgets.slint";
component Booker inherits Window {
export component Booker inherits Window {
// returns true if the string parameter is a valid date
pure callback validate-date(string) -> bool;
validate-date(_) => { true }
@ -11,30 +11,32 @@ component Booker inherits Window {
pure callback compare-date(string, string) -> bool;
compare-date(a, b) => { a <= b }
private property <bool> message-visible;
VerticalBox {
GridBox {
combo := ComboBox {
row: 0;
model: ["one-way flight", "return flight"];
current-value: "one-way flight";
current-index: 0;
}
t1 := LineEdit {
row: 1;
text: "27.03.2014";
Rectangle {
width: 100%;
height: 100%;
background: root.validate-date(t1.text) ? transparent : #f008;
}
}
Rectangle {
row: 1; // over the previous line edit
background: root.validate-date(t1.text) ? transparent : #f008;
}
t2 := LineEdit {
row: 2;
text: "27.03.2014";
enabled: combo.current-index == 1;
Rectangle {
width: 100%;
height: 100%;
background: root.validate-date(t2.text) ? transparent : #f008;
}
}
Rectangle {
row: 2; // over the previous line edit
background: root.validate-date(t2.text) ? transparent : #f008;
}
Button {
row: 3;
text: "Book";
clicked() => { root.message-visible = true; }
enabled: combo.current-index != 1 ? root.validate-date(t1.text) : root.compare-date(t1.text, t2.text);

17
internal/compiler/tests/syntax/lookup/issue_1461.slint
View file

@ -1,15 +1,22 @@
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
import { Button, VerticalBox } from "std-widgets.slint";
component Button inherits Rectangle {
ta := TouchArea {}
background: ta.pressed ? blue: red;
callback clicked <=> ta.clicked;
in property <string> text;
}
export AppWindow := Window {
property<int> counter: 42;
callback request-increase-value();
VerticalBox {
VerticalLayout {
Button {
text: "Increase value";
clicked => {
clicked => {
request-increase-value();
}
states [
@ -20,4 +27,4 @@ import { Button, VerticalBox } from "std-widgets.slint";
]
}
}
}
}

252
internal/compiler/widgets/fluent-base/std-widgets-base.slint
View file

@ -9,7 +9,7 @@ import { StyleMetrics, ScrollView, Button, Palette } from "std-widgets-impl.sli
export { StyleMetrics, ScrollView, Button, StandardButton, TextEdit, AboutSlint }
export * from "widget-table-view.slint";
export component CheckBox inherits Rectangle {
export component CheckBox {
callback toggled;
in property <string> text <=> text.text;
in-out property <bool> checked;
@ -106,8 +106,6 @@ export component CheckBox inherits Rectangle {
component SpinBoxButton inherits Rectangle {
callback clicked <=> touch.clicked;
in-out property<string> text; // text and font-size are not used, but present in the other styles
in-out property <length> font-size;
in-out property<bool> enabled <=> touch.enabled;
background: !root.enabled ? transparent
: touch.pressed ? Palette.neutralLight
@ -120,16 +118,13 @@ component SpinBoxButton inherits Rectangle {
touch := TouchArea { }
}
export component SpinBox inherits FocusScope {
// FIXME: remove?
in-out property <bool> checked;
export component SpinBox {
in-out property <int> value;
in property <int> minimum;
in property <int> maximum: 100;
// FIXME: remove
in property <image> icon;
// FIXME: remove?
in property <length> font-size <=> button.font-size;
in property <bool> enabled <=> fs.enabled;
out property <bool> has-focus <=> fs.has-focus;
forward-focus: fs;
min-height: max(32px, l.min-height);
horizontal-stretch: 1;
@ -141,85 +136,88 @@ export component SpinBox inherits FocusScope {
accessible-value-maximum: root.maximum;
accessible-value-step: (root.maximum - root.minimum) / 100;
Rectangle {
background: !root.enabled ? Palette.neutralLighter : Palette.white;
}
fs := FocusScope {
l := GridLayout {
padding-left: 8px;
padding-top: 3px;
padding-bottom: 3px;
text := Text {
rowspan: 2;
text: root.value;
color: !root.enabled ? Palette.neutralTertiary : Palette.neutralDark;
horizontal-alignment: left;
vertical-alignment: center;
Rectangle {
background: !root.enabled ? Palette.neutralLighter : Palette.white;
}
Rectangle { width: 8px; }
button := SpinBoxButton {
width: 25px;
enabled: root.enabled;
Path {
commands: "M978.2,688.9l-84.2,82.1c-15.7,15.3-41.1,15.3-56.7,0l-341-304.2L162.6,764.5c-15.5,15.1-41,15.1-56.6,0l-84.3-82.1c-15.6-15.2-15.6-39.9,0-55.2l446.6-398.2c15.7-15.3,41-15.3,56.7,0l6.9,6.7l446.3,398.1C993.9,649,993.9,673.7,978.2,688.9z";
fill: parent.symbol-color;
height: 33%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
l := GridLayout {
padding-left: 8px;
padding-top: 3px;
padding-bottom: 3px;
text := Text {
rowspan: 2;
text: root.value;
color: !root.enabled ? Palette.neutralTertiary : Palette.neutralDark;
horizontal-alignment: left;
vertical-alignment: center;
}
clicked => {
if (root.value < root.maximum) {
root.value += 1;
Rectangle { width: 8px; }
button := SpinBoxButton {
width: 25px;
enabled: root.enabled;
Path {
commands: "M978.2,688.9l-84.2,82.1c-15.7,15.3-41.1,15.3-56.7,0l-341-304.2L162.6,764.5c-15.5,15.1-41,15.1-56.6,0l-84.3-82.1c-15.6-15.2-15.6-39.9,0-55.2l446.6-398.2c15.7-15.3,41-15.3,56.7,0l6.9,6.7l446.3,398.1C993.9,649,993.9,673.7,978.2,688.9z";
fill: parent.symbol-color;
height: 33%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
}
root.focus();
}
}
SpinBoxButton {
row: 1; col: 2;
enabled: root.enabled;
Path {
commands: "M21.8,311.1l84.2-82.1c15.7-15.2,41-15.2,56.7,0l341.1,304.1l333.7-297.5c15.5-15.2,41-15.2,56.6,0l84.3,82.1c15.6,15.2,15.6,40,0,55.2L531.7,771c-15.7,15.3-41,15.3-56.7,0l-6.9-6.7L21.8,366.3C6.1,351,6.1,326.3,21.8,311.1z";
fill: parent.symbol-color;
height: 33%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
}
clicked => {
if (root.value > root.minimum) {
root.value -= 1;
clicked => {
if (root.value < root.maximum) {
root.value += 1;
}
root.focus();
}
root.focus();
}
SpinBoxButton {
row: 1; col: 2;
enabled: root.enabled;
Path {
commands: "M21.8,311.1l84.2-82.1c15.7-15.2,41-15.2,56.7,0l341.1,304.1l333.7-297.5c15.5-15.2,41-15.2,56.6,0l84.3,82.1c15.6,15.2,15.6,40,0,55.2L531.7,771c-15.7,15.3-41,15.3-56.7,0l-6.9-6.7L21.8,366.3C6.1,351,6.1,326.3,21.8,311.1z";
fill: parent.symbol-color;
height: 33%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
}
clicked => {
if (root.value > root.minimum) {
root.value -= 1;
}
root.focus();
}
}
}
}
Rectangle {
x: root.enabled && root.has-focus ? -2px : 0px;
y: self.x;
width: parent.width - 2*self.x;
height: parent.height - 2*self.y;
border-radius: 2px;
border-width: !root.enabled ? 0px : root.has-focus ? 3px : 1px;
border-color: !root.enabled ? Palette.neutralLighter
: root.has-focus ? Palette.themeSecondary
: Palette.neutralDark;
}
Rectangle {
x: root.enabled && root.has-focus ? -2px : 0px;
y: self.x;
width: parent.width - 2*self.x;
height: parent.height - 2*self.y;
border-radius: 2px;
border-width: !root.enabled ? 0px : root.has-focus ? 3px : 1px;
border-color: !root.enabled ? Palette.neutralLighter
: root.has-focus ? Palette.themeSecondary
: Palette.neutralDark;
}
key-pressed(event) => {
if (root.enabled && event.text == Key.UpArrow && root.value < root.maximum) {
root.value += 1;
accept
} else if (root.enabled && event.text == Key.DownArrow && root.value > root.minimum) {
root.value -= 1;
accept
} else {
reject
key-pressed(event) => {
if (root.enabled && event.text == Key.UpArrow && root.value < root.maximum) {
root.value += 1;
accept
} else if (root.enabled && event.text == Key.DownArrow && root.value > root.minimum) {
root.value -= 1;
accept
} else {
reject
}
}
}
}
export component Slider inherits Rectangle {
export component Slider {
in property<float> maximum: 100;
in property<float> minimum: 0;
in-out property<float> value;
@ -317,26 +315,29 @@ export component Slider inherits Rectangle {
export component GroupBox inherits VerticalLayout {
export component GroupBox {
in property <string> title <=> label.text;
in property<bool> enabled: true;
spacing: 8px;
padding-top: 16px;
padding-bottom: 8px;
label := Text {
vertical-stretch: 0;
color: !root.enabled ? Palette.neutralTertiary : Palette.neutralDark;
font-weight: 600;
}
Rectangle {
vertical-stretch: 1;
GridLayout {
@children
VerticalLayout {
spacing: 8px;
padding-top: 16px;
padding-bottom: 8px;
label := Text {
vertical-stretch: 0;
color: !root.enabled ? Palette.neutralTertiary : Palette.neutralDark;
font-weight: 600;
}
Rectangle {
vertical-stretch: 1;
GridLayout {
@children
}
}
}
}
export component TabWidgetImpl inherits Rectangle {
export component TabWidgetImpl {
out property <length> content-x: 0;
out property <length> content-y: root.tabbar-preferred-height;
out property <length> content-height: root.height - root.tabbar-preferred-height;
@ -411,7 +412,7 @@ export component TabImpl inherits Rectangle {
}
}
export component TabBarImpl inherits Rectangle {
export component TabBarImpl {
// injected properties:
in-out property<int> current; // The currently selected tab
in-out property<int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
@ -459,7 +460,7 @@ export component TabBarImpl inherits Rectangle {
export component TabWidget inherits TabWidget {}
export component LineEdit inherits Rectangle {
export component LineEdit {
in property <length> font-size <=> inner.font-size;
in-out property <string> text <=> inner.text;
in property <string> placeholder-text <=> inner.placeholder-text;
@ -477,12 +478,14 @@ export component LineEdit inherits Rectangle {
vertical-stretch: 0;
min-height: max(32px, l.min-height);
background: !root.enabled ? Palette.neutralLighter : Palette.white;
border-radius: 2px;
border-width: !root.enabled ? 0px : root.has-focus ? 2px : 1px;
border-color: !root.enabled ? Palette.neutralLighter
: root.has-focus ? Palette.themeSecondary
: Palette.neutralPrimary;
Rectangle {
background: !root.enabled ? Palette.neutralLighter : Palette.white;
border-radius: 2px;
border-width: !root.enabled ? 0px : root.has-focus ? 2px : 1px;
border-color: !root.enabled ? Palette.neutralLighter
: root.has-focus ? Palette.themeSecondary
: Palette.neutralPrimary;
}
l := HorizontalLayout {
padding-left: 8px;
@ -536,7 +539,7 @@ export component StandardListView inherits StandardListViewBase {
}
}
export component ComboBox inherits FocusScope {
export component ComboBox {
in property <[string]> model;
in-out property <int> current-index : 0;
in-out property <string> current-value: root.model[root.current-index];
@ -546,21 +549,36 @@ export component ComboBox inherits FocusScope {
accessible-role: combobox;
accessible-value <=> root.current-value;
key-pressed(event) => {
if (event.text == Key.UpArrow) {
root.current-index = Math.max(root.current-index - 1, 0);
root.current-value = root.model[root.current-index];
return accept;
} else if (event.text == Key.DownArrow) {
root.current-index = Math.min(root.current-index + 1, root.model.length - 1);
root.current-value = root.model[root.current-index];
return accept;
// PopupWindow can not get hidden again at this time, so do not allow to pop that up.
// } else if (event.text == Key.Return) {
// touch.clicked()
// return accept;
out property has-focus <=> fs.has-focus;
in property enabled <=> fs.enabled;
forward-focus: fs;
fs := FocusScope {
key-pressed(event) => {
if (event.text == Key.UpArrow) {
root.current-index = Math.max(root.current-index - 1, 0);
root.current-value = root.model[root.current-index];
return accept;
} else if (event.text == Key.DownArrow) {
root.current-index = Math.min(root.current-index + 1, root.model.length - 1);
root.current-value = root.model[root.current-index];
return accept;
// PopupWindow can not get hidden again at this time, so do not allow to pop that up.
// } else if (event.text == Key.Return) {
// touch.clicked()
// return accept;
}
return reject;
}
touch := TouchArea {
enabled <=> root.enabled;
clicked => {
root.focus();
popup.show();
}
}
return reject;
}
Rectangle {
@ -608,14 +626,6 @@ export component ComboBox inherits FocusScope {
}
touch := TouchArea {
enabled <=> root.enabled;
clicked => {
root.focus();
popup.show();
}
}
popup := PopupWindow {
x:0;
y: root.height;

32
internal/compiler/widgets/fluent-base/std-widgets-impl.slint
View file

@ -80,7 +80,7 @@ export global StyleMetrics {
out property<bool> dark-color-scheme: Palette.dark-color-scheme;
}
export component Button inherits Rectangle {
export component Button {
callback clicked;
in property<string> text <=> text.text;
out property<bool> has-focus: fs.has-focus;
@ -95,13 +95,15 @@ export component Button inherits Rectangle {
accessible-role: button;
accessible-label <=> text.text;
border-width: 1px;
border-radius: 2px;
border-color: !root.enabled ? Palette.neutralLighter : Palette.neutralSecondaryAlt;
background: !root.enabled ? Palette.neutralLighter
: (touch.pressed || root.checked) ? Palette.neutralLight
: touch.has-hover ? Palette.neutralLighter
: Palette.white;
Rectangle {
border-width: 1px;
border-radius: 2px;
border-color: !root.enabled ? Palette.neutralLighter : Palette.neutralSecondaryAlt;
background: !root.enabled ? Palette.neutralLighter
: (touch.pressed || root.checked) ? Palette.neutralLight
: touch.has-hover ? Palette.neutralLighter
: Palette.white;
}
horizontal-stretch: 0;
vertical-stretch: 0;
min-height: max(32px, l.min-height);
@ -197,7 +199,7 @@ component ScrollBar inherits Rectangle {
}
}
export component ScrollView inherits Rectangle {
export component ScrollView {
in-out property <length> viewport-width <=> fli.viewport-width;
in-out property <length> viewport-height <=> fli.viewport-height;
in-out property <length> viewport-x <=> fli.viewport-x;
@ -212,11 +214,13 @@ export component ScrollView inherits Rectangle {
horizontal-stretch: 1;
vertical-stretch: 1;
border-radius: 2px;
border-width: !root.enabled ? 0px : root.has-focus ? 2px : 1px;
border-color: !root.enabled ? Palette.neutralLighter
: root.has-focus ? Palette.themeSecondary
: Palette.neutralPrimary;
Rectangle {
border-radius: 2px;
border-width: !root.enabled ? 0px : root.has-focus ? 2px : 1px;
border-color: !root.enabled ? Palette.neutralLighter
: root.has-focus ? Palette.themeSecondary
: Palette.neutralPrimary;
}
fli := Flickable {
@children

3
internal/compiler/widgets/fluent-base/widget-table-view.slint
View file

@ -170,7 +170,6 @@ export component StandardTableView {
}
scroll-view := ScrollView {
border-width: 0;
vertical-stretch: 1;
VerticalLayout {
@ -198,4 +197,4 @@ export component StandardTableView {
}
}
}
}
}