From 8426bf953cb50f3b7fcb1e0ec8c2fdf22d2b01af Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 30 Dec 2019 19:20:59 +0100 Subject: Implement `Empty` widget It can be useful if you want to fill some space with nothing. --- web/src/widget.rs | 2 ++ web/src/widget/empty.rs | 70 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 web/src/widget/empty.rs (limited to 'web') diff --git a/web/src/widget.rs b/web/src/widget.rs index b0e16692..5cf0238a 100644 --- a/web/src/widget.rs +++ b/web/src/widget.rs @@ -25,6 +25,7 @@ pub mod text_input; mod checkbox; mod column; mod container; +mod empty; mod image; mod radio; mod row; @@ -44,6 +45,7 @@ pub use text_input::TextInput; pub use checkbox::Checkbox; pub use column::Column; pub use container::Container; +pub use empty::Empty; pub use image::Image; pub use radio::Radio; pub use row::Row; diff --git a/web/src/widget/empty.rs b/web/src/widget/empty.rs new file mode 100644 index 00000000..dda17efe --- /dev/null +++ b/web/src/widget/empty.rs @@ -0,0 +1,70 @@ +use crate::{style, Bus, Element, Length, Widget}; +use dodrio::bumpalo; + +/// An amount of empty space. +/// +/// It can be useful if you want to fill some space with nothing. +/// +/// [`Empty`]: struct.Empty.html +#[derive(Debug)] +pub struct Empty { + width: Length, + height: Length, +} + +impl Empty { + /// Creates an amount of [`Empty`] space. + /// + /// [`Empty`]: struct.Empty.html + pub fn new() -> Self { + Empty { + width: Length::Shrink, + height: Length::Shrink, + } + } + + /// Sets the width of the [`Empty`] space. + /// + /// [`Empty`]: struct..html + pub fn width(mut self, width: Length) -> Self { + self.width = width; + self + } + + /// Sets the height of the [`Empty`] space. + /// + /// [`Empty`]: struct.Column.html + pub fn height(mut self, height: Length) -> Self { + self.height = height; + self + } +} + +impl<'a, Message> Widget for Empty { + fn node<'b>( + &self, + bump: &'b bumpalo::Bump, + _publish: &Bus, + _style_sheet: &mut style::Sheet<'b>, + ) -> dodrio::Node<'b> { + use dodrio::builder::*; + + let width = style::length(self.width); + let height = style::length(self.height); + + let style = bumpalo::format!( + in bump, + "width: {}; height: {};", + width, + height + ); + + div(bump).attr("style", style.into_bump_str()).finish() + } +} + +impl<'a, Message> From for Element<'a, Message> { + fn from(empty: Empty) -> Element<'a, Message> { + Element::new(empty) + } +} -- cgit From aecc3ad1955b8433d1634ab1b975d2af20e772a1 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 30 Dec 2019 18:37:13 +0100 Subject: Add `Length::FillPortion` variant It allows to specify the amount of available space an element should take relative to other elements. --- web/src/style.rs | 2 +- web/src/widget/image.rs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/src/style.rs b/web/src/style.rs index 2fb8602a..4f72b22c 100644 --- a/web/src/style.rs +++ b/web/src/style.rs @@ -139,7 +139,7 @@ pub fn length(length: Length) -> String { match length { Length::Shrink => String::from("auto"), Length::Units(px) => format!("{}px", px), - Length::Fill => String::from("100%"), + Length::Fill | Length::FillPortion(_) => String::from("100%"), } } diff --git a/web/src/widget/image.rs b/web/src/widget/image.rs index ed8b7ecf..413b663e 100644 --- a/web/src/widget/image.rs +++ b/web/src/widget/image.rs @@ -67,7 +67,7 @@ impl Widget for Image { match self.width { Length::Shrink => {} - Length::Fill => { + Length::Fill | Length::FillPortion(_) => { image = image.attr("width", "100%"); } Length::Units(px) => { -- cgit From 3a327e08e96d9588d145c32afe4f04f37a8f0f0f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 30 Dec 2019 21:32:21 +0100 Subject: Rename `Empty` widget to `Space` --- web/src/widget.rs | 4 +-- web/src/widget/empty.rs | 70 ------------------------------------------------- web/src/widget/space.rs | 69 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 72 deletions(-) delete mode 100644 web/src/widget/empty.rs create mode 100644 web/src/widget/space.rs (limited to 'web') diff --git a/web/src/widget.rs b/web/src/widget.rs index 5cf0238a..0ac536bd 100644 --- a/web/src/widget.rs +++ b/web/src/widget.rs @@ -25,10 +25,10 @@ pub mod text_input; mod checkbox; mod column; mod container; -mod empty; mod image; mod radio; mod row; +mod space; mod text; #[doc(no_inline)] @@ -45,10 +45,10 @@ pub use text_input::TextInput; pub use checkbox::Checkbox; pub use column::Column; pub use container::Container; -pub use empty::Empty; pub use image::Image; pub use radio::Radio; pub use row::Row; +pub use space::Space; /// A component that displays information and allows interaction. /// diff --git a/web/src/widget/empty.rs b/web/src/widget/empty.rs deleted file mode 100644 index dda17efe..00000000 --- a/web/src/widget/empty.rs +++ /dev/null @@ -1,70 +0,0 @@ -use crate::{style, Bus, Element, Length, Widget}; -use dodrio::bumpalo; - -/// An amount of empty space. -/// -/// It can be useful if you want to fill some space with nothing. -/// -/// [`Empty`]: struct.Empty.html -#[derive(Debug)] -pub struct Empty { - width: Length, - height: Length, -} - -impl Empty { - /// Creates an amount of [`Empty`] space. - /// - /// [`Empty`]: struct.Empty.html - pub fn new() -> Self { - Empty { - width: Length::Shrink, - height: Length::Shrink, - } - } - - /// Sets the width of the [`Empty`] space. - /// - /// [`Empty`]: struct..html - pub fn width(mut self, width: Length) -> Self { - self.width = width; - self - } - - /// Sets the height of the [`Empty`] space. - /// - /// [`Empty`]: struct.Column.html - pub fn height(mut self, height: Length) -> Self { - self.height = height; - self - } -} - -impl<'a, Message> Widget for Empty { - fn node<'b>( - &self, - bump: &'b bumpalo::Bump, - _publish: &Bus, - _style_sheet: &mut style::Sheet<'b>, - ) -> dodrio::Node<'b> { - use dodrio::builder::*; - - let width = style::length(self.width); - let height = style::length(self.height); - - let style = bumpalo::format!( - in bump, - "width: {}; height: {};", - width, - height - ); - - div(bump).attr("style", style.into_bump_str()).finish() - } -} - -impl<'a, Message> From for Element<'a, Message> { - fn from(empty: Empty) -> Element<'a, Message> { - Element::new(empty) - } -} diff --git a/web/src/widget/space.rs b/web/src/widget/space.rs new file mode 100644 index 00000000..baf4c80b --- /dev/null +++ b/web/src/widget/space.rs @@ -0,0 +1,69 @@ +use crate::{style, Bus, Element, Length, Widget}; +use dodrio::bumpalo; + +/// An amount of empty space. +/// +/// It can be useful if you want to fill some space with nothing. +#[derive(Debug)] +pub struct Space { + width: Length, + height: Length, +} + +impl Space { + /// Creates an amount of empty [`Space`] with the given width and height. + /// + /// [`Space`]: struct.Space.html + pub fn new(width: Length, height: Length) -> Self { + Space { width, height } + } + + /// Creates an amount of horizontal [`Space`]. + /// + /// [`Space`]: struct.Space.html + pub fn with_width(width: Length) -> Self { + Space { + width, + height: Length::Shrink, + } + } + + /// Creates an amount of vertical [`Space`]. + /// + /// [`Space`]: struct.Space.html + pub fn with_height(height: Length) -> Self { + Space { + width: Length::Shrink, + height, + } + } +} + +impl<'a, Message> Widget for Space { + fn node<'b>( + &self, + bump: &'b bumpalo::Bump, + _publish: &Bus, + _style_sheet: &mut style::Sheet<'b>, + ) -> dodrio::Node<'b> { + use dodrio::builder::*; + + let width = style::length(self.width); + let height = style::length(self.height); + + let style = bumpalo::format!( + in bump, + "width: {}; height: {};", + width, + height + ); + + div(bump).attr("style", style.into_bump_str()).finish() + } +} + +impl<'a, Message> From for Element<'a, Message> { + fn from(space: Space) -> Element<'a, Message> { + Element::new(space) + } +} -- cgit From 0b663ca82aa4fccb95ada3dd01d82cbaec6acc24 Mon Sep 17 00:00:00 2001 From: Songtronix Date: Fri, 3 Jan 2020 16:41:16 +0100 Subject: add(web): support password field --- web/src/widget/text_input.rs | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'web') diff --git a/web/src/widget/text_input.rs b/web/src/widget/text_input.rs index 99792c84..eedc25bc 100644 --- a/web/src/widget/text_input.rs +++ b/web/src/widget/text_input.rs @@ -32,6 +32,7 @@ pub struct TextInput<'a, Message> { _state: &'a mut State, placeholder: String, value: String, + is_secure: bool, width: Length, max_width: Length, padding: u16, @@ -64,6 +65,7 @@ impl<'a, Message> TextInput<'a, Message> { _state: state, placeholder: String::from(placeholder), value: String::from(value), + is_secure: false, width: Length::Fill, max_width: Length::Shrink, padding: 0, @@ -73,6 +75,14 @@ impl<'a, Message> TextInput<'a, Message> { } } + /// Converts the [`TextInput`] into a secure password input. + /// + /// [`TextInput`]: struct.TextInput.html + pub fn password(mut self) -> Self { + self.is_secure = true; + self + } + /// Sets the width of the [`TextInput`]. /// /// [`TextInput`]: struct.TextInput.html @@ -161,6 +171,10 @@ where "value", bumpalo::format!(in bump, "{}", self.value).into_bump_str(), ) + .attr( + "type", + bumpalo::format!(in bump, "{}", if self.is_secure { "password" } else { "text" }).into_bump_str(), + ) .on("input", move |root, vdom, event| { let text_input = match event.target().and_then(|t| { t.dyn_into::().ok() -- cgit From cc529a1803972604b122c19c0104e71532fff993 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 8 Jan 2020 03:22:05 +0100 Subject: Add a note about cross-compatibility in `master` Fixes #145 --- web/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/README.md b/web/README.md index 762f6c83..6a3da7b4 100644 --- a/web/README.md +++ b/web/README.md @@ -39,7 +39,11 @@ cargo build --example tour --target wasm32-unknown-unknown wasm-bindgen ../target/wasm32-unknown-unknown/debug/examples/tour.wasm --out-dir tour --web ``` -Then, we need to create an `.html` file to load our application: +*__Note:__ Keep in mind that Iced is still in early exploration stages and most of the work needs to happen on the native side of the ecosystem. At this stage, it is important to be able to batch work without having to constantly jump back and forth. Because of this, there is currently no requirement for the `master` branch to contain a cross-platform API at all times. If you hit an issue when building an example and want to help, it may be a good way to [start contributing]!* + +[start contributing]: ../CONTRIBUTING.md + +Once the example is compiled, we need to create an `.html` file to load our application: ```html -- cgit