diff --git a/.github/workflows/torizon_demos.yaml b/.github/workflows/torizon_demos.yaml index b4568d2a9b3..54c449be880 100644 --- a/.github/workflows/torizon_demos.yaml +++ b/.github/workflows/torizon_demos.yaml @@ -41,7 +41,7 @@ jobs: steps: - uses: actions/checkout@v3 - name: Set up QEMU - uses: docker/setup-qemu-action@v2 + uses: docker/setup-qemu-action@v2 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2 - name: Login to GitHub Container Registry diff --git a/FAQ.md b/FAQ.md index 2e753f5e73a..158f32690be 100644 --- a/FAQ.md +++ b/FAQ.md @@ -61,7 +61,7 @@ or [GNU GPLv3](LICENSES/GPL-3.0-only.txt) ### Can I license my code under an open-source license more permissive than GPL? Yes. While the binary or the package containing Slint needs to be licensed under GPL, -the code you write can be under any license compatible with the GPL, such as BSD, MIT, or Apache license. +the code you write can be under any license compatible with the GPL, such as BSD, MIT, or Apache license. For more info, you can check the following GPL FAQs: - [https://www.gnu.org/licenses/gpl-faq.en.html#LinkingWithGPL](https://www.gnu.org/licenses/gpl-faq.en.html#LinkingWithGPL) diff --git a/docker/Dockerfile.cpp-image b/docker/Dockerfile.cpp-image index 3a73547c1f2..e07a519d6ad 100644 --- a/docker/Dockerfile.cpp-image +++ b/docker/Dockerfile.cpp-image @@ -15,7 +15,7 @@ RUN apt-get update && \ ENV RUSTUP_HOME=/rust -ENV CARGO_HOME=/cargo +ENV CARGO_HOME=/cargo ENV PATH=/cargo/bin:/rust/bin:$PATH RUN curl https://sh.rustup.rs -sSf | sh -s -- -y diff --git a/docker/Dockerfile.torizon-demos b/docker/Dockerfile.torizon-demos index c7fead639e5..fc916d72572 100644 --- a/docker/Dockerfile.torizon-demos +++ b/docker/Dockerfile.torizon-demos @@ -15,7 +15,7 @@ ENV WEATHER_API=$WEATHER_API_KEY # Install Rust ENV RUSTUP_HOME=/rust -ENV CARGO_HOME=/cargo +ENV CARGO_HOME=/cargo ENV PATH=/cargo/bin:/rust/bin:$PATH RUN curl https://sh.rustup.rs -sSf | sh -s -- -y diff --git a/docs/language/index.rst b/docs/language/index.rst index 868ff5c1013..9157b409111 100644 --- a/docs/language/index.rst +++ b/docs/language/index.rst @@ -48,7 +48,7 @@ Getting Started --------------- To use `Slint `_ you need to embed your slint files in a project written -in a supported programming language, like C++, Rust, or JavaScript. +in a supported programming language, like C++, Rust, or JavaScript. There are three different pathways to get started with Slint: @@ -56,8 +56,8 @@ There are three different pathways to get started with Slint: This is a web browser-based tool where you can try Slint out. 2. As a UI Designer, working with Slint files locally, we recommend the following combination of software tools: - - - Visual Studio Code + + - Visual Studio Code - The Slint for Visual Studio Code Extension 3. As a Software Developer, integrating Slint into a new or existing code base, choose one of these languages to diff --git a/docs/tutorial/cpp/src/getting_started.md b/docs/tutorial/cpp/src/getting_started.md index d1ceb1f78c0..b26d243e4ae 100644 --- a/docs/tutorial/cpp/src/getting_started.md +++ b/docs/tutorial/cpp/src/getting_started.md @@ -3,7 +3,7 @@ In this tutorial, we use C++ as the host programming language. We also support other programming languages like [Rust](https://slint-ui.com/docs/rust/slint/) or [JavaScript](https://slint-ui.com/docs/node/). -You will need a development environment that can compile C++20, [CMake 3.21](https://cmake.org/download/), +You will need a development environment that can compile C++20, [CMake 3.21](https://cmake.org/download/), and we recommend [Ninja](https://ninja-build.org) for `-GNinja`. We don't provide binaries of Slint yet, so we will use the CMake integration that will automatically build the tools and library from source. Since it's implemented in the Rust programming language, this means that diff --git a/examples/carousel/ui/card.slint b/examples/carousel/ui/card.slint index 9f1a0fddfb1..a773c7d7a01 100644 --- a/examples/carousel/ui/card.slint +++ b/examples/carousel/ui/card.slint @@ -5,7 +5,7 @@ import { Theme } from "theme.slint"; import { TitleLabel } from "title_label.slint"; export component Card inherits Rectangle { - callback clicked <=> touch-area.clicked; + callback clicked <=> touch-area.clicked; in property title: "title"; in property is-selected: false; @@ -31,7 +31,7 @@ export component Card inherits Rectangle { animate colorize { duration: Theme.duration-fast; } } - + // Selection text title-label := TitleLabel { x: (parent.width - self.width) / 2; diff --git a/examples/carousel/ui/carousel.slint b/examples/carousel/ui/carousel.slint index ea8c6586d1d..2ec884f39b7 100644 --- a/examples/carousel/ui/carousel.slint +++ b/examples/carousel/ui/carousel.slint @@ -18,14 +18,14 @@ export component Carousel inherits FocusScope { forward-focus: focus-scope; height: Theme.size-big; - move-right => { + move-right => { root.selected-index = min(root.selected-index + 1, root.count - 1); } - move-left => { + move-left => { root.selected-index = max(root.selected-index - 1, 0); } - + focus-scope:= FocusScope { key-pressed(event) => { if(event.text == Key.UpArrow) { @@ -47,7 +47,7 @@ export component Carousel inherits FocusScope { } } - TouchArea { + TouchArea { width: parent.width; height: parent.height; @@ -57,20 +57,20 @@ export component Carousel inherits FocusScope { } - Rectangle { + Rectangle { clip: true; background: transparent; - + Flickable { interactive: false; animate viewport-x { duration: root.duation; easing: ease-in; } viewport-x: root.center-x - root.selected-index * (root.itemWidth + root.spacing); - - HorizontalLayout { + + HorizontalLayout { spacing <=> root.spacing; - + @children } } - } + } } \ No newline at end of file diff --git a/examples/carousel/ui/carousel_demo.slint b/examples/carousel/ui/carousel_demo.slint index 4d5c3900b7e..4231867cab3 100644 --- a/examples/carousel/ui/carousel_demo.slint +++ b/examples/carousel/ui/carousel_demo.slint @@ -21,14 +21,14 @@ export component MainWindow inherits Window { forward-focus: carousel; default-font-family: Theme.font-family; - carousel := Carousel { + carousel := Carousel { y: (root.height - self.height) / 2; height: 100%; itemWidth: Theme.size-medium; count: root.navigation-items.length; selected-index <=> root.selected-index; spacing: Theme.spacing-medium; - + for item[index] in root.navigation-items : Card { is-selected: index == root.selected-index; title: item.title; @@ -36,6 +36,6 @@ export component MainWindow inherits Window { y: (parent.height - self.height) / 2; clicked => { root.selected-index = index; } - } + } } } diff --git a/examples/energy-monitor/ui/blocks/header.slint b/examples/energy-monitor/ui/blocks/header.slint index 6db53e255dc..a52b0c1eb8c 100644 --- a/examples/energy-monitor/ui/blocks/header.slint +++ b/examples/energy-monitor/ui/blocks/header.slint @@ -20,14 +20,14 @@ export component Header { min-height: 50px; vertical-stretch: 0; - HorizontalLayout { + HorizontalLayout { padding: 20px; spacing: 5px; - Rectangle { + Rectangle { horizontal-stretch: 1; - Text { + Text { x: 0px; color: Theme.palette.white; text: date; @@ -36,19 +36,19 @@ export component Header { } } - Rectangle { + Rectangle { horizontal-stretch: 1; - + Image { height: 30px; source: logo; } } - - Rectangle { + + Rectangle { horizontal-stretch: 1; - Text { + Text { x: i-time-suffix.x - 5px - self.width; horizontal-alignment: right; color: Theme.palette.white; @@ -57,8 +57,8 @@ export component Header { font-weight: Theme.typo.header-item.weight; } - i-time-suffix := Text { - x: parent.width - self.width; + i-time-suffix := Text { + x: parent.width - self.width; horizontal-stretch: 0; color: Theme.palette.shark-gray; text: time-suffix; diff --git a/examples/energy-monitor/ui/blocks/kiosk_overlay.slint b/examples/energy-monitor/ui/blocks/kiosk_overlay.slint index 0011db5d66f..b038f4cb53b 100644 --- a/examples/energy-monitor/ui/blocks/kiosk_overlay.slint +++ b/examples/energy-monitor/ui/blocks/kiosk_overlay.slint @@ -13,7 +13,7 @@ export component KioskOverlay { } } - Rectangle { + Rectangle { x: i-text.x - 1px; y: i-text.y - 1px; width: i-text.width + 2px; diff --git a/examples/energy-monitor/ui/components/state_layer.slint b/examples/energy-monitor/ui/components/state_layer.slint index 0908309e365..abf2a5d1b2e 100644 --- a/examples/energy-monitor/ui/components/state_layer.slint +++ b/examples/energy-monitor/ui/components/state_layer.slint @@ -5,20 +5,20 @@ import { Theme } from "../theme.slint"; export component StateLayer inherits TouchArea { in property border-radius <=> i-container.border-radius; - + width: 100%; height: 100%; - i-container := Rectangle { + i-container := Rectangle { width: 100%; height: 100%; background: Theme.palette.pure-black; opacity: 0.0; - + animate background { duration: Theme.durations.medium; } } - states [ + states [ pressed when root.pressed : { i-container.opacity: 0.12; } diff --git a/examples/energy-monitor/ui/pages/page.slint b/examples/energy-monitor/ui/pages/page.slint index 5d833e28599..381104acfc0 100644 --- a/examples/energy-monitor/ui/pages/page.slint +++ b/examples/energy-monitor/ui/pages/page.slint @@ -16,7 +16,7 @@ export component Page inherits Rectangle { animate x { duration: Theme.durations.fast; } - GridLayout { + GridLayout { padding-left: root.padding-left; padding-right: root.padding-right; diff --git a/examples/energy-monitor/ui/widgets/chart_axis.slint b/examples/energy-monitor/ui/widgets/chart_axis.slint index 56837b321dc..4ceff65f1c7 100644 --- a/examples/energy-monitor/ui/widgets/chart_axis.slint +++ b/examples/energy-monitor/ui/widgets/chart_axis.slint @@ -23,11 +23,11 @@ export component ChartAxis { in property y-max; in property y-unit; - VerticalLayout { + VerticalLayout { horizontal-stretch: 1; alignment: end; - - HorizontalLayout { + + HorizontalLayout { spacing: 1px; for text in x-model : Rectangle { @@ -37,16 +37,16 @@ export component ChartAxis { } } } - } + } - HorizontalLayout { + HorizontalLayout { alignment: end; - - Rectangle { + + Rectangle { background: green; - + for value in y-model : AxisLabel { - y: (value >= 0 ? parent.height * (1 - (value - y-min) / (y-max - y-min)) : + y: (value >= 0 ? parent.height * (1 - (value - y-min) / (y-max - y-min)) : y-zero + parent.height * (-1 * value / (y-max - y-min))) - self.height / 2; text: "\{value}\{y-unit}"; } diff --git a/examples/energy-monitor/ui/widgets/check_box.slint b/examples/energy-monitor/ui/widgets/check_box.slint index 17e4b1b9f9d..3a8b5dd0f72 100644 --- a/examples/energy-monitor/ui/widgets/check_box.slint +++ b/examples/energy-monitor/ui/widgets/check_box.slint @@ -11,12 +11,12 @@ export component CheckBox { min-height: 18px; width: self.height; - i-container := Rectangle { + i-container := Rectangle { border-color: Theme.palette.slint-blue-300; border-width: 2px; border-radius: 2px; - i-check-icon := Image { + i-check-icon := Image { opacity: 0.0; colorize: Theme.palette.pure-black; source: Images.check; @@ -27,13 +27,13 @@ export component CheckBox { animate background { duration: Theme.durations.fast; } } - i-touch-area := TouchArea { - clicked => { + i-touch-area := TouchArea { + clicked => { checked = !checked; } } - states [ + states [ checked when checked : { i-container.border-width: 0; i-container.background: Theme.palette.limon-green; diff --git a/examples/energy-monitor/ui/widgets/icon_button.slint b/examples/energy-monitor/ui/widgets/icon_button.slint index 6772d06bc1f..0e048198b7d 100644 --- a/examples/energy-monitor/ui/widgets/icon_button.slint +++ b/examples/energy-monitor/ui/widgets/icon_button.slint @@ -14,7 +14,7 @@ export component IconButton { min-width: 24px; min-height: 24px; - GridLayout { + GridLayout { padding: 4px; i-icon := Image { @@ -26,7 +26,7 @@ export component IconButton { i-touch-area := TouchArea {} - states [ + states [ disabled when !root.enabled : { opacity: 0.25; } diff --git a/examples/energy-monitor/ui/widgets/item.slint b/examples/energy-monitor/ui/widgets/item.slint index 19652ae8493..324d8b127f3 100644 --- a/examples/energy-monitor/ui/widgets/item.slint +++ b/examples/energy-monitor/ui/widgets/item.slint @@ -1,14 +1,14 @@ // Copyright © SixtyFPS GmbH // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial -import { StateLayer } from "../components/state_layer.slint"; -import { ScrollView } from "scroll_view.slint"; -import { Theme } from "../theme.slint"; +import { StateLayer } from "../components/state_layer.slint"; +import { ScrollView } from "scroll_view.slint"; +import { Theme } from "../theme.slint"; import { StateLayer } from "../components/state_layer.slint"; export component Item { callback clicked <=> i-touch-area.clicked; - + in property text <=> i-text.text; in property has-separator; @@ -21,14 +21,14 @@ export component Item { i-touch-area := TouchArea {} - HorizontalLayout { + HorizontalLayout { padding-left: Theme.spaces.medium; padding-top: Theme.spaces.medium; padding-bottom: Theme.spaces.medium; padding-right: Theme.spaces.medium; spacing: Theme.spaces.medium; - i-text := Text { + i-text := Text { horizontal-stretch: 1; color: Theme.palette.white; font-size: Theme.typo.desciption.size; @@ -39,7 +39,7 @@ export component Item { @children } - if(has-separator) : Rectangle { + if(has-separator) : Rectangle { width: parent.width - 2 * Theme.spaces.medium; height: 1px; x: Theme.spaces.medium; @@ -51,8 +51,8 @@ export component Item { export component ItemGroupBox { in property title <=> i-title.text; - VerticalLayout { - HorizontalLayout { + VerticalLayout { + HorizontalLayout { padding: Theme.spaces.medium; i-title := Text { @@ -66,7 +66,7 @@ export component ItemGroupBox { background: Theme.palette.dark-deep-blue; border-radius: 4px; - VerticalLayout { + VerticalLayout { @children } } diff --git a/examples/energy-monitor/ui/widgets/list_view.slint b/examples/energy-monitor/ui/widgets/list_view.slint index 66df1d92202..bfbcdd0d651 100644 --- a/examples/energy-monitor/ui/widgets/list_view.slint +++ b/examples/energy-monitor/ui/widgets/list_view.slint @@ -1,10 +1,10 @@ // Copyright © SixtyFPS GmbH // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial -import { StateLayer } from "../components/state_layer.slint"; -import { ScrollView } from "scroll_view.slint"; -import { Theme } from "../theme.slint"; -import { Images } from "../images.slint"; +import { StateLayer } from "../components/state_layer.slint"; +import { ScrollView } from "scroll_view.slint"; +import { Theme } from "../theme.slint"; +import { Images } from "../images.slint"; import { StateLayer } from "../components/state_layer.slint"; component ListViewItem { @@ -21,14 +21,14 @@ component ListViewItem { border-color: Theme.palette.slint-blue-400; } - HorizontalLayout { + HorizontalLayout { padding-left: Theme.spaces.medium; padding-top: Theme.spaces.medium; padding-bottom: Theme.spaces.medium; padding-right: Theme.spaces.medium; spacing: Theme.spaces.medium; - i-text := Text { + i-text := Text { horizontal-stretch: 1; color: Theme.palette.white; font-size: Theme.typo.desciption.size; @@ -36,7 +36,7 @@ component ListViewItem { vertical-alignment: center; } - i-icon := Image { + i-icon := Image { horizontal-stretch: 0; visible: false; source: Images.check; @@ -44,13 +44,13 @@ component ListViewItem { } } - i-state-layer := StateLayer { + i-state-layer := StateLayer { width: i-container.width; height: i-container.height; border-radius: i-container.border-radius; } - states [ + states [ selected when selected : { i-container.border-color: Theme.palette.limon-green; i-icon.visible: true; @@ -60,13 +60,13 @@ component ListViewItem { export component ListView { callback selection-changed(int /* index */); - + in property <[StandardListViewItem]> model; in-out property selected-index; i-scroll-view := ScrollView { i-blub := VerticalLayout { - alignment: start; + alignment: start; spacing: Theme.spaces.medium; for item[index] in model : ListViewItem { @@ -77,7 +77,7 @@ export component ListView { animate opacity { duration: Theme.durations.fast; } - clicked => { + clicked => { select(index); } } diff --git a/examples/energy-monitor/ui/widgets/menu_button.slint b/examples/energy-monitor/ui/widgets/menu_button.slint index b26f1311ab1..4cd7ea349b7 100644 --- a/examples/energy-monitor/ui/widgets/menu_button.slint +++ b/examples/energy-monitor/ui/widgets/menu_button.slint @@ -11,11 +11,11 @@ export component MenuButton { min-height: 32px; opacity: root.visible ? 1.0 : 0.0; - i-container := Rectangle { + i-container := Rectangle { background: Theme.palette.heliotrope-gradient; border-radius: root.height / 2; - - Rectangle { + + Rectangle { width: 55px; height: 5px; background: Theme.palette.white; diff --git a/examples/energy-monitor/ui/widgets/radio_button.slint b/examples/energy-monitor/ui/widgets/radio_button.slint index c192f228064..8df12af8972 100644 --- a/examples/energy-monitor/ui/widgets/radio_button.slint +++ b/examples/energy-monitor/ui/widgets/radio_button.slint @@ -11,14 +11,14 @@ export component RadioButton { min-height: 18px; width: self.height; - i-container := Rectangle { + i-container := Rectangle { border-color: Theme.palette.slint-blue-300; border-width: 2px; border-radius: self.height / 2; - i-indicator := Rectangle { + i-indicator := Rectangle { height: parent.height - 4 * parent.border-width; - width: self.height; + width: self.height; border-radius: self.height / 2; animate background { duration: Theme.durations.fast; } @@ -29,7 +29,7 @@ export component RadioButton { i-touch-area := TouchArea {} - states [ + states [ checked when checked : { i-container.border-color: Theme.palette.limon-green; i-indicator.background: Theme.palette.limon-green; diff --git a/examples/energy-monitor/ui/widgets/scroll_view.slint b/examples/energy-monitor/ui/widgets/scroll_view.slint index c16a2575a42..e781f411c00 100644 --- a/examples/energy-monitor/ui/widgets/scroll_view.slint +++ b/examples/energy-monitor/ui/widgets/scroll_view.slint @@ -29,7 +29,7 @@ component ScrollBar inherits Rectangle { width: parent.width; height: parent.height; - + pointer-event(event) => { if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) { self.pressed-value = -root.value; @@ -56,7 +56,7 @@ export component ScrollView { in property enabled: true; // 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 has-focus; - + min-height: 50px; min-width: 50px; horizontal-stretch: 1; @@ -95,7 +95,7 @@ export component ScrollView { page-size: i-flickable.width; } - Rectangle { + Rectangle { visible: viewport-y < 0; x: 2px; y: 2px; @@ -105,7 +105,7 @@ export component ScrollView { opacity: 0.1; } - Rectangle { + Rectangle { visible: viewport-height > visible-height && viewport-y > visible-height - viewport-height; x: 2px; y: i-flickable.y + i-flickable.height - self.height; diff --git a/examples/energy-monitor/ui/widgets/switch.slint b/examples/energy-monitor/ui/widgets/switch.slint index 98bb5b5c76c..5a0104170c3 100644 --- a/examples/energy-monitor/ui/widgets/switch.slint +++ b/examples/energy-monitor/ui/widgets/switch.slint @@ -12,15 +12,15 @@ export component Switch { min-height: 18px; width: 2 * self.height; - i-container := Rectangle { + i-container := Rectangle { border-color: Theme.palette.slint-blue-300; border-width: 2px; border-radius: self.height / 2; - - i-indicator := Rectangle { + + i-indicator := Rectangle { x: 2 * parent.border-width; height: parent.height - 4 * parent.border-width; - width: self.height; + width: self.height; border-radius: self.height / 2; background: Theme.palette.slint-blue-300; @@ -32,8 +32,8 @@ export component Switch { animate background { duration: Theme.durations.fast; } } - i-touch-area := TouchArea { - clicked => { + i-touch-area := TouchArea { + clicked => { toggle-checked(); } } @@ -43,7 +43,7 @@ export component Switch { changed(checked); } - states [ + states [ checked when checked : { i-container.background: Theme.palette.limon-green-op10; i-container.border-color: Theme.palette.limon-green; diff --git a/examples/energy-monitor/ui/widgets/tab_widget.slint b/examples/energy-monitor/ui/widgets/tab_widget.slint index 71cd7471d3b..9db18ade01b 100644 --- a/examples/energy-monitor/ui/widgets/tab_widget.slint +++ b/examples/energy-monitor/ui/widgets/tab_widget.slint @@ -11,11 +11,11 @@ component Tab { in property selected; preferred-width: 200px; - - GridLayout { + + GridLayout { padding: 25px; - i-title := Text { + i-title := Text { text: title; horizontal-alignment: center; vertical-alignment: center; @@ -27,17 +27,17 @@ component Tab { } } - i-gradient := Rectangle { + i-gradient := Rectangle { opacity: 0; - Rectangle { + Rectangle { y: 0; width: 50%; height: 50%; x: 0; background: @linear-gradient(angle, rgba(222, 251, 58, 0) , rgba(222, 251, 58, 0.2)); } - - Rectangle { + + Rectangle { y: 0; width: 50%; height: 50%; @@ -48,7 +48,7 @@ component Tab { animate opacity { duration: Theme.durations.medium; } } - i-inidator := Rectangle { + i-inidator := Rectangle { width: 0; y: 0; height: 1px; @@ -60,7 +60,7 @@ component Tab { i-touch-area := TouchArea {} - states [ + states [ selected when selected : { i-inidator.width: root.width; i-title.color: Theme.palette.limon-green; @@ -75,18 +75,18 @@ export component TabWidget { vertical-stretch: 1; - VerticalLayout { - Rectangle { - vertical-stretch: 1; + VerticalLayout { + Rectangle { + vertical-stretch: 1; @children } - Rectangle { - vertical-stretch: 0; + Rectangle { + vertical-stretch: 0; background: Theme.palette.tab-gradient; - HorizontalLayout { + HorizontalLayout { alignment: center; min-height: 80px; vertical-stretch: 0; @@ -95,7 +95,7 @@ export component TabWidget { title: tab; selected: index == selected-tab; - clicked => { + clicked => { selected-tab = index; } } diff --git a/examples/energy-monitor/ui/widgets/tile.slint b/examples/energy-monitor/ui/widgets/tile.slint index dd7ae0aa995..b92c27e737f 100644 --- a/examples/energy-monitor/ui/widgets/tile.slint +++ b/examples/energy-monitor/ui/widgets/tile.slint @@ -15,7 +15,7 @@ export component Tile { BarBackground {} - VerticalLayout { + VerticalLayout { padding-left: 20px; padding-right: 20px; padding-top: 10px; @@ -38,7 +38,7 @@ export component Tile { font-weight: Theme.typo.value-big.weight; } - VerticalLayout { + VerticalLayout { i-text := Text { horizontal-alignment: center; color: Theme.palette.white; @@ -53,5 +53,5 @@ export component Tile { font-weight: Theme.typo.desciption-light.weight; } } - } + } } \ No newline at end of file diff --git a/examples/energy-monitor/ui/widgets/value_display.slint b/examples/energy-monitor/ui/widgets/value_display.slint index 87b589a11ed..45f930648ac 100644 --- a/examples/energy-monitor/ui/widgets/value_display.slint +++ b/examples/energy-monitor/ui/widgets/value_display.slint @@ -11,31 +11,31 @@ component ValueDelegate { in property unit <=> i-unit.text; in property value; in property alternative-colors; - - HorizontalLayout { + + HorizontalLayout { spacing: 15px; - + Rectangle { min_width: 1px; background: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.limon-green; horizontal-stretch: 0; } - VerticalLayout { + VerticalLayout { alignment: center; horizontal-stretch: 1; - i-title := Text { + i-title := Text { color: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.limon-green; font-size: Theme.typo.label.size; font-weight: Theme.typo.label.weight; } - HorizontalLayout { + HorizontalLayout { alignment: start; spacing: 5px; - Text { + Text { color: Theme.palette.white; text: round(display-value * 100) / 100; font-size: Theme.typo.value.size; @@ -43,7 +43,7 @@ component ValueDelegate { vertical-alignment: center; } - i-unit := Text { + i-unit := Text { y: Theme.spaces.small; vertical-alignment: center; color: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.limon-green; @@ -54,7 +54,7 @@ component ValueDelegate { } } - states [ + states [ active when active : { display-value: value; @@ -80,7 +80,7 @@ export component ValueDisplay { min-height: 70px; - i-container := Rectangle { + i-container := Rectangle { visible: !transparent-background; width: 100%; height: 100%; @@ -88,13 +88,13 @@ export component ValueDisplay { background: alternative-colors ? Theme.palette.slint-blue-gradient : Theme.palette.limon-green-gradient; } - if(model.length > 0 && !vertical) : HorizontalLayout { + if(model.length > 0 && !vertical) : HorizontalLayout { x: 15px; width: parent.width - 30px; height: 100%; padding-top: 12px; padding-bottom: 12px; - + for value in root.model : ValueDelegate { width: parent.width / model.length; horizontal-stretch: 1; diff --git a/examples/energy-monitor/ui/widgets/widgets.slint b/examples/energy-monitor/ui/widgets/widgets.slint index 75a888d3b56..9e8b8cd1eac 100644 --- a/examples/energy-monitor/ui/widgets/widgets.slint +++ b/examples/energy-monitor/ui/widgets/widgets.slint @@ -27,10 +27,10 @@ export { BarChart } export { FloatButton } export { GroupBox } export { Navigation } -export { Pagination } +export { Pagination } export { MenuButton } -export { Menu } -export { ValueDisplay, Value } +export { Menu } +export { ValueDisplay, Value } export { Tile } export { BarTiles, BarTileModel } export { TabWidget } diff --git a/examples/gallery/gallery.slint b/examples/gallery/gallery.slint index cbf20c91e28..71bd057f03d 100644 --- a/examples/gallery/gallery.slint +++ b/examples/gallery/gallery.slint @@ -14,8 +14,8 @@ component App inherits Window { title: "Slint Widgets Gallery"; icon: @image-url("../../logo/slint-logo-small-light-128x128.png"); - HorizontalLayout { - side-bar := SideBar { + HorizontalLayout { + side-bar := SideBar { title: "Slint Widgets Gallery"; model: ["Controls", "ListView", "TableView", "TextEdit", "About"]; } diff --git a/examples/gallery/ui/pages/about_page.slint b/examples/gallery/ui/pages/about_page.slint index 61eb4a7bfc7..dcdcef4977c 100644 --- a/examples/gallery/ui/pages/about_page.slint +++ b/examples/gallery/ui/pages/about_page.slint @@ -11,4 +11,3 @@ export component AboutPage inherits Page { AboutSlint {} } - \ No newline at end of file diff --git a/examples/gallery/ui/pages/controls_page.slint b/examples/gallery/ui/pages/controls_page.slint index fa793c1d8f5..3db6668386c 100644 --- a/examples/gallery/ui/pages/controls_page.slint +++ b/examples/gallery/ui/pages/controls_page.slint @@ -10,18 +10,18 @@ export component ControlsPage inherits Page { title: "Controls"; description: "This page gives an overview of the default widget set provided by Slint. The widgets are available in different styles native, fluent-(dark/light) and material-(dark/light). The widgets can be imported from \"std-widgets.slint\"."; - GroupBox { + GroupBox { vertical-stretch: 0; title: "Buttons"; - HorizontalLayout { + HorizontalLayout { spacing: 8px; alignment: start; Button { text: "Regular Button"; enabled: !GallerySettings.widgets-disabled; - } + } Button { text: "Button with Icon"; @@ -61,11 +61,11 @@ export component ControlsPage inherits Page { enabled: !GallerySettings.widgets-disabled; } } - - + + } - GroupBox { + GroupBox { title: "LineEdit"; vertical-stretch: 0; @@ -75,7 +75,7 @@ export component ControlsPage inherits Page { } } - GroupBox { + GroupBox { title: "Slider"; vertical-stretch: 0; @@ -88,23 +88,23 @@ export component ControlsPage inherits Page { } } - GroupBox { + GroupBox { title: "TabWidget"; - - TabWidget { + + TabWidget { Tab { title: "Tab 1"; - VerticalBox { + VerticalBox { alignment: start; - GroupBox { + GroupBox { title: "Content of tab 1"; - HorizontalBox { + HorizontalBox { alignment: start; - - Button { + + Button { text: "Click me"; enabled: !GallerySettings.widgets-disabled; } @@ -116,33 +116,33 @@ export component ControlsPage inherits Page { Tab { title: "Tab 2"; - VerticalBox { + VerticalBox { alignment: start; - GroupBox { + GroupBox { title: "Content of tab 2"; - VerticalBox { + VerticalBox { alignment: start; - - CheckBox { + + CheckBox { text: "Check me"; enabled: !GallerySettings.widgets-disabled; } } } - } + } } Tab { title: "Tab 3"; - VerticalBox { + VerticalBox { Text { text: "Content of tab 3"; } } } - } + } } } diff --git a/examples/gallery/ui/pages/list_view_page.slint b/examples/gallery/ui/pages/list_view_page.slint index cd3b8981846..5d584d990d4 100644 --- a/examples/gallery/ui/pages/list_view_page.slint +++ b/examples/gallery/ui/pages/list_view_page.slint @@ -9,12 +9,12 @@ export component ListViewPage inherits Page { title: "ListView"; description: "ListViews can be used to display a list of elements. The StandardListBox is like the default ListView just with a default text based definition of the visual items. Both can be imported from \"std-widgets.slint\""; - HorizontalBox { + HorizontalBox { vertical-stretch: 1; - GroupBox { + GroupBox { title: "ListView"; - ListView { + ListView { vertical-stretch: 0; for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] : HorizontalBox { Image { @@ -28,7 +28,7 @@ export component ListViewPage inherits Page { } } - GroupBox { + GroupBox { title: "StandardListView"; vertical-stretch: 0; diff --git a/examples/gallery/ui/pages/page.slint b/examples/gallery/ui/pages/page.slint index 3d27681a422..120c1cdea23 100644 --- a/examples/gallery/ui/pages/page.slint +++ b/examples/gallery/ui/pages/page.slint @@ -9,9 +9,9 @@ export component Page inherits VerticalBox { in property title: "title"; in property description: "description"; - HorizontalLayout { + HorizontalLayout { height: 24px; - Text { + Text { font-size: 20px; text <=> root.title; } @@ -19,7 +19,7 @@ export component Page inherits VerticalBox { // Spacer Rectangle {} - CheckBox { + CheckBox { horizontal-stretch: 0; text: "Disable widgets"; checked <=> GallerySettings.widgets-disabled; diff --git a/examples/gallery/ui/pages/text_edit_page.slint b/examples/gallery/ui/pages/text_edit_page.slint index 17db3905ffa..66ea291039f 100644 --- a/examples/gallery/ui/pages/text_edit_page.slint +++ b/examples/gallery/ui/pages/text_edit_page.slint @@ -8,8 +8,8 @@ import { Page } from "page.slint"; export component TextEditPage inherits Page { title: "TextEdit"; description: "Similar to LineEdit, but can be used to enter several lines of text. The widget can be imported from \"std-widgets.slint\"."; - - HorizontalBox { + + HorizontalBox { GroupBox { vertical-stretch: 0; title: "Word-Wrap"; @@ -30,6 +30,6 @@ export component TextEditPage inherits Page { wrap: no-wrap; enabled: !GallerySettings.widgets-disabled; } - } + } } } diff --git a/examples/gallery/ui/side_bar.slint b/examples/gallery/ui/side_bar.slint index fca86786be9..70161da2629 100644 --- a/examples/gallery/ui/side_bar.slint +++ b/examples/gallery/ui/side_bar.slint @@ -9,16 +9,16 @@ component SideBarItem inherits Rectangle { in property selected; in property has-focus; - min-height: l.preferred-height; + min-height: l.preferred-height; - state := Rectangle { + state := Rectangle { opacity: 0; background: StyleMetrics.window-background; animate opacity { duration: 150ms; } } - - l := HorizontalLayout { + + l := HorizontalLayout { y: (parent.height - self.height) / 2; padding: StyleMetrics.layout-padding; spacing: 0px; @@ -34,7 +34,7 @@ component SideBarItem inherits Rectangle { height: 100%; } - states [ + states [ pressed when touch.pressed : { state.opacity: 0.8; } @@ -62,14 +62,14 @@ export component SideBar inherits Rectangle { accessible-role: tab; accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item; - Rectangle { + Rectangle { background: StyleMetrics.window-background.darker(0.2); fs := FocusScope { x:0; width: 0px; // Do not react on clicks property focused-tab: 0; - + key-pressed(event) => { if (event.text == "\n") { root.current-item = root.current-focused; @@ -85,7 +85,7 @@ export component SideBar inherits Rectangle { } return reject; } - + key-released(event) => { if (event.text == " ") { root.current-item = root.current-focused; @@ -95,8 +95,8 @@ export component SideBar inherits Rectangle { } } } - - VerticalLayout { + + VerticalLayout { padding-top: StyleMetrics.layout-padding; padding-bottom: StyleMetrics.layout-padding; spacing: StyleMetrics.layout-spacing; @@ -107,9 +107,9 @@ export component SideBar inherits Rectangle { horizontal-alignment: center; } - navigation := VerticalLayout { + navigation := VerticalLayout { alignment: start; - vertical-stretch: 0; + vertical-stretch: 0; for item[index] in root.model : SideBarItem { has-focus: index == root.current-focused; text: item; @@ -118,13 +118,13 @@ export component SideBar inherits Rectangle { } } - VerticalLayout { - bottom := VerticalLayout { + VerticalLayout { + bottom := VerticalLayout { padding-left: StyleMetrics.layout-padding; padding-right: StyleMetrics.layout-padding; @children } - } + } } } diff --git a/examples/printerdemo/ui/printerdemo.slint b/examples/printerdemo/ui/printerdemo.slint index 938fb699765..9ac0d8732d5 100644 --- a/examples/printerdemo/ui/printerdemo.slint +++ b/examples/printerdemo/ui/printerdemo.slint @@ -10,7 +10,7 @@ import { PrinterQueue } from "./printer_queue.slint"; // re-export for the native code export { PrinterQueue } -import "./fonts/NotoSans-Regular.ttf"; +import "./fonts/NotoSans-Regular.ttf"; import "./fonts/NotoSans-Bold.ttf"; component SideBarIcon inherits Rectangle { diff --git a/examples/printerdemo_old/ui/printerdemo.slint b/examples/printerdemo_old/ui/printerdemo.slint index a3ec8fae4c9..61d889c87dd 100644 --- a/examples/printerdemo_old/ui/printerdemo.slint +++ b/examples/printerdemo_old/ui/printerdemo.slint @@ -209,7 +209,7 @@ export component MainWindow inherits Window { } } ] - + } } } diff --git a/examples/slide_puzzle/slide_puzzle.slint b/examples/slide_puzzle/slide_puzzle.slint index 7d32f9efe1d..d46aa989ad7 100644 --- a/examples/slide_puzzle/slide_puzzle.slint +++ b/examples/slide_puzzle/slide_puzzle.slint @@ -361,7 +361,7 @@ export component MainWindow inherits Window { } ] - + } if (root.tiles-left == 0) : Text { diff --git a/examples/todo/ui/todo.slint b/examples/todo/ui/todo.slint index afe34c5d7bb..f1ddbef004e 100644 --- a/examples/todo/ui/todo.slint +++ b/examples/todo/ui/todo.slint @@ -76,10 +76,10 @@ component MainWindow inherits Window { } } - if (root.show-header) : HorizontalBox { - alignment: start; + if (root.show-header) : HorizontalBox { + alignment: start; - CheckBox { + CheckBox { text: "Sort by name"; checked <=> root.is-sort-by-name; @@ -88,7 +88,7 @@ component MainWindow inherits Window { } } - CheckBox { + CheckBox { text: "Hide done items"; checked <=> root.hide-done-items; diff --git a/examples/virtual_keyboard/README.md b/examples/virtual_keyboard/README.md index cedd93a2c28..6b82ab47963 100644 --- a/examples/virtual_keyboard/README.md +++ b/examples/virtual_keyboard/README.md @@ -36,7 +36,7 @@ export MainWindow inherits Window { ```rust fn main() { let app = App::new().unwrap(); - + let weak = app.as_weak(); app.global::().on_key_pressed({ let weak = weak.clone(); diff --git a/internal/compiler/tests/syntax/basic/property_declaration.slint b/internal/compiler/tests/syntax/basic/property_declaration.slint index 143e511cb9a..541a700547c 100644 --- a/internal/compiler/tests/syntax/basic/property_declaration.slint +++ b/internal/compiler/tests/syntax/basic/property_declaration.slint @@ -24,5 +24,5 @@ export Test := Comp { // ^error{Cannot override property 'colspan'} property pressed; -// ^error{Cannot declare property 'pressed' when a callback with the same name exists} +// ^error{Cannot declare property 'pressed' when a callback with the same name exists} } diff --git a/internal/compiler/tests/syntax/exports/root_compo_export.slint b/internal/compiler/tests/syntax/exports/root_compo_export.slint index a452b8fbfe7..70d9afe613a 100644 --- a/internal/compiler/tests/syntax/exports/root_compo_export.slint +++ b/internal/compiler/tests/syntax/exports/root_compo_export.slint @@ -6,7 +6,7 @@ component Button { } component App { -//^warning{Component is implicitly marked for export. This is deprecated and it should be explicitly exported} +//^warning{Component is implicitly marked for export. This is deprecated and it should be explicitly exported} Button {} } diff --git a/internal/compiler/tests/syntax/exports/root_compo_export2.slint b/internal/compiler/tests/syntax/exports/root_compo_export2.slint index efb14ff860a..61c426e4e4a 100644 --- a/internal/compiler/tests/syntax/exports/root_compo_export2.slint +++ b/internal/compiler/tests/syntax/exports/root_compo_export2.slint @@ -2,6 +2,6 @@ // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial component App { -//^warning{Component is implicitly marked for export. This is deprecated and it should be explicitly exported} +//^warning{Component is implicitly marked for export. This is deprecated and it should be explicitly exported} } diff --git a/internal/compiler/widgets/material-base/comp-state-layer.slint b/internal/compiler/widgets/material-base/comp-state-layer.slint index e17b16d8cf2..2083fa6a261 100644 --- a/internal/compiler/widgets/material-base/comp-state-layer.slint +++ b/internal/compiler/widgets/material-base/comp-state-layer.slint @@ -3,13 +3,13 @@ import { md } from "md.slint"; -export component Ripple inherits Rectangle { +export component Ripple inherits Rectangle { in property ripple-x; in property ripple-y; in property active; in property has-effect; in property ripple-color <=> circle.background; - + circle := Rectangle { x: root.ripple-x - self.width / 2; y: root.ripple-y - self.width / 2; @@ -26,7 +26,7 @@ export component Ripple inherits Rectangle { } ] - + } // A touch area that also represents a visual state. @@ -36,12 +36,12 @@ export component StateLayer inherits TouchArea { in property ripple-color; in property has-ripple; in property border-radius; - + out property has-focus <=> fs.has-focus; in-out property background; in-out property checked; - + forward-focus: fs; ripple := Ripple { @@ -60,7 +60,7 @@ export component StateLayer inherits TouchArea { animate opacity { duration: 250ms; easing: ease; } animate background { duration: 250ms; } } - + fs := FocusScope { x:0; width: 0px; // Do not react on clicks diff --git a/internal/compiler/widgets/material-base/widget-item.slint b/internal/compiler/widgets/material-base/widget-item.slint index 232ee124b50..506aab9b5ac 100644 --- a/internal/compiler/widgets/material-base/widget-item.slint +++ b/internal/compiler/widgets/material-base/widget-item.slint @@ -5,7 +5,7 @@ import { StateLayer } from "comp-state-layer.slint"; import { md } from "md.slint"; // A selectable item that is used by `StandardListView` and `ComboBox`. -export component Item inherits Rectangle { +export component Item inherits Rectangle { callback clicked <=> state-layer.clicked; in property selected; @@ -17,7 +17,7 @@ export component Item inherits Rectangle { state-layer := StateLayer { checked: root.selected; background: md.sys.color.primary; - selection-background: md.sys.color.secondary-container; + selection-background: md.sys.color.secondary-container; ripple-color: md.sys.color.primary-ripple; has-ripple: true; } @@ -37,9 +37,9 @@ export component Item inherits Rectangle { } } - states [ + states [ selected when root.selected : { - state-layer.background: md.sys.color.secondary-container; - } - ] + state-layer.background: md.sys.color.secondary-container; + } + ] } \ No newline at end of file diff --git a/internal/compiler/widgets/native/std-widgets.slint b/internal/compiler/widgets/native/std-widgets.slint index 94bf6dfd964..972b4978045 100644 --- a/internal/compiler/widgets/native/std-widgets.slint +++ b/internal/compiler/widgets/native/std-widgets.slint @@ -156,8 +156,8 @@ component StandardListViewBase inherits ListView { has-hover: ta.has-hover; ta := TouchArea { - clicked => { - set-current-item(i); + clicked => { + set-current-item(i); } } } @@ -172,7 +172,7 @@ component StandardListViewBase inherits ListView { if(current-item-y < 0) { self.viewport-y += 0 - current-item-y; } - + if(current-item-y + item-height > self.visible-height) { self.viewport-y -= current-item-y + item-height - self.visible-height; } diff --git a/logo/README.md b/logo/README.md index d1f049964cd..40f0189216a 100644 --- a/logo/README.md +++ b/logo/README.md @@ -6,7 +6,7 @@ It is (manually) copied into the website under https://slint-ui.com/logo/ ### Logo - * Do not modify the logo by changing the colors, removing the box or its gradient, changing of the aspect ration, + * Do not modify the logo by changing the colors, removing the box or its gradient, changing of the aspect ration, or other alterations to the corporate identity. * The logo with the dark box is no longer recommended to use. Prefer always using the logo with the white box. @@ -21,7 +21,7 @@ It is (manually) copied into the website under https://slint-ui.com/logo/ `slint-logo-simple-light.svg` on light background or `slint-logo-simple-white.svg` on dark background. ![Slint logo simple](./slint-logo-simple-light.svg#gh-light-mode-only)![Slint logo simple](./slint-logo-simple-white.svg#gh-dark-mode-only) - + * For the rare cases where a square or circular logo is required (eg, social media avatar), `slint-logo-circle-light.svg` or `slint-logo-square-light.svg` can be used. Prefer the logo with the text on the right if possible. @@ -37,11 +37,11 @@ The Slint blue color is #0025FF ### Name -The name of the product is ***Slint***, not ~~*Slint UI*~~. +The name of the product is ***Slint***, not ~~*Slint UI*~~. `slint-ui` or `slint_ui` is used as username for online service when (and only when) `slint` is already taken. -The company (legal entity) behind Slint is *SixtyFPS GmbH*. That name should only be used to refer to the company, +The company (legal entity) behind Slint is *SixtyFPS GmbH*. That name should only be used to refer to the company, including the *GmbH*. (*SixtyFPS* was the former name of the product but should no longer be used.) Employees of SixtyFPS GmbH should still use the name *Slint* whenever possible (e.g. on conference badges) diff --git a/tests/cases/callbacks/init.slint b/tests/cases/callbacks/init.slint index d329ccfeb64..5080354f7e7 100644 --- a/tests/cases/callbacks/init.slint +++ b/tests/cases/callbacks/init.slint @@ -54,7 +54,7 @@ TestCase := Rectangle { InitOrder.observed-order += "|sub1-use-site"; } } - Sub2 { + Sub2 { } Sub3 { some-value: "|sub3"; diff --git a/tests/cases/crashes/unused_callback_alias.slint b/tests/cases/crashes/unused_callback_alias.slint index 410ca7a9fd8..c4b7fbef901 100644 --- a/tests/cases/crashes/unused_callback_alias.slint +++ b/tests/cases/crashes/unused_callback_alias.slint @@ -21,7 +21,7 @@ component TextOuter { export component TestCase inherits Window { width: 300px; height: 300px; - TextOuter { + TextOuter { } } diff --git a/tests/cases/elements/path_fit.slint b/tests/cases/elements/path_fit.slint index 18f19b78d02..9f39f6b8331 100644 --- a/tests/cases/elements/path_fit.slint +++ b/tests/cases/elements/path_fit.slint @@ -23,6 +23,6 @@ TestCase := Rectangle { commands: "M 100 300 Q 150 50 1100 400 Q 1450 500 750 500 Q 1000 600 950 600 C 325 575 350 450 150 550 Q 0 600 100 800 C 250 850 300 600 550 850 C 800 850 850 650 2000 700 "; stroke: black; stroke_width: 2px; - } + } } } diff --git a/tests/cases/text/control_keys_input.slint b/tests/cases/text/control_keys_input.slint index a78bee9adb5..92aba530ba4 100644 --- a/tests/cases/text/control_keys_input.slint +++ b/tests/cases/text/control_keys_input.slint @@ -4,7 +4,7 @@ TestCase := Window { width: 100phx; height: 100phx; - ti := TextInput { + ti := TextInput { } property input_focused: ti.has_focus; diff --git a/tests/cases/text/keyboard_modifiers.slint b/tests/cases/text/keyboard_modifiers.slint index 9a9f9d0a869..2c775398644 100644 --- a/tests/cases/text/keyboard_modifiers.slint +++ b/tests/cases/text/keyboard_modifiers.slint @@ -4,7 +4,7 @@ TestCase := Window { width: 100phx; height: 100phx; - ti := FocusScope { + ti := FocusScope { key-pressed(event) => { shift_modifier = event.modifiers.shift; alt_modifier = event.modifiers.alt; diff --git a/tests/screenshots/cases/software/basic/text.slint b/tests/screenshots/cases/software/basic/text.slint index 036ebff3073..005fe87b663 100644 --- a/tests/screenshots/cases/software/basic/text.slint +++ b/tests/screenshots/cases/software/basic/text.slint @@ -4,7 +4,7 @@ TestCase := Window { width: 64px; height: 64px; - VerticalLayout { + VerticalLayout { Text { text: "Hello Everyone"; wrap: word-wrap;