Compiler pass for the TabWidget

it will lower the TabWidget into a TabWidgetImpl and the tabs into TabImpl
slint-ui · Aug 6, 2021 · d41839a · d41839a
1 parent c58ffe1
commit d41839a
Show file tree

Hide file tree

Showing 14 changed files with 403 additions and 126 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ All notable changes to this project will be documented in this file.
  - The `clip` property can now be any expression
  - Every element now have a `visible` property
  - Added `changed` callback to the `Slider` widget
+ - Added `TabWidget` widget
 
 ### Fixed
 

diff --git a/docs/widgets.md b/docs/widgets.md
@@ -297,6 +297,36 @@ Example := Window {
 }
 ```
 
+## `TabWidget`
+
+The container for a set of tabs. TabWidget can only have `Tab` elements as children. Only one tab will be rendered at
+the time.
+
+### Properties of the `Tab` element
+
+* **`title`** (*string*): The text written in the tab bar.
+
+### Example
+
+```60
+Example := Window {
+    width: 200px;
+    height: 200px;
+    TabWidget {
+        Tab {
+            title: "First";
+            Rectangle { background: orange; }
+        }
+        Tab {
+            title: "Second";
+            Rectangle { background: pink; }
+        }
+    }
+}
+```
+
+
+
 ## `HorizontalBox`, `VerticalBox`, `GridBox`
 
 That's the same as `HorizontalLayout`, `VerticalLayout` or `GridLayout` but the spacing and padding values

diff --git a/examples/gallery/gallery.60 b/examples/gallery/gallery.60
@@ -15,7 +15,6 @@ App := Window {
     title: "SixtyFPS Gallery";
 
     VerticalBox {
-
         HorizontalBox {
             Text {
                 text: "Below are some of the standard widgets that application developers can easily re-use.";
@@ -31,88 +30,103 @@ App := Window {
             }
         }
 
-        HorizontalBox {
-            alignment: start;
-            GroupBox {
-                title: "Button";
-                enabled: !disable_toggle.checked;
-
-                Button {
-                    text: "Regular Button";
-                    enabled: !disable_toggle.checked;
+        TabWidget {
+            Tab {
+                title: "Controls";
+                VerticalBox {
+                    alignment: start;
+                    HorizontalBox {
+                        alignment: start;
+                        GroupBox {
+                            title: "Button";
+                            enabled: !disable_toggle.checked;
+
+                            Button {
+                                text: "Regular Button";
+                                enabled: !disable_toggle.checked;
+                            }
+                        }
+
+                        GroupBox {
+                            title: "Button with Icon";
+                            enabled: !disable_toggle.checked;
+
+                            Button {
+                                text: "Regular Button";
+                                icon: @image-url("thumbsup.png");
+                                enabled: !disable_toggle.checked;
+                            }
+                        }
+
+                        GroupBox {
+                            title: "CheckBox";
+                            enabled: !disable_toggle.checked;
+                            checkbox := CheckBox {
+                                text: checkbox.checked ? "(checked)" : "(unchecked)";
+                                checked: true;
+                                enabled: !disable_toggle.checked;
+                            }
+                        }
+                    }
+
+                    HorizontalBox {
+                        alignment: start;
+                        GroupBox {
+                            title: "SpinBox";
+                            enabled: !disable_toggle.checked;
+                            SpinBox {
+                                value: 42;
+                                enabled: !disable_toggle.checked;
+                            }
+                        }
+
+                        GroupBox {
+                            title: "ComboBox";
+                            enabled: !disable_toggle.checked;
+                            ComboBox {
+                                model: ["Select Something", "From this", "Combobox"];
+                                enabled: !disable_toggle.checked;
+                            }
+                        }
+                    }
+
+                    GroupBox {
+                        title: "Slider";
+                        enabled: !disable_toggle.checked;
+                        Slider {
+                            value: 42;
+                            enabled: !disable_toggle.checked;
+                        }
+                    }
+
+                    GroupBox {
+                        title: "LineEdit";
+                        enabled: !disable_toggle.checked;
+                        LineEdit {
+                            placeholder-text: "Enter some text";
+                            enabled: !disable_toggle.checked;
+                        }
+                    }
                 }
             }
-
-            GroupBox {
-                title: "Button with Icon";
-                enabled: !disable_toggle.checked;
-
-                Button {
-                    text: "Regular Button";
-                    icon: @image-url("thumbsup.png");
+            Tab {
+                title: "List View";
+                GroupBox {
+                    title: "StandardListView";
                     enabled: !disable_toggle.checked;
+                    StandardListView {
+                        model: [
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
+                        ];
+                    }
                 }
             }
-
-            GroupBox {
-                title: "CheckBox";
-                enabled: !disable_toggle.checked;
-                checkbox := CheckBox {
-                    text: checkbox.checked ? "(checked)" : "(unchecked)";
-                    checked: true;
-                    enabled: !disable_toggle.checked;
-                }
-            }
-        }
-
-        HorizontalBox {
-            alignment: start;
-            GroupBox {
-                title: "SpinBox";
-                enabled: !disable_toggle.checked;
-                SpinBox {
-                    value: 42;
-                    enabled: !disable_toggle.checked;
-                }
-            }
-
-            GroupBox {
-                title: "ComboBox";
-                enabled: !disable_toggle.checked;
-                ComboBox {
-                    model: ["Select Something", "From this", "Combobox"];
-                    enabled: !disable_toggle.checked;
-                }
-            }
-        }
-
-        GroupBox {
-            title: "Slider";
-            enabled: !disable_toggle.checked;
-            Slider {
-                value: 42;
-                enabled: !disable_toggle.checked;
-            }
-        }
-
-        GroupBox {
-            title: "LineEdit";
-            enabled: !disable_toggle.checked;
-            LineEdit {
-                placeholder-text: "Enter some text";
-                enabled: !disable_toggle.checked;
-            }
-        }
-
-        GroupBox {
-            title: "StandardListView";
-            enabled: !disable_toggle.checked;
-            StandardListView {
-                model: [
-                    {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
-                    {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
-                ];
-            }
         }
     }
 }

diff --git a/sixtyfps_compiler/builtins.60 b/sixtyfps_compiler/builtins.60
@@ -367,6 +367,8 @@ export TabWidget := _ {
     property <length> width;
     property <length> height;
 
+    property <int> current_index;
+
     //-disallow_global_types_as_child_elements
     Tab {}
     //-default_size_binding:expands_to_parent_geometry
@@ -466,6 +468,7 @@ export NativeGroupBox := _ {
     property <length> native_padding_right: native_output;
     property <length> native_padding_top: native_output;
     property <length> native_padding_bottom: native_output;
+    //-default_size_binding:expands_to_parent_geometry
     //-is_internal
 }
 

diff --git a/sixtyfps_compiler/passes.rs b/sixtyfps_compiler/passes.rs
@@ -31,6 +31,7 @@ mod lower_layout;
 mod lower_popups;
 mod lower_shadows;
 mod lower_states;
+mod lower_tabwidget;
 mod materialize_fake_properties;
 mod move_declarations;
 mod remove_aliases;
@@ -73,6 +74,7 @@ pub async fn run_passes(
         .chain(std::iter::once(root_component))
     {
         compile_paths::compile_paths(component, &doc.local_registry, diag);
+        lower_tabwidget::lower_tabwidget(component, &mut type_loader, diag).await;
     }
 
     if compiler_config.embed_resources {

diff --git a/sixtyfps_compiler/passes/default_geometry.rs b/sixtyfps_compiler/passes/default_geometry.rs
@@ -125,6 +125,9 @@ fn gen_layout_info_prop(elem: &ElementRc) {
         .borrow()
         .children
         .iter()
+        .filter(|c| {
+            !c.borrow().bindings.contains_key("x") && !c.borrow().bindings.contains_key("y")
+        })
         .filter_map(|c| c.borrow().layout_info_prop.clone())
         .collect::<Vec<_>>();
 

diff --git a/sixtyfps_compiler/passes/lower_popups.rs b/sixtyfps_compiler/passes/lower_popups.rs
@@ -7,7 +7,7 @@
     This file is also available under commercial licensing terms.
     Please contact info@sixtyfps.io for more information.
 LICENSE END */
-//! Passe that compute the layout constraint
+//! Passe that transform the PopupWindow element into a component
 
 use crate::diagnostics::BuildDiagnostics;
 use crate::expression_tree::{Expression, NamedReference};
@@ -16,7 +16,6 @@ use crate::object_tree::*;
 use crate::typeregister::TypeRegister;
 use std::rc::Rc;
 
-/// Currently this just removes the layout from the tree
 pub fn lower_popups(
     component: &Rc<Component>,
     type_register: &TypeRegister,