Merge pull request #217 from David-OConnor/st_enum_in_examples

Added St enum to examples. Fixed typo in St implementation
seed-rs · Sep 8, 2019 · b185912 · b185912
2 parents fea47ed + d8b090a
commit b185912
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 53 deletions.
diff --git a/examples/animation_frame/src/lib.rs b/examples/animation_frame/src/lib.rs
@@ -105,19 +105,19 @@ fn view(model: &Model) -> Node<Msg> {
  // scene container + sky
  div![
  style! {
- "overflow" => "hidden";
- "width" => unit!(100, %);
- "position" => "relative";
- "height" => unit!(170, px);
- "background-color" => "deepskyblue";
+ St::Overflow => "hidden";
+ St::Width => unit!(100, %);
+ St::Position => "relative";
+ St::Height => unit!(170, px);
+ St::BackgroundColor => "deepskyblue";
  },
  // road
  div![style! {
- "width" => unit!(100, %);
- "height" => unit!(20, px);
- "bottom" => 0;
- "background-color" => "darkgray";
- "position" => "absolute";
+ St::Width => unit!(100, %);
+ St::Height => unit!(20, px);
+ St::Bottom => 0;
+ St::BackgroundColor => "darkgray";
+ St::Position => "absolute";
  }],
  view_car(&model.car)
  ]
@@ -127,29 +127,29 @@ fn view_car(car: &Car) -> Node<Msg> {
  div![
  // car container
  style! {
- "width" => unit!(car.width, px);
- "height" => unit!(car.height, px);
- "top" => unit!(car.y, px);
- "left" => unit!(car.x, px);
- "position" => "absolute";
+ St::Width => unit!(car.width, px);
+ St::Height => unit!(car.height, px);
+ St::Top => unit!(car.y, px);
+ St::Left => unit!(car.x, px);
+ St::Position => "absolute";
  },
  // windows
  div![style! {
- "background-color" => "rgb(255,255,255,0.5)";
- "left" => unit!(car.width * 0.25, px);
- "width" => unit!(car.width * 0.5, px);
- "height" => unit!(car.height * 0.6, px);
- "border-radius" => unit!(9999, px);
- "position" => "absolute";
+ St::BackgroundColor => "rgb(255,255,255,0.5)";
+ St::Left => unit!(car.width * 0.25, px);
+ St::Width => unit!(car.width * 0.5, px);
+ St::Height => unit!(car.height * 0.6, px);
+ St::BorderRadius => unit!(9999, px);
+ St::Position => "absolute";
  }],
  // body
  div![style! {
- "top" => unit!(car.height * 0.35, px);
- "background-color" => car.color;
- "width" => unit!(car.width, px);
- "height" => unit!(car.height * 0.5, px);
- "border-radius" => unit!(9999, px);
- "position" => "absolute";
+ St::Top => unit!(car.height * 0.35, px);
+ St::BackgroundColor => car.color;
+ St::Width => unit!(car.width, px);
+ St::Height => unit!(car.height * 0.5, px);
+ St::BorderRadius => unit!(9999, px);
+ St::Position => "absolute";
  }],
  view_wheel(car.width * 0.15, car),
  view_wheel(car.width * 0.6, car)
@@ -159,13 +159,13 @@ fn view_car(car: &Car) -> Node<Msg> {
 fn view_wheel(wheel_x: f64, car: &Car) -> Node<Msg> {
  let wheel_radius = car.height * 0.4;
  div![style! {
- "top" => unit!(car.height * 0.55, px);
- "left" => unit!(wheel_x, px);
- "background-color" => "black";
- "width" => unit!(wheel_radius, px);
- "height" => unit!(wheel_radius, px);
- "border-radius" => unit!(9999, px);
- "position" => "absolute";
+ St::Top => unit!(car.height * 0.55, px);
+ St::Left => unit!(wheel_x, px);
+ St::BackgroundColor => "black";
+ St::Width => unit!(wheel_radius, px);
+ St::Height => unit!(wheel_radius, px);
+ St::BorderRadius => unit!(9999, px);
+ St::Position => "absolute";
  }]
 }
 

diff --git a/examples/counter/src/lib.rs b/examples/counter/src/lib.rs
@@ -63,9 +63,9 @@ fn view(model: &Model) -> impl View<Msg> {
 
  // Attrs, Style, Events, and children may be defined separately.
  let outer_style = style! {
- "display" => "flex",
- "flex-direction" => "column",
- "text-align" => "center",
+ St::Display => "flex",
+ St::FlexDirection => "column",
+ St::TextAlign => "center",
  };
 
  div![
@@ -74,9 +74,9 @@ fn view(model: &Model) -> impl View<Msg> {
  div![
  style! {
  // Example of conditional logic in a style.
- "color" => if model.count > 4 {"purple"} else {"gray"};
- "border" => "2px solid #004422";
- "padding" => unit!(20, px);
+ St::Color => if model.count > 4 {"purple"} else {"gray"};
+ St::Border => "2px solid #004422";
+ St::Padding => unit!(20, px);
  },
  // We can use normal Rust code and comments in the view.
  h3![text, did_update(|_| log!("This shows when we increment"))],
@@ -85,7 +85,7 @@ fn view(model: &Model) -> impl View<Msg> {
  // Optionally-displaying an element, and lifecycle hooks
  if model.count >= 10 {
  h2![
- style! {"padding" => px(50)},
+ style! {St::Padding => px(50)},
  "Nice!",
  did_mount(|_| log!("This shows when clicks reach 10")),
  will_unmount(|_| log!("This shows when clicks drop below 10")),

diff --git a/examples/mathjax/src/lib.rs b/examples/mathjax/src/lib.rs
@@ -35,22 +35,22 @@ fn math_tex(expression: &str) -> Node<Msg> {
 fn definition(description: &str, def: &str, index: usize) -> Node<Msg> {
  div![
  style! {
- "display" => "flex",
- "align-items" => "baseline",
- "flex-wrap" => "wrap",
- "justify-content" => "space-between",
- "background-color" => {
+ St::Display => "flex",
+ St::AlignItems => "baseline",
+ St::FlexWrap => "wrap",
+ St::JustifyContent => "space-between",
+ St::BackgroundColor => {
  if index % 2 == 1 {
  CSSValue::Some("aliceblue".into())
  } else {
  CSSValue::Ignored
  }
  },
- "padding" => px(0) + " " + &px(8)
+ St::Padding => px(0) + " " + &px(8)
  },
  h5![
  style! {
- "margin-right" => px(20),
+ St::MarginRight => px(20),
  },
  description
  ],
@@ -68,8 +68,8 @@ fn _dirac_3(left: &str, middle: &str, right: &str) -> String {
 fn view(model: &Model) -> impl View<Msg> {
  div![
  style!{
- "max-width" => px(750),
- "margin" => "auto",
+ St::MaxWidth => px(750),
+ St::Margin => "auto",
  },
  h1!["Linear algebra cheatsheet"],
  p!["Intent: Provide a quick reference of definitions and identities that 

diff --git a/examples/todomvc/src/lib.rs b/examples/todomvc/src/lib.rs
@@ -255,7 +255,7 @@ fn selection_li(text: &str, visible: Visible, highlighter: Visible) -> Node<Msg>
  At::Class => if visible == highlighter {"selected"} else {""}
  At::Href => "/".to_string() + &highlighter.to_string()
  },
- style! {"cursor" => "pointer"},
+ style! {St::Cursor => "pointer"},
  text
  ]]
 }

diff --git a/src/dom_types.rs b/src/dom_types.rs
@@ -780,7 +780,7 @@ impl<Ms> Node<Ms> {
  }
 
  /// See `El::add_style`
- pub fn add_style(self, key: impl Into<St>, val: impl Into<CSSValue>) -> Self {
+ pub fn add_style(&mut self, key: impl Into<St>, val: impl Into<CSSValue>) -> &mut Self {
  if let Node::Element(el) = self {
  el.add_style(key, val);
  }
@@ -1044,7 +1044,7 @@ impl<Ms> El<Ms> {
  }
 
  /// Add a new style (eg display, or height)
- pub fn add_style(mut self, key: impl Into<St>, val: impl Into<CSSValue>) -> Self {
+ pub fn add_style(&mut self, key: impl Into<St>, val: impl Into<CSSValue>) -> &mut Self {
  self.style.vals.insert(key.into(), val.into());
  self
  }