Skip to content

Commit

Permalink
fix usage of row/col gap
Browse files Browse the repository at this point in the history
  • Loading branch information
jrmoulton committed Feb 14, 2025
1 parent a80b2f0 commit 9707ab7
Show file tree
Hide file tree
Showing 11 changed files with 108 additions and 127 deletions.
2 changes: 1 addition & 1 deletion examples/files/src/files.rs
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ pub fn files_view() -> impl IntoView {
)),
))
.style(|s| {
s.row_gap(5)
s.col_gap(5)
.width_full()
.height_full()
.items_center()
Expand Down
2 changes: 1 addition & 1 deletion examples/layout/src/tab_navigation.rs
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ pub fn tab_navigation_view() -> impl IntoView {
s.flex_row()
.width_full()
.height(TABBAR_HEIGHT)
.row_gap(5)
.col_gap(5)
.padding(CONTENT_PADDING)
.border_bottom(1)
.border_color(Color::from_rgb8(205, 205, 205))
Expand Down
10 changes: 5 additions & 5 deletions examples/stacks/src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -18,33 +18,33 @@ fn app_view() -> impl IntoView {
"Renders off-screen: true",
stack::stack_view(),
)
.style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
.style(|s| s.flex_col().row_gap(5).width_pct(25.0)),
(
"stack_from_iter".style(|s| s.font_size(16.0)),
"From signal: false",
"From iter: true",
"Renders off-screen: true",
stack_from_iter::stack_from_iter_view(),
)
.style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
.style(|s| s.flex_col().row_gap(5).width_pct(25.0)),
(
"dyn_stack".style(|s| s.font_size(16.0)),
"From signal: true",
"From iter: true",
"Renders off-screen: true",
dyn_stack::dyn_stack_view(),
)
.style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
.style(|s| s.flex_col().row_gap(5).width_pct(25.0)),
(
"virtual_stack".style(|s| s.font_size(16.0)),
"From signal: true",
"From iter: true",
"Renders off-screen: false",
virtual_stack::virtual_stack_view(),
)
.style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
.style(|s| s.flex_col().row_gap(5).width_pct(25.0)),
)
.style(|s| s.flex().margin(20).width_full().height_full().row_gap(10))
.style(|s| s.flex().margin(20).width_full().height_full().col_gap(10))
.into_view();

let id = view.id();
Expand Down
1 change: 0 additions & 1 deletion examples/widget-gallery/src/buttons.rs
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ pub fn button_view() -> impl IntoView {
s.border(1.0)
.border_radius(10.0)
.padding(10.0)
.margin_left(10.0)
.background(palette::css::YELLOW_GREEN)
.color(palette::css::DARK_GREEN)
.cursor(CursorStyle::Pointer)
Expand Down
29 changes: 7 additions & 22 deletions examples/widget-gallery/src/draggable.rs
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
use floem::{
keyboard::{Key, NamedKey},
peniko::color::palette,
peniko::Color,
reactive::{create_rw_signal, RwSignal, SignalGet, SignalUpdate},
style::CursorStyle,
views::{dyn_stack, label, Decorators},
IntoView, View,
};
use floem::{prelude::*, style::CursorStyle};

fn sortable_item(
name: &str,
Expand Down Expand Up @@ -75,7 +67,7 @@ fn sortable_item(
.style(move |s| {
s.background(colors[item_id])
.selectable(false)
.row_gap(5)
.col_gap(5)
.items_center()
.border(2)
.border_color(palette::css::RED)
Expand All @@ -86,21 +78,14 @@ pub fn draggable_view() -> impl IntoView {
let items = [
"zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
];
let sortable_items = create_rw_signal((0..items.len()).collect::<Vec<usize>>());
let dragger_id = create_rw_signal(0);
let sortable_items = RwSignal::new((0..items.len()).collect::<Vec<usize>>());
let dragger_id = RwSignal::new(0);

let view = dyn_stack(
dyn_stack(
move || sortable_items.get(),
move |item_id| *item_id,
move |item_id| sortable_item(items[item_id], sortable_items, dragger_id, item_id),
)
.style(|s| s.flex_col().column_gap(5).padding(10))
.into_view();

let id = view.id();
view.on_key_up(
Key::Named(NamedKey::F11),
|m| m.is_empty(),
move |_| id.inspect(),
)
.style(|s| s.flex_col().row_gap(5).padding(10))
.into_view()
}
4 changes: 2 additions & 2 deletions examples/widget-gallery/src/form.rs
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ pub fn form<VTF: ViewTupleFlat + 'static>(children: VTF) -> impl IntoView {
.grid_template_columns([auto(), fr(1.)])
.justify_center()
.items_center()
.column_gap(20)
.row_gap(10)
.row_gap(20)
.col_gap(10)
.padding(30)
})
.debug_name("Form")
Expand Down
5 changes: 2 additions & 3 deletions examples/widget-gallery/src/labels.rs
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ pub fn label_view() -> impl IntoView {
form((
form_item(
"Simple Label:",
tooltip("This is a simple label", || {
static_label("This is a tooltip for the label.")
}),
"This is a simple label with a tooltip.\n(hover over me)"
.tooltip(|| "This is a tooltip for the label."),
),
form_item(
"Styled Label:",
Expand Down
60 changes: 29 additions & 31 deletions examples/widget-gallery/src/lists.rs
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ pub fn virt_list_view() -> impl IntoView {
.style(|s| {
s.grid_template_columns([fr(1.), fr(1.), fr(1.), fr(1.)])
.grid_template_rows([auto(), auto(), length(20.), auto(), auto()])
.column_gap(20)
.row_gap(20)
.justify_items(JustifyItems::Center)
})
}
Expand Down Expand Up @@ -64,8 +64,8 @@ fn enhanced_list() -> impl IntoView {
svg(CROSS_SVG)
.on_click_stop(move |_| {
print!("Item Removed");
long_list.update(|x| {
x.remove(index);
long_list.update(|list| {
list.remove(index);
});
})
.style(|s| {
Expand All @@ -79,38 +79,36 @@ fn enhanced_list() -> impl IntoView {
.margin_right(20.0)
.hover(|s| s.color(palette::css::WHITE).background(palette::css::RED))
})
.style(|s| s.justify_content(Some(JustifyContent::FlexEnd)))
};

VirtualStack::list_with_view(
move || long_list.get().enumerate(),
move |(index, (state, item))| {
let checkbox_state = RwSignal::new(state);
create_effect(move |_| {
let state = checkbox_state.get();
long_list.update(|x| {
// because this is an immutable vector, getting the index will always result in the correct item even if we remove elements.
if let Some((s, _v)) = x.get_mut(index) {
*s = state;
};
});
let item_view = move |(index, (state, item))| {
let checkbox_state = RwSignal::new(state);
create_effect(move |_| {
let state = checkbox_state.get();
long_list.update(|list| {
// because this is an immutable vector, getting the index will always result in the correct item even if we remove elements.
if let Some((s, _v)) = list.get_mut(index) {
*s = state;
};
});
});

(checkmark(checkbox_state), label(item), x_mark(index))
.h_stack()
.style(move |s| {
s.items_center()
.gap(5)
.height(item_height)
.apply_if(index != 0, |s| {
s.border_top(1.0).border_color(palette::css::LIGHT_GRAY)
})
})
},
)
.style(move |s| s.flex_col().flex_grow(1.0))
.scroll()
.style(move |s| s.width(list_width).height(200.0).border(1.0))
(checkmark(checkbox_state), label(item), x_mark(index))
.h_stack()
.style(move |s| {
s.items_center()
.gap(5)
.height(item_height)
.apply_if(index != 0, |s| {
s.border_top(1.0).border_color(palette::css::LIGHT_GRAY)
})
})
};

VirtualStack::list_with_view(move || long_list.get().enumerate(), item_view)
.style(move |s| s.flex_col().flex_grow(1.0))
.scroll()
.style(move |s| s.width(list_width).height(200.0).border(1.0))
}

fn h_buttons_from_iter() -> impl IntoView {
Expand Down
104 changes: 52 additions & 52 deletions examples/widget-gallery/src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -72,55 +72,56 @@ fn app_view() -> impl IntoView {

let (active_tab, set_active_tab) = create_signal(0);

let side_tab_bar = list(tabs.get().into_iter().enumerate().map(move |(idx, item)| {
label(move || item)
.draggable()
.style(move |s| {
s.flex_row()
.font_size(18.)
.padding(5.0)
.width(100.pct())
.height(36.0)
.transition(Background, Transition::ease_in_out(100.millis()))
.items_center()
.border_bottom(1.)
.border_color(palette::css::LIGHT_GRAY)
.selected(|s| {
s.border(2.)
.border_color(palette::css::BLUE)
.background(palette::css::GRAY.with_alpha(0.6))
})
.hover(|s| {
s.background(palette::css::LIGHT_GRAY)
.apply_if(idx == active_tab.get(), |s| {
s.background(palette::css::GRAY)
})
.cursor(CursorStyle::Pointer)
})
})
.dragging_style(|s| s.background(palette::css::GRAY.with_alpha(0.6)))
}))
.on_select(move |idx| {
if let Some(idx) = idx {
set_active_tab.set(idx);
}
})
.keyboard_navigable()
.style(|s| s.flex_col().width(140.0))
.scroll()
.debug_name("Side Tab Bar")
.scroll_style(|s| s.shrink_to_fit())
.style(|s| {
s.border(1.)
.padding(3.)
.border_color(palette::css::GRAY)
.class(LabelClass, |s| s.selectable(false))
});
let side_tab_bar = tabs
.get()
.into_iter()
.enumerate()
.map(move |(idx, item)| {
item.draggable()
.style(move |s| {
s.flex_row()
.font_size(18.)
.padding(5.0)
.width(100.pct())
.height(36.0)
.transition(Background, Transition::ease_in_out(100.millis()))
.items_center()
.border_bottom(1.)
.border_color(palette::css::LIGHT_GRAY)
.selected(|s| {
s.border(2.)
.border_color(palette::css::BLUE)
.background(palette::css::GRAY.with_alpha(0.6))
})
.hover(|s| {
s.background(palette::css::LIGHT_GRAY)
.apply_if(idx == active_tab.get(), |s| {
s.background(palette::css::GRAY)
})
.cursor(CursorStyle::Pointer)
})
})
.dragging_style(|s| s.background(palette::css::GRAY.with_alpha(0.6)))
})
.list()
.on_select(move |idx| {
if let Some(idx) = idx {
set_active_tab.set(idx);
}
})
.keyboard_navigable()
.style(|s| s.flex_col().width(140.0))
.scroll()
.debug_name("Side Tab Bar")
.scroll_style(|s| s.shrink_to_fit())
.style(|s| {
s.border(1.)
.padding(3.)
.border_color(palette::css::GRAY)
.class(LabelClass, |s| s.selectable(false))
});

let id = side_tab_bar.id();
let inspector = button("Open Inspector")
.action(move || id.inspect())
.style(|s| s);
let inspector = button("Open Inspector").action(move || floem::action::inspect());

let new_window = button("Open In Window").action(move || {
let name = tabs.with(|tabs| tabs.get(active_tab.get()).copied());
Expand All @@ -141,7 +142,7 @@ fn app_view() -> impl IntoView {
let left_side_bar = (side_tab_bar, new_window, inspector)
.v_stack()
.debug_name("Left Side Bar")
.style(|s| s.height_full().column_gap(5.0));
.style(|s| s.height_full().row_gap(5.0));

let tab = tab(
move || active_tab.get(),
Expand All @@ -156,14 +157,13 @@ fn app_view() -> impl IntoView {

let view = (left_side_bar, tab)
.h_stack()
.style(|s| s.padding(5.0).width_full().height_full().row_gap(5.0))
.style(|s| s.padding(5.0).width_full().height_full().col_gap(5.0))
.window_title(|| "Widget Gallery".to_owned());

let id = view.id();
view.on_event_stop(EventListener::KeyUp, move |e| {
if let Event::KeyUp(e) = e {
if e.key.logical_key == Key::Named(NamedKey::F11) {
id.inspect();
floem::action::inspect();
}
}
})
Expand Down
14 changes: 7 additions & 7 deletions src/style.rs
Original file line number Diff line number Diff line change
Expand Up @@ -1780,8 +1780,8 @@ impl LayoutProps {
.margin_top(self.margin_top())
.margin_right(self.margin_right())
.margin_bottom(self.margin_bottom())
.col_gap(self.col_gap())
.row_gap(self.row_gap())
.column_gap(self.col_gap())
}
}

Expand Down Expand Up @@ -1887,21 +1887,21 @@ impl Style {
self.height(height.pct())
}

pub fn row_gap(self, width: impl Into<PxPct>) -> Self {
self.set(RowGap, width.into())
pub fn col_gap(self, width: impl Into<PxPct>) -> Self {
self.set(ColGap, width.into())
}

pub fn column_gap(self, height: impl Into<PxPct>) -> Self {
self.set(ColGap, height.into())
pub fn row_gap(self, height: impl Into<PxPct>) -> Self {
self.set(RowGap, height.into())
}

pub fn row_col_gap(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
self.row_gap(width).column_gap(height)
self.col_gap(width).row_gap(height)
}

pub fn gap(self, gap: impl Into<PxPct>) -> Self {
let gap = gap.into();
self.row_gap(gap).column_gap(gap)
self.col_gap(gap).row_gap(gap)
}

pub fn size(self, width: impl Into<PxPctAuto>, height: impl Into<PxPctAuto>) -> Self {
Expand Down
Loading

0 comments on commit 9707ab7

Please sign in to comment.