Merge branch 'master' into feature/custom-styling

examples/custom_widget.rs

@@ -127,10 +127,7 @@ impl Sandbox for Example {
             .max_width(500)
             .align_items(Align::Center)
             .push(Circle::new(self.radius))
-            .push(
+            .push(Text::new(format!("Radius: {}", self.radius.to_string())))
-                Text::new(format!("Radius: {}", self.radius.to_string()))
-                    .width(Length::Shrink),
-            )
             .push(Slider::new(
                 &mut self.slider,
                 1.0..=100.0,

examples/events.rs

@@ -57,13 +57,9 @@ impl Application for Events {
 
     fn view(&mut self) -> Element<Message> {
         let events = self.last.iter().fold(
-            Column::new().width(Length::Shrink).spacing(10),
+            Column::new().spacing(10),
             |column, event| {
-                column.push(
+                column.push(Text::new(format!("{:?}", event)).size(40))
-                    Text::new(format!("{:?}", event))
-                        .size(40)
-                        .width(Length::Shrink),
-                )
             },
         );
 
@@ -71,11 +67,9 @@ impl Application for Events {
             self.enabled,
             "Listen to runtime events",
             Message::Toggled,
-        )
+        );
-        .width(Length::Shrink);
 
         let content = Column::new()
-            .width(Length::Shrink)
             .align_items(Align::Center)
             .spacing(20)
             .push(events)

examples/pokedex.rs

@@ -77,11 +77,8 @@ impl Application for Pokedex {
 
     fn view(&mut self) -> Element<Message> {
         let content = match self {
-            Pokedex::Loading => Column::new().width(Length::Shrink).push(
+            Pokedex::Loading => Column::new()
-                Text::new("Searching for Pokémon...")
+                .push(Text::new("Searching for Pokémon...").size(40)),
-                    .width(Length::Shrink)
-                    .size(40),
-            ),
             Pokedex::Loaded { pokemon, search } => Column::new()
                 .max_width(500)
                 .spacing(20)
@@ -91,14 +88,9 @@ impl Application for Pokedex {
                     button(search, "Keep searching!").on_press(Message::Search),
                 ),
             Pokedex::Errored { try_again, .. } => Column::new()
-                .width(Length::Shrink)
                 .spacing(20)
                 .align_items(Align::End)
-                .push(
+                .push(Text::new("Whoops! Something went wrong...").size(40))
-                    Text::new("Whoops! Something went wrong...")
-                        .width(Length::Shrink)
-                        .size(40),
-                )
                 .push(button(try_again, "Try again").on_press(Message::Search)),
         };
 
@@ -134,10 +126,13 @@ impl Pokemon {
                         Row::new()
                             .align_items(Align::Center)
                             .spacing(20)
-                            .push(Text::new(&self.name).size(30))
+                            .push(
+                                Text::new(&self.name)
+                                    .size(30)
+                                    .width(Length::Fill),
+                            )
                             .push(
                                 Text::new(format!("#{}", self.number))
-                                    .width(Length::Shrink)
                                     .size(20)
                                     .color([0.5, 0.5, 0.5]),
                             ),

examples/stopwatch.rs

@@ -95,7 +95,6 @@ impl Application for Stopwatch {
             seconds % MINUTE,
             self.duration.subsec_millis() / 10,
         ))
-        .width(Length::Shrink)
         .size(40);
 
         let button = |state, label, style| {
@@ -123,13 +122,11 @@ impl Application for Stopwatch {
                 .on_press(Message::Reset);
 
         let controls = Row::new()
-            .width(Length::Shrink)
             .spacing(20)
             .push(toggle_button)
             .push(reset_button);
 
         let content = Column::new()
-            .width(Length::Shrink)
             .align_items(Align::Center)
             .spacing(20)
             .push(duration)

examples/svg.rs

@@ -25,13 +25,14 @@ impl Sandbox for Tiger {
         let content = {
             use iced::{Column, Svg};
 
-            Column::new()
+            Column::new().padding(20).push(
-                .width(Length::Shrink)
+                Svg::new(format!(
-                .padding(20)
-                .push(Svg::new(format!(
                     "{}/examples/resources/tiger.svg",
                     env!("CARGO_MANIFEST_DIR")
-                )))
+                ))
+                .width(Length::Fill)
+                .height(Length::Fill),
+            )
         };
 
         #[cfg(not(feature = "svg"))]
@@ -39,7 +40,6 @@ impl Sandbox for Tiger {
             use iced::{HorizontalAlignment, Text};
 
             Text::new("You need to enable the `svg` feature!")
-                .width(Length::Shrink)
                 .horizontal_alignment(HorizontalAlignment::Center)
                 .size(30)
         };

examples/todos.rs

@@ -146,6 +146,7 @@ impl Application for Todos {
                 ..
             }) => {
                 let title = Text::new("todos")
+                    .width(Length::Fill)
                     .size(100)
                     .color([0.5, 0.5, 0.5])
                     .horizontal_alignment(HorizontalAlignment::Center);
@@ -284,7 +285,8 @@ impl Task {
                     self.completed,
                     &self.description,
                     TaskMessage::Completed,
-                );
+                )
+                .width(Length::Fill);
 
                 Row::new()
                     .spacing(20)
@@ -318,9 +320,10 @@ impl Task {
                     .push(
                         Button::new(
                             delete_button,
-                            Row::new().spacing(10).push(delete_icon()).push(
+                            Row::new()
-                                Text::new("Delete").width(Length::Shrink),
+                                .spacing(10)
-                            ),
+                                .push(delete_icon())
+                                .push(Text::new("Delete")),
                         )
                         .on_press(TaskMessage::Delete)
                         .padding(10)
@@ -350,7 +353,7 @@ impl Controls {
         let tasks_left = tasks.iter().filter(|task| !task.completed).count();
 
         let filter_button = |state, label, filter, current_filter| {
-            let label = Text::new(label).size(16).width(Length::Shrink);
+            let label = Text::new(label).size(16);
             let button =
                 Button::new(state, label).style(style::Button::Filter {
                     selected: filter == current_filter,
@@ -368,11 +371,11 @@ impl Controls {
                     tasks_left,
                     if tasks_left == 1 { "task" } else { "tasks" }
                 ))
+                .width(Length::Fill)
                 .size(16),
             )
             .push(
                 Row::new()
-                    .width(Length::Shrink)
                     .spacing(10)
                     .push(filter_button(
                         all_button,

examples/tour.rs

@@ -403,6 +403,7 @@ impl<'a> Step {
             ))
             .push(
                 Text::new(&value.to_string())
+                    .width(Length::Fill)
                     .horizontal_alignment(HorizontalAlignment::Center),
             )
     }
@@ -449,6 +450,7 @@ impl<'a> Step {
             ))
             .push(
                 Text::new(&format!("{} px", spacing))
+                    .width(Length::Fill)
                     .horizontal_alignment(HorizontalAlignment::Center),
             );
 
@@ -563,6 +565,7 @@ impl<'a> Step {
             ))
             .push(
                 Text::new(&format!("Width: {} px", width.to_string()))
+                    .width(Length::Fill)
                     .horizontal_alignment(HorizontalAlignment::Center),
             )
     }
@@ -582,6 +585,7 @@ impl<'a> Step {
             .push(Column::new().height(Length::Units(4096)))
             .push(
                 Text::new("You are halfway there!")
+                    .width(Length::Fill)
                     .size(30)
                     .horizontal_alignment(HorizontalAlignment::Center),
             )
@@ -589,6 +593,7 @@ impl<'a> Step {
             .push(ferris(300))
             .push(
                 Text::new("You made it!")
+                    .width(Length::Fill)
                     .size(50)
                     .horizontal_alignment(HorizontalAlignment::Center),
             )
@@ -631,6 +636,7 @@ impl<'a> Step {
                 } else {
                     value
                 })
+                .width(Length::Fill)
                 .horizontal_alignment(HorizontalAlignment::Center),
             )
     }

native/src/widget/checkbox.rs

@@ -53,7 +53,7 @@ impl<Message, Renderer: self::Renderer> Checkbox<Message, Renderer> {
             is_checked,
             on_toggle: Box::new(f),
             label: String::from(label),
-            width: Length::Fill,
+            width: Length::Shrink,
             style: Renderer::Style::default(),
         }
     }

native/src/widget/column.rs

@@ -33,7 +33,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
         Column {
             spacing: 0,
             padding: 0,
-            width: Length::Fill,
+            width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,

native/src/widget/radio.rs

@@ -96,6 +96,7 @@ where
         let size = self::Renderer::default_size(renderer);
 
         Row::<(), Renderer>::new()
+            .width(Length::Fill)
             .spacing(15)
             .align_items(Align::Center)
             .push(

native/src/widget/row.rs

@@ -33,7 +33,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
         Row {
             spacing: 0,
             padding: 0,
-            width: Length::Fill,
+            width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,

native/src/widget/svg.rs

@@ -30,7 +30,7 @@ impl Svg {
         Svg {
             handle: handle.into(),
             width: Length::Fill,
-            height: Length::Fill,
+            height: Length::Shrink,
         }
     }
 

native/src/widget/text.rs

@@ -41,7 +41,7 @@ impl Text {
             size: None,
             color: None,
             font: Font::Default,
-            width: Length::Fill,
+            width: Length::Shrink,
             height: Length::Shrink,
             horizontal_alignment: HorizontalAlignment::Left,
             vertical_alignment: VerticalAlignment::Top,

native/src/widget/text_input.rs

@@ -70,7 +70,7 @@ impl<'a, Message, Renderer: self::Renderer> TextInput<'a, Message, Renderer> {
     where
         F: 'static + Fn(String) -> Message,
     {
-        Self {
+        TextInput {
             state,
             placeholder: String::from(placeholder),
             value: Value::new(value),

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>

web/src/widget/column.rs

@@ -28,7 +28,7 @@ impl<'a, Message> Column<'a, Message> {
         Column {
             spacing: 0,
             padding: 0,
-            width: Length::Fill,
+            width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,

web/src/widget/row.rs

@@ -28,7 +28,7 @@ impl<'a, Message> Row<'a, Message> {
         Row {
             spacing: 0,
             padding: 0,
-            width: Length::Fill,
+            width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,

web/src/widget/text.rs

@@ -36,7 +36,7 @@ impl Text {
             size: None,
             color: None,
             font: Font::Default,
-            width: Length::Fill,
+            width: Length::Shrink,
             height: Length::Shrink,
             horizontal_alignment: HorizontalAlignment::Left,
             vertical_alignment: VerticalAlignment::Top,