Skip to content

Commit

Permalink
Add style classes (lapce#136)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zoxc @jrmoulton
Zoxc authored and jrmoulton committed Nov 6, 2023
1 parent bccf306 commit ff4b870
Show file tree
Hide file tree
Showing 10 changed files with 388 additions and 170 deletions.
71 changes: 25 additions & 46 deletions examples/window-scale/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ use floem::{
keyboard::{Key, NamedKey},
peniko::Color,
reactive::{create_rw_signal, create_signal},
style_class,
unit::UnitExt,
view::View,
views::{label, stack, Decorators},
};

style_class!(pub Button);

fn app_view() -> impl View {
let (counter, set_counter) = create_signal(0);
let window_scale = create_rw_signal(1.0);
Expand All @@ -16,98 +19,65 @@ fn app_view() -> impl View {
stack({
(
label(|| "Increment")
.style(|s| {
s.border(1.0)
.border_radius(10.0)
.padding(10.0)
.focus_visible(|s| s.border(2.).border_color(Color::BLUE))
.hover(|s| s.background(Color::LIGHT_GREEN))
.active(|s| s.color(Color::WHITE).background(Color::DARK_GREEN))
})
.class(Button)
.on_click(move |_| {
set_counter.update(|value| *value += 1);
true
})
.keyboard_navigatable(),
label(|| "Decrement")
.class(Button)
.on_click(move |_| {
set_counter.update(|value| *value -= 1);
true
})
.style(|s| {
s.border(1.0)
.border_radius(10.0)
.padding(10.0)
.margin_left(10.0)
.focus_visible(|s| s.border(2.).border_color(Color::BLUE))
s.margin_left(10.0)
.hover(|s| s.background(Color::rgb8(244, 67, 54)))
.active(|s| s.color(Color::WHITE).background(Color::RED))
.active(|s| s.background(Color::RED))
})
.keyboard_navigatable(),
label(|| "Reset to 0")
.class(Button)
.on_click(move |_| {
println!("Reset counter pressed"); // will not fire if button is disabled
set_counter.update(|value| *value = 0);
true
})
.disabled(move || counter.get() == 0)
.style(|s| {
s.border(1.0)
.border_radius(10.0)
.padding(10.0)
.margin_left(10.0)
s.margin_left(10.0)
.background(Color::LIGHT_BLUE)
.focus_visible(|s| s.border(2.).border_color(Color::BLUE))
.disabled(|s| s.background(Color::LIGHT_GRAY))
.hover(|s| s.background(Color::LIGHT_YELLOW))
.active(|s| s.color(Color::WHITE).background(Color::YELLOW_GREEN))
.active(|s| s.background(Color::YELLOW_GREEN))
})
.keyboard_navigatable(),
)
}),
stack({
(
label(|| "Zoom In")
.class(Button)
.on_click(move |_| {
window_scale.update(|scale| *scale *= 1.2);
true
})
.style(|s| {
s.border(1.0)
.border_radius(10.0)
.margin_top(10.0)
.margin_right(10.0)
.padding(10.0)
.hover(|s| s.background(Color::LIGHT_GREEN))
}),
.style(|s| s.margin_top(10.0).margin_right(10.0)),
label(|| "Zoom Out")
.class(Button)
.on_click(move |_| {
window_scale.update(|scale| *scale /= 1.2);
true
})
.style(|s| {
s.border(1.0)
.border_radius(10.0)
.margin_top(10.0)
.margin_right(10.0)
.padding(10.0)
.hover(|s| s.background(Color::LIGHT_GREEN))
}),
.style(|s| s.margin_top(10.0).margin_right(10.0)),
label(|| "Zoom Reset")
.class(Button)
.disabled(move || window_scale.get() == 1.0)
.on_click(move |_| {
window_scale.set(1.0);
true
})
.style(|s| {
s.border(1.0)
.border_radius(10.0)
.margin_top(10.0)
.margin_right(10.0)
.padding(10.0)
.hover(|s| s.background(Color::LIGHT_GREEN))
.disabled(|s| s.background(Color::LIGHT_GRAY))
}),
.style(|s| s.margin_top(10.0).margin_right(10.0)),
)
})
.style(|s| {
Expand All @@ -123,6 +93,15 @@ fn app_view() -> impl View {
.flex_col()
.items_center()
.justify_center()
.class(Button, |s| {
s.border(1.0)
.border_radius(10.0)
.padding(10.0)
.focus_visible(|s| s.border(2.).border_color(Color::BLUE))
.disabled(|s| s.background(Color::LIGHT_GRAY))
.hover(|s| s.background(Color::LIGHT_GREEN))
.active(|s| s.color(Color::WHITE).background(Color::DARK_GREEN))
})
});

let id = view.id();
Expand Down
59 changes: 43 additions & 16 deletions src/context.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ use crate::{
pointer::PointerInputEvent,
responsive::{GridBreakpoints, ScreenSizeBp},
style::{
BuiltinStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleProp, StyleSelector,
StyleSelectors,
BuiltinStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleClassRef, StyleProp,
StyleSelector, StyleSelectors,
},
unit::PxPct,
};
Expand Down Expand Up @@ -58,6 +58,7 @@ pub struct ViewState {
pub(crate) animation: Option<Animation>,
pub(crate) base_style: Option<Style>,
pub(crate) style: Style,
pub(crate) class: Option<StyleClassRef>,
pub(crate) dragging_style: Option<Style>,
pub(crate) combined_style: Style,
pub(crate) event_listeners: HashMap<EventListener, Box<EventCallback>>,
Expand All @@ -81,6 +82,7 @@ impl ViewState {
animation: None,
base_style: None,
style: Style::new(),
class: None,
combined_style: Style::new(),
dragging_style: None,
children_nodes: Vec::new(),
Expand All @@ -99,18 +101,23 @@ impl ViewState {
view_style: Option<Style>,
interact_state: InteractionState,
screen_size_bp: ScreenSizeBp,
view_class: Option<StyleClassRef>,
classes: &[StyleClassRef],
context: &Style,
) {
let mut computed_style = if let Some(view_style) = view_style {
if let Some(base_style) = self.base_style.clone() {
view_style.apply(base_style).apply(self.style.clone())
} else {
view_style.apply(self.style.clone())
}
} else if let Some(base_style) = self.base_style.clone() {
base_style.apply(self.style.clone())
} else {
self.style.clone()
};
let mut computed_style = Style::new();
if let Some(view_style) = view_style {
computed_style.apply_mut(view_style);
}
if let Some(view_class) = view_class {
computed_style = computed_style.apply_classes_from_context(&[view_class], context);
}
if let Some(base_style) = self.base_style.clone() {
computed_style.apply_mut(base_style);
}
computed_style = computed_style
.apply_classes_from_context(classes, context)
.apply(self.style.clone());

'anim: {
if let Some(animation) = self.animation.as_mut() {
Expand Down Expand Up @@ -321,11 +328,25 @@ impl AppState {
self.compute_layout();
}

pub(crate) fn compute_style(&mut self, id: Id, view_style: Option<Style>) {
pub(crate) fn compute_style(
&mut self,
id: Id,
view_style: Option<Style>,
view_class: Option<StyleClassRef>,
classes: &[StyleClassRef],
context: &Style,
) {
let interact_state = self.get_interact_state(&id);
let screen_size_bp = self.screen_size_bp;
let view_state = self.view_state(id);
view_state.compute_style(view_style, interact_state, screen_size_bp);
view_state.compute_style(
view_style,
interact_state,
screen_size_bp,
view_class,
classes,
context,
);
}

pub(crate) fn get_computed_style(&mut self, id: Id) -> &Style {
Expand Down Expand Up @@ -651,7 +672,7 @@ impl StyleCx {
/// Holds current layout state for given position in the tree.
/// You'll use this in the `View::layout` implementation to call `layout_node` on children and to access any font
pub struct LayoutCx<'a> {
app_state: &'a mut AppState,
pub(crate) app_state: &'a mut AppState,
pub(crate) viewport: Option<Rect>,
pub(crate) style: StyleCx,
pub(crate) window_origin: Point,
Expand All @@ -678,6 +699,12 @@ impl<'a> LayoutCx<'a> {
.or_else(|| self.style.current.get_prop::<P>())
}

pub fn style(&self) -> Style {
(*self.style.current)
.clone()
.apply(self.style.direct.clone())
}

pub(crate) fn clear(&mut self) {
self.style.clear();
self.viewport = None;
Expand Down
6 changes: 5 additions & 1 deletion src/id.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ use crate::{
animate::Animation,
context::{EventCallback, MenuCallback, ResizeCallback},
event::EventListener,
style::{Style, StyleSelector},
style::{Style, StyleClassRef, StyleSelector},
update::{UpdateMessage, CENTRAL_DEFERRED_UPDATE_MESSAGES, CENTRAL_UPDATE_MESSAGES},
};

Expand Down Expand Up @@ -154,6 +154,10 @@ impl Id {
self.add_update_message(UpdateMessage::Style { id: *self, style });
}

pub fn update_class(&self, class: StyleClassRef) {
self.add_update_message(UpdateMessage::Class { id: *self, class });
}

pub(crate) fn update_style_selector(&self, style: Style, selector: StyleSelector) {
self.add_update_message(UpdateMessage::StyleSelector {
id: *self,
Expand Down
18 changes: 11 additions & 7 deletions src/inspector.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -539,13 +539,17 @@ fn inspector_view(capture: &Option<Rc<Capture>>) -> impl View {
.width_full()
.height_full()
.background(Color::WHITE)
.set(scroll::Thickness, 16.0)
.set(scroll::Rounded, false)
.set(scroll::HandleRadius, 4.0)
.set(scroll::HandleColor, Color::rgba8(166, 166, 166, 140))
.set(scroll::DragColor, Color::rgb8(166, 166, 166))
.set(scroll::HoverColor, Color::rgb8(184, 184, 184))
.set(scroll::BgActiveColor, Color::rgba8(166, 166, 166, 30))
.class(scroll::Handle, |s| {
s.border_radius(4.0)
.background(Color::rgba8(166, 166, 166, 140))
.set(scroll::Thickness, 16.0)
.set(scroll::Rounded, false)
.active(|s| s.background(Color::rgb8(166, 166, 166)))
.hover(|s| s.background(Color::rgb8(184, 184, 184)))
})
.class(scroll::Track, |s| {
s.hover(|s| s.background(Color::rgba8(166, 166, 166, 30)))
})
})
}

Expand Down
Loading

0 comments on commit ff4b870

Please sign in to comment.