me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for asymmetrical padding

Browse source
This commit is contained in:
Ben LeFevre 2020-11-23 17:19:21 +00:00 • committed by Héctor Ramón
parent a9eb591628
commit fe0a27c56d
27 changed files with 339 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/css.rs
View file

@ -1,5 +1,5 @@
//! Style your widgets.
use crate::{bumpalo, Align, Background, Color, Length};
use crate::{bumpalo, Align, Background, Color, Length, Padding};
use std::collections::BTreeMap;
@ -12,9 +12,6 @@ pub enum Rule {
/// Container with horizonal distribution
Row,
/// Padding of the container
Padding(u16),
/// Spacing between elements
Spacing(u16),
}
@ -25,7 +22,6 @@ impl Rule {
match self {
Rule::Column => String::from("c"),
Rule::Row => String::from("r"),
Rule::Padding(padding) => format!("p-{}", padding),
Rule::Spacing(spacing) => format!("s-{}", spacing),
}
}
@ -45,13 +41,6 @@ impl Rule {
bumpalo::format!(in bump, ".{} {}", class, body).into_bump_str()
}
Rule::Padding(padding) => bumpalo::format!(
in bump,
".{} {{ box-sizing: border-box; padding: {}px }}",
class,
padding
)
.into_bump_str(),
Rule::Spacing(spacing) => bumpalo::format!(
in bump,
".c.{} > * {{ margin-bottom: {}px }} \
@ -170,3 +159,13 @@ pub fn align(align: Align) -> &'static str {
Align::End => "flex-end",
}
}
/// Returns the style value for the given [`Padding`].
///
/// [`Padding`]: struct.Padding.html
pub fn padding(padding: Padding) -> String {
format!(
"{}px {}px {}px {}px",
padding.top, padding.right, padding.bottom, padding.left
)
}

2
web/src/lib.rs
View file

@ -75,7 +75,7 @@ pub use element::Element;
pub use hasher::Hasher;
pub use iced_core::{
keyboard, mouse, Align, Background, Color, Font, HorizontalAlignment,
Length, Point, Rectangle, Size, Vector, VerticalAlignment,
Length, Padding, Point, Rectangle, Size, Vector, VerticalAlignment,
};
pub use iced_futures::{executor, futures, Command};
pub use subscription::Subscription;

32
web/src/widget/button.rs
View file

@ -1,7 +1,7 @@
//! Allow your users to perform actions by pressing a button.
//!
//! A [`Button`] has some local [`State`].
use crate::{css, Background, Bus, Css, Element, Length, Widget};
use crate::{css, Background, Bus, Css, Element, Length, Padding, Widget};
pub use iced_style::button::{Style, StyleSheet};
@ -30,7 +30,7 @@ pub struct Button<'a, Message> {
min_width: u32,
#[allow(dead_code)]
min_height: u32,
padding: u16,
padding: Padding,
style: Box<dyn StyleSheet>,
}
@ -48,7 +48,7 @@ impl<'a, Message> Button<'a, Message> {
height: Length::Shrink,
min_width: 0,
min_height: 0,
padding: 5,
padding: Padding::new(5),
style: Default::default(),
}
}
@ -77,9 +77,14 @@ impl<'a, Message> Button<'a, Message> {
self
}
/// Sets the padding of the [`Button`].
pub fn padding(mut self, padding: u16) -> Self {
self.padding = padding;
/// Sets the [`Padding`] of the [`Button`].
///```ignore
/// Button::new(/*...*/).padding(20); // 20px on all sides
/// Button::new(/*...*/).padding([10, 20]); // top/bottom, left/right
/// Button::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
/// ```
pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
self.padding = padding.into();
self
}
@ -122,9 +127,6 @@ where
// TODO: State-based styling
let style = self.style.active();
let padding_class =
style_sheet.insert(bump, css::Rule::Padding(self.padding));
let background = match style.background {
None => String::from("none"),
Some(background) => match background {
@ -132,25 +134,19 @@ where
},
};
let class = {
use dodrio::bumpalo::collections::String;
String::from_str_in(&padding_class, bump).into_bump_str()
};
let mut node = button(bump)
.attr("class", class)
.attr(
"style",
bumpalo::format!(
in bump,
"background: {}; border-radius: {}px; width:{}; \
min-width: {}; color: {}",
min-width: {}; color: {}; padding: {}",
background,
style.border_radius,
css::length(self.width),
css::min_length(self.min_width),
css::color(style.text_color)
css::color(style.text_color),
css::padding(self.padding)
)
.into_bump_str(),
)

25
web/src/widget/column.rs
View file

@ -1,4 +1,4 @@
use crate::{css, Align, Bus, Css, Element, Length, Widget};
use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
use dodrio::bumpalo;
use std::u32;
@ -9,7 +9,7 @@ use std::u32;
#[allow(missing_debug_implementations)]
pub struct Column<'a, Message> {
spacing: u16,
padding: u16,
padding: Padding,
width: Length,
height: Length,
max_width: u32,
@ -28,7 +28,7 @@ impl<'a, Message> Column<'a, Message> {
pub fn with_children(children: Vec<Element<'a, Message>>) -> Self {
Column {
spacing: 0,
padding: 0,
padding: Padding::ZERO,
width: Length::Fill,
height: Length::Shrink,
max_width: u32::MAX,
@ -48,9 +48,14 @@ impl<'a, Message> Column<'a, Message> {
self
}
/// Sets the padding of the [`Column`].
pub fn padding(mut self, units: u16) -> Self {
self.padding = units;
/// Sets the [`Padding`] of the [`Column`].
///```ignore
/// Column::new(/*...*/).padding(20); // 20px on all sides
/// Column::new(/*...*/).padding([10, 20]); // top/bottom, left/right
/// Column::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
/// ```
pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
self.padding = padding.into();
self
}
@ -114,23 +119,21 @@ impl<'a, Message> Widget<Message> for Column<'a, Message> {
let spacing_class =
style_sheet.insert(bump, css::Rule::Spacing(self.spacing));
let padding_class =
style_sheet.insert(bump, css::Rule::Padding(self.padding));
// TODO: Complete styling
div(bump)
.attr(
"class",
bumpalo::format!(in bump, "{} {} {}", column_class, spacing_class, padding_class)
bumpalo::format!(in bump, "{} {}", column_class, spacing_class)
.into_bump_str(),
)
.attr("style", bumpalo::format!(
in bump,
"width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}",
"width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}",
css::length(self.width),
css::length(self.height),
css::max_length(self.max_width),
css::max_length(self.max_height),
css::padding(self.padding),
css::align(self.align_items)
).into_bump_str()
)

25
web/src/widget/container.rs
View file

@ -1,5 +1,5 @@
//! Decorate content and apply alignment.
use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Widget};
use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Padding, Widget};
pub use iced_style::container::{Style, StyleSheet};
@ -8,7 +8,7 @@ pub use iced_style::container::{Style, StyleSheet};
/// It is normally used for alignment purposes.
#[allow(missing_debug_implementations)]
pub struct Container<'a, Message> {
padding: u16,
padding: Padding,
width: Length,
height: Length,
max_width: u32,
@ -29,7 +29,7 @@ impl<'a, Message> Container<'a, Message> {
use std::u32;
Container {
padding: 0,
padding: Padding::ZERO,
width: Length::Shrink,
height: Length::Shrink,
max_width: u32::MAX,
@ -41,9 +41,14 @@ impl<'a, Message> Container<'a, Message> {
}
}
/// Sets the padding of the [`Container`].
pub fn padding(mut self, units: u16) -> Self {
self.padding = units;
/// Sets the [`Padding`] of the [`Container`].
///```ignore
/// Container::new(/*...*/).padding(20); // 20px on all sides
/// Container::new(/*...*/).padding([10, 20]); // top/bottom, left/right
/// Container::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
/// ```
pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
self.padding = padding.into();
self
}
@ -106,24 +111,22 @@ where
let column_class = style_sheet.insert(bump, css::Rule::Column);
let padding_class =
style_sheet.insert(bump, css::Rule::Padding(self.padding));
let style = self.style_sheet.style();
let node = div(bump)
.attr(
"class",
bumpalo::format!(in bump, "{} {}", column_class, padding_class).into_bump_str(),
bumpalo::format!(in bump, "{}", column_class).into_bump_str(),
)
.attr(
"style",
bumpalo::format!(
in bump,
"width: {}; height: {}; max-width: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px",
"width: {}; height: {}; max-width: {}; padding: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px",
css::length(self.width),
css::length(self.height),
css::max_length(self.max_width),
css::padding(self.padding),
css::align(self.horizontal_alignment),
css::align(self.vertical_alignment),
style.background.map(css::background).unwrap_or(String::from("initial")),

25
web/src/widget/row.rs
View file

@ -1,4 +1,4 @@
use crate::{css, Align, Bus, Css, Element, Length, Widget};
use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
use dodrio::bumpalo;
use std::u32;
@ -9,7 +9,7 @@ use std::u32;
#[allow(missing_debug_implementations)]
pub struct Row<'a, Message> {
spacing: u16,
padding: u16,
padding: Padding,
width: Length,
height: Length,
max_width: u32,
@ -28,7 +28,7 @@ impl<'a, Message> Row<'a, Message> {
pub fn with_children(children: Vec<Element<'a, Message>>) -> Self {
Row {
spacing: 0,
padding: 0,
padding: Padding::ZERO,
width: Length::Fill,
height: Length::Shrink,
max_width: u32::MAX,
@ -48,9 +48,14 @@ impl<'a, Message> Row<'a, Message> {
self
}
/// Sets the padding of the [`Row`].
pub fn padding(mut self, units: u16) -> Self {
self.padding = units;
/// Sets the [`Padding`] of the [`Row`].
///```ignore
/// Row::new(/*...*/).padding(20); // 20px on all sides
/// Row::new(/*...*/).padding([10, 20]); // top/bottom, left/right
/// Row::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
/// ```
pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
self.padding = padding.into();
self
}
@ -114,23 +119,21 @@ impl<'a, Message> Widget<Message> for Row<'a, Message> {
let spacing_class =
style_sheet.insert(bump, css::Rule::Spacing(self.spacing));
let padding_class =
style_sheet.insert(bump, css::Rule::Padding(self.padding));
// TODO: Complete styling
div(bump)
.attr(
"class",
bumpalo::format!(in bump, "{} {} {}", row_class, spacing_class, padding_class)
bumpalo::format!(in bump, "{} {}", row_class, spacing_class)
.into_bump_str(),
)
.attr("style", bumpalo::format!(
in bump,
"width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}",
"width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}",
css::length(self.width),
css::length(self.height),
css::max_length(self.max_width),
css::max_length(self.max_height),
css::padding(self.padding),
css::align(self.align_items)
).into_bump_str()
)

15
web/src/widget/scrollable.rs
View file

@ -1,5 +1,7 @@
//! Navigate an endless amount of content with a scrollbar.
use crate::{bumpalo, css, Align, Bus, Column, Css, Element, Length, Widget};
use crate::{
bumpalo, css, Align, Bus, Column, Css, Element, Length, Padding, Widget,
};
pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
@ -39,9 +41,14 @@ impl<'a, Message> Scrollable<'a, Message> {
self
}
/// Sets the padding of the [`Scrollable`].
pub fn padding(mut self, units: u16) -> Self {
self.content = self.content.padding(units);
/// Sets the [`Padding`] of the [`Scrollable`].
///```ignore
/// Scrollable::new(/*...*/).padding(20); // 20px on all sides
/// Scrollable::new(/*...*/).padding([10, 20]); // top/bottom, left/right
/// Scrollable::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
/// ```
pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
self.content = self.content.padding(padding);
self
}

30
web/src/widget/text_input.rs
View file

@ -1,7 +1,7 @@
//! Display fields that can be filled with text.
//!
//! A [`TextInput`] has some local [`State`].
use crate::{bumpalo, css, Bus, Css, Element, Length, Widget};
use crate::{bumpalo, css, Bus, Css, Element, Length, Padding, Widget};
pub use iced_style::text_input::{Style, StyleSheet};
@ -35,7 +35,7 @@ pub struct TextInput<'a, Message> {
is_secure: bool,
width: Length,
max_width: u32,
padding: u16,
padding: Padding,
size: Option<u16>,
on_change: Rc<Box<dyn Fn(String) -> Message>>,
on_submit: Option<Message>,
@ -66,7 +66,7 @@ impl<'a, Message> TextInput<'a, Message> {
is_secure: false,
width: Length::Fill,
max_width: u32::MAX,
padding: 0,
padding: Padding::ZERO,
size: None,
on_change: Rc::new(Box::new(on_change)),
on_submit: None,
@ -92,9 +92,14 @@ impl<'a, Message> TextInput<'a, Message> {
self
}
/// Sets the padding of the [`TextInput`].
pub fn padding(mut self, units: u16) -> Self {
self.padding = units;
/// Sets the [`Padding`] of the [`TextInput`].
///```ignore
/// TextInput::new(/*...*/).padding(20); // 20px on all sides
/// TextInput::new(/*...*/).padding([10, 20]); // top/bottom, left/right
/// TextInput::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
/// ```
pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
self.padding = padding.into();
self
}
@ -131,15 +136,6 @@ where
use dodrio::builder::*;
use wasm_bindgen::JsCast;
let class = {
use dodrio::bumpalo::collections::String;
let padding_class =
style_sheet.insert(bump, css::Rule::Padding(self.padding));
String::from_str_in(&padding_class, bump).into_bump_str()
};
let placeholder = {
use dodrio::bumpalo::collections::String;
@ -159,16 +155,16 @@ where
let style = self.style_sheet.active();
input(bump)
.attr("class", class)
.attr(
"style",
bumpalo::format!(
in bump,
"width: {}; max-width: {}; font-size: {}px; \
"width: {}; max-width: {}; padding: {}; font-size: {}px; \
background: {}; border-width: {}px; border-color: {}; \
border-radius: {}px; color: {}",
css::length(self.width),
css::max_length(self.max_width),
css::padding(self.padding),
self.size.unwrap_or(20),
css::background(style.background),
style.border_width,