Add the Dialog element

task-jp · Sep 29, 2021 · 7f05bfa · 7f05bfa
1 parent 3cf9089
commit 7f05bfa
Show file tree

Hide file tree

Showing 15 changed files with 452 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
  - sixtyfps-compiler and sixtyfps-viewer can read the .60 file content from stdin by passing `-`
  - sixtyfps-viewer gained ability to read or save the property values to a json file with `--save-data` and `--load-data`
  - New `StandardButton` widget
+ - New `Dialog` element
  - `sixtyfps::Image` has now a `path()` accessor function in Rust and C++ to access the optional path
    of the file on disk that's backing the image.
 

diff --git a/docs/builtin_elements.md b/docs/builtin_elements.md
@@ -649,6 +649,34 @@ Example := Window {
 }
 ```
 
+## `Dialog`
+
+Dialog is like a window, but it has buttons that are automatically laid out.
+
+A Dialog should have one main element for the content, that is not a button.
+And the window can have any number of `StandardButton` widget.
+The button will be layed out in an order that depends on the platform.
+
+The `kind` property of the `StandardButton`s needs to be set to a specific value. it cannot be a complex expression.
+
+### Properties
+
+* **`title`** (*string*): The window title that is shown in the title bar.
+* **`icon`** (*image*): The window icon shown in the title bar or the task bar on window managers supporting it.
+
+### Example
+
+```60
+import { StandardButton } from "sixtyfps_widgets.60";
+Example := Dialog {
+    Text {
+      text: "This is a dialog box";
+    }
+    StandardButton { kind: ok; }
+    StandardButton { kind: cancel; }
+}
+```
+
 # Builtin Structures
 
 ## `Point`

diff --git a/sixtyfps_compiler/builtins.60 b/sixtyfps_compiler/builtins.60
@@ -399,6 +399,8 @@ export PopupWindow := _ {
     //show() is hardcoded in typeregister.rs
 }
 
+export Dialog := WindowItem {}
+
 PropertyAnimation := _ {
     property <duration> duration;
     property <easing> easing;

diff --git a/sixtyfps_compiler/generator/cpp.rs b/sixtyfps_compiler/generator/cpp.rs
@@ -1893,16 +1893,25 @@ fn compile_expression(
             let (padding, spacing) = generate_layout_padding_and_spacing(&layout.geometry, *o, component);
             let cells = grid_layout_cell_data(layout, *o, component);
             let size = layout_geometry_size(&layout.geometry.rect, *o, component);
-            format!("[&] {{ \
+            let dialog = if let (Some(button_roles), Orientation::Horizontal) = (&layout.dialog_button_roles, *o) {
+                format!("sixtyfps::cbindgen_private::DialogButtonRole roles[] = {{ {r} }};\
+                        sixtyfps::cbindgen_private::sixtyfps_reorder_dialog_button_layout(cells,\
+                            sixtyfps::Slice<sixtyfps::cbindgen_private::DialogButtonRole>{{ roles, std::size(roles) }});\
+                        ",
+                    r = button_roles.iter().map(|r| format!("sixtyfps::cbindgen_private::DialogButtonRole::{}", r)).join(", ")
+                )
+            } else { String::new() };
+            format!("[&] {{\
                     const auto padding = {p};\
-                    sixtyfps::GridLayoutCellData cells[] = {{ {c} }}; \
-                    const sixtyfps::Slice<sixtyfps::GridLayoutCellData> slice{{ cells, std::size(cells)}}; \
-                    const sixtyfps::GridLayoutData grid {{ {sz},  {s}, &padding, slice }};
-                    sixtyfps::SharedVector<float> result;
+                    sixtyfps::GridLayoutCellData cells[] = {{ {c} }};\
+                    {dialog}
+                    const sixtyfps::Slice<sixtyfps::GridLayoutCellData> slice{{ cells, std::size(cells)}};\
+                    const sixtyfps::GridLayoutData grid {{ {sz},  {s}, &padding, slice }};\
+                    sixtyfps::SharedVector<float> result;\
                     sixtyfps::sixtyfps_solve_grid_layout(&grid, &result);\
-                    return result;
+                    return result;\
                 }}()",
-                p = padding, c = cells, s = spacing, sz = size
+                dialog = dialog, p = padding, c = cells, s = spacing, sz = size
             )
         }
         Expression::SolveLayout(Layout::BoxLayout(layout), o) => {

diff --git a/sixtyfps_compiler/generator/rust.rs b/sixtyfps_compiler/generator/rust.rs
@@ -1598,12 +1598,26 @@ fn compile_expression(expr: &Expression, component: &Rc<Component>) -> TokenStre
             let (padding, spacing) = generate_layout_padding_and_spacing(&layout.geometry, *o, component);
             let cells = grid_layout_cell_data(layout, *o, component);
             let size = layout_geometry_size(&layout.geometry.rect, *o, component);
-            quote!(solve_grid_layout(&GridLayoutData{
-                size: #size,
-                spacing: #spacing,
-                padding: #padding,
-                cells: Slice::from_slice(&#cells),
-            }))
+            if let (Some(button_roles), Orientation::Horizontal) = (&layout.dialog_button_roles, *o) {
+                let role = button_roles.iter().map(|x| format_ident!("{}", x));
+                quote!({
+                    let mut cells = #cells;
+                    reorder_dialog_button_layout(&mut cells, &[ #(DialogButtonRole::#role),* ]);
+                    solve_grid_layout(&GridLayoutData{
+                        size: #size,
+                        spacing: #spacing,
+                        padding: #padding,
+                        cells: Slice::from_slice(&cells),
+                    })
+                })
+            } else {
+                quote!(solve_grid_layout(&GridLayoutData{
+                    size: #size,
+                    spacing: #spacing,
+                    padding: #padding,
+                    cells: Slice::from_slice(&#cells),
+                }))
+            }
         }
         Expression::SolveLayout(Layout::BoxLayout(layout), o) => {
             let (padding, spacing) = generate_layout_padding_and_spacing(&layout.geometry, *o, component);
@@ -1626,8 +1640,8 @@ fn compile_expression(expr: &Expression, component: &Rc<Component>) -> TokenStre
             })
         }
         Expression::SolveLayout(Layout::PathLayout(layout), _) => {
-            let width = layout_geometry_size(&layout.rect,  Orientation::Horizontal, component);
-            let height = layout_geometry_size(&layout.rect,  Orientation::Vertical, component);
+            let width = layout_geometry_size(&layout.rect, Orientation::Horizontal, component);
+            let height = layout_geometry_size(&layout.rect, Orientation::Vertical, component);
             let elements = compile_path(&layout.path, component);
             let get_prop = |nr: &Option<NamedReference>| {
                 nr.as_ref().map_or_else(

diff --git a/sixtyfps_compiler/layout.rs b/sixtyfps_compiler/layout.rs
@@ -393,6 +393,10 @@ pub struct GridLayout {
     pub elems: Vec<GridLayoutElement>,
 
     pub geometry: LayoutGeometry,
+
+    /// When this GridLyout is actually the layout of a Dialog, then the cells start with all the buttons,
+    /// and this variable contains their roles. The string is actually one of the values from the sixtyfps_corelib::layout::DialogButtonRole
+    pub dialog_button_roles: Option<Vec<&'static str>>,
 }
 
 impl GridLayout {

diff --git a/sixtyfps_compiler/passes.rs b/sixtyfps_compiler/passes.rs
@@ -90,7 +90,7 @@ pub async fn run_passes(
     lower_states::lower_states(root_component, &doc.local_registry, diag);
     repeater_component::process_repeater_components(root_component);
     lower_popups::lower_popups(root_component, &doc.local_registry, diag);
-    lower_layout::lower_layouts(root_component, &global_type_registry.borrow(), diag);
+    lower_layout::lower_layouts(root_component, &mut type_loader, diag).await;
     z_order::reorder_by_z_order(root_component, diag);
     lower_shadows::lower_shadow_properties(root_component, &doc.local_registry, diag);
     clip::handle_clip(root_component, &global_type_registry.borrow(), diag);

diff --git a/sixtyfps_compiler/passes/apply_default_properties_from_style.rs b/sixtyfps_compiler/passes/apply_default_properties_from_style.rs
@@ -69,7 +69,7 @@ pub async fn apply_default_properties_from_style(
                         .into()
                     });
                 }
-                "Window" | "WindowItem" => {
+                "Dialog" | "Window" | "WindowItem" => {
                     elem.bindings.set_binding_if_not_set("background".into(), || {
                         Expression::PropertyReference(NamedReference::new(
                             &style_metrics.root_element,

diff --git a/sixtyfps_compiler/passes/ensure_window.rs b/sixtyfps_compiler/passes/ensure_window.rs
@@ -18,7 +18,8 @@ use std::collections::HashSet;
 use std::rc::Rc;
 
 pub fn ensure_window(component: &Rc<Component>, type_register: &TypeRegister) {
-    if component.root_element.borrow().base_type.to_string() == "Window" {
+    if matches!(component.root_element.borrow().base_type.to_string().as_str(), "Window" | "Dialog")
+    {
         return; // already a window, nothing to do
     }