Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add default horizontal & vertical padding to theme #1220

Merged
merged 1 commit into from
Sep 16, 2020
Merged

Add default horizontal & vertical padding to theme #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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