mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-03 18:29:09 +00:00
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:
parent
ed8ea3c85c
commit
9c20369653
6 changed files with 180 additions and 156 deletions
|
@ -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";
|
|||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -170,7 +170,6 @@ export component StandardTableView {
|
|||
}
|
||||
|
||||
scroll-view := ScrollView {
|
||||
border-width: 0;
|
||||
vertical-stretch: 1;
|
||||
|
||||
VerticalLayout {
|
||||
|
@ -198,4 +197,4 @@ export component StandardTableView {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue