Skip to content

Commit

Permalink
Add default horizontal & vertical padding to theme
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@cmyr
cmyr committed Sep 16, 2020
1 parent 86b2d6e commit 6a320ca
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 29 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
31 changes: 20 additions & 11 deletions druid/examples/flex.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ struct Params {
#[derive(Clone, Copy, PartialEq, Data)]
enum Spacers {
None,
Default,
Flex,
Fixed,
}
Expand Down Expand Up @@ -168,11 +169,11 @@ fn make_control_row() -> impl Widget<AppState> {
.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),
)
Expand All @@ -188,6 +189,7 @@ fn make_spacer_select() -> impl Widget<Params> {
.with_child(
RadioGroup::new(vec![
("None", Spacers::None),
("Default", Spacers::Default),
("Flex", Spacers::Flex),
("Fixed:", Spacers::Fixed),
])
Expand Down Expand Up @@ -217,6 +219,7 @@ fn make_spacer_select() -> impl Widget<Params> {
fn space_if_needed<T: Data>(flex: &mut Flex<T>, 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),
}
Expand All @@ -231,7 +234,11 @@ fn build_widget(state: &Params) -> Box<dyn Widget<AppState>> {
.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(
Expand Down Expand Up @@ -264,10 +271,6 @@ fn build_widget(state: &Params) -> Box<dyn Widget<AppState>> {
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 {
Expand All @@ -283,6 +286,12 @@ fn build_widget(state: &Params) -> Box<dyn Widget<AppState>> {
}
}

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 {
Expand All @@ -294,14 +303,14 @@ fn make_ui() -> impl Widget<AppState> {
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"));

Expand Down
18 changes: 9 additions & 9 deletions druid/examples/identity.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,56 +165,56 @@ fn make_ui() -> impl Widget<OurData> {

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::<OurData>::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::<OurData>::new("unfreeze").on_click(move |ctx, _, _env| {
ctx.submit_command(UNFREEZE_COLOR.to(ID_ONE))
}),
),
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::<OurData>::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::<OurData>::new("unfreeze").on_click(move |ctx, _, _env| {
ctx.submit_command(UNFREEZE_COLOR.to(id_two))
}),
),
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::<OurData>::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::<OurData>::new("unfreeze").on_click(move |ctx, _, _env| {
ctx.submit_command(UNFREEZE_COLOR.to(id_three))
Expand Down
4 changes: 2 additions & 2 deletions druid/examples/lens.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@ fn ui_builder() -> impl Widget<MyComplexState> {
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()
Expand Down
2 changes: 1 addition & 1 deletion druid/examples/parse.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ fn ui_builder() -> impl Widget<Option<u32>> {

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)
}
6 changes: 3 additions & 3 deletions druid/examples/styled_text.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,12 +125,12 @@ fn ui_builder() -> impl Widget<AppData> {
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))
}
9 changes: 9 additions & 0 deletions druid/src/theme.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,13 @@ pub const BORDERED_WIDGET_HEIGHT: Key<f64> =

pub const TEXTBOX_BORDER_RADIUS: Key<f64> = Key::new("org.linebender.druid.theme.textbox_radius");

/// The default horizontal spacing between widgets.
pub const WIDGET_PADDING_HORIZONTAL: Key<f64> =
Key::new("org.linebender.druid.theme.widget-padding-h");
/// The default vertical spacing between widgets.
pub const WIDGET_PADDING_VERTICAL: Key<f64> =
Key::new("org.linebender.druid.theme.widget-padding-v");

pub const SCROLLBAR_COLOR: Key<Color> = Key::new("org.linebender.druid.theme.scrollbar_color");
pub const SCROLLBAR_BORDER_COLOR: Key<Color> =
Key::new("org.linebender.druid.theme.scrollbar_border_color");
Expand Down Expand Up @@ -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),
Expand Down
37 changes: 34 additions & 3 deletions druid/src/widget/flex.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
/// ```
///
Expand All @@ -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);
/// ```
///
Expand Down Expand Up @@ -420,7 +420,21 @@ impl<T: Data> Flex<T> {
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<KeyOrValue<f64>>) -> Self {
self.add_spacer(len);
self
Expand Down Expand Up @@ -495,7 +509,24 @@ impl<T: Data> Flex<T> {
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<KeyOrValue<f64>>) {
let spacer = Spacer {
axis: self.direction,
Expand Down

0 comments on commit 6a320ca

Please sign in to comment.