From 2ff0e48142c302cb93130164d083589bb2ac4979 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 30 Dec 2019 20:54:04 +0100 Subject: Make `Row`, `Column`, and `Checkbox` shrink by default --- examples/custom_widget.rs | 5 +---- examples/events.rs | 12 +++--------- examples/pokedex.rs | 21 ++++++++------------- examples/stopwatch.rs | 3 --- examples/svg.rs | 12 ++++++------ examples/todos.rs | 14 ++++++-------- examples/tour.rs | 8 +++++++- native/src/widget/checkbox.rs | 2 +- native/src/widget/column.rs | 2 +- native/src/widget/radio.rs | 1 + native/src/widget/row.rs | 2 +- native/src/widget/svg.rs | 2 +- native/src/widget/text.rs | 2 +- native/src/widget/text_input.rs | 4 ++-- web/src/widget/column.rs | 2 +- web/src/widget/row.rs | 2 +- web/src/widget/text.rs | 2 +- 17 files changed, 42 insertions(+), 54 deletions(-) diff --git a/examples/custom_widget.rs b/examples/custom_widget.rs index cf2f7792..c0038cd9 100644 --- a/examples/custom_widget.rs +++ b/examples/custom_widget.rs @@ -124,10 +124,7 @@ impl Sandbox for Example { .max_width(500) .align_items(Align::Center) .push(Circle::new(self.radius)) - .push( - Text::new(format!("Radius: {}", self.radius.to_string())) - .width(Length::Shrink), - ) + .push(Text::new(format!("Radius: {}", self.radius.to_string()))) .push(Slider::new( &mut self.slider, 1.0..=100.0, diff --git a/examples/events.rs b/examples/events.rs index 7d83fbd8..74542171 100644 --- a/examples/events.rs +++ b/examples/events.rs @@ -57,13 +57,9 @@ impl Application for Events { fn view(&mut self) -> Element { let events = self.last.iter().fold( - Column::new().width(Length::Shrink).spacing(10), + Column::new().spacing(10), |column, event| { - column.push( - Text::new(format!("{:?}", event)) - .size(40) - .width(Length::Shrink), - ) + column.push(Text::new(format!("{:?}", event)).size(40)) }, ); @@ -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) diff --git a/examples/pokedex.rs b/examples/pokedex.rs index 2d595ec4..f44b6163 100644 --- a/examples/pokedex.rs +++ b/examples/pokedex.rs @@ -77,11 +77,8 @@ impl Application for Pokedex { fn view(&mut self) -> Element { let content = match self { - Pokedex::Loading => Column::new().width(Length::Shrink).push( - Text::new("Searching for Pokémon...") - .width(Length::Shrink) - .size(40), - ), + Pokedex::Loading => Column::new() + .push(Text::new("Searching for Pokémon...").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( - Text::new("Whoops! Something went wrong...") - .width(Length::Shrink) - .size(40), - ) + .push(Text::new("Whoops! Something went wrong...").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]), ), diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs index 7a7f0793..f4d485e2 100644 --- a/examples/stopwatch.rs +++ b/examples/stopwatch.rs @@ -96,7 +96,6 @@ impl Application for Stopwatch { seconds % MINUTE, self.duration.subsec_millis() / 10, )) - .width(Length::Shrink) .size(40); let button = |state, label, color: [f32; 3]| { @@ -125,13 +124,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) diff --git a/examples/svg.rs b/examples/svg.rs index cdf238f0..1895039d 100644 --- a/examples/svg.rs +++ b/examples/svg.rs @@ -25,13 +25,14 @@ impl Sandbox for Tiger { let content = { use iced::{Column, Svg}; - Column::new() - .width(Length::Shrink) - .padding(20) - .push(Svg::new(format!( + Column::new().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) }; diff --git a/examples/todos.rs b/examples/todos.rs index 42e88f65..f5f2f459 100644 --- a/examples/todos.rs +++ b/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) @@ -323,11 +325,7 @@ impl Task { Row::new() .spacing(10) .push(delete_icon().color(Color::WHITE)) - .push( - Text::new("Delete") - .width(Length::Shrink) - .color(Color::WHITE), - ), + .push(Text::new("Delete").color(Color::WHITE)), ) .on_press(TaskMessage::Delete) .padding(10) @@ -358,7 +356,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 = if filter == current_filter { Button::new(state, label.color(Color::WHITE)) .background(Color::from_rgb(0.2, 0.2, 0.7)) @@ -381,11 +379,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, diff --git a/examples/tour.rs b/examples/tour.rs index da05b396..dc5ccb5d 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -67,7 +67,7 @@ impl Sandbox for Tour { ); } - controls = controls.push(Column::new()); + controls = controls.push(Column::new().width(Length::Fill)); if steps.can_continue() { controls = controls.push( @@ -401,6 +401,7 @@ impl<'a> Step { )) .push( Text::new(&value.to_string()) + .width(Length::Fill) .horizontal_alignment(HorizontalAlignment::Center), ) } @@ -447,6 +448,7 @@ impl<'a> Step { )) .push( Text::new(&format!("{} px", spacing)) + .width(Length::Fill) .horizontal_alignment(HorizontalAlignment::Center), ); @@ -561,6 +563,7 @@ impl<'a> Step { )) .push( Text::new(&format!("Width: {} px", width.to_string())) + .width(Length::Fill) .horizontal_alignment(HorizontalAlignment::Center), ) } @@ -580,6 +583,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), ) @@ -587,6 +591,7 @@ impl<'a> Step { .push(ferris(300)) .push( Text::new("You made it!") + .width(Length::Fill) .size(50) .horizontal_alignment(HorizontalAlignment::Center), ) @@ -629,6 +634,7 @@ impl<'a> Step { } else { value }) + .width(Length::Fill) .horizontal_alignment(HorizontalAlignment::Center), ) } diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs index 0dcac712..06a484c7 100644 --- a/native/src/widget/checkbox.rs +++ b/native/src/widget/checkbox.rs @@ -54,7 +54,7 @@ impl Checkbox { on_toggle: Box::new(f), label: String::from(label), label_color: None, - width: Length::Fill, + width: Length::Shrink, } } diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs index 4b5d631c..0901bff4 100644 --- a/native/src/widget/column.rs +++ b/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, diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs index a9995b86..876f4f48 100644 --- a/native/src/widget/radio.rs +++ b/native/src/widget/radio.rs @@ -95,6 +95,7 @@ where let size = self::Renderer::default_size(renderer); Row::<(), Renderer>::new() + .width(Length::Fill) .spacing(15) .align_items(Align::Center) .push( diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs index 3de65deb..7d951968 100644 --- a/native/src/widget/row.rs +++ b/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, diff --git a/native/src/widget/svg.rs b/native/src/widget/svg.rs index 9580f195..25587ffa 100644 --- a/native/src/widget/svg.rs +++ b/native/src/widget/svg.rs @@ -30,7 +30,7 @@ impl Svg { Svg { handle: handle.into(), width: Length::Fill, - height: Length::Fill, + height: Length::Shrink, } } diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs index cf9c9565..caa81db0 100644 --- a/native/src/widget/text.rs +++ b/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, diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs index 1d1c32a2..d3c45fba 100644 --- a/native/src/widget/text_input.rs +++ b/native/src/widget/text_input.rs @@ -64,11 +64,11 @@ impl<'a, Message> TextInput<'a, Message> { placeholder: &str, value: &str, on_change: F, - ) -> Self + ) -> TextInput<'a, Message> where F: 'static + Fn(String) -> Message, { - Self { + TextInput { state, placeholder: String::from(placeholder), value: Value::new(value), diff --git a/web/src/widget/column.rs b/web/src/widget/column.rs index e0e49148..9aa988ff 100644 --- a/web/src/widget/column.rs +++ b/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, diff --git a/web/src/widget/row.rs b/web/src/widget/row.rs index 02754e2e..c26cb91b 100644 --- a/web/src/widget/row.rs +++ b/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, diff --git a/web/src/widget/text.rs b/web/src/widget/text.rs index 2fdbc0a6..5b0bee55 100644 --- a/web/src/widget/text.rs +++ b/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, -- 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(-) 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