diff options
| author |  Héctor Ramón Jiménez <hector0193@gmail.com> | 2020-01-09 01:37:57 +0100 |
|---|---|---|
| committer | Héctor Ramón Jiménez <hector0193@gmail.com> | 2020-01-09 01:37:57 +0100 |
| commit | a4e833e860c41796d491ab43e84239fcca1f303d (patch) | |
| tree | c41ab304ffaf2dc2311c7d33916cd0515114ad31 /web | |
| parent | 2ff0e48142c302cb93130164d083589bb2ac4979 (diff) | |
| parent | cc529a1803972604b122c19c0104e71532fff993 (diff) | |
| download | iced-a4e833e860c41796d491ab43e84239fcca1f303d.tar.gz iced-a4e833e860c41796d491ab43e84239fcca1f303d.tar.bz2 iced-a4e833e860c41796d491ab43e84239fcca1f303d.zip | |
Merge branch 'master' into feature/shrink-by-default
Diffstat (limited to 'web')
| -rw-r--r-- | web/README.md | 6 | ||||
| -rw-r--r-- | web/src/style.rs | 2 | ||||
| -rw-r--r-- | web/src/widget.rs | 2 | ||||
| -rw-r--r-- | web/src/widget/image.rs | 2 | ||||
| -rw-r--r-- | web/src/widget/space.rs | 69 | ||||
| -rw-r--r-- | web/src/widget/text_input.rs | 14 |
6 files changed, 92 insertions, 3 deletions
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 <!DOCTYPE html> 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.rs b/web/src/widget.rs index b0e16692..0ac536bd 100644 --- a/web/src/widget.rs +++ b/web/src/widget.rs @@ -28,6 +28,7 @@ mod container; mod image; mod radio; mod row; +mod space; mod text; #[doc(no_inline)] @@ -47,6 +48,7 @@ pub use container::Container; 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/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<Message> Widget<Message> for Image { match self.width { Length::Shrink => {} - Length::Fill => { + Length::Fill | Length::FillPortion(_) => { image = image.attr("width", "100%"); } Length::Units(px) => { 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<Message> for Space { + fn node<'b>( + &self, + bump: &'b bumpalo::Bump, + _publish: &Bus<Message>, + _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<Space> for Element<'a, Message> { + fn from(space: Space) -> Element<'a, Message> { + Element::new(space) + } +} 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::<web_sys::HtmlInputElement>().ok() |