std-widgets: added LayoutSettings global

docs/reference/src/language/builtins/globals.md

@@ -42,6 +42,16 @@ export component MyCustomWidget {
 }
 ```
 
+## `LayoutSpec`
+
+Use `LayoutSpec` to create custom widgets that match the layout settings of
+the selected style e.g. fluent, cupertino, material, or qt.
+
+### Properties
+
+-   **`layout-spacing`** (_out_ _length_): Defines the default layout spacing. This spacing is also used by `VerticalBox`, `HorizontalBox` and `GridBox`.
+-   **`layout-padding`** (_out_ _length_): Defines the default layout padding. This padding is also used by `VerticalBox`, `HorizontalBox` and `GridBox`.
+
 ## `TextInputInterface`
 
 The `TextInputInterface.text-input-focused` property can be used to find out if a `TextInput` element has the focus.

internal/compiler/widgets/qt/layouts.slint → internal/compiler/widgets/common/layout.slint

@@ -1,17 +1,17 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
+import { LayoutSpec } from "std-widgets-impl.slint";
+
 export component VerticalBox inherits VerticalLayout {
-    spacing: NativeStyleMetrics.layout-spacing;
-    padding: NativeStyleMetrics.layout-spacing;
+    spacing: LayoutSpec .layout-spacing;
+    padding: LayoutSpec .layout-padding;
 }
-
 export component HorizontalBox inherits HorizontalLayout {
-    spacing: NativeStyleMetrics.layout-spacing;
-    padding: NativeStyleMetrics.layout-spacing;
+    spacing: LayoutSpec .layout-spacing;
+    padding: LayoutSpec .layout-padding;
 }
-
 export component GridBox inherits GridLayout {
-    spacing: NativeStyleMetrics.layout-spacing;
-    padding: NativeStyleMetrics.layout-spacing;
-}
+    spacing: LayoutSpec .layout-spacing;
+    padding: LayoutSpec .layout-padding;
+}

internal/compiler/widgets/cosmic/datepicker.slint

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { CosmicPalette, CosmicFontSettings, Icons } from "styling.slint";
 import { MenuBorder } from "./components.slint";

internal/compiler/widgets/cosmic/std-widgets-impl.slint

@@ -7,12 +7,12 @@ export { ScrollView } from "scrollview.slint";
 export { ListItem } from "components.slint";
 export { LineEdit } from "lineedit.slint";
 
-import { CosmicPalette } from "styling.slint";
+import { CosmicPalette, CosmicLayoutSpec } from "styling.slint";
 
 export global StyleMetrics  {
-    out property <length> layout-spacing: 8px;
-    out property <length> layout-padding: 8px;
-    out property <length> text-cursor-width: 1px;
+    out property <length> layout-spacing: CosmicLayoutSpec.layout-spacing;
+    out property <length> layout-padding: CosmicLayoutSpec.layout-padding;
+    out property <length> text-cursor-width: CosmicLayoutSpec.text-cursor-width;
     out property <color> window-background: CosmicPalette.background;
     out property <color> default-text-color: CosmicPalette.foreground;
     out property <color> textedit-background: CosmicPalette.background;
@@ -36,3 +36,8 @@ export global Palette {
     out property <brush> border: CosmicPalette.border;
     in-out property <ColorScheme> color-scheme <=> CosmicPalette.color-scheme;
 }
+
+export global LayoutSpec {
+    out property <length> layout-spacing: CosmicLayoutSpec.layout-spacing;
+    out property <length> layout-padding: CosmicLayoutSpec.layout-padding;
+}

internal/compiler/widgets/cosmic/std-widgets.slint

@@ -17,7 +17,7 @@ export { Slider } from "slider.slint";
 export { SpinBox } from "spinbox.slint";
 export { Spinner } from "spinner.slint";
 export { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint";
-export { VerticalBox, HorizontalBox, GridBox } from "layouts.slint";
+export { VerticalBox, HorizontalBox, GridBox } from "../common/layout.slint";
 export { Switch } from "switch.slint";
 export { TextEdit } from "textedit.slint";
 export { TimePickerPopup, Time } from "time-picker.slint";

internal/compiler/widgets/cosmic/styling.slint

@@ -69,6 +69,12 @@ export global CosmicPalette {
     out property <brush> state-secondary: dark-color-scheme ? #000000 : #ffffff;
 }
 
+export global CosmicLayoutSpec {
+    out property <length> layout-spacing: 8px;
+    out property <length> layout-padding: 8px;
+    out property <length> text-cursor-width: 1px;
+}
+
 export global Icons {
     out property <image> arrow-down: @image-url("_arrow_down.svg");
     out property <image> arrow-up: @image-url("_arrow_up.svg");

internal/compiler/widgets/cosmic/time-picker.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
 import { Time, TimePickerBase } from "../common/time-picker-base.slint";
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { CosmicPalette, CosmicFontSettings, Icons } from "styling.slint";
 import { StandardButton } from "../common/standardbutton.slint";

internal/compiler/widgets/cupertino/datepicker.slint

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { CupertinoPalette, CupertinoFontSettings, Icons } from "styling.slint";
 import { MenuBorder } from "./components.slint";

internal/compiler/widgets/cupertino/std-widgets-impl.slint

@@ -5,12 +5,12 @@ export { Button } from "button.slint";
 export { ScrollView } from "scrollview.slint";
 export { ListItem } from "components.slint";
 export { LineEdit } from "lineedit.slint";
-import { CupertinoPalette } from "styling.slint";
+import { CupertinoPalette, CupertinoLayoutSpec } from "styling.slint";
 
 export global StyleMetrics  {
-    out property <length> layout-spacing: 10px;
-    out property <length> layout-padding: 12px;
-    out property <length> text-cursor-width: 1px;
+    out property <length> layout-spacing: CupertinoLayoutSpec.layout-spacing;
+    out property <length> layout-padding: CupertinoLayoutSpec.layout-padding;
+    out property <length> text-cursor-width: CupertinoLayoutSpec.text-cursor-width;
     out property <color> window-background: CupertinoPalette.background;
     out property <color> default-text-color: CupertinoPalette.foreground;
     out property <color> textedit-background: CupertinoPalette.alternate-background;
@@ -34,3 +34,8 @@ export global Palette {
     out property <brush> border: CupertinoPalette.border;
     in-out property <ColorScheme> color-scheme <=> CupertinoPalette.color-scheme;
 }
+
+export global LayoutSpec {
+    out property <length> layout-spacing: CupertinoLayoutSpec.layout-spacing;
+    out property <length> layout-padding: CupertinoLayoutSpec.layout-padding;
+}

internal/compiler/widgets/cupertino/std-widgets.slint

@@ -17,7 +17,7 @@ export { Slider } from "slider.slint";
 export { SpinBox } from "spinbox.slint";
 export { Spinner } from "spinner.slint";
 export { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint";
-export { VerticalBox, HorizontalBox, GridBox } from "layouts.slint";
+export { VerticalBox, HorizontalBox, GridBox } from "../common/layout.slint";
 export { Switch } from "switch.slint";
 export { TextEdit } from "textedit.slint";
 export { TimePickerPopup, Time } from "time-picker.slint";

internal/compiler/widgets/cupertino/styling.slint

@@ -82,6 +82,12 @@ export global CupertinoPalette {
     out property <brush> dimmer: @linear-gradient(180deg, #FFFFFFFF 100%, #FFFFFF00 0%);
 }
 
+export global CupertinoLayoutSpec {
+    out property <length> layout-spacing: 10px;
+    out property <length> layout-padding: 12px;
+    out property <length> text-cursor-width: 1px;
+}
+
 export global Icons {
     out property <image> arrow-down: @image-url("_arrow-down.svg");
     out property <image> arrow-up: @image-url("_arrow-up.svg");

internal/compiler/widgets/cupertino/time-picker.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
 import { Time, TimePickerBase } from "../common/time-picker-base.slint";
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { CupertinoPalette, CupertinoFontSettings, Icons } from "styling.slint";
 import { MenuBorder } from "./components.slint";

internal/compiler/widgets/fluent/datepicker.slint

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { FluentPalette, FluentFontSettings, Icons } from "styling.slint";
 import { MenuBorder } from "./components.slint";

internal/compiler/widgets/fluent/std-widgets-impl.slint

@@ -5,12 +5,12 @@ export { Button } from "button.slint";
 export { ScrollView } from "scrollview.slint";
 export { ListItem } from "components.slint";
 export { LineEdit } from "lineedit.slint";
-import { FluentPalette } from "styling.slint";
+import { FluentPalette, FluentLayoutSpec } from "styling.slint";
 
 export global StyleMetrics  {
-    out property <length> layout-spacing: 8px;
-    out property <length> layout-padding: 8px;
-    out property <length> text-cursor-width: 1px;
+    out property <length> layout-spacing: FluentLayoutSpec.layout-spacing;
+    out property <length> layout-padding: FluentLayoutSpec.layout-padding;
+    out property <length> text-cursor-width: FluentLayoutSpec.text-cursor-width;
     out property <color> window-background: FluentPalette.background;
     out property <color> default-text-color: FluentPalette.foreground;
     out property <color> textedit-background: FluentPalette.background;
@@ -34,3 +34,8 @@ export global Palette {
     out property <brush> border: FluentPalette.border;
     in-out property <ColorScheme> color-scheme <=> FluentPalette.color-scheme;
 }
+
+export global LayoutSpec {
+    out property <length> layout-spacing: FluentLayoutSpec.layout-spacing;
+    out property <length> layout-padding: FluentLayoutSpec.layout-padding;
+}

internal/compiler/widgets/fluent/std-widgets.slint

@@ -17,7 +17,7 @@ export { Slider } from "slider.slint";
 export { SpinBox } from "spinbox.slint";
 export { Spinner } from "spinner.slint";
 export { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint";
-export { VerticalBox, HorizontalBox, GridBox } from "layouts.slint";
+export { VerticalBox, HorizontalBox, GridBox } from "../common/layout.slint";
 export { Switch } from "switch.slint";
 export { TextEdit } from "textedit.slint";
 export { TimePickerPopup, Time } from "time-picker.slint";

internal/compiler/widgets/fluent/styling.slint

@@ -115,3 +115,9 @@ export global Icons {
 export global FluentSizeSettings {
     out property <length> item-height: 40px;
 }
+
+export global FluentLayoutSpec {
+    out property <length> layout-spacing: 8px;
+    out property <length> layout-padding: 8px;
+    out property <length> text-cursor-width: 1px;
+}

internal/compiler/widgets/fluent/time-picker.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
 import { Time, TimePickerBase } from "../common/time-picker-base.slint";
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { FluentPalette, FluentFontSettings, Icons } from "styling.slint";
 import { MenuBorder } from "./components.slint";

internal/compiler/widgets/material/datepicker.slint

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { TextButton } from "./button.slint";
 import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
 

internal/compiler/widgets/material/std-widgets-impl.slint

@@ -5,17 +5,16 @@
 export { Button } from "button.slint";
 export { CheckBox } from "checkbox.slint";
 export { ScrollView } from "scrollview.slint";
-import { MaterialPalette } from "styling.slint";
+import { MaterialPalette, MaterialLayoutSpec } from "styling.slint";
 export { Switch } from "switch.slint";
 export { ListItem } from "components.slint";
 export { LineEdit } from "lineedit.slint";
 
 
 export global StyleMetrics  {
-    out property <length> layout-spacing: 16px;
-    out property <length> layout-padding: 16px;
-    out property <length> text-cursor-width: 2px;
-
+    out property <length> layout-spacing: MaterialLayoutSpec.layout-spacing;
+    out property <length> layout-padding: MaterialLayoutSpec.layout-padding;
+    out property <length> text-cursor-width: MaterialLayoutSpec.text-cursor-width;
     out property <color> default-text-color: MaterialPalette.foreground;
     out property <color> textedit-background: transparent;
     out property <color> textedit-text-color: MaterialPalette.foreground;
@@ -40,3 +39,8 @@ export global Palette {
     out property <brush> border: MaterialPalette.border;
     in-out property <ColorScheme> color-scheme <=> MaterialPalette.color-scheme;
 }
+
+export global LayoutSpec {
+    out property <length> layout-spacing: MaterialLayoutSpec.layout-spacing;
+    out property <length> layout-padding: MaterialLayoutSpec.layout-padding;
+}

internal/compiler/widgets/material/std-widgets.slint

@@ -9,7 +9,7 @@ export { StyleMetrics, ScrollView, Button, CheckBox, Palette  } from "std-widget
 export { LineEdit } from "lineedit.slint";
 export { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint";
 export { GroupBox } from "groupbox.slint";
-export { VerticalBox, HorizontalBox, GridBox } from "layouts.slint";
+export { VerticalBox, HorizontalBox, GridBox } from "../common/layout.slint";
 export { Slider } from "slider.slint";
 export { ComboBox } from "combobox.slint";
 export { ListView, StandardListView } from "../common/listview.slint";

internal/compiler/widgets/material/styling.slint

@@ -69,6 +69,12 @@ export global MaterialPalette {
     }
 }
 
+export global MaterialLayoutSpec {
+    out property <length> layout-spacing: 16px;
+    out property <length> layout-padding: 16px;
+    out property <length> text-cursor-width: 2px;
+}
+
 export global Icons {
     out property <image> arrow-downward: @image-url("_arrow-downward.svg");
     out property <image> arrow-drop-down: @image-url("_arrow-drop-down.svg");

internal/compiler/widgets/material/time-picker.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
 import { Time, TimePickerBase } from "../common/time-picker-base.slint";
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { IconButton, TextButton } from "./button.slint";
 import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
 

internal/compiler/widgets/qt/datepicker.slint

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { VerticalBox } from "./layouts.slint";
+import { VerticalBox } from "../common/layout.slint";
 import { Button } from "./button.slint";
 import { Palette } from "./std-widgets-impl.slint";
 import { StandardButton } from "../common/standardbutton.slint";