From 6a320ca492cc5b03bf6eb4ff8f1a45d699d72f80 Mon Sep 17 00:00:00 2001 From: Colin Rofls Date: Fri, 11 Sep 2020 12:19:20 -0400 Subject: [PATCH] Add default horizontal & vertical padding to theme This also uses these values in the Flex container, via new add_default_spacer and with_default_spacer methods. This should be the preferred way of spacing the standard control widgets. This is progress on #1216; I also want to go and remove any other internal padding constants from existing widgets. --- CHANGELOG.md | 5 +++++ druid/examples/flex.rs | 31 ++++++++++++++++++----------- druid/examples/identity.rs | 18 ++++++++--------- druid/examples/lens.rs | 4 ++-- druid/examples/parse.rs | 2 +- druid/examples/styled_text.rs | 6 +++--- druid/src/theme.rs | 9 +++++++++ druid/src/widget/flex.rs | 37 ++++++++++++++++++++++++++++++++--- 8 files changed, 83 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 10a87429dc..d724c757f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,7 @@ You can find its changes [documented below](#060---2020-06-01). - `Button::from_label` to construct a `Button` with a provided `Label`. ([#1226] by [@ForLoveOfCats]) - Lens: Added Unit lens for type erased / display only widgets that do not need data. ([#1232] by [@rjwittams]) - `WindowLevel` to control system window Z order, with Mac and GTK implementations ([#1231] by [@rjwittams]) +- WIDGET_PADDING items added to theme and `Flex::with_default_spacer`/`Flex::add_default_spacer` ([#1220] by [@cmyr]) ### Changed @@ -450,9 +451,13 @@ Last release without a changelog :( [#1205]: https://github.com/linebender/druid/pull/1205 [#1210]: https://github.com/linebender/druid/pull/1210 [#1214]: https://github.com/linebender/druid/pull/1214 +<<<<<<< HEAD [#1226]: https://github.com/linebender/druid/pull/1226 [#1232]: https://github.com/linebender/druid/pull/1232 [#1231]: https://github.com/linebender/druid/pull/1231 +======= +[#1220]: https://github.com/linebender/druid/pull/1220 +>>>>>>> fb98400c... Add default horizontal & vertical padding to theme [Unreleased]: https://github.com/linebender/druid/compare/v0.6.0...master [0.6.0]: https://github.com/linebender/druid/compare/v0.5.0...v0.6.0 diff --git a/druid/examples/flex.rs b/druid/examples/flex.rs index c99ab36887..0610ed89ec 100644 --- a/druid/examples/flex.rs +++ b/druid/examples/flex.rs @@ -54,6 +54,7 @@ struct Params { #[derive(Clone, Copy, PartialEq, Data)] enum Spacers { None, + Default, Flex, Fixed, } @@ -168,11 +169,11 @@ fn make_control_row() -> impl Widget { .cross_axis_alignment(CrossAxisAlignment::Start) .with_child(Label::new("Misc:").padding((0., 0., 0., 10.))) .with_child(Checkbox::new("Debug layout").lens(Params::debug_layout)) - .with_spacer(10.) + .with_default_spacer() .with_child(Checkbox::new("Fill main axis").lens(Params::fill_major_axis)) - .with_spacer(10.) + .with_default_spacer() .with_child(Checkbox::new("Fix minor axis size").lens(Params::fix_minor_axis)) - .with_spacer(10.) + .with_default_spacer() .with_child(Checkbox::new("Fix major axis size").lens(Params::fix_major_axis)) .padding(5.0), ) @@ -188,6 +189,7 @@ fn make_spacer_select() -> impl Widget { .with_child( RadioGroup::new(vec![ ("None", Spacers::None), + ("Default", Spacers::Default), ("Flex", Spacers::Flex), ("Fixed:", Spacers::Fixed), ]) @@ -217,6 +219,7 @@ fn make_spacer_select() -> impl Widget { fn space_if_needed(flex: &mut Flex, params: &Params) { match params.spacers { Spacers::None => (), + Spacers::Default => flex.add_default_spacer(), Spacers::Fixed => flex.add_spacer(params.spacer_size), Spacers::Flex => flex.add_flex_spacer(1.0), } @@ -231,7 +234,11 @@ fn build_widget(state: &Params) -> Box> { .main_axis_alignment(state.main_alignment) .must_fill_main_axis(state.fill_major_axis); - let mut flex = flex.with_child(TextBox::new().lens(DemoState::input_text)); + let mut flex = flex.with_child( + TextBox::new() + .with_placeholder("Sample text") + .lens(DemoState::input_text), + ); space_if_needed(&mut flex, state); flex.add_child( @@ -264,10 +271,6 @@ fn build_widget(state: &Params) -> Box> { space_if_needed(&mut flex, state); flex.add_child(Switch::new().lens(DemoState::enabled)); - let flex = flex - .background(Color::rgba8(0, 0, 0xFF, 0x30)) - .lens(AppState::demo_state); - let mut flex = SizedBox::new(flex); if state.fix_minor_axis { match state.axis { @@ -283,6 +286,12 @@ fn build_widget(state: &Params) -> Box> { } } + let flex = flex + .padding(8.0) + .border(Color::grey(0.6), 2.0) + .rounded(5.0) + .lens(AppState::demo_state); + if state.debug_layout { flex.debug_paint_layout().boxed() } else { @@ -294,14 +303,14 @@ fn make_ui() -> impl Widget { Flex::column() .must_fill_main_axis(true) .with_child(make_control_row()) - .with_spacer(20.) - .with_flex_child(Rebuilder::new(), 1.0) + .with_default_spacer() + .with_flex_child(Rebuilder::new().center(), 1.0) .padding(10.0) } pub fn main() -> Result<(), PlatformError> { let main_window = WindowDesc::new(make_ui) - .window_size((620., 600.00)) + .window_size((720., 600.00)) .with_min_size((620., 265.00)) .title(LocalizedString::new("Flex Container Options")); diff --git a/druid/examples/identity.rs b/druid/examples/identity.rs index a778635dd7..9a3470fc78 100644 --- a/druid/examples/identity.rs +++ b/druid/examples/identity.rs @@ -165,18 +165,18 @@ fn make_ui() -> impl Widget { Flex::column() .with_flex_child(ColorWell::new(true), 1.0) - .with_spacer(10.0) + .with_default_spacer() .with_flex_child( Flex::row() .cross_axis_alignment(CrossAxisAlignment::Center) .with_flex_child(ColorWell::new(false).with_id(ID_ONE), 1.0) - .with_spacer(10.0) + .with_default_spacer() .with_child( Button::::new("freeze").on_click(move |ctx, data, _env| { ctx.submit_command(FREEZE_COLOR.with(data.color.clone()).to(ID_ONE)) }), ) - .with_spacer(10.0) + .with_default_spacer() .with_child( Button::::new("unfreeze").on_click(move |ctx, _, _env| { ctx.submit_command(UNFREEZE_COLOR.to(ID_ONE)) @@ -184,18 +184,18 @@ fn make_ui() -> impl Widget { ), 0.5, ) - .with_spacer(10.0) + .with_default_spacer() .with_flex_child( Flex::row() .cross_axis_alignment(CrossAxisAlignment::Center) .with_flex_child(ColorWell::new(false).with_id(id_two), 1.) - .with_spacer(10.0) + .with_default_spacer() .with_child( Button::::new("freeze").on_click(move |ctx, data, _env| { ctx.submit_command(FREEZE_COLOR.with(data.color.clone()).to(id_two)) }), ) - .with_spacer(10.0) + .with_default_spacer() .with_child( Button::::new("unfreeze").on_click(move |ctx, _, _env| { ctx.submit_command(UNFREEZE_COLOR.to(id_two)) @@ -203,18 +203,18 @@ fn make_ui() -> impl Widget { ), 0.5, ) - .with_spacer(10.0) + .with_default_spacer() .with_flex_child( Flex::row() .cross_axis_alignment(CrossAxisAlignment::Center) .with_flex_child(ColorWell::new(false).with_id(id_three), 1.) - .with_spacer(10.0) + .with_default_spacer() .with_child( Button::::new("freeze").on_click(move |ctx, data, _env| { ctx.submit_command(FREEZE_COLOR.with(data.color.clone()).to(id_three)) }), ) - .with_spacer(10.0) + .with_default_spacer() .with_child( Button::::new("unfreeze").on_click(move |ctx, _, _env| { ctx.submit_command(UNFREEZE_COLOR.to(id_three)) diff --git a/druid/examples/lens.rs b/druid/examples/lens.rs index d5856d8538..12f75fcfdc 100644 --- a/druid/examples/lens.rs +++ b/druid/examples/lens.rs @@ -50,12 +50,12 @@ fn ui_builder() -> impl Widget { Flex::column() .cross_axis_alignment(CrossAxisAlignment::Center) .with_child(label) - .with_spacer(8.0) + .with_default_spacer() .with_child( Flex::row() .cross_axis_alignment(CrossAxisAlignment::Center) .with_child(searchbar) - .with_spacer(8.0) + .with_default_spacer() .with_child(slider), ) .center() diff --git a/druid/examples/parse.rs b/druid/examples/parse.rs index 7429ccd0b9..763141f2c8 100644 --- a/druid/examples/parse.rs +++ b/druid/examples/parse.rs @@ -34,7 +34,7 @@ fn ui_builder() -> impl Widget> { let mut col = Flex::column(); col.add_child(label); - col.add_spacer(8.0); + col.add_default_spacer(); col.add_child(input); Align::centered(col) } diff --git a/druid/examples/styled_text.rs b/druid/examples/styled_text.rs index 0b0f39beca..cf1c600d21 100644 --- a/druid/examples/styled_text.rs +++ b/druid/examples/styled_text.rs @@ -125,12 +125,12 @@ fn ui_builder() -> impl Widget { Flex::column() .main_axis_alignment(MainAxisAlignment::Center) .with_child(label) - .with_spacer(8.0) + .with_default_spacer() .with_child(styled_label) .with_spacer(32.0) .with_child(stepper_row) - .with_spacer(8.0) + .with_default_spacer() .with_child(mono_checkbox) - .with_spacer(8.0) + .with_default_spacer() .with_child(input.padding(5.0)) } diff --git a/druid/src/theme.rs b/druid/src/theme.rs index 6da0585e34..f5e85fc2d3 100644 --- a/druid/src/theme.rs +++ b/druid/src/theme.rs @@ -60,6 +60,13 @@ pub const BORDERED_WIDGET_HEIGHT: Key = pub const TEXTBOX_BORDER_RADIUS: Key = Key::new("org.linebender.druid.theme.textbox_radius"); +/// The default horizontal spacing between widgets. +pub const WIDGET_PADDING_HORIZONTAL: Key = + Key::new("org.linebender.druid.theme.widget-padding-h"); +/// The default vertical spacing between widgets. +pub const WIDGET_PADDING_VERTICAL: Key = + Key::new("org.linebender.druid.theme.widget-padding-v"); + pub const SCROLLBAR_COLOR: Key = Key::new("org.linebender.druid.theme.scrollbar_color"); pub const SCROLLBAR_BORDER_COLOR: Key = Key::new("org.linebender.druid.theme.scrollbar_border_color"); @@ -109,6 +116,8 @@ pub fn init() -> Env { .adding(SCROLLBAR_PAD, 2.) .adding(SCROLLBAR_RADIUS, 5.) .adding(SCROLLBAR_EDGE_WIDTH, 1.) + .adding(WIDGET_PADDING_VERTICAL, 10.0) + .adding(WIDGET_PADDING_HORIZONTAL, 8.0) .adding( UI_FONT, FontDescriptor::new(FontFamily::SYSTEM_UI).with_size(15.0), diff --git a/druid/src/widget/flex.rs b/druid/src/widget/flex.rs index 7e923c46ab..5a1ee8908b 100644 --- a/druid/src/widget/flex.rs +++ b/druid/src/widget/flex.rs @@ -112,7 +112,7 @@ use crate::{ /// .cross_axis_alignment(CrossAxisAlignment::Center) /// .must_fill_main_axis(true) /// .with_child(Label::new("hello")) -/// .with_spacer(8.0) +/// .with_default_spacer() /// .with_flex_child(Slider::new(), 1.0); /// ``` /// @@ -125,7 +125,7 @@ use crate::{ /// my_row.set_must_fill_main_axis(true); /// my_row.set_cross_axis_alignment(CrossAxisAlignment::Center); /// my_row.add_child(Label::new("hello")); -/// my_row.add_spacer(8.0); +/// my_row.add_default_spacer(); /// my_row.add_flex_child(Slider::new(), 1.0); /// ``` /// @@ -420,7 +420,21 @@ impl Flex { self } + /// Builder-style method to add a spacer widget with a standard size. + /// + /// The actual value of this spacer depends on whether this container is + /// a row or column, as well as theme settings. + pub fn with_default_spacer(mut self) -> Self { + self.add_default_spacer(); + self + } + /// Builder-style method for adding a fixed-size spacer to the container. + /// + /// If you are laying out standard controls in this container, you should + /// generally prefer to use [`add_default_spacer`]. + /// + /// [`add_default_spacer`]: #method.add_default_spacer pub fn with_spacer(mut self, len: impl Into>) -> Self { self.add_spacer(len); self @@ -495,7 +509,24 @@ impl Flex { self.children.push(child); } - /// Add an empty spacer widget with the given length. + /// Add a spacer widget with a standard size. + /// + /// The actual value of this spacer depends on whether this container is + /// a row or column, as well as theme settings. + pub fn add_default_spacer(&mut self) { + let key = match self.direction { + Axis::Vertical => crate::theme::WIDGET_PADDING_VERTICAL, + Axis::Horizontal => crate::theme::WIDGET_PADDING_HORIZONTAL, + }; + self.add_spacer(key); + } + + /// Add an empty spacer widget with the given size. + /// + /// If you are laying out standard controls in this container, you should + /// generally prefer to use [`add_default_spacer`]. + /// + /// [`add_default_spacer`]: #method.add_default_spacer pub fn add_spacer(&mut self, len: impl Into>) { let spacer = Spacer { axis: self.direction,