Skip to content

Commit

Permalink
feat: implement basic input styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@golota60
golota60 committed Jan 7, 2024
1 parent ab2fb52 commit 10849a0
Show file tree
Hide file tree
Showing 8 changed files with 442 additions and 323 deletions.
166 changes: 166 additions & 0 deletions examples/widget-gallery/src/btn.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
use floem::{
view::View,
views::{label, stack, v_stack, Decorators},
};
use oxytail_base::widgets::{
button::{button, ButtonProps},
common_props::{OxySize, OxyVariant},
};

pub fn btn_variants() -> impl View {
v_stack((
label(|| "Button variants"),
stack((
button(|| "Default", None),
button(
|| "Neutral",
Some(ButtonProps {
variant: OxyVariant::Neutral,
..Default::default()
}),
),
button(
|| "Primary",
Some(ButtonProps {
variant: OxyVariant::Primary,
..Default::default()
}),
),
button(
|| "Secondary",
Some(ButtonProps {
variant: OxyVariant::Secondary,
..Default::default()
}),
),
button(
|| "Accent",
Some(ButtonProps {
variant: OxyVariant::Accent,
..Default::default()
}),
),
button(
|| "Ghost",
Some(ButtonProps {
variant: OxyVariant::Ghost,
..Default::default()
}),
),
button(
|| "Link",
Some(ButtonProps {
variant: OxyVariant::Link,
..Default::default()
}),
),
button(
|| "Info",
Some(ButtonProps {
variant: OxyVariant::Info,
..Default::default()
}),
),
button(
|| "Success",
Some(ButtonProps {
variant: OxyVariant::Success,
..Default::default()
}),
),
button(
|| "Warning",
Some(ButtonProps {
variant: OxyVariant::Warning,
..Default::default()
}),
),
button(
|| "Error",
Some(ButtonProps {
variant: OxyVariant::Error,
..Default::default()
}),
),
))
.style(|s| s.gap(4., 4.)),
))
}

pub fn btn_sizes() -> impl View {
v_stack((
label(|| "Button sizes"),
stack((
button(
|| "Large",
Some(ButtonProps {
size: OxySize::Large,
..Default::default()
}),
),
button(
|| "Normal",
Some(ButtonProps {
size: OxySize::Normal,
..Default::default()
}),
),
button(
|| "Small",
Some(ButtonProps {
size: OxySize::Small,
..Default::default()
}),
),
button(
|| "Tiny",
Some(ButtonProps {
size: OxySize::Tiny,
..Default::default()
}),
),
))
.style(|s| s.gap(4., 4.)),
))
}

pub fn btn_outlines() -> impl View {
v_stack((
label(|| "Outlined buttons"),
stack((
button(
|| "Info",
Some(ButtonProps {
variant: OxyVariant::Info,
outlined: true,
..Default::default()
}),
),
button(
|| "Success",
Some(ButtonProps {
variant: OxyVariant::Success,
outlined: true,
..Default::default()
}),
),
button(
|| "Warning",
Some(ButtonProps {
variant: OxyVariant::Warning,
outlined: true,
..Default::default()
}),
),
button(
|| "Error",
Some(ButtonProps {
variant: OxyVariant::Error,
outlined: true,
..Default::default()
}),
),
))
.style(|s| s.gap(4., 4.)),
))
}
89 changes: 89 additions & 0 deletions examples/widget-gallery/src/checkboxes.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
use floem::{
reactive::create_signal,
view::View,
views::{h_stack, label, v_stack, Decorators},
};
use oxytail_base::widgets::{
checkbox::{checkbox, CheckboxProps},
common_props::{OxySize, OxyVariant},
};

fn checkbox_with_state(props: Option<CheckboxProps>) -> impl View {
let (checked, set_checked) = create_signal(true);

checkbox(checked, props).on_click_stop(move |_| {
set_checked.update(|checked| *checked = !*checked);
})
}

pub fn checkboxes_sizes() -> impl View {
v_stack((
label(|| "Checkbox sizes"),
h_stack((
checkbox_with_state(Some(CheckboxProps {
size: OxySize::Large,
..Default::default()
})),
checkbox_with_state(None),
checkbox_with_state(Some(CheckboxProps {
size: OxySize::Small,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
size: OxySize::Tiny,
..Default::default()
})),
))
.style(|s| s.gap(4., 4.)),
))
}

pub fn checkboxes_variants() -> impl View {
v_stack((
label(|| "Checkbox variants"),
h_stack((
checkbox_with_state(None),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Neutral,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Primary,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Secondary,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Accent,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Ghost,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Link,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Info,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Success,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Warning,
..Default::default()
})),
checkbox_with_state(Some(CheckboxProps {
variant: OxyVariant::Error,
..Default::default()
})),
))
.style(|s| s.gap(4., 4.)),
))
}
71 changes: 71 additions & 0 deletions examples/widget-gallery/src/inputs.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
use floem::{
reactive::create_rw_signal,
view::View,
views::{h_stack, label, Decorators},
};
use oxytail_base::widgets::{
common_props::{OxySize, OxyVariant},
text_input::{text_input, InputProps},
};

pub fn text_input_variants() -> impl View {
let default_text = create_rw_signal(String::from("I am default!"));
let primary_text = create_rw_signal(String::from("I am primary!"));
let secondary_text = create_rw_signal(String::from("I am secondary!"));

h_stack((
label(|| "Text input variants(same as buttons, only a few shown)"),
text_input(default_text, None),
text_input(
primary_text,
Some(InputProps {
variant: OxyVariant::Primary,
..Default::default()
}),
),
text_input(
secondary_text,
Some(InputProps {
variant: OxyVariant::Secondary,
..Default::default()
}),
),
))
.style(|s| s.justify_start().items_start().gap(5., 5.))
}

pub fn text_input_sizes() -> impl View {
let large_text = create_rw_signal(String::from("I am large!"));
let normal_text = create_rw_signal(String::from("I am normal!"));
let small_text = create_rw_signal(String::from("I am small!"));
let tiny_text = create_rw_signal(String::from("I am tiny!"));

h_stack((
label(|| "Text input sizes"),
h_stack((
text_input(
large_text,
Some(InputProps {
size: OxySize::Large,
..Default::default()
}),
),
text_input(normal_text, None),
text_input(
small_text,
Some(InputProps {
size: OxySize::Small,
..Default::default()
}),
),
text_input(
tiny_text,
Some(InputProps {
size: OxySize::Tiny,
..Default::default()
}),
),
))
.style(|s| s.gap(5., 5.).margin_left(10.)),
))
}
Loading

0 comments on commit 10849a0

Please sign in to comment.