Enum LayoutGridTrack 

pub enum LayoutGridTrack {
    Auto,
    Points(f32),
    Fraction(f32),
    MinMaxPointsFraction {
        min: f32,
        max_fraction: f32,
    },
}

Variants

Auto

Points(f32)

Fraction(f32)

MinMaxPointsFraction

Fields

min: f32

max_fraction: f32

Implementations

impl LayoutGridTrack

pub const fn auto() -> Self

pub const fn points(value: f32) -> Self

Examples found in repository

examples/showcase.rs (line 12488)

fn styling_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let preview_scene_size = style_preview_scene_size(state.styling);
    let preview_min_width = preview_scene_size.width + 16.0;
    let preview_min_height = preview_scene_size.height + 16.0;
    let body_min_width = STYLING_CONTROLS_WIDTH + 1.0 + preview_min_width + 20.0;
    let body = section_with_min_viewport(
        ui,
        parent,
        "styling",
        "Styling",
        UiSize::new(body_min_width, preview_min_height),
    );
    let grid_layout = operad::layout::with_grid_template_columns(
        Layout::grid()
            .size(LayoutSize::percent(1.0, 1.0))
            .gap(LayoutGap::points(10.0, 10.0))
            .to_layout_style(),
        [
            LayoutGridTrack::points(STYLING_CONTROLS_WIDTH),
            LayoutGridTrack::points(1.0),
            LayoutGridTrack::minmax_points_fraction(preview_min_width, 1.0),
        ],
    );
    let grid = ui.add_child(body, UiNode::container("styling.grid", grid_layout));
    let controls = ui.add_child(
        grid,
        UiNode::container(
            "styling.controls",
            LayoutStyle::column()
                .with_width(STYLING_CONTROLS_WIDTH)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(6.0),
        ),
    );
    style_edge_group(
        ui,
        controls,
        "styling.inner",
        "Inner margin",
        "styling.inner_same",
        state.styling.inner_same,
        [
            ("Left", "styling.inner", state.styling.inner_margin),
            ("Right", "styling.inner_right", state.styling.inner_right),
            ("Top", "styling.inner_top", state.styling.inner_top),
            ("Bottom", "styling.inner_bottom", state.styling.inner_bottom),
        ],
        0.0..32.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.outer",
        "Outer margin",
        "styling.outer_same",
        state.styling.outer_same,
        [
            ("Left", "styling.outer", state.styling.outer_margin),
            ("Right", "styling.outer_right", state.styling.outer_right),
            ("Top", "styling.outer_top", state.styling.outer_top),
            ("Bottom", "styling.outer_bottom", state.styling.outer_bottom),
        ],
        0.0..40.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.radius",
        "Corner radius",
        "styling.radius_same",
        state.styling.radius_same,
        [
            ("NW", "styling.radius", state.styling.corner_radius),
            ("NE", "styling.radius_ne", state.styling.corner_ne),
            ("SW", "styling.radius_sw", state.styling.corner_sw),
            ("SE", "styling.radius_se", state.styling.corner_se),
        ],
        0.0..28.0,
    );
    style_fill_group(ui, controls, state);
    style_stroke_group(ui, controls, state);
    style_shadow_group(ui, controls, state);
    widgets::separator(
        ui,
        grid,
        "styling.preview.separator",
        widgets::SeparatorOptions::vertical().with_layout(
            LayoutStyle::new()
                .with_width(1.0)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0),
        ),
    );

    let preview = ui.add_child(
        grid,
        UiNode::container(
            "styling.preview",
            operad::layout::with_min_size(
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0)
                    .padding(8.0),
                operad::layout::px(preview_min_width),
                operad::layout::px(preview_min_height),
            ),
        )
        .with_visual(UiVisual::panel(color(17, 20, 25), None, 0.0)),
    );
    style_preview(ui, preview, state.styling);
}

#[allow(clippy::too_many_arguments)]
fn style_edge_group(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    same_action: &'static str,
    same: bool,
    values: [(&'static str, &'static str, f32); 4],
    range: std::ops::Range<f32>,
) {
    let group = style_control_group(ui, parent, format!("{name}.group"));
    style_group_title(ui, group, format!("{name}.title"), title);
    let fields = ui.add_child(
        group,
        UiNode::container(
            format!("{name}.fields"),
            LayoutStyle::column()
                .with_width(138.0)
                .with_flex_shrink(0.0)
                .gap(3.0),
        ),
    );
    style_compact_checkbox(ui, fields, same_action, "same", same);
    if same {
        style_number_row(ui, fields, values[0].1, "All", values[0].2, range, 0);
    } else {
        for (label, action, value) in values {
            style_number_row(ui, fields, action, label, value, range.clone(), 0);
        }
    }
}

fn style_fill_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.fill.group");
    style_group_title(ui, group, "styling.fill.title", "Fill");
    let fields = style_group_fields(
        ui,
        group,
        "styling.fill.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.fill_color_button",
        "",
        state.styling.fill_color(),
        "Pick fill color",
    );
    if state.styling_fill_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.fill_picker",
            &state.styling_fill_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Fill")
                .with_action_prefix("styling.fill_picker"),
        );
    }
}

fn style_stroke_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.stroke.group");
    style_group_title(ui, group, "styling.stroke.title", "Stroke");
    let fields = style_group_fields(
        ui,
        group,
        "styling.stroke.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let width_row = row(ui, fields, "styling.stroke.row", 6.0);
    style_inline_number(
        ui,
        width_row,
        "styling.stroke",
        "width",
        state.styling.stroke_width,
        0.0..STYLING_STROKE_MAX,
        1,
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(60.0)
                .with_height(20.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action("styling.stroke");
    options.fill_color = color(120, 170, 230);
    widgets::slider(
        ui,
        width_row,
        "styling.stroke.slider",
        (state.styling.stroke_width / STYLING_STROKE_MAX).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.stroke_color_button",
        "",
        state.styling.stroke_color(),
        "Pick stroke color",
    );
    if state.styling_stroke_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.stroke_picker",
            &state.styling_stroke_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Stroke color")
                .with_action_prefix("styling.stroke_picker"),
        );
    }
}

fn style_shadow_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.shadow.group");
    style_group_title(ui, group, "styling.shadow.title", "Shadow");
    let fields = style_group_fields(
        ui,
        group,
        "styling.shadow.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let offsets = row(ui, fields, "styling.shadow.offsets", 6.0);
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_x",
        "x",
        state.styling.shadow_x,
        -24.0..24.0,
        0,
    );
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_y",
        "y",
        state.styling.shadow_y,
        -24.0..24.0,
        0,
    );
    let spread = row(ui, fields, "styling.shadow.blur_spread", 6.0);
    style_inline_number(
        ui,
        spread,
        "styling.shadow",
        "blur",
        state.styling.shadow_blur,
        0.0..32.0,
        0,
    );
    style_inline_number(
        ui,
        spread,
        "styling.shadow_spread",
        "spread",
        state.styling.shadow_spread,
        0.0..16.0,
        0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.shadow_color_button",
        "",
        state.styling.shadow_color(),
        "Pick shadow color",
    );
    if state.styling_shadow_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.shadow_picker",
            &state.styling_shadow_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Shadow color")
                .with_action_prefix("styling.shadow_picker"),
        );
    }
}

fn style_control_group(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .padding(4.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(color(23, 27, 33), None, 2.0)),
    )
}

fn style_group_fields(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    width: f32,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width(width)
                .with_flex_shrink(0.0)
                .gap(gap),
        ),
    )
}

fn style_group_title(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &'static str,
) {
    widgets::label(
        ui,
        parent,
        name,
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(88.0)
            .with_flex_shrink(0.0)
            .with_height(22.0),
    );
}

fn style_color_button_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    action: &'static str,
    label: &'static str,
    value: ColorRgba,
    accessibility_label: &'static str,
) {
    let row = row(ui, parent, format!("{action}.row"), 8.0);
    if !label.is_empty() {
        widgets::label(
            ui,
            row,
            format!("{action}.label"),
            label,
            text(12.0, color(166, 176, 190)),
            LayoutStyle::new()
                .with_width(86.0)
                .with_flex_shrink(0.0)
                .with_height(24.0),
        );
    }
    ext_widgets::color_edit_button(
        ui,
        row,
        action,
        value,
        color_mini_button_options(action)
            .with_format(ext_widgets::ColorValueFormat::Rgba)
            .accessibility_label(accessibility_label),
    );
    widgets::label(
        ui,
        row,
        format!("{action}.value"),
        ext_widgets::color_picker::format_hex_color(value, value.a < 255),
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new().with_width(96.0).with_height(24.0),
    );
}

fn style_number_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = row(ui, parent, format!("{name}.row"), 6.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width(48.0).with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_inline_number(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = compact_row(ui, parent, format!("{name}.inline"), 3.0);
    widgets::label(
        ui,
        row,
        format!("{name}.inline_label"),
        format!("{label}:"),
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(if label.len() > 1 { 42.0 } else { 16.0 })
            .with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_value_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let mut options = widgets::DragValueOptions::default()
        .with_layout(
            LayoutStyle::row()
                .with_width(STYLING_VALUE_INPUT_WIDTH)
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_padding(4.0),
        )
        .with_range(ext_widgets::NumericRange::new(
            f64::from(range.start),
            f64::from(range.end),
        ))
        .with_precision(ext_widgets::NumericPrecision::decimals(decimals))
        .with_action(name);
    options.text_style = text(12.0, color(226, 232, 242));
    widgets::drag_value_input(ui, parent, name, f64::from(value), options);
}

fn style_compact_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = LayoutStyle::new().with_width(92.0).with_height(22.0);
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn compact_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .gap(gap),
        ),
    )
}

fn color_mini_button_options(action: &'static str) -> ext_widgets::ColorButtonOptions {
    ext_widgets::ColorButtonOptions::default()
        .with_layout(LayoutStyle::size(28.0, 24.0).with_flex_shrink(0.0))
        .with_swatch_size(UiSize::new(22.0, 18.0))
        .with_action(action)
        .show_label(false)
}

fn style_preview(ui: &mut UiDocument, parent: UiNodeId, styling: StylingState) {
    let (frame, text_rect) = style_preview_rects(styling);
    let scene_size = style_preview_scene_size(styling);
    ui.add_child(
        parent,
        UiNode::scene(
            "styling.preview.scene",
            vec![
                ScenePrimitive::Rect(
                    PaintRect::solid(frame, styling.fill_color())
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            styling.stroke_color(),
                            styling.stroke_width,
                        )))
                        .corner_radii(styling.radii())
                        .effect(PaintEffect::shadow(
                            styling.shadow_color(),
                            UiPoint::new(styling.shadow_x, styling.shadow_y),
                            styling.shadow_blur,
                            styling.shadow_spread,
                        )),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Content", text_rect, text(13.0, color(255, 255, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            operad::layout::with_min_size(
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(180.0)
                    .with_flex_shrink(0.0),
                operad::layout::px(scene_size.width),
                operad::layout::px(scene_size.height),
            ),
        ),
    );
}

fn style_preview_rects(styling: StylingState) -> (UiRect, UiRect) {
    let outer = styling.outer_edges();
    let inner = styling.inner_edges();
    let frame = UiRect::new(
        22.0 + outer[0],
        28.0 + outer[2],
        108.0 + inner[0] + inner[1],
        40.0 + inner[2] + inner[3],
    );
    let text_rect = UiRect::new(
        frame.x + inner[0],
        frame.y + inner[2],
        (frame.width - inner[0] - inner[1]).max(1.0),
        (frame.height - inner[2] - inner[3]).max(1.0),
    );
    (frame, text_rect)
}

fn style_preview_scene_size(styling: StylingState) -> UiSize {
    let (frame, text_rect) = style_preview_rects(styling);
    let shadow_outset = styling.shadow_blur.max(0.0) + styling.shadow_spread.max(0.0);
    let shadow_bounds = UiRect::new(
        frame.x + styling.shadow_x - shadow_outset,
        frame.y + styling.shadow_y - shadow_outset,
        frame.width + shadow_outset * 2.0,
        frame.height + shadow_outset * 2.0,
    );
    let right = frame
        .right()
        .max(text_rect.right())
        .max(shadow_bounds.right());
    let bottom = frame
        .bottom()
        .max(text_rect.bottom())
        .max(shadow_bounds.bottom())
        .max(180.0);
    UiSize::new(right.ceil().max(1.0), bottom.ceil().max(1.0))
}

fn slider_options(state: &ShowcaseState, width: f32) -> widgets::SliderOptions {
    let mut options = widgets::SliderOptions::default().with_layout(
        LayoutStyle::new()
            .with_width(width)
            .with_height(24.0)
            .with_flex_shrink(0.0),
    );
    options.fill_color = if state.slider_trailing_color {
        state.slider_trailing_picker.value()
    } else {
        color(42, 49, 58)
    };
    options.thumb_shape = match state.slider_thumb_shape {
        SliderThumbChoice::Circle => widgets::slider::SliderThumbShape::Circle,
        SliderThumbChoice::Square => widgets::slider::SliderThumbShape::Square,
        SliderThumbChoice::Rectangle => widgets::slider::SliderThumbShape::Rectangle,
    };
    options.thumb_visual = UiVisual::panel(
        state.slider_thumb_picker.value(),
        Some(StrokeStyle::new(color(79, 93, 113), 1.0)),
        6.0,
    );
    options
}

#[allow(clippy::field_reassign_with_default)]
fn slider_number_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
    width: f32,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width(width).with_height(28.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn form_status_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    active: bool,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(24.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            if active {
                color(35, 74, 54)
            } else {
                color(28, 34, 43)
            },
            Some(StrokeStyle::new(
                if active {
                    color(90, 160, 112)
                } else {
                    color(60, 72, 88)
                },
                1.0,
            )),
            4.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(218, 228, 240)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn profile_form_summary(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let has_errors = widgets::form_has_errors(&state.form);
    let title = profile_form_summary_title(state, has_errors);
    let detail = format!(
        "{} | {} | {}",
        profile_summary_value(state.form_name_text.text(), "No name"),
        profile_summary_value(state.form_email_text.text(), "No email"),
        profile_summary_value(state.form_role_text.text(), "No role"),
    );
    let hint = profile_form_summary_hint(state, has_errors);
    let stroke = if has_errors {
        color(196, 94, 104)
    } else if state.form.dirty {
        color(205, 160, 71)
    } else if state.form.submitted {
        color(91, 164, 119)
    } else {
        color(60, 72, 88)
    };
    let summary = ui.add_child(
        parent,
        UiNode::container(
            "forms.profile.summary",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(20, 25, 32),
            Some(StrokeStyle::new(stroke, 1.0)),
            4.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group)
                .label("Live profile summary")
                .value(format!("{title}. {detail}. {hint}")),
        ),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.title",
        title,
        text(13.0, color(232, 240, 250)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.detail",
        detail,
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.hint",
        hint,
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn profile_form_summary_title(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Profile needs fixes"
    } else if state.form.submitted {
        "Profile submitted"
    } else if state.form.dirty {
        "Profile draft"
    } else {
        "Profile saved"
    }
}

fn profile_form_summary_hint(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Fix validation errors before applying or submitting."
    } else if state.form.dirty {
        "Apply saves the draft; Submit saves and marks it submitted."
    } else if state.form.submitted {
        "Submission completed. Apply stays disabled until something changes."
    } else {
        "No pending changes. Submit marks the saved profile submitted."
    }
}

fn profile_summary_value<'a>(value: &'a str, empty: &'static str) -> &'a str {
    let value = value.trim();
    if value.is_empty() {
        empty
    } else {
        value
    }
}

#[allow(clippy::field_reassign_with_default)]
fn form_text_field(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.placeholder = "Required".to_string();
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn profile_email_valid(email: &str) -> bool {
    let email = email.trim();
    let Some((local, domain)) = email.split_once('@') else {
        return false;
    };
    !local.is_empty() && domain.contains('.') && !domain.ends_with('.')
}

fn drag_source_layout() -> LayoutStyle {
    LayoutStyle::row()
        .with_width(128.0)
        .with_height(40.0)
        .with_padding(8.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn drop_zone_layout() -> LayoutStyle {
    LayoutStyle::column()
        .with_width(128.0)
        .with_height(78.0)
        .with_padding(10.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn dnd_operation_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(58.0)
                .with_height(22.0)
                .with_padding(3.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(26, 32, 42),
            Some(StrokeStyle::new(color(62, 76, 94), 1.0)),
            3.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(190, 204, 222)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn media_preview_image_layout() -> LayoutStyle {
    LayoutStyle::size(46.0, 46.0).with_flex_shrink(0.0)
}

fn media_icon_columns(state: &ShowcaseState) -> usize {
    let theme = state.app_theme();
    let options = showcase_desktop_options(state.last_desktop_size, &theme);
    let window_width = state
        .desktop
        .size("media", default_window_size("media"))
        .width;
    let content_width = (window_width - options.content_padding * 2.0).max(MEDIA_ICON_TILE_WIDTH);
    let pitch = MEDIA_ICON_TILE_WIDTH + MEDIA_ICON_GRID_GAP;
    (((content_width + MEDIA_ICON_GRID_GAP) / pitch).floor() as usize).clamp(1, MEDIA_ICON_COLUMNS)
}

fn media_icon_grid_width(columns: usize) -> f32 {
    let columns = columns.max(1);
    columns as f32 * MEDIA_ICON_TILE_WIDTH + columns.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid_height(columns: usize, item_count: usize) -> f32 {
    let columns = columns.max(1);
    let rows = item_count.div_ceil(columns).max(1);
    rows as f32 * MEDIA_ICON_TILE_HEIGHT + rows.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    columns: usize,
    item_count: usize,
) -> UiNodeId {
    let columns = columns.clamp(1, MEDIA_ICON_COLUMNS);
    let rows = item_count.div_ceil(columns).max(1);
    let width = media_icon_grid_width(columns);
    let height = media_icon_grid_height(columns, item_count);
    let layout = operad::layout::with_grid_template_rows(
        operad::layout::with_grid_template_columns(
            Layout::grid()
                .size(LayoutSize::points(width, height))
                .gap(LayoutGap::points(MEDIA_ICON_GRID_GAP, MEDIA_ICON_GRID_GAP))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
            (0..columns).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_WIDTH)),
        ),
        (0..rows).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_HEIGHT)),
    );
    ui.add_child(parent, UiNode::container(name, layout))
}

pub const fn fraction(value: f32) -> Self

pub const fn minmax_points_fraction(min: f32, max_fraction: f32) -> Self

Examples found in repository

examples/showcase.rs (line 12490)

fn styling_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let preview_scene_size = style_preview_scene_size(state.styling);
    let preview_min_width = preview_scene_size.width + 16.0;
    let preview_min_height = preview_scene_size.height + 16.0;
    let body_min_width = STYLING_CONTROLS_WIDTH + 1.0 + preview_min_width + 20.0;
    let body = section_with_min_viewport(
        ui,
        parent,
        "styling",
        "Styling",
        UiSize::new(body_min_width, preview_min_height),
    );
    let grid_layout = operad::layout::with_grid_template_columns(
        Layout::grid()
            .size(LayoutSize::percent(1.0, 1.0))
            .gap(LayoutGap::points(10.0, 10.0))
            .to_layout_style(),
        [
            LayoutGridTrack::points(STYLING_CONTROLS_WIDTH),
            LayoutGridTrack::points(1.0),
            LayoutGridTrack::minmax_points_fraction(preview_min_width, 1.0),
        ],
    );
    let grid = ui.add_child(body, UiNode::container("styling.grid", grid_layout));
    let controls = ui.add_child(
        grid,
        UiNode::container(
            "styling.controls",
            LayoutStyle::column()
                .with_width(STYLING_CONTROLS_WIDTH)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(6.0),
        ),
    );
    style_edge_group(
        ui,
        controls,
        "styling.inner",
        "Inner margin",
        "styling.inner_same",
        state.styling.inner_same,
        [
            ("Left", "styling.inner", state.styling.inner_margin),
            ("Right", "styling.inner_right", state.styling.inner_right),
            ("Top", "styling.inner_top", state.styling.inner_top),
            ("Bottom", "styling.inner_bottom", state.styling.inner_bottom),
        ],
        0.0..32.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.outer",
        "Outer margin",
        "styling.outer_same",
        state.styling.outer_same,
        [
            ("Left", "styling.outer", state.styling.outer_margin),
            ("Right", "styling.outer_right", state.styling.outer_right),
            ("Top", "styling.outer_top", state.styling.outer_top),
            ("Bottom", "styling.outer_bottom", state.styling.outer_bottom),
        ],
        0.0..40.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.radius",
        "Corner radius",
        "styling.radius_same",
        state.styling.radius_same,
        [
            ("NW", "styling.radius", state.styling.corner_radius),
            ("NE", "styling.radius_ne", state.styling.corner_ne),
            ("SW", "styling.radius_sw", state.styling.corner_sw),
            ("SE", "styling.radius_se", state.styling.corner_se),
        ],
        0.0..28.0,
    );
    style_fill_group(ui, controls, state);
    style_stroke_group(ui, controls, state);
    style_shadow_group(ui, controls, state);
    widgets::separator(
        ui,
        grid,
        "styling.preview.separator",
        widgets::SeparatorOptions::vertical().with_layout(
            LayoutStyle::new()
                .with_width(1.0)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0),
        ),
    );

    let preview = ui.add_child(
        grid,
        UiNode::container(
            "styling.preview",
            operad::layout::with_min_size(
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0)
                    .padding(8.0),
                operad::layout::px(preview_min_width),
                operad::layout::px(preview_min_height),
            ),
        )
        .with_visual(UiVisual::panel(color(17, 20, 25), None, 0.0)),
    );
    style_preview(ui, preview, state.styling);
}

Trait Implementations

impl Clone for LayoutGridTrack

fn clone(&self) -> LayoutGridTrack

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Copy for LayoutGridTrack

impl Debug for LayoutGridTrack

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl PartialEq for LayoutGridTrack

fn eq(&self, other: &LayoutGridTrack) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl StructuralPartialEq for LayoutGridTrack