From 9ba955842913c9e1060bdb98deef9d645917b5cb Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 15 Feb 2021 23:59:31 +0100 Subject: Allow dead code explicitly in `iced_web` --- web/src/widget/button.rs | 2 ++ web/src/widget/checkbox.rs | 1 + web/src/widget/container.rs | 1 + web/src/widget/radio.rs | 1 + web/src/widget/scrollable.rs | 1 + web/src/widget/slider.rs | 2 ++ 6 files changed, 8 insertions(+) (limited to 'web') diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs index e7cff6a0..7c389a9f 100644 --- a/web/src/widget/button.rs +++ b/web/src/widget/button.rs @@ -25,8 +25,10 @@ pub struct Button<'a, Message> { content: Element<'a, Message>, on_press: Option, width: Length, + #[allow(dead_code)] height: Length, min_width: u32, + #[allow(dead_code)] min_height: u32, padding: u16, style: Box, diff --git a/web/src/widget/checkbox.rs b/web/src/widget/checkbox.rs index 543af99a..43110aa7 100644 --- a/web/src/widget/checkbox.rs +++ b/web/src/widget/checkbox.rs @@ -30,6 +30,7 @@ pub struct Checkbox { label: String, id: Option, width: Length, + #[allow(dead_code)] style: Box, } diff --git a/web/src/widget/container.rs b/web/src/widget/container.rs index 7187a4f0..8de3cc41 100644 --- a/web/src/widget/container.rs +++ b/web/src/widget/container.rs @@ -12,6 +12,7 @@ pub struct Container<'a, Message> { width: Length, height: Length, max_width: u32, + #[allow(dead_code)] max_height: u32, horizontal_alignment: Align, vertical_alignment: Align, diff --git a/web/src/widget/radio.rs b/web/src/widget/radio.rs index 5a9bc379..fbc88d29 100644 --- a/web/src/widget/radio.rs +++ b/web/src/widget/radio.rs @@ -37,6 +37,7 @@ pub struct Radio { label: String, id: Option, name: Option, + #[allow(dead_code)] style: Box, } diff --git a/web/src/widget/scrollable.rs b/web/src/widget/scrollable.rs index f9135dd6..bd9260ff 100644 --- a/web/src/widget/scrollable.rs +++ b/web/src/widget/scrollable.rs @@ -11,6 +11,7 @@ pub struct Scrollable<'a, Message> { height: Length, max_height: u32, content: Column<'a, Message>, + #[allow(dead_code)] style: Box, } diff --git a/web/src/widget/slider.rs b/web/src/widget/slider.rs index 91a4d2ec..f457aa4c 100644 --- a/web/src/widget/slider.rs +++ b/web/src/widget/slider.rs @@ -38,7 +38,9 @@ pub struct Slider<'a, T, Message> { step: T, value: T, on_change: Rc Message>>, + #[allow(dead_code)] width: Length, + #[allow(dead_code)] style: Box, } -- cgit From 7da3fb1b2225732c87aebb13a067fbdb30b0cf2d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 11 Mar 2021 03:49:45 +0100 Subject: Implement stub `Clipboard` in `iced_web` We need to figure out browser permissions and use of unstable `web-sys` APIs --- web/src/clipboard.rs | 21 +++++++++++++++++++++ web/src/lib.rs | 13 +++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 web/src/clipboard.rs (limited to 'web') diff --git a/web/src/clipboard.rs b/web/src/clipboard.rs new file mode 100644 index 00000000..167a1e53 --- /dev/null +++ b/web/src/clipboard.rs @@ -0,0 +1,21 @@ +/// A buffer for short-term storage and transfer within and between +/// applications. +#[derive(Debug, Clone, Copy)] +pub struct Clipboard; + +impl Clipboard { + /// Creates a new [`Clipboard`]. + pub fn new() -> Self { + Self + } + + /// Reads the current content of the [`Clipboard`] as text. + pub fn read(&self) -> Option { + unimplemented! {} + } + + /// Writes the given text contents to the [`Clipboard`]. + pub fn write(&mut self, _contents: String) { + unimplemented! {} + } +} diff --git a/web/src/lib.rs b/web/src/lib.rs index 58f6591d..4c65dfa3 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -59,6 +59,7 @@ use dodrio::bumpalo; use std::{cell::RefCell, rc::Rc}; mod bus; +mod clipboard; mod element; mod hasher; @@ -67,6 +68,7 @@ pub mod subscription; pub mod widget; pub use bus::Bus; +pub use clipboard::Clipboard; pub use css::Css; pub use dodrio; pub use element::Element; @@ -126,7 +128,11 @@ pub trait Application { /// this method. /// /// Any [`Command`] returned will be executed immediately in the background. - fn update(&mut self, message: Self::Message) -> Command; + fn update( + &mut self, + message: Self::Message, + clipboard: &mut Clipboard, + ) -> Command; /// Returns the widgets to display in the [`Application`]. /// @@ -156,6 +162,8 @@ pub trait Application { let document = window.document().unwrap(); let body = document.body().unwrap(); + let mut clipboard = Clipboard::new(); + let (sender, receiver) = iced_futures::futures::channel::mpsc::unbounded(); @@ -182,7 +190,8 @@ pub trait Application { let event_loop = receiver.for_each(move |message| { let (command, subscription) = runtime.enter(|| { - let command = application.borrow_mut().update(message); + let command = + application.borrow_mut().update(message, &mut clipboard); let subscription = application.borrow().subscription(); (command, subscription) -- cgit From 0864e63bde129b95261590b960efdc46c6d2d4d0 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 31 Mar 2021 20:06:03 +0200 Subject: Bump versions :tada: --- web/Cargo.toml | 8 ++++---- web/README.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'web') diff --git a/web/Cargo.toml b/web/Cargo.toml index e063a021..06573b95 100644 --- a/web/Cargo.toml +++ b/web/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "iced_web" -version = "0.3.0" +version = "0.4.0" authors = ["Héctor Ramón Jiménez "] edition = "2018" description = "A web backend for Iced" @@ -22,15 +22,15 @@ url = "2.0" num-traits = "0.2" [dependencies.iced_core] -version = "0.3" +version = "0.4" path = "../core" [dependencies.iced_futures] -version = "0.2" +version = "0.3" path = "../futures" [dependencies.iced_style] -version = "0.2" +version = "0.3" path = "../style" [dependencies.web-sys] diff --git a/web/README.md b/web/README.md index 0e770589..58ad8235 100644 --- a/web/README.md +++ b/web/README.md @@ -16,7 +16,7 @@ The crate is currently a __very experimental__, simple abstraction layer over [` Add `iced_web` as a dependency in your `Cargo.toml`: ```toml -iced_web = "0.3" +iced_web = "0.4" ``` __Iced moves fast and the `master` branch can contain breaking changes!__ If -- cgit From fe0a27c56d9d75fb521e69352259f1d737402a20 Mon Sep 17 00:00:00 2001 From: Ben LeFevre Date: Mon, 23 Nov 2020 17:19:21 +0000 Subject: Add support for asymmetrical padding --- web/src/css.rs | 23 +++++++++++------------ web/src/lib.rs | 2 +- web/src/widget/button.rs | 32 ++++++++++++++------------------ web/src/widget/column.rs | 25 ++++++++++++++----------- web/src/widget/container.rs | 25 ++++++++++++++----------- web/src/widget/row.rs | 25 ++++++++++++++----------- web/src/widget/scrollable.rs | 15 +++++++++++---- web/src/widget/text_input.rs | 30 +++++++++++++----------------- 8 files changed, 92 insertions(+), 85 deletions(-) (limited to 'web') diff --git a/web/src/css.rs b/web/src/css.rs index bdde23f3..66c363f2 100644 --- a/web/src/css.rs +++ b/web/src/css.rs @@ -1,5 +1,5 @@ //! Style your widgets. -use crate::{bumpalo, Align, Background, Color, Length}; +use crate::{bumpalo, Align, Background, Color, Length, Padding}; use std::collections::BTreeMap; @@ -12,9 +12,6 @@ pub enum Rule { /// Container with horizonal distribution Row, - /// Padding of the container - Padding(u16), - /// Spacing between elements Spacing(u16), } @@ -25,7 +22,6 @@ impl Rule { match self { Rule::Column => String::from("c"), Rule::Row => String::from("r"), - Rule::Padding(padding) => format!("p-{}", padding), Rule::Spacing(spacing) => format!("s-{}", spacing), } } @@ -45,13 +41,6 @@ impl Rule { bumpalo::format!(in bump, ".{} {}", class, body).into_bump_str() } - Rule::Padding(padding) => bumpalo::format!( - in bump, - ".{} {{ box-sizing: border-box; padding: {}px }}", - class, - padding - ) - .into_bump_str(), Rule::Spacing(spacing) => bumpalo::format!( in bump, ".c.{} > * {{ margin-bottom: {}px }} \ @@ -170,3 +159,13 @@ pub fn align(align: Align) -> &'static str { Align::End => "flex-end", } } + +/// Returns the style value for the given [`Padding`]. +/// +/// [`Padding`]: struct.Padding.html +pub fn padding(padding: Padding) -> String { + format!( + "{}px {}px {}px {}px", + padding.top, padding.right, padding.bottom, padding.left + ) +} diff --git a/web/src/lib.rs b/web/src/lib.rs index 4c65dfa3..e4271d58 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -75,7 +75,7 @@ pub use element::Element; pub use hasher::Hasher; pub use iced_core::{ keyboard, mouse, Align, Background, Color, Font, HorizontalAlignment, - Length, Point, Rectangle, Size, Vector, VerticalAlignment, + Length, Padding, Point, Rectangle, Size, Vector, VerticalAlignment, }; pub use iced_futures::{executor, futures, Command}; pub use subscription::Subscription; diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs index 7c389a9f..0e75fa3f 100644 --- a/web/src/widget/button.rs +++ b/web/src/widget/button.rs @@ -1,7 +1,7 @@ //! Allow your users to perform actions by pressing a button. //! //! A [`Button`] has some local [`State`]. -use crate::{css, Background, Bus, Css, Element, Length, Widget}; +use crate::{css, Background, Bus, Css, Element, Length, Padding, Widget}; pub use iced_style::button::{Style, StyleSheet}; @@ -30,7 +30,7 @@ pub struct Button<'a, Message> { min_width: u32, #[allow(dead_code)] min_height: u32, - padding: u16, + padding: Padding, style: Box, } @@ -48,7 +48,7 @@ impl<'a, Message> Button<'a, Message> { height: Length::Shrink, min_width: 0, min_height: 0, - padding: 5, + padding: Padding::new(5), style: Default::default(), } } @@ -77,9 +77,14 @@ impl<'a, Message> Button<'a, Message> { self } - /// Sets the padding of the [`Button`]. - pub fn padding(mut self, padding: u16) -> Self { - self.padding = padding; + /// Sets the [`Padding`] of the [`Button`]. + ///```ignore + /// Button::new(/*...*/).padding(20); // 20px on all sides + /// Button::new(/*...*/).padding([10, 20]); // top/bottom, left/right + /// Button::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left + /// ``` + pub fn padding>(mut self, padding: P) -> Self { + self.padding = padding.into(); self } @@ -122,9 +127,6 @@ where // TODO: State-based styling let style = self.style.active(); - let padding_class = - style_sheet.insert(bump, css::Rule::Padding(self.padding)); - let background = match style.background { None => String::from("none"), Some(background) => match background { @@ -132,25 +134,19 @@ where }, }; - let class = { - use dodrio::bumpalo::collections::String; - - String::from_str_in(&padding_class, bump).into_bump_str() - }; - let mut node = button(bump) - .attr("class", class) .attr( "style", bumpalo::format!( in bump, "background: {}; border-radius: {}px; width:{}; \ - min-width: {}; color: {}", + min-width: {}; color: {}; padding: {}", background, style.border_radius, css::length(self.width), css::min_length(self.min_width), - css::color(style.text_color) + css::color(style.text_color), + css::padding(self.padding) ) .into_bump_str(), ) diff --git a/web/src/widget/column.rs b/web/src/widget/column.rs index d832fdcb..a4c99046 100644 --- a/web/src/widget/column.rs +++ b/web/src/widget/column.rs @@ -1,4 +1,4 @@ -use crate::{css, Align, Bus, Css, Element, Length, Widget}; +use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget}; use dodrio::bumpalo; use std::u32; @@ -9,7 +9,7 @@ use std::u32; #[allow(missing_debug_implementations)] pub struct Column<'a, Message> { spacing: u16, - padding: u16, + padding: Padding, width: Length, height: Length, max_width: u32, @@ -28,7 +28,7 @@ impl<'a, Message> Column<'a, Message> { pub fn with_children(children: Vec>) -> Self { Column { spacing: 0, - padding: 0, + padding: Padding::ZERO, width: Length::Fill, height: Length::Shrink, max_width: u32::MAX, @@ -48,9 +48,14 @@ impl<'a, Message> Column<'a, Message> { self } - /// Sets the padding of the [`Column`]. - pub fn padding(mut self, units: u16) -> Self { - self.padding = units; + /// Sets the [`Padding`] of the [`Column`]. + ///```ignore + /// Column::new(/*...*/).padding(20); // 20px on all sides + /// Column::new(/*...*/).padding([10, 20]); // top/bottom, left/right + /// Column::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left + /// ``` + pub fn padding>(mut self, padding: P) -> Self { + self.padding = padding.into(); self } @@ -114,23 +119,21 @@ impl<'a, Message> Widget for Column<'a, Message> { let spacing_class = style_sheet.insert(bump, css::Rule::Spacing(self.spacing)); - let padding_class = - style_sheet.insert(bump, css::Rule::Padding(self.padding)); - // TODO: Complete styling div(bump) .attr( "class", - bumpalo::format!(in bump, "{} {} {}", column_class, spacing_class, padding_class) + bumpalo::format!(in bump, "{} {}", column_class, spacing_class) .into_bump_str(), ) .attr("style", bumpalo::format!( in bump, - "width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}", + "width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}", css::length(self.width), css::length(self.height), css::max_length(self.max_width), css::max_length(self.max_height), + css::padding(self.padding), css::align(self.align_items) ).into_bump_str() ) diff --git a/web/src/widget/container.rs b/web/src/widget/container.rs index 8de3cc41..9040f2ae 100644 --- a/web/src/widget/container.rs +++ b/web/src/widget/container.rs @@ -1,5 +1,5 @@ //! Decorate content and apply alignment. -use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Widget}; +use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Padding, Widget}; pub use iced_style::container::{Style, StyleSheet}; @@ -8,7 +8,7 @@ pub use iced_style::container::{Style, StyleSheet}; /// It is normally used for alignment purposes. #[allow(missing_debug_implementations)] pub struct Container<'a, Message> { - padding: u16, + padding: Padding, width: Length, height: Length, max_width: u32, @@ -29,7 +29,7 @@ impl<'a, Message> Container<'a, Message> { use std::u32; Container { - padding: 0, + padding: Padding::ZERO, width: Length::Shrink, height: Length::Shrink, max_width: u32::MAX, @@ -41,9 +41,14 @@ impl<'a, Message> Container<'a, Message> { } } - /// Sets the padding of the [`Container`]. - pub fn padding(mut self, units: u16) -> Self { - self.padding = units; + /// Sets the [`Padding`] of the [`Container`]. + ///```ignore + /// Container::new(/*...*/).padding(20); // 20px on all sides + /// Container::new(/*...*/).padding([10, 20]); // top/bottom, left/right + /// Container::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left + /// ``` + pub fn padding>(mut self, padding: P) -> Self { + self.padding = padding.into(); self } @@ -106,24 +111,22 @@ where let column_class = style_sheet.insert(bump, css::Rule::Column); - let padding_class = - style_sheet.insert(bump, css::Rule::Padding(self.padding)); - let style = self.style_sheet.style(); let node = div(bump) .attr( "class", - bumpalo::format!(in bump, "{} {}", column_class, padding_class).into_bump_str(), + bumpalo::format!(in bump, "{}", column_class).into_bump_str(), ) .attr( "style", bumpalo::format!( in bump, - "width: {}; height: {}; max-width: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px", + "width: {}; height: {}; max-width: {}; padding: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px", css::length(self.width), css::length(self.height), css::max_length(self.max_width), + css::padding(self.padding), css::align(self.horizontal_alignment), css::align(self.vertical_alignment), style.background.map(css::background).unwrap_or(String::from("initial")), diff --git a/web/src/widget/row.rs b/web/src/widget/row.rs index f00a544a..e0df294e 100644 --- a/web/src/widget/row.rs +++ b/web/src/widget/row.rs @@ -1,4 +1,4 @@ -use crate::{css, Align, Bus, Css, Element, Length, Widget}; +use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget}; use dodrio::bumpalo; use std::u32; @@ -9,7 +9,7 @@ use std::u32; #[allow(missing_debug_implementations)] pub struct Row<'a, Message> { spacing: u16, - padding: u16, + padding: Padding, width: Length, height: Length, max_width: u32, @@ -28,7 +28,7 @@ impl<'a, Message> Row<'a, Message> { pub fn with_children(children: Vec>) -> Self { Row { spacing: 0, - padding: 0, + padding: Padding::ZERO, width: Length::Fill, height: Length::Shrink, max_width: u32::MAX, @@ -48,9 +48,14 @@ impl<'a, Message> Row<'a, Message> { self } - /// Sets the padding of the [`Row`]. - pub fn padding(mut self, units: u16) -> Self { - self.padding = units; + /// Sets the [`Padding`] of the [`Row`]. + ///```ignore + /// Row::new(/*...*/).padding(20); // 20px on all sides + /// Row::new(/*...*/).padding([10, 20]); // top/bottom, left/right + /// Row::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left + /// ``` + pub fn padding>(mut self, padding: P) -> Self { + self.padding = padding.into(); self } @@ -114,23 +119,21 @@ impl<'a, Message> Widget for Row<'a, Message> { let spacing_class = style_sheet.insert(bump, css::Rule::Spacing(self.spacing)); - let padding_class = - style_sheet.insert(bump, css::Rule::Padding(self.padding)); - // TODO: Complete styling div(bump) .attr( "class", - bumpalo::format!(in bump, "{} {} {}", row_class, spacing_class, padding_class) + bumpalo::format!(in bump, "{} {}", row_class, spacing_class) .into_bump_str(), ) .attr("style", bumpalo::format!( in bump, - "width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}", + "width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}", css::length(self.width), css::length(self.height), css::max_length(self.max_width), css::max_length(self.max_height), + css::padding(self.padding), css::align(self.align_items) ).into_bump_str() ) diff --git a/web/src/widget/scrollable.rs b/web/src/widget/scrollable.rs index bd9260ff..10f633de 100644 --- a/web/src/widget/scrollable.rs +++ b/web/src/widget/scrollable.rs @@ -1,5 +1,7 @@ //! Navigate an endless amount of content with a scrollbar. -use crate::{bumpalo, css, Align, Bus, Column, Css, Element, Length, Widget}; +use crate::{ + bumpalo, css, Align, Bus, Column, Css, Element, Length, Padding, Widget, +}; pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet}; @@ -39,9 +41,14 @@ impl<'a, Message> Scrollable<'a, Message> { self } - /// Sets the padding of the [`Scrollable`]. - pub fn padding(mut self, units: u16) -> Self { - self.content = self.content.padding(units); + /// Sets the [`Padding`] of the [`Scrollable`]. + ///```ignore + /// Scrollable::new(/*...*/).padding(20); // 20px on all sides + /// Scrollable::new(/*...*/).padding([10, 20]); // top/bottom, left/right + /// Scrollable::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left + /// ``` + pub fn padding>(mut self, padding: P) -> Self { + self.content = self.content.padding(padding); self } diff --git a/web/src/widget/text_input.rs b/web/src/widget/text_input.rs index bc2048a8..c671f80e 100644 --- a/web/src/widget/text_input.rs +++ b/web/src/widget/text_input.rs @@ -1,7 +1,7 @@ //! Display fields that can be filled with text. //! //! A [`TextInput`] has some local [`State`]. -use crate::{bumpalo, css, Bus, Css, Element, Length, Widget}; +use crate::{bumpalo, css, Bus, Css, Element, Length, Padding, Widget}; pub use iced_style::text_input::{Style, StyleSheet}; @@ -35,7 +35,7 @@ pub struct TextInput<'a, Message> { is_secure: bool, width: Length, max_width: u32, - padding: u16, + padding: Padding, size: Option, on_change: Rc Message>>, on_submit: Option, @@ -66,7 +66,7 @@ impl<'a, Message> TextInput<'a, Message> { is_secure: false, width: Length::Fill, max_width: u32::MAX, - padding: 0, + padding: Padding::ZERO, size: None, on_change: Rc::new(Box::new(on_change)), on_submit: None, @@ -92,9 +92,14 @@ impl<'a, Message> TextInput<'a, Message> { self } - /// Sets the padding of the [`TextInput`]. - pub fn padding(mut self, units: u16) -> Self { - self.padding = units; + /// Sets the [`Padding`] of the [`TextInput`]. + ///```ignore + /// TextInput::new(/*...*/).padding(20); // 20px on all sides + /// TextInput::new(/*...*/).padding([10, 20]); // top/bottom, left/right + /// TextInput::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left + /// ``` + pub fn padding>(mut self, padding: P) -> Self { + self.padding = padding.into(); self } @@ -131,15 +136,6 @@ where use dodrio::builder::*; use wasm_bindgen::JsCast; - let class = { - use dodrio::bumpalo::collections::String; - - let padding_class = - style_sheet.insert(bump, css::Rule::Padding(self.padding)); - - String::from_str_in(&padding_class, bump).into_bump_str() - }; - let placeholder = { use dodrio::bumpalo::collections::String; @@ -159,16 +155,16 @@ where let style = self.style_sheet.active(); input(bump) - .attr("class", class) .attr( "style", bumpalo::format!( in bump, - "width: {}; max-width: {}; font-size: {}px; \ + "width: {}; max-width: {}; padding: {}; font-size: {}px; \ background: {}; border-width: {}px; border-color: {}; \ border-radius: {}px; color: {}", css::length(self.width), css::max_length(self.max_width), + css::padding(self.padding), self.size.unwrap_or(20), css::background(style.background), style.border_width, -- cgit From 2e17d7860b6f857315f14341813645ca980a15df Mon Sep 17 00:00:00 2001 From: Héctor Ramón Date: Tue, 1 Jun 2021 19:14:04 +0700 Subject: Fix unused variable warning in `iced_web::text_input` --- web/src/widget/text_input.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/src/widget/text_input.rs b/web/src/widget/text_input.rs index c671f80e..591fc21d 100644 --- a/web/src/widget/text_input.rs +++ b/web/src/widget/text_input.rs @@ -131,7 +131,7 @@ where &self, bump: &'b bumpalo::Bump, bus: &Bus, - style_sheet: &mut Css<'b>, + _style_sheet: &mut Css<'b>, ) -> dodrio::Node<'b> { use dodrio::builder::*; use wasm_bindgen::JsCast; -- cgit From 8a3b71df8b619571ce0a972826cb5a3987b66b3d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Date: Tue, 1 Jun 2021 19:45:47 +0700 Subject: Replace ignored doc-tests with additional documentation for `Padding` --- web/src/widget/button.rs | 5 ----- web/src/widget/column.rs | 5 ----- web/src/widget/container.rs | 5 ----- web/src/widget/row.rs | 5 ----- web/src/widget/scrollable.rs | 5 ----- web/src/widget/text_input.rs | 5 ----- 6 files changed, 30 deletions(-) (limited to 'web') diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs index 0e75fa3f..8a36aab9 100644 --- a/web/src/widget/button.rs +++ b/web/src/widget/button.rs @@ -78,11 +78,6 @@ impl<'a, Message> Button<'a, Message> { } /// Sets the [`Padding`] of the [`Button`]. - ///```ignore - /// Button::new(/*...*/).padding(20); // 20px on all sides - /// Button::new(/*...*/).padding([10, 20]); // top/bottom, left/right - /// Button::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left - /// ``` pub fn padding>(mut self, padding: P) -> Self { self.padding = padding.into(); self diff --git a/web/src/widget/column.rs b/web/src/widget/column.rs index a4c99046..8738c2af 100644 --- a/web/src/widget/column.rs +++ b/web/src/widget/column.rs @@ -49,11 +49,6 @@ impl<'a, Message> Column<'a, Message> { } /// Sets the [`Padding`] of the [`Column`]. - ///```ignore - /// Column::new(/*...*/).padding(20); // 20px on all sides - /// Column::new(/*...*/).padding([10, 20]); // top/bottom, left/right - /// Column::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left - /// ``` pub fn padding>(mut self, padding: P) -> Self { self.padding = padding.into(); self diff --git a/web/src/widget/container.rs b/web/src/widget/container.rs index 9040f2ae..c006e011 100644 --- a/web/src/widget/container.rs +++ b/web/src/widget/container.rs @@ -42,11 +42,6 @@ impl<'a, Message> Container<'a, Message> { } /// Sets the [`Padding`] of the [`Container`]. - ///```ignore - /// Container::new(/*...*/).padding(20); // 20px on all sides - /// Container::new(/*...*/).padding([10, 20]); // top/bottom, left/right - /// Container::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left - /// ``` pub fn padding>(mut self, padding: P) -> Self { self.padding = padding.into(); self diff --git a/web/src/widget/row.rs b/web/src/widget/row.rs index e0df294e..ffb515cf 100644 --- a/web/src/widget/row.rs +++ b/web/src/widget/row.rs @@ -49,11 +49,6 @@ impl<'a, Message> Row<'a, Message> { } /// Sets the [`Padding`] of the [`Row`]. - ///```ignore - /// Row::new(/*...*/).padding(20); // 20px on all sides - /// Row::new(/*...*/).padding([10, 20]); // top/bottom, left/right - /// Row::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left - /// ``` pub fn padding>(mut self, padding: P) -> Self { self.padding = padding.into(); self diff --git a/web/src/widget/scrollable.rs b/web/src/widget/scrollable.rs index 10f633de..ce0a10d4 100644 --- a/web/src/widget/scrollable.rs +++ b/web/src/widget/scrollable.rs @@ -42,11 +42,6 @@ impl<'a, Message> Scrollable<'a, Message> { } /// Sets the [`Padding`] of the [`Scrollable`]. - ///```ignore - /// Scrollable::new(/*...*/).padding(20); // 20px on all sides - /// Scrollable::new(/*...*/).padding([10, 20]); // top/bottom, left/right - /// Scrollable::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left - /// ``` pub fn padding>(mut self, padding: P) -> Self { self.content = self.content.padding(padding); self diff --git a/web/src/widget/text_input.rs b/web/src/widget/text_input.rs index 591fc21d..e8d8ca2f 100644 --- a/web/src/widget/text_input.rs +++ b/web/src/widget/text_input.rs @@ -93,11 +93,6 @@ impl<'a, Message> TextInput<'a, Message> { } /// Sets the [`Padding`] of the [`TextInput`]. - ///```ignore - /// TextInput::new(/*...*/).padding(20); // 20px on all sides - /// TextInput::new(/*...*/).padding([10, 20]); // top/bottom, left/right - /// TextInput::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left - /// ``` pub fn padding>(mut self, padding: P) -> Self { self.padding = padding.into(); self -- cgit From e00fca637202d7cd20fd10b2d7e2b2963f11dd33 Mon Sep 17 00:00:00 2001 From: Kaiden42 Date: Sat, 3 Oct 2020 18:26:31 +0200 Subject: Add `Toggler` widget to `iced_web` --- web/src/css.rs | 44 ++++++++++++ web/src/widget.rs | 3 + web/src/widget/toggler.rs | 168 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 215 insertions(+) create mode 100644 web/src/widget/toggler.rs (limited to 'web') diff --git a/web/src/css.rs b/web/src/css.rs index 66c363f2..21f51f85 100644 --- a/web/src/css.rs +++ b/web/src/css.rs @@ -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(), } } } diff --git a/web/src/widget.rs b/web/src/widget.rs index 023f5f13..4cb0a9cc 100644 --- a/web/src/widget.rs +++ b/web/src/widget.rs @@ -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; diff --git a/web/src/widget/toggler.rs b/web/src/widget/toggler.rs new file mode 100644 index 00000000..5bcc1fc7 --- /dev/null +++ b/web/src/widget/toggler.rs @@ -0,0 +1,168 @@ +//! 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 { + is_active: bool, + on_toggle: Rc Message>, + label: Option, + id: Option, + width: Length, + style: Box, +} + +impl Toggler { + /// 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(is_active: bool, label: impl Into>, 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>) -> Self { + self.style = style.into(); + self + } + + /// Sets the id of the [`Toggler`]. + /// + /// [`Toggler`]: struct.Toggler.html + pub fn id(mut self, id: impl Into) -> Self { + self.id = Some(id.into()); + self + } +} + +impl Widget for Toggler +where + Message: 'static, +{ + fn node<'b>( + &self, + bump: &'b bumpalo::Bump, + bus: &Bus, + 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> for Element<'a, Message> +where + Message: 'static, +{ + fn from(toggler: Toggler) -> Element<'a, Message> { + Element::new(toggler) + } +} \ No newline at end of file -- cgit From 2a5aa69024fe8c73929a4c616f02c50eb5ce43ae Mon Sep 17 00:00:00 2001 From: Kaiden42 Date: Sat, 3 Oct 2020 20:30:08 +0200 Subject: Fix format --- web/src/widget/toggler.rs | 43 +++++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 20 deletions(-) (limited to 'web') diff --git a/web/src/widget/toggler.rs b/web/src/widget/toggler.rs index 5bcc1fc7..0a198079 100644 --- a/web/src/widget/toggler.rs +++ b/web/src/widget/toggler.rs @@ -7,21 +7,21 @@ 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 { is_active: bool, @@ -34,16 +34,20 @@ pub struct Toggler { impl Toggler { /// 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(is_active: bool, label: impl Into>, f: F) -> Self + pub fn new( + is_active: bool, + label: impl Into>, + f: F, + ) -> Self where F: 'static + Fn(bool) -> Message, { @@ -58,7 +62,7 @@ impl Toggler { } /// Sets the width of the [`Toggler`]. - /// + /// /// [`Toggler`]: struct.Toggler.html pub fn width(mut self, width: Length) -> Self { self.width = width; @@ -66,7 +70,7 @@ impl Toggler { } /// Sets the style of the [`Toggler`]. - /// + /// /// [`Toggler`]: struct.Toggler.html pub fn style(mut self, style: impl Into>) -> Self { self.style = style.into(); @@ -74,7 +78,7 @@ impl Toggler { } /// Sets the id of the [`Toggler`]. - /// + /// /// [`Toggler`]: struct.Toggler.html pub fn id(mut self, id: impl Into) -> Self { self.id = Some(id.into()); @@ -95,9 +99,10 @@ where 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 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(); @@ -125,9 +130,7 @@ where }) .finish(); - let toggler = span(bump) - .children(vec![span(bump).finish()]) - .finish(); + let toggler = span(bump).children(vec![span(bump).finish()]).finish(); label .attr( @@ -140,7 +143,7 @@ where bumpalo::format!(in bump, "width: {}; align-items: center", css::length(self.width)) .into_bump_str() ) - .children( + .children( if let Some(label) = toggler_label { vec![ text(label), @@ -165,4 +168,4 @@ where fn from(toggler: Toggler) -> Element<'a, Message> { Element::new(toggler) } -} \ No newline at end of file +} -- cgit From dbc1181011d579ac1da2546fba08e11094633f4b Mon Sep 17 00:00:00 2001 From: Jonas Matser Date: Tue, 1 Dec 2020 11:52:52 +0100 Subject: Adds doc comment for disabled button Makes disabled button behavior consistent in web --- web/src/widget/button.rs | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'web') diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs index 8a36aab9..7c8612f6 100644 --- a/web/src/widget/button.rs +++ b/web/src/widget/button.rs @@ -20,6 +20,14 @@ use dodrio::bumpalo; /// let button = Button::new(&mut state, Text::new("Press me!")) /// .on_press(Message::ButtonPressed); /// ``` +/// +/// Buttons can be disabled by not having an on_press. +/// +/// ``` +/// let mut state = button::State::new(); +/// let disabled_button = Button::new(&mut state, Text::new("I'm disabled!")); +/// ``` + #[allow(missing_debug_implementations)] pub struct Button<'a, Message> { content: Element<'a, Message>, @@ -90,6 +98,7 @@ impl<'a, Message> Button<'a, Message> { } /// Sets the message that will be produced when the [`Button`] is pressed. + /// If on_press isn't set, button will be disabled. pub fn on_press(mut self, msg: Message) -> Self { self.on_press = Some(msg); self @@ -153,6 +162,8 @@ where node = node.on("click", move |_root, _vdom, _event| { event_bus.publish(on_press.clone()); }); + } else { + node = node.attr("disabled", ""); } node.finish() -- cgit From e66120b9c1d3998085de7422edaac778e4ebf3e3 Mon Sep 17 00:00:00 2001 From: Jonas Matser Date: Tue, 1 Dec 2020 14:28:40 +0100 Subject: Fix failing doctests --- web/src/widget/button.rs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs index 7c8612f6..6afcaee3 100644 --- a/web/src/widget/button.rs +++ b/web/src/widget/button.rs @@ -24,8 +24,14 @@ use dodrio::bumpalo; /// Buttons can be disabled by not having an on_press. /// /// ``` +/// # use iced_web::{button, Button, Text}; +/// # +/// # enum Message { +/// # ButtonPressed, +/// # } +/// # /// let mut state = button::State::new(); -/// let disabled_button = Button::new(&mut state, Text::new("I'm disabled!")); +/// let disabled_button = Button::::new(&mut state, Text::new("I'm disabled!")); /// ``` #[allow(missing_debug_implementations)] -- cgit From d46dd67a91731177406570aae5e921a728b8c2b4 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Date: Thu, 10 Jun 2021 18:40:32 +0700 Subject: Update disabled example of `Button` in docs --- web/src/widget/button.rs | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) (limited to 'web') diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs index 6afcaee3..cd450b55 100644 --- a/web/src/widget/button.rs +++ b/web/src/widget/button.rs @@ -21,19 +21,25 @@ use dodrio::bumpalo; /// .on_press(Message::ButtonPressed); /// ``` /// -/// Buttons can be disabled by not having an on_press. +/// If a [`Button::on_press`] handler is not set, the resulting [`Button`] will +/// be disabled: /// /// ``` /// # use iced_web::{button, Button, Text}; /// # -/// # enum Message { -/// # ButtonPressed, -/// # } -/// # -/// let mut state = button::State::new(); -/// let disabled_button = Button::::new(&mut state, Text::new("I'm disabled!")); +/// #[derive(Clone)] +/// enum Message { +/// ButtonPressed, +/// } +/// +/// fn disabled_button(state: &mut button::State) -> Button<'_, Message> { +/// Button::new(state, Text::new("I'm disabled!")) +/// } +/// +/// fn enabled_button(state: &mut button::State) -> Button<'_, Message> { +/// disabled_button(state).on_press(Message::ButtonPressed) +/// } /// ``` - #[allow(missing_debug_implementations)] pub struct Button<'a, Message> { content: Element<'a, Message>, -- cgit From 83d19689c80266874e0a26085f17a94fd3507e1e Mon Sep 17 00:00:00 2001 From: Yusuf Bera Ertan Date: Mon, 14 Jun 2021 21:01:37 +0300 Subject: docs: update all 0.2 github links to 0.3 --- web/src/lib.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/src/lib.rs b/web/src/lib.rs index e4271d58..158416b9 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -49,7 +49,7 @@ //! //! [`wasm-pack`]: https://github.com/rustwasm/wasm-pack //! [`wasm-bindgen`]: https://github.com/rustwasm/wasm-bindgen -//! [`tour` example]: https://github.com/hecrj/iced/tree/0.2/examples/tour +//! [`tour` example]: https://github.com/hecrj/iced/tree/0.3/examples/tour #![deny(missing_docs)] #![deny(missing_debug_implementations)] #![deny(unused_results)] -- cgit From 735cfb790813c44852612400e31c0190b9c641a6 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 12 Jul 2021 21:44:01 +0200 Subject: Move `menu` module from `iced_native` to `iced_core` --- web/src/lib.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/src/lib.rs b/web/src/lib.rs index 158416b9..6b7d0115 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -74,8 +74,8 @@ pub use dodrio; pub use element::Element; pub use hasher::Hasher; pub use iced_core::{ - keyboard, mouse, Align, Background, Color, Font, HorizontalAlignment, - Length, Padding, Point, Rectangle, Size, Vector, VerticalAlignment, + keyboard, menu, mouse, Align, Background, Color, Font, HorizontalAlignment, + Length, Menu, Padding, Point, Rectangle, Size, Vector, VerticalAlignment, }; pub use iced_futures::{executor, futures, Command}; pub use subscription::Subscription; -- cgit From 29cc840cfa129a5ee3ecd1befe6e0fe85cb0e2d7 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 22 Jul 2021 20:32:54 +0700 Subject: Add empty `select_all` implementation for `TextInput` in `iced_web` --- web/src/widget/text_input.rs | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'web') diff --git a/web/src/widget/text_input.rs b/web/src/widget/text_input.rs index bc2048a8..d61ee2fd 100644 --- a/web/src/widget/text_input.rs +++ b/web/src/widget/text_input.rs @@ -232,4 +232,9 @@ impl State { // TODO Self::default() } + + /// Selects all the content of the [`TextInput`]. + pub fn select_all(&mut self) { + // TODO + } } -- cgit