Skip to content

Commit

Permalink
feat: retire style object in favor of style creator function
Browse files Browse the repository at this point in the history
  • Loading branch information
@golota60
golota60 committed Jan 4, 2024
1 parent a3c55cb commit e9e0372
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 52 deletions.
7 changes: 5 additions & 2 deletions oxytail-base/src/themes.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
use floem::{peniko::Color, style::Style};

use crate::widgets::button::ButtonVariant;
use crate::widgets::button::{ButtonSize, ButtonVariant};

// IDEA: Allow any style that implements ThemeStyle to be a valid style?
// So that external styles can be created
Expand Down Expand Up @@ -157,8 +157,11 @@ This should be ok tho. There needs to be a line somewhere.
// }
// }

// All the functions return a function on how to apply the style instead of the style object, cause we need to apply multiple styles to the same object.
// E.g. button needs to have `base_style` applied, and then `size_style`. If those return two different Style instances, one is going to overwrite the other.
pub trait ThemeStyling {
fn get_button_base_style(&self, button_variant: ButtonVariant) -> Style;
fn get_button_base_style(&self, button_variant: ButtonVariant) -> Box<dyn Fn(Style) -> Style>;
fn get_button_size_style(&self, button_size: ButtonSize) -> Box<dyn Fn(Style) -> Style>;
// fn get_button_
}

Expand Down
21 changes: 11 additions & 10 deletions oxytail-base/src/widgets/button.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
use std::fmt::Display;

use floem::{view::View, views::Decorators, widgets::button as upstreambutton};
use floem::{style::Style, view::View, views::Decorators, widgets::button as upstreambutton};

use crate::GLOBAL_THEME;

Expand All @@ -14,7 +14,6 @@ pub enum ButtonSize {
}

#[derive(Default)]

pub enum ButtonVariant {
#[default]
Default,
Expand Down Expand Up @@ -46,13 +45,15 @@ pub fn button<S: Display + 'static>(
let base_component = upstreambutton(label);
let theme = GLOBAL_THEME.get().unwrap();

match props {
Some(props) => {
let base_styles = theme.get_button_base_style(props.variant);
let styled_button = base_component.style(move |_| base_styles.clone());
let props = props.unwrap_or(ButtonProps::default());

let base_styles_enhancer = theme.get_button_base_style(props.variant);
let size_styles_enhancer = theme.get_button_size_style(props.size);

let enhanced_style = base_styles_enhancer(Style::new());
let enhanced_style = size_styles_enhancer(enhanced_style);

let styled_button = base_component.style(move |_| enhanced_style.clone());

styled_button
}
None => base_component,
}
styled_button
}
88 changes: 48 additions & 40 deletions oxytail-theme-dark/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ use floem::{
peniko::Color,
style::{Background, Style, Transition},
};
use oxytail_base::{
themes::{Reusables, ThemeStyling},
widgets::button::ButtonVariant,
};
use oxytail_base::{themes::ThemeStyling, widgets::button::ButtonVariant};

pub struct CommonThemeProps {
pub border: Color,
Expand Down Expand Up @@ -78,47 +75,58 @@ pub enum Theme {
}

impl ThemeStyling for Theme {
fn get_button_base_style(&self, button_variant: ButtonVariant) -> Style {
fn get_button_base_style(&self, button_variant: ButtonVariant) -> Box<dyn Fn(Style) -> Style> {
let reusables = self.get_reusables();
let base_button_style = Style::new()
.hover(|s| s.background(reusables.hover_bg_color))
.disabled(|s| {
s.background(Color::rgb8(180, 188, 175).with_alpha_factor(0.3))
.border_color(Color::rgb8(131, 145, 123).with_alpha_factor(0.3))

let style_creator = move |s: Style| {
let base_button_style = {
s.hover(|s| s.background(reusables.hover_bg_color))
.disabled(|s| {
s.background(Color::rgb8(180, 188, 175).with_alpha_factor(0.3))
.border_color(Color::rgb8(131, 145, 123).with_alpha_factor(0.3))
.color(Color::rgb8(166, 173, 187))
})
.font_size(14.)
.line_height(1.)
.color(Color::rgb8(166, 173, 187))
})
.font_size(14.)
.line_height(1.)
.color(Color::rgb8(166, 173, 187))
.font_weight(Weight::SEMIBOLD)
.transition(Background, Transition::linear(0.04))
.focus(|s| s.hover(|s| s.background(reusables.focus_hover_bg_color)))
.padding_left(16.0)
.padding_right(16.0)
.padding_top(20.0)
.padding_bottom(20.0)
.border_radius(5.0)
.justify_center()
.items_center()
.apply(reusables.focus_style.clone());
.font_weight(Weight::SEMIBOLD)
.transition(Background, Transition::linear(0.04))
.focus(|s| s.hover(|s| s.background(reusables.focus_hover_bg_color)))
.padding_left(16.0)
.padding_right(16.0)
.padding_top(20.0)
.padding_bottom(20.0)
.border_radius(5.0)
.justify_center()
.items_center()
.apply(reusables.focus_style.clone())
};

let variant_enhancer = match button_variant {
ButtonVariant::Default => |s: Style| s.background(Color::rgb8(25, 30, 36)),
let variant_enhancer = match button_variant {
ButtonVariant::Default => |s: Style| s.background(Color::rgb8(25, 30, 36)),

ButtonVariant::Neutral => |s: Style| s.background(Color::rgb8(42, 50, 60)),
ButtonVariant::Primary => |s: Style| s.background(Color::rgb8(116, 128, 255)),
ButtonVariant::Secondary => |s: Style| s.background(Color::rgb8(255, 82, 217)),
ButtonVariant::Accent => |s: Style| s.background(Color::rgb8(0, 205, 183)),
ButtonVariant::Ghost => |s: Style| s.background(Color::TRANSPARENT),
ButtonVariant::Link => |s: Style| s.background(Color::rgb8(117, 130, 255)),
ButtonVariant::Neutral => |s: Style| s.background(Color::rgb8(42, 50, 60)),
ButtonVariant::Primary => |s: Style| s.background(Color::rgb8(116, 128, 255)),
ButtonVariant::Secondary => |s: Style| s.background(Color::rgb8(255, 82, 217)),
ButtonVariant::Accent => |s: Style| s.background(Color::rgb8(0, 205, 183)),
ButtonVariant::Ghost => |s: Style| s.background(Color::TRANSPARENT),
ButtonVariant::Link => |s: Style| s.background(Color::rgb8(117, 130, 255)),

ButtonVariant::Info => |s: Style| s.background(Color::rgb8(0, 181, 255)),
ButtonVariant::Success => |s: Style| s.background(Color::rgb8(0, 169, 110)),
ButtonVariant::Warning => |s: Style| s.background(Color::rgb8(255, 190, 0)),
ButtonVariant::Error => |s: Style| s.background(Color::rgb8(255, 88, 97)),
};
let enhanced_button = variant_enhancer(base_button_style);
ButtonVariant::Info => |s: Style| s.background(Color::rgb8(0, 181, 255)),
ButtonVariant::Success => |s: Style| s.background(Color::rgb8(0, 169, 110)),
ButtonVariant::Warning => |s: Style| s.background(Color::rgb8(255, 190, 0)),
ButtonVariant::Error => |s: Style| s.background(Color::rgb8(255, 88, 97)),
};
let enhanced_button = variant_enhancer(base_button_style);

enhanced_button
enhanced_button
};
Box::new(style_creator)
}
fn get_button_size_style(
&self,
button_size: oxytail_base::widgets::button::ButtonSize,
) -> Box<dyn Fn(Style) -> Style> {
Box::new(|s| s.size(200, 200))
}
}

0 comments on commit e9e0372

Please sign in to comment.