Fluent style: cleanup unwanted properties

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

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";
]
}
}
}
}

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;

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

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 {
}
}
}
}
}