Skip to content

Commit b185912

Browse files
Merge pull request #217 from David-OConnor/st_enum_in_examples
Added St enum to examples. Fixed typo in St implementation
2 parents fea47ed + d8b090a commit b185912

File tree

5 files changed

+53
-53
lines changed

5 files changed

+53
-53
lines changed

examples/animation_frame/src/lib.rs

+34-34
Original file line numberDiff line numberDiff line change
@@ -105,19 +105,19 @@ fn view(model: &Model) -> Node<Msg> {
105105
// scene container + sky
106106
div![
107107
style! {
108-
"overflow" => "hidden";
109-
"width" => unit!(100, %);
110-
"position" => "relative";
111-
"height" => unit!(170, px);
112-
"background-color" => "deepskyblue";
108+
St::Overflow => "hidden";
109+
St::Width => unit!(100, %);
110+
St::Position => "relative";
111+
St::Height => unit!(170, px);
112+
St::BackgroundColor => "deepskyblue";
113113
},
114114
// road
115115
div![style! {
116-
"width" => unit!(100, %);
117-
"height" => unit!(20, px);
118-
"bottom" => 0;
119-
"background-color" => "darkgray";
120-
"position" => "absolute";
116+
St::Width => unit!(100, %);
117+
St::Height => unit!(20, px);
118+
St::Bottom => 0;
119+
St::BackgroundColor => "darkgray";
120+
St::Position => "absolute";
121121
}],
122122
view_car(&model.car)
123123
]
@@ -127,29 +127,29 @@ fn view_car(car: &Car) -> Node<Msg> {
127127
div![
128128
// car container
129129
style! {
130-
"width" => unit!(car.width, px);
131-
"height" => unit!(car.height, px);
132-
"top" => unit!(car.y, px);
133-
"left" => unit!(car.x, px);
134-
"position" => "absolute";
130+
St::Width => unit!(car.width, px);
131+
St::Height => unit!(car.height, px);
132+
St::Top => unit!(car.y, px);
133+
St::Left => unit!(car.x, px);
134+
St::Position => "absolute";
135135
},
136136
// windows
137137
div![style! {
138-
"background-color" => "rgb(255,255,255,0.5)";
139-
"left" => unit!(car.width * 0.25, px);
140-
"width" => unit!(car.width * 0.5, px);
141-
"height" => unit!(car.height * 0.6, px);
142-
"border-radius" => unit!(9999, px);
143-
"position" => "absolute";
138+
St::BackgroundColor => "rgb(255,255,255,0.5)";
139+
St::Left => unit!(car.width * 0.25, px);
140+
St::Width => unit!(car.width * 0.5, px);
141+
St::Height => unit!(car.height * 0.6, px);
142+
St::BorderRadius => unit!(9999, px);
143+
St::Position => "absolute";
144144
}],
145145
// body
146146
div![style! {
147-
"top" => unit!(car.height * 0.35, px);
148-
"background-color" => car.color;
149-
"width" => unit!(car.width, px);
150-
"height" => unit!(car.height * 0.5, px);
151-
"border-radius" => unit!(9999, px);
152-
"position" => "absolute";
147+
St::Top => unit!(car.height * 0.35, px);
148+
St::BackgroundColor => car.color;
149+
St::Width => unit!(car.width, px);
150+
St::Height => unit!(car.height * 0.5, px);
151+
St::BorderRadius => unit!(9999, px);
152+
St::Position => "absolute";
153153
}],
154154
view_wheel(car.width * 0.15, car),
155155
view_wheel(car.width * 0.6, car)
@@ -159,13 +159,13 @@ fn view_car(car: &Car) -> Node<Msg> {
159159
fn view_wheel(wheel_x: f64, car: &Car) -> Node<Msg> {
160160
let wheel_radius = car.height * 0.4;
161161
div![style! {
162-
"top" => unit!(car.height * 0.55, px);
163-
"left" => unit!(wheel_x, px);
164-
"background-color" => "black";
165-
"width" => unit!(wheel_radius, px);
166-
"height" => unit!(wheel_radius, px);
167-
"border-radius" => unit!(9999, px);
168-
"position" => "absolute";
162+
St::Top => unit!(car.height * 0.55, px);
163+
St::Left => unit!(wheel_x, px);
164+
St::BackgroundColor => "black";
165+
St::Width => unit!(wheel_radius, px);
166+
St::Height => unit!(wheel_radius, px);
167+
St::BorderRadius => unit!(9999, px);
168+
St::Position => "absolute";
169169
}]
170170
}
171171

examples/counter/src/lib.rs

+7-7
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ fn view(model: &Model) -> impl View<Msg> {
6363

6464
// Attrs, Style, Events, and children may be defined separately.
6565
let outer_style = style! {
66-
"display" => "flex",
67-
"flex-direction" => "column",
68-
"text-align" => "center",
66+
St::Display => "flex",
67+
St::FlexDirection => "column",
68+
St::TextAlign => "center",
6969
};
7070

7171
div![
@@ -74,9 +74,9 @@ fn view(model: &Model) -> impl View<Msg> {
7474
div![
7575
style! {
7676
// Example of conditional logic in a style.
77-
"color" => if model.count > 4 {"purple"} else {"gray"};
78-
"border" => "2px solid #004422";
79-
"padding" => unit!(20, px);
77+
St::Color => if model.count > 4 {"purple"} else {"gray"};
78+
St::Border => "2px solid #004422";
79+
St::Padding => unit!(20, px);
8080
},
8181
// We can use normal Rust code and comments in the view.
8282
h3![text, did_update(|_| log!("This shows when we increment"))],
@@ -85,7 +85,7 @@ fn view(model: &Model) -> impl View<Msg> {
8585
// Optionally-displaying an element, and lifecycle hooks
8686
if model.count >= 10 {
8787
h2![
88-
style! {"padding" => px(50)},
88+
style! {St::Padding => px(50)},
8989
"Nice!",
9090
did_mount(|_| log!("This shows when clicks reach 10")),
9191
will_unmount(|_| log!("This shows when clicks drop below 10")),

examples/mathjax/src/lib.rs

+9-9
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,22 @@ fn math_tex(expression: &str) -> Node<Msg> {
3535
fn definition(description: &str, def: &str, index: usize) -> Node<Msg> {
3636
div![
3737
style! {
38-
"display" => "flex",
39-
"align-items" => "baseline",
40-
"flex-wrap" => "wrap",
41-
"justify-content" => "space-between",
42-
"background-color" => {
38+
St::Display => "flex",
39+
St::AlignItems => "baseline",
40+
St::FlexWrap => "wrap",
41+
St::JustifyContent => "space-between",
42+
St::BackgroundColor => {
4343
if index % 2 == 1 {
4444
CSSValue::Some("aliceblue".into())
4545
} else {
4646
CSSValue::Ignored
4747
}
4848
},
49-
"padding" => px(0) + " " + &px(8)
49+
St::Padding => px(0) + " " + &px(8)
5050
},
5151
h5![
5252
style! {
53-
"margin-right" => px(20),
53+
St::MarginRight => px(20),
5454
},
5555
description
5656
],
@@ -68,8 +68,8 @@ fn _dirac_3(left: &str, middle: &str, right: &str) -> String {
6868
fn view(model: &Model) -> impl View<Msg> {
6969
div![
7070
style!{
71-
"max-width" => px(750),
72-
"margin" => "auto",
71+
St::MaxWidth => px(750),
72+
St::Margin => "auto",
7373
},
7474
h1!["Linear algebra cheatsheet"],
7575
p!["Intent: Provide a quick reference of definitions and identities that

examples/todomvc/src/lib.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ fn selection_li(text: &str, visible: Visible, highlighter: Visible) -> Node<Msg>
255255
At::Class => if visible == highlighter {"selected"} else {""}
256256
At::Href => "/".to_string() + &highlighter.to_string()
257257
},
258-
style! {"cursor" => "pointer"},
258+
style! {St::Cursor => "pointer"},
259259
text
260260
]]
261261
}

src/dom_types.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -780,7 +780,7 @@ impl<Ms> Node<Ms> {
780780
}
781781

782782
/// See `El::add_style`
783-
pub fn add_style(self, key: impl Into<St>, val: impl Into<CSSValue>) -> Self {
783+
pub fn add_style(&mut self, key: impl Into<St>, val: impl Into<CSSValue>) -> &mut Self {
784784
if let Node::Element(el) = self {
785785
el.add_style(key, val);
786786
}
@@ -1044,7 +1044,7 @@ impl<Ms> El<Ms> {
10441044
}
10451045

10461046
/// Add a new style (eg display, or height)
1047-
pub fn add_style(mut self, key: impl Into<St>, val: impl Into<CSSValue>) -> Self {
1047+
pub fn add_style(&mut self, key: impl Into<St>, val: impl Into<CSSValue>) -> &mut Self {
10481048
self.style.vals.insert(key.into(), val.into());
10491049
self
10501050
}

0 commit comments

Comments
 (0)