reivilibre
/
iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #535 from Kaiden42/toggler 

Implement `Toggler` widget for iced_native
This commit is contained in:
Héctor Ramón 2021-06-03 20:55:50 +07:00 committed by GitHub
parent 1dce929dfc d3d6f3efb3
commit 397a5c06ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 797 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
examples/styling/src/main.rs
View File

@ -1,7 +1,7 @@
use iced::{
button, scrollable, slider, text_input, Align, Button, Checkbox, Column,
Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox,
Scrollable, Settings, Slider, Space, Text, TextInput,
Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
};
pub fn main() -> iced::Result {
@ -17,7 +17,8 @@ struct Styling {
button: button::State,
slider: slider::State,
slider_value: f32,
toggle_value: bool,
checkbox_value: bool,
toggler_value: bool,
}
#[derive(Debug, Clone)]
@ -27,6 +28,7 @@ enum Message {
ButtonPressed,
SliderChanged(f32),
CheckboxToggled(bool),
TogglerToggled(bool),
}
impl Sandbox for Styling {
@ -46,7 +48,8 @@ impl Sandbox for Styling {
Message::InputChanged(value) => self.input_value = value,
Message::ButtonPressed => {}
Message::SliderChanged(value) => self.slider_value = value,
Message::CheckboxToggled(value) => self.toggle_value = value,
Message::CheckboxToggled(value) => self.checkbox_value = value,
Message::TogglerToggled(value) => self.toggler_value = value,
}
}
@ -101,11 +104,19 @@ impl Sandbox for Styling {
.push(Text::new("You did it!"));
let checkbox = Checkbox::new(
self.toggle_value,
"Toggle me!",
self.checkbox_value,
"Check me!",
Message::CheckboxToggled,
)
.width(Length::Fill)
.style(self.theme);
let toggler = Toggler::new(
self.toggler_value,
String::from("Toggle me!"),
Message::TogglerToggled,
)
.width(Length::Shrink)
.spacing(10)
.style(self.theme);
let content = Column::new()
@ -124,7 +135,13 @@ impl Sandbox for Styling {
.align_items(Align::Center)
.push(scrollable)
.push(Rule::vertical(38).style(self.theme))
.push(checkbox),
.push(
Column::new()
.width(Length::Shrink)
.spacing(20)
.push(checkbox)
.push(toggler),
),
);
Container::new(content)
@ -140,7 +157,7 @@ impl Sandbox for Styling {
mod style {
use iced::{
button, checkbox, container, progress_bar, radio, rule, scrollable,
slider, text_input,
slider, text_input, toggler,
};
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
@ -231,6 +248,15 @@ mod style {
}
}
impl From<Theme> for Box<dyn toggler::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Toggler.into(),
}
}
}
impl From<Theme> for Box<dyn rule::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
@ -269,7 +295,7 @@ mod style {
mod dark {
use iced::{
button, checkbox, container, progress_bar, radio, rule, scrollable,
slider, text_input, Color,
slider, text_input, toggler, Color,
};
const SURFACE: Color = Color::from_rgb(
@ -520,6 +546,35 @@ mod style {
}
}
pub struct Toggler;
impl toggler::StyleSheet for Toggler {
fn active(&self, is_active: bool) -> toggler::Style {
toggler::Style {
background: if is_active { ACTIVE } else { SURFACE },
background_border: None,
foreground: if is_active { Color::WHITE } else { ACTIVE },
foreground_border: None,
}
}
fn hovered(&self, is_active: bool) -> toggler::Style {
toggler::Style {
background: if is_active { ACTIVE } else { SURFACE },
background_border: None,
foreground: if is_active {
Color {
a: 0.5,
..Color::WHITE
}
} else {
Color { a: 0.5, ..ACTIVE }
},
foreground_border: None,
}
}
}
pub struct Rule;
impl rule::StyleSheet for Rule {

32
examples/tour/src/main.rs
View File

@ -1,7 +1,7 @@
use iced::{
button, scrollable, slider, text_input, Button, Checkbox, Color, Column,
Container, Element, HorizontalAlignment, Image, Length, Radio, Row,
Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput,
Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
};
pub fn main() -> iced::Result {
@ -135,6 +135,9 @@ impl Steps {
color: Color::BLACK,
},
Step::Radio { selection: None },
Step::Toggler {
can_continue: false,
},
Step::Image {
width: 300,
slider: slider::State::new(),
@ -206,6 +209,9 @@ enum Step {
Radio {
selection: Option<Language>,
},
Toggler {
can_continue: bool,
},
Image {
width: u16,
slider: slider::State,
@ -232,6 +238,7 @@ pub enum StepMessage {
InputChanged(String),
ToggleSecureInput(bool),
DebugToggled(bool),
TogglerChanged(bool),
}
impl<'a> Step {
@ -287,6 +294,11 @@ impl<'a> Step {
*is_secure = toggle;
}
}
StepMessage::TogglerChanged(value) => {
if let Step::Toggler { can_continue, .. } = self {
*can_continue = value;
}
}
};
}
@ -294,6 +306,7 @@ impl<'a> Step {
match self {
Step::Welcome => "Welcome",
Step::Radio { .. } => "Radio button",
Step::Toggler { .. } => "Toggler",
Step::Slider { .. } => "Slider",
Step::Text { .. } => "Text",
Step::Image { .. } => "Image",
@ -309,6 +322,7 @@ impl<'a> Step {
match self {
Step::Welcome => true,
Step::Radio { selection } => *selection == Some(Language::Rust),
Step::Toggler { can_continue } => *can_continue,
Step::Slider { .. } => true,
Step::Text { .. } => true,
Step::Image { .. } => true,
@ -324,6 +338,7 @@ impl<'a> Step {
match self {
Step::Welcome => Self::welcome(),
Step::Radio { selection } => Self::radio(*selection),
Step::Toggler { can_continue } => Self::toggler(*can_continue),
Step::Slider { state, value } => Self::slider(state, *value),
Step::Text {
size_slider,
@ -545,6 +560,21 @@ impl<'a> Step {
))
}
fn toggler(can_continue: bool) -> Column<'a, StepMessage> {
Self::container("Toggler")
.push(Text::new(
"A toggler is mostly used to enable or disable something.",
))
.push(
Container::new(Toggler::new(
can_continue,
String::from("Toggle me to continue..."),
StepMessage::TogglerChanged,
))
.padding([0, 40]),
)
}
fn image(
width: u16,
slider: &'a mut slider::State,

3
glow/src/widget.rs
View File

@ -20,6 +20,7 @@ pub mod rule;
pub mod scrollable;
pub mod slider;
pub mod text_input;
pub mod toggler;
pub mod tooltip;
#[doc(no_inline)]
@ -45,6 +46,8 @@ pub use slider::Slider;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use toggler::Toggler;
#[doc(no_inline)]
pub use tooltip::Tooltip;
#[cfg(feature = "canvas")]

9
glow/src/widget/toggler.rs Normal file
View File

@ -0,0 +1,9 @@
//! Show toggle controls using togglers.
use crate::Renderer;
pub use iced_graphics::toggler::{Style, StyleSheet};
/// A toggler that can be toggled.
///
/// This is an alias of an `iced_native` checkbox with an `iced_wgpu::Renderer`.
pub type Toggler<Message> = iced_native::Toggler<Message, Renderer>;

3
graphics/src/widget.rs
View File

@ -20,6 +20,7 @@ pub mod scrollable;
pub mod slider;
pub mod svg;
pub mod text_input;
pub mod toggler;
pub mod tooltip;
mod column;
@ -50,6 +51,8 @@ pub use slider::Slider;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use toggler::Toggler;
#[doc(no_inline)]
pub use tooltip::Tooltip;
pub use column::Column;

99
graphics/src/widget/toggler.rs Normal file
View File

@ -0,0 +1,99 @@
//! Show toggle controls using togglers.
use crate::backend::{self, Backend};
use crate::{Primitive, Renderer};
use iced_native::mouse;
use iced_native::toggler;
use iced_native::Rectangle;
pub use iced_style::toggler::{Style, StyleSheet};
/// Makes sure that the border radius of the toggler looks good at every size.
const BORDER_RADIUS_RATIO: f32 = 32.0 / 13.0;
/// The space ratio between the background Quad and the Toggler bounds, and
/// between the background Quad and foreground Quad.
const SPACE_RATIO: f32 = 0.05;
/// A toggler that can be toggled.
///
/// This is an alias of an `iced_native` toggler with an `iced_wgpu::Renderer`.
pub type Toggler<Message, Backend> =
iced_native::Toggler<Message, Renderer<Backend>>;
impl<B> toggler::Renderer for Renderer<B>
where
B: Backend + backend::Text,
{
type Style = Box<dyn StyleSheet>;
const DEFAULT_SIZE: u16 = 20;
fn draw(
&mut self,
bounds: Rectangle,
is_active: bool,
is_mouse_over: bool,
label: Option<Self::Output>,
style_sheet: &Self::Style,
) -> Self::Output {
let style = if is_mouse_over {
style_sheet.hovered(is_active)
} else {
style_sheet.active(is_active)
};
let border_radius = bounds.height as f32 / BORDER_RADIUS_RATIO;
let space = SPACE_RATIO * bounds.height as f32;
let toggler_background_bounds = Rectangle {
x: bounds.x + space,
y: bounds.y + space,
width: bounds.width - (2.0 * space),
height: bounds.height - (2.0 * space),
};
let toggler_background = Primitive::Quad {
bounds: toggler_background_bounds,
background: style.background.into(),
border_radius,
border_width: 1.0,
border_color: style.background_border.unwrap_or(style.background),
};
let toggler_foreground_bounds = Rectangle {
x: bounds.x
+ if is_active {
bounds.width - 2.0 * space - (bounds.height - (4.0 * space))
} else {
2.0 * space
},
y: bounds.y + (2.0 * space),
width: bounds.height - (4.0 * space),
height: bounds.height - (4.0 * space),
};
let toggler_foreground = Primitive::Quad {
bounds: toggler_foreground_bounds,
background: style.foreground.into(),
border_radius,
border_width: 1.0,
border_color: style.foreground_border.unwrap_or(style.foreground),
};
(
Primitive::Group {
primitives: match label {
Some((l, _)) => {
vec![l, toggler_background, toggler_foreground]
}
None => vec![toggler_background, toggler_foreground],
},
},
if is_mouse_over {
mouse::Interaction::Pointer
} else {
mouse::Interaction::default()
},
)
}
}

18
native/src/renderer/null.rs
View File

@ -1,6 +1,6 @@
use crate::{
button, checkbox, column, container, pane_grid, progress_bar, radio, row,
scrollable, slider, text, text_input, Color, Element, Font,
scrollable, slider, text, text_input, toggler, Color, Element, Font,
HorizontalAlignment, Layout, Padding, Point, Rectangle, Renderer, Size,
VerticalAlignment,
};
@ -288,3 +288,19 @@ impl pane_grid::Renderer for Null {
) {
}
}
impl toggler::Renderer for Null {
type Style = ();
const DEFAULT_SIZE: u16 = 20;
fn draw(
&mut self,
_bounds: Rectangle,
_is_checked: bool,
_is_mouse_over: bool,
_label: Option<Self::Output>,
_style: &Self::Style,
) {
}
}

3
native/src/widget.rs
View File

@ -36,6 +36,7 @@ pub mod space;
pub mod svg;
pub mod text;
pub mod text_input;
pub mod toggler;
pub mod tooltip;
#[doc(no_inline)]
@ -73,6 +74,8 @@ pub use text::Text;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use toggler::Toggler;
#[doc(no_inline)]
pub use tooltip::Tooltip;
use crate::event::{self, Event};

277
native/src/widget/toggler.rs Normal file
View File

@ -0,0 +1,277 @@
//! Show toggle controls using togglers.
use std::hash::Hash;
use crate::{
event, layout, mouse, row, text, Align, Clipboard, Element, Event, Hasher,
HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
VerticalAlignment, Widget,
};
/// A toggler widget
///
/// # Example
///
/// ```
/// # type Toggler<Message> = iced_native::Toggler<Message, iced_native::renderer::Null>;
/// #
/// pub enum Message {
/// TogglerToggled(bool),
/// }
///
/// let is_active = true;
///
/// Toggler::new(is_active, String::from("Toggle me!"), |b| Message::TogglerToggled(b));
/// ```
#[allow(missing_debug_implementations)]
pub struct Toggler<Message, Renderer: self::Renderer + text::Renderer> {
is_active: bool,
on_toggle: Box<dyn Fn(bool) -> Message>,
label: Option<String>,
width: Length,
size: u16,
text_size: Option<u16>,
text_alignment: HorizontalAlignment,
spacing: u16,
font: Renderer::Font,
style: Renderer::Style,
}
impl<Message, Renderer: self::Renderer + text::Renderer>
Toggler<Message, Renderer>
{
/// Creates a new [`Toggler`].
///
/// It expects:
/// * a boolean describing whether the [`Toggler`] is checked or not
/// * An optional label for the [`Toggler`]
/// * a function that will be called when the [`Toggler`] is toggled. It
/// will receive the new state of the [`Toggler`] and must produce a
/// `Message`.
pub fn new<F>(
is_active: bool,
label: impl Into<Option<String>>,
f: F,
) -> Self
where
F: 'static + Fn(bool) -> Message,
{
Toggler {
is_active,
on_toggle: Box::new(f),
label: label.into(),
width: Length::Fill,
size: <Renderer as self::Renderer>::DEFAULT_SIZE,
text_size: None,
text_alignment: HorizontalAlignment::Left,
spacing: 0,
font: Renderer::Font::default(),
style: Renderer::Style::default(),
}
}
/// Sets the size of the [`Toggler`].
pub fn size(mut self, size: u16) -> Self {
self.size = size;
self
}
/// Sets the width of the [`Toggler`].
pub fn width(mut self, width: Length) -> Self {
self.width = width;
self
}
/// Sets the text size o the [`Toggler`].
pub fn text_size(mut self, text_size: u16) -> Self {
self.text_size = Some(text_size);
self
}
/// Sets the horizontal alignment of the text of the [`Toggler`]
pub fn text_alignment(mut self, alignment: HorizontalAlignment) -> Self {
self.text_alignment = alignment;
self
}
/// Sets the spacing between the [`Toggler`] and the text.
pub fn spacing(mut self, spacing: u16) -> Self {
self.spacing = spacing;
self
}
/// Sets the [`Font`] of the text of the [`Toggler`]
pub fn font(mut self, font: Renderer::Font) -> Self {
self.font = font;
self
}
/// Sets the style of the [`Toggler`].
pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
self.style = style.into();
self
}
}
impl<Message, Renderer> Widget<Message, Renderer> for Toggler<Message, Renderer>
where
Renderer: self::Renderer + text::Renderer + row::Renderer,
{
fn width(&self) -> Length {
self.width
}
fn height(&self) -> Length {
Length::Shrink
}
fn layout(
&self,
renderer: &Renderer,
limits: &layout::Limits,
) -> layout::Node {
let mut row = Row::<(), Renderer>::new()
.width(self.width)
.spacing(self.spacing)
.align_items(Align::Center);
if let Some(label) = &self.label {
row = row.push(
Text::new(label)
.horizontal_alignment(self.text_alignment)
.font(self.font)
.width(self.width)
.size(self.text_size.unwrap_or(renderer.default_size())),
);
}
row = row.push(
Row::new()
.width(Length::Units(2 * self.size))
.height(Length::Units(self.size)),
);
row.layout(renderer, limits)
}
fn on_event(
&mut self,
event: Event,
layout: Layout<'_>,
cursor_position: Point,
_renderer: &Renderer,
_clipboard: &mut dyn Clipboard,
messages: &mut Vec<Message>,
) -> event::Status {
match event {
Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left)) => {
let mouse_over = layout.bounds().contains(cursor_position);
if mouse_over {
messages.push((self.on_toggle)(!self.is_active));
event::Status::Captured
} else {
event::Status::Ignored
}
}
_ => event::Status::Ignored,
}
}
fn draw(
&self,
renderer: &mut Renderer,
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
_viewport: &Rectangle,
) -> Renderer::Output {
let bounds = layout.bounds();
let mut children = layout.children();
let label = match &self.label {
Some(label) => {
let label_layout = children.next().unwrap();
Some(text::Renderer::draw(
renderer,
defaults,
label_layout.bounds(),
&label,
self.text_size.unwrap_or(renderer.default_size()),
self.font,
None,
self.text_alignment,
VerticalAlignment::Center,
))
}
None => None,
};
let toggler_layout = children.next().unwrap();
let toggler_bounds = toggler_layout.bounds();
let is_mouse_over = bounds.contains(cursor_position);
self::Renderer::draw(
renderer,
toggler_bounds,
self.is_active,
is_mouse_over,
label,
&self.style,
)
}
fn hash_layout(&self, state: &mut Hasher) {
struct Marker;
std::any::TypeId::of::<Marker>().hash(state);
self.label.hash(state)
}
}
/// The renderer of a [`Toggler`].
///
/// Your [renderer] will need to implement this trait before being
/// able to use a [`Toggler`] in your user interface.
///
/// [renderer]: ../../renderer/index.html
pub trait Renderer: crate::Renderer {
/// The style supported by this renderer.
type Style: Default;
/// The default size of a [`Toggler`].
const DEFAULT_SIZE: u16;
/// Draws a [`Toggler`].
///
/// It receives:
/// * the bounds of the [`Toggler`]
/// * whether the [`Toggler`] is activated or not
/// * whether the mouse is over the [`Toggler`] or not
/// * the drawn label of the [`Toggler`]
/// * the style of the [`Toggler`]
fn draw(
&mut self,
bounds: Rectangle,
is_active: bool,
is_mouse_over: bool,
label: Option<Self::Output>,
style: &Self::Style,
) -> Self::Output;
}
impl<'a, Message, Renderer> From<Toggler<Message, Renderer>>
for Element<'a, Message, Renderer>
where
Renderer: 'a + self::Renderer + text::Renderer + row::Renderer,
Message: 'a,
{
fn from(
toggler: Toggler<Message, Renderer>,
) -> Element<'a, Message, Renderer> {
Element::new(toggler)
}
}

6
src/widget.rs
View File

@ -17,8 +17,8 @@
mod platform {
pub use crate::renderer::widget::{
button, checkbox, container, pane_grid, pick_list, progress_bar, radio,
rule, scrollable, slider, text_input, tooltip, Column, Row, Space,
Text,
rule, scrollable, slider, text_input, toggler, tooltip, Column, Row,
Space, Text,
};
#[cfg(any(feature = "canvas", feature = "glow_canvas"))]
@ -53,7 +53,7 @@ mod platform {
button::Button, checkbox::Checkbox, container::Container, image::Image,
pane_grid::PaneGrid, pick_list::PickList, progress_bar::ProgressBar,
radio::Radio, rule::Rule, scrollable::Scrollable, slider::Slider,
svg::Svg, text_input::TextInput, tooltip::Tooltip,
svg::Svg, text_input::TextInput, toggler::Toggler, tooltip::Tooltip,
};
#[cfg(any(feature = "canvas", feature = "glow_canvas"))]

1
style/src/lib.rs
View File

@ -18,3 +18,4 @@ pub mod rule;
pub mod scrollable;
pub mod slider;
pub mod text_input;
pub mod toggler;

57
style/src/toggler.rs Normal file
View File

@ -0,0 +1,57 @@
//! Show toggle controls using togglers.
use iced_core::Color;
/// The appearance of a toggler.
#[derive(Debug)]
pub struct Style {
pub background: Color,
pub background_border: Option<Color>,
pub foreground: Color,
pub foreground_border: Option<Color>,
}
/// A set of rules that dictate the style of a toggler.
pub trait StyleSheet {
fn active(&self, is_active: bool) -> Style;
fn hovered(&self, is_active: bool) -> Style;
}
struct Default;
impl StyleSheet for Default {
fn active(&self, is_active: bool) -> Style {
Style {
background: if is_active {
Color::from_rgb(0.0, 1.0, 0.0)
} else {
Color::from_rgb(0.7, 0.7, 0.7)
},
background_border: None,
foreground: Color::WHITE,
foreground_border: None,
}
}
fn hovered(&self, is_active: bool) -> Style {
Style {
foreground: Color::from_rgb(0.95, 0.95, 0.95),
..self.active(is_active)
}
}
}
impl std::default::Default for Box<dyn StyleSheet> {
fn default() -> Self {
Box::new(Default)
}
}
impl<T> From<T> for Box<dyn StyleSheet>
where
T: 'static + StyleSheet,
{
fn from(style: T) -> Self {
Box::new(style)
}
}

44
web/src/css.rs
View File

@ -14,6 +14,9 @@ pub enum Rule {
/// Spacing between elements
Spacing(u16),
/// Toggler input for a specific size
Toggler(u16),
}
impl Rule {
@ -23,6 +26,7 @@ impl Rule {
Rule::Column => String::from("c"),
Rule::Row => String::from("r"),
Rule::Spacing(spacing) => format!("s-{}", spacing),
Rule::Toggler(size) => format!("toggler-{}", size),
}
}
@ -55,6 +59,46 @@ impl Rule {
class
)
.into_bump_str(),
Rule::Toggler(size) => bumpalo::format!(
in bump,
".toggler-{} {{ display: flex; cursor: pointer; justify-content: space-between; }} \
.toggler-{} input {{ display:none; }} \
.toggler-{} span {{ background-color: #b1b1b1; position: relative; display: inline-flex; width:{}px; height: {}px; border-radius: {}px;}} \
.toggler-{} span > span {{ background-color: #FFFFFF; width: {}px; height: {}px; border-radius: 50%; top: 1px; left: 1px;}} \
.toggler-{}:hover span > span {{ background-color: #f1f1f1 !important; }} \
.toggler-{} input:checked + span {{ background-color: #00FF00; }} \
.toggler-{} input:checked + span > span {{ -webkit-transform: translateX({}px); -ms-transform:translateX({}px); transform: translateX({}px); }}
",
// toggler
size,
// toggler input
size,
// toggler span
size,
size*2,
size,
size,
// toggler span > span
size,
size-2,
size-2,
// toggler: hover + span > span
size,
// toggler input:checked + span
size,
// toggler input:checked + span > span
size,
size,
size,
size
)
.into_bump_str(),
}
}
}

3
web/src/widget.rs
View File

@ -24,6 +24,7 @@ pub mod radio;
pub mod scrollable;
pub mod slider;
pub mod text_input;
pub mod toggler;
mod column;
mod row;
@ -40,6 +41,8 @@ pub use slider::Slider;
pub use text::Text;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use toggler::Toggler;
pub use checkbox::Checkbox;
pub use column::Column;

171
web/src/widget/toggler.rs Normal file
View File

@ -0,0 +1,171 @@
//! Show toggle controls using togglers.
use crate::{css, Bus, Css, Element, Length, Widget};
pub use iced_style::toggler::{Style, StyleSheet};
use dodrio::bumpalo;
use std::rc::Rc;
/// A toggler that can be toggled.
///
/// # Example
///
/// ```
/// # use iced_web::Toggler;
///
/// pub enum Message {
/// TogglerToggled(bool),
/// }
///
/// let is_active = true;
///
/// Toggler::new(is_active, String::from("Toggle me!"), Message::TogglerToggled);
/// ```
///
#[allow(missing_debug_implementations)]
pub struct Toggler<Message> {
is_active: bool,
on_toggle: Rc<dyn Fn(bool) -> Message>,
label: Option<String>,
id: Option<String>,
width: Length,
style: Box<dyn StyleSheet>,
}
impl<Message> Toggler<Message> {
/// Creates a new [`Toggler`].
///
/// It expects:
/// * a boolean describing whether the [`Toggler`] is active or not
/// * An optional label for the [`Toggler`]
/// * a function that will be called when the [`Toggler`] is toggled. It
/// will receive the new state of the [`Toggler`] and must produce a
/// `Message`.
///
/// [`Toggler`]: struct.Toggler.html
pub fn new<F>(
is_active: bool,
label: impl Into<Option<String>>,
f: F,
) -> Self
where
F: 'static + Fn(bool) -> Message,
{
Toggler {
is_active,
on_toggle: Rc::new(f),
label: label.into(),
id: None,
width: Length::Shrink,
style: Default::default(),
}
}
/// Sets the width of the [`Toggler`].
///
/// [`Toggler`]: struct.Toggler.html
pub fn width(mut self, width: Length) -> Self {
self.width = width;
self
}
/// Sets the style of the [`Toggler`].
///
/// [`Toggler`]: struct.Toggler.html
pub fn style(mut self, style: impl Into<Box<dyn StyleSheet>>) -> Self {
self.style = style.into();
self
}
/// Sets the id of the [`Toggler`].
///
/// [`Toggler`]: struct.Toggler.html
pub fn id(mut self, id: impl Into<String>) -> Self {
self.id = Some(id.into());
self
}
}
impl<Message> Widget<Message> for Toggler<Message>
where
Message: 'static,
{
fn node<'b>(
&self,
bump: &'b bumpalo::Bump,
bus: &Bus<Message>,
style_sheet: &mut Css<'b>,
) -> dodrio::Node<'b> {
use dodrio::builder::*;
use dodrio::bumpalo::collections::String;
let toggler_label = &self
.label
.as_ref()
.map(|label| String::from_str_in(&label, bump).into_bump_str());
let event_bus = bus.clone();
let on_toggle = self.on_toggle.clone();
let is_active = self.is_active;
let row_class = style_sheet.insert(bump, css::Rule::Row);
let toggler_class = style_sheet.insert(bump, css::Rule::Toggler(16));
let (label, input) = if let Some(id) = &self.id {
let id = String::from_str_in(id, bump).into_bump_str();
(label(bump).attr("for", id), input(bump).attr("id", id))
} else {
(label(bump), input(bump))
};
let checkbox = input
.attr("type", "checkbox")
.bool_attr("checked", self.is_active)
.on("click", move |_root, vdom, _event| {
let msg = on_toggle(!is_active);
event_bus.publish(msg);
vdom.schedule_render();
})
.finish();
let toggler = span(bump).children(vec![span(bump).finish()]).finish();
label
.attr(
"class",
bumpalo::format!(in bump, "{} {}", row_class, toggler_class)
.into_bump_str(),
)
.attr(
"style",
bumpalo::format!(in bump, "width: {}; align-items: center", css::length(self.width))
.into_bump_str()
)
.children(
if let Some(label) = toggler_label {
vec![
text(label),
checkbox,
toggler,
]
} else {
vec![
checkbox,
toggler,
]
}
)
.finish()
}
}
impl<'a, Message> From<Toggler<Message>> for Element<'a, Message>
where
Message: 'static,
{
fn from(toggler: Toggler<Message>) -> Element<'a, Message> {
Element::new(toggler)
}
}

3
wgpu/src/widget.rs
View File

@ -20,6 +20,7 @@ pub mod rule;
pub mod scrollable;
pub mod slider;
pub mod text_input;
pub mod toggler;
pub mod tooltip;
#[doc(no_inline)]
@ -45,6 +46,8 @@ pub use slider::Slider;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use toggler::Toggler;
#[doc(no_inline)]
pub use tooltip::Tooltip;
#[cfg(feature = "canvas")]

9
wgpu/src/widget/toggler.rs Normal file
View File

@ -0,0 +1,9 @@
//! Show toggle controls using togglers.
use crate::Renderer;
pub use iced_graphics::toggler::{Style, StyleSheet};
/// A toggler that can be toggled
///
/// This is an alias of an `iced_native` toggler with an `iced_wgpu::Renderer`.
pub type Toggler<Message> = iced_native::Toggler<Message, Renderer>;