From 7817aa6eca7f4c58faabe18535082d6266f6ae52 Mon Sep 17 00:00:00 2001 From: spieljs Date: Thu, 6 Feb 2020 01:20:29 +0100 Subject: [PATCH 1/9] implementing layout --- crate/src/components/button.rs | 13 ++----- crate/src/components/layaout.rs | 68 +++++++++++++++++++++++++++++++++ crate/src/components/mod.rs | 1 + 3 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 crate/src/components/layaout.rs diff --git a/crate/src/components/button.rs b/crate/src/components/button.rs index 38785a5..b9c0b22 100644 --- a/crate/src/components/button.rs +++ b/crate/src/components/button.rs @@ -1,6 +1,6 @@ use yew::prelude::*; -#[derive(Clone, PartialEq)] +#[derive(Clone)] pub enum ButtonType { Primary, Secondary, @@ -12,14 +12,14 @@ pub enum ButtonType { Standard, } -#[derive(Clone, PartialEq)] +#[derive(Clone)] pub enum ButtonStyle { Regular, Light, Outline, } -#[derive(Clone, PartialEq)] +#[derive(Clone)] pub enum Size { Small, Medium, @@ -137,12 +137,7 @@ impl Component for Button { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props.button_type = get_button_type(props.button_type); - self.props.class_name = props.class_name; - self.props.size = get_size(props.size); - self.props.button_style = get_button_style(props.button_style); - self.props.onsignal = props.onsignal; - self.props.children = props.children; + self.props = ButtonProps::from(props); true } diff --git a/crate/src/components/layaout.rs b/crate/src/components/layaout.rs new file mode 100644 index 0000000..1dc326e --- /dev/null +++ b/crate/src/components/layaout.rs @@ -0,0 +1,68 @@ +use yew::prelude::*; + +pub struct Layout { + link: ComponentLink, + props: Props +} + +#[derive(Clone, Properties)] +pub struct Props { + layaout_type: String, + cl_xs: String, + cl_s: String, + cl_m: String, + cl_l: String, + cl_xl: String, + rw_xs: String, + rw_s: String, + rw_m: String, + rw_l: String, + rw_xl: String, + pub onsignal: Callback<()>, + pub children: Children, +} + +impl Default for Callback<()> { + fn default() -> Self { + Callback::noop() + } +} + +pub enum Msg { + Clicked, +} + +impl Component for Layout { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Layout { + link, + props + } + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Clicked => { + self.props.onsignal.emit(()); + } + }; + + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + self.props = props; + true + } + + fn view(&self) -> Html { + html! { +
+ {self.props.children.render()} +
+ } + } +} \ No newline at end of file diff --git a/crate/src/components/mod.rs b/crate/src/components/mod.rs index d1f1c50..5c1fcc4 100644 --- a/crate/src/components/mod.rs +++ b/crate/src/components/mod.rs @@ -1,3 +1,4 @@ pub mod button; +pub mod layaout; pub use self::button::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style}; \ No newline at end of file From 2946173a0e5bf6fbcc18a6dc8b9606cfa0dab2f8 Mon Sep 17 00:00:00 2001 From: spieljs Date: Sun, 9 Feb 2020 02:55:11 +0100 Subject: [PATCH 2/9] implement layout logic --- crate/Cargo.lock | 1 + crate/Cargo.toml | 1 + crate/src/components/layaout.rs | 68 -------------- crate/src/components/layout.rs | 162 ++++++++++++++++++++++++++++++++ crate/src/components/mod.rs | 2 +- crate/src/lib.rs | 1 + 6 files changed, 166 insertions(+), 69 deletions(-) delete mode 100644 crate/src/components/layaout.rs create mode 100644 crate/src/components/layout.rs diff --git a/crate/Cargo.lock b/crate/Cargo.lock index ebff10d..ea3d182 100644 --- a/crate/Cargo.lock +++ b/crate/Cargo.lock @@ -724,6 +724,7 @@ dependencies = [ "failure 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)", "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)", "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)", + "serde_json 1.0.44 (registry+https://github.com/rust-lang/crates.io-index)", "wasm-bindgen 0.2.58 (registry+https://github.com/rust-lang/crates.io-index)", "web-sys 0.3.35 (registry+https://github.com/rust-lang/crates.io-index)", "wee_alloc 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)", diff --git a/crate/Cargo.toml b/crate/Cargo.toml index 0aeee07..72ac859 100644 --- a/crate/Cargo.toml +++ b/crate/Cargo.toml @@ -23,3 +23,4 @@ failure = "0.1" yew = { version = "0.11.0", features = ["toml", "yaml", "msgpack", "cbor"]} yew-router = "0.8" web-sys = "0.3" +serde_json = "1.0" diff --git a/crate/src/components/layaout.rs b/crate/src/components/layaout.rs deleted file mode 100644 index 1dc326e..0000000 --- a/crate/src/components/layaout.rs +++ /dev/null @@ -1,68 +0,0 @@ -use yew::prelude::*; - -pub struct Layout { - link: ComponentLink, - props: Props -} - -#[derive(Clone, Properties)] -pub struct Props { - layaout_type: String, - cl_xs: String, - cl_s: String, - cl_m: String, - cl_l: String, - cl_xl: String, - rw_xs: String, - rw_s: String, - rw_m: String, - rw_l: String, - rw_xl: String, - pub onsignal: Callback<()>, - pub children: Children, -} - -impl Default for Callback<()> { - fn default() -> Self { - Callback::noop() - } -} - -pub enum Msg { - Clicked, -} - -impl Component for Layout { - type Message = Msg; - type Properties = Props; - - fn create(props: Self::Properties, link: ComponentLink) -> Self { - Layout { - link, - props - } - } - - fn update(&mut self, msg: Self::Message) -> ShouldRender { - match msg { - Msg::Clicked => { - self.props.onsignal.emit(()); - } - }; - - false - } - - fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true - } - - fn view(&self) -> Html { - html! { -
- {self.props.children.render()} -
- } - } -} \ No newline at end of file diff --git a/crate/src/components/layout.rs b/crate/src/components/layout.rs new file mode 100644 index 0000000..247490c --- /dev/null +++ b/crate/src/components/layout.rs @@ -0,0 +1,162 @@ +use yew::prelude::*; + +pub struct Layout { + link: ComponentLink, + props: Props +} + +#[derive(Clone, Copy)] +struct LayoutModel; + +#[derive(Clone)] +struct LayoutProps { + layaout_type: String, + column_row_classes: String, +} + +#[derive(Clone)] +pub struct DefaultCallback { + callback: T +} + +#[derive(Clone)] +pub enum Column { + cl_xs(i8), + cl_s(i8), + cl_m(i8), + cl_l(i8), + cl_xl(i8), +} + +#[derive(Clone)] +pub enum Row { + rw_xs(i8), + rw_s(i8), + rw_m(i8), + rw_l(i8), + rw_xl(i8), +} + +#[derive(Clone)] +pub enum LayoutType { + Container, + Item, +} + +#[derive(Clone, Properties)] +pub struct Props { + #[props(required)] + pub layaout_type: LayoutType, + pub columns: Vec, + pub rows: Vec, + pub onsignal: DefaultCallback>, + pub children: Children, +} + +impl Default for DefaultCallback> { + fn default() -> Self { + let callback = DefaultCallback { + callback: Callback::noop(), + }; + + callback + } +} + +pub enum Msg { + Clicked, +} + +impl Component for Layout { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Layout { + link, + props + } + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Clicked => { + self.props.onsignal.callback.emit(()); + } + }; + + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + self.props = props; + true + } + + fn view(&self) -> Html { + let layout_props = LayoutProps::from(self.props.clone()); + + html! { +
+ {self.props.children.render()} +
+ } + } +} + +impl From for LayoutProps{ + fn from(props: Props) -> Self { + LayoutProps { + column_row_classes: LayoutModel.get_column_row_classes(props.columns, props.rows), + layaout_type: LayoutModel.get_layout_type(props.layaout_type), + } + } +} + +impl LayoutModel { + fn get_column_row_classes(self, columns_prop: Vec, rows_prop: Vec) -> String { + let columns = columns_prop.into_iter().map(|column| { + self.get_column(column) + }).collect::(); + + let rows = rows_prop.into_iter().map(|row| { + self.get_row(row) + }).collect::(); + + let mut column_row_classes = [columns, rows].concat(); + column_row_classes.truncate(column_row_classes.len() - 1); + + column_row_classes + } + + fn get_column(self, column: Column) -> String { + match column { + Column::cl_xs(size) => format!("cl-xs-{} ", size), + Column::cl_s(size) => format!("cl-s-{} ", size), + Column::cl_m(size) => format!("cl-m-{} ", size), + Column::cl_l(size) => format!("cl-l-{} ", size), + Column::cl_xl(size) => format!("cl_xl-{} ", size), + } + } + + fn get_row(self, row: Row) -> String { + match row { + Row::rw_xs(size) => format!("rw-xs-{} ", size), + Row::rw_s(size) => format!("rw-s-{} ", size), + Row::rw_m(size) => format!("rw-m-{} ", size), + Row::rw_l(size) => format!("rw-l-{} ", size), + Row::rw_xl(size) => format!("rw-xl-{} ", size), + } + } + + fn get_layout_type(self, layaout_type: LayoutType) -> String { + match layaout_type { + LayoutType::Container => format!("container"), + LayoutType::Item => format!("item"), + } + } +} + diff --git a/crate/src/components/mod.rs b/crate/src/components/mod.rs index 5c1fcc4..ff60a11 100644 --- a/crate/src/components/mod.rs +++ b/crate/src/components/mod.rs @@ -1,4 +1,4 @@ pub mod button; -pub mod layaout; +pub mod layout; pub use self::button::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style}; \ No newline at end of file diff --git a/crate/src/lib.rs b/crate/src/lib.rs index 72d7adc..60132db 100644 --- a/crate/src/lib.rs +++ b/crate/src/lib.rs @@ -7,6 +7,7 @@ extern crate wasm_bindgen; extern crate web_sys; extern crate yew; extern crate yew_router; + use wasm_bindgen::prelude::*; mod app; From f41c7efeca924f7940838fb012d52bc4175a93ac Mon Sep 17 00:00:00 2001 From: spieljs Date: Mon, 10 Feb 2020 00:39:33 +0100 Subject: [PATCH 3/9] implement row and column --- app/page-styles/_layout.sass | 0 crate/src/components/column.rs | 150 +++++++++++++++++++++++++++ crate/src/components/container.rs | 90 +++++++++++++++++ crate/src/components/layout.rs | 162 ------------------------------ crate/src/components/mod.rs | 4 +- crate/src/components/row.rs | 150 +++++++++++++++++++++++++++ 6 files changed, 393 insertions(+), 163 deletions(-) create mode 100644 app/page-styles/_layout.sass create mode 100644 crate/src/components/column.rs create mode 100644 crate/src/components/container.rs delete mode 100644 crate/src/components/layout.rs create mode 100644 crate/src/components/row.rs diff --git a/app/page-styles/_layout.sass b/app/page-styles/_layout.sass new file mode 100644 index 0000000..e69de29 diff --git a/crate/src/components/column.rs b/crate/src/components/column.rs new file mode 100644 index 0000000..0f55958 --- /dev/null +++ b/crate/src/components/column.rs @@ -0,0 +1,150 @@ +use yew::prelude::*; + +#[derive(Clone)] +pub enum Layout { + cl_xs(i8), + cl_s(i8), + cl_m(i8), + cl_l(i8), + cl_xl(i8), +} + +#[derive(Clone)] +pub enum ColumnAlign { + auto, + flex_start, + flex_end, + center, + baseline, + stretch, +} + +pub struct Column { + link: ComponentLink, + props: Props +} + +#[derive(Clone)] +struct ColumnProps { + column_align: String, + layouts_classes: String, +} + +#[derive(Clone, Copy)] +struct ColumnModel; + +#[derive(Clone, Properties)] +pub struct Props { + #[props(required)] + pub layouts: Vec, + pub column_align: ColumnAlign, + pub onsignal: DefaultCallback>, + pub children: Children, +} + +pub enum Msg { + Clicked, +} + +#[derive(Clone)] +pub struct DefaultCallback { + callback: T +} + +impl Default for DefaultCallback> { + fn default() -> Self { + let callback = DefaultCallback { + callback: Callback::noop(), + }; + + callback + } +} + +impl Default for ColumnAlign { + fn default() -> Self { + ColumnAlign::auto + } +} + +impl Component for Column { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Column { + link, + props + } + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Clicked => { + self.props.onsignal.callback.emit(()); + } + }; + + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + self.props = props; + true + } + + fn view(&self) -> Html { + let column_props = ColumnProps::from(self.props.clone()); + + html! { +
+ {self.props.children.render()} +
+ } + } +} + +impl From for ColumnProps{ + fn from(props: Props) -> Self { + ColumnProps { + layouts_classes: ColumnModel.get_layout_classes(props.layouts), + column_align: ColumnModel.get_column_align(props.column_align), + } + } +} + +impl ColumnModel { + fn get_layout_classes(self, layouts_prop: Vec) -> String { + let mut layouts = layouts_prop.into_iter().map(|layout| { + self.get_layout(layout) + }).collect::(); + + layouts.truncate(layouts.len() - 1); + + layouts + } + + fn get_layout(self, layout: Layout) -> String { + match layout { + Layout::cl_xs(size) => format!("cl-xs-{} ", size), + Layout::cl_s(size) => format!("cl-s-{} ", size), + Layout::cl_m(size) => format!("cl-m-{} ", size), + Layout::cl_l(size) => format!("cl-l-{} ", size), + Layout::cl_xl(size) => format!("cl_xl-{} ", size), + } + } + + fn get_column_align(self, align: ColumnAlign) -> String { + match align { + ColumnAlign::auto => format!("auto"), + ColumnAlign::baseline => format!("baseline"), + ColumnAlign::center => format!("center"), + ColumnAlign::flex_start => format!("flex-start"), + ColumnAlign::flex_end => format!("flex-end"), + ColumnAlign::stretch => format!("stretch"), + } + } +} diff --git a/crate/src/components/container.rs b/crate/src/components/container.rs new file mode 100644 index 0000000..13c10b4 --- /dev/null +++ b/crate/src/components/container.rs @@ -0,0 +1,90 @@ +use yew::prelude::*; + +pub struct Container { + link: ComponentLink, + props: Props +} + +#[derive(Clone, Copy)] +struct ContainerModel; + +#[derive(Clone)] +struct ContainerProps { + container_type: String, +} + +#[derive(Clone)] +pub enum ContainerType { + row, + row_reverse, + column, + column_reverse, + no_wrap, + wrap, + wrap_reverse, +} + +#[derive(Clone, Properties)] +pub struct Props { + #[props(required)] + pub container_type: ContainerType, + pub children: Children, +} + +pub enum Msg {} + +impl Component for Container { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Container { + link, + props + } + } + + fn update(&mut self, _msg: Self::Message) -> ShouldRender { + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + self.props = props; + true + } + + fn view(&self) -> Html { + let Container_props = ContainerProps::from(self.props.clone()); + + html! { +
+ {self.props.children.render()} +
+ } + } +} + +impl From for ContainerProps{ + fn from(props: Props) -> Self { + ContainerProps { + container_type: ContainerModel.get_container_type(props.container_type), + } + } +} + +impl ContainerModel { + fn get_container_type(self, layaout_type: ContainerType) -> String { + match layaout_type { + ContainerType::row => format!("row"), + ContainerType::row_reverse => format!("row-reverse"), + ContainerType::column => format!("column"), + ContainerType::column_reverse => format!("column-reverse"), + ContainerType::no_wrap => format!("no-wrap"), + ContainerType::wrap => format!("wrap"), + ContainerType::wrap_reverse => format!("wrap-reverse"), + } + } +} + diff --git a/crate/src/components/layout.rs b/crate/src/components/layout.rs deleted file mode 100644 index 247490c..0000000 --- a/crate/src/components/layout.rs +++ /dev/null @@ -1,162 +0,0 @@ -use yew::prelude::*; - -pub struct Layout { - link: ComponentLink, - props: Props -} - -#[derive(Clone, Copy)] -struct LayoutModel; - -#[derive(Clone)] -struct LayoutProps { - layaout_type: String, - column_row_classes: String, -} - -#[derive(Clone)] -pub struct DefaultCallback { - callback: T -} - -#[derive(Clone)] -pub enum Column { - cl_xs(i8), - cl_s(i8), - cl_m(i8), - cl_l(i8), - cl_xl(i8), -} - -#[derive(Clone)] -pub enum Row { - rw_xs(i8), - rw_s(i8), - rw_m(i8), - rw_l(i8), - rw_xl(i8), -} - -#[derive(Clone)] -pub enum LayoutType { - Container, - Item, -} - -#[derive(Clone, Properties)] -pub struct Props { - #[props(required)] - pub layaout_type: LayoutType, - pub columns: Vec, - pub rows: Vec, - pub onsignal: DefaultCallback>, - pub children: Children, -} - -impl Default for DefaultCallback> { - fn default() -> Self { - let callback = DefaultCallback { - callback: Callback::noop(), - }; - - callback - } -} - -pub enum Msg { - Clicked, -} - -impl Component for Layout { - type Message = Msg; - type Properties = Props; - - fn create(props: Self::Properties, link: ComponentLink) -> Self { - Layout { - link, - props - } - } - - fn update(&mut self, msg: Self::Message) -> ShouldRender { - match msg { - Msg::Clicked => { - self.props.onsignal.callback.emit(()); - } - }; - - false - } - - fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true - } - - fn view(&self) -> Html { - let layout_props = LayoutProps::from(self.props.clone()); - - html! { -
- {self.props.children.render()} -
- } - } -} - -impl From for LayoutProps{ - fn from(props: Props) -> Self { - LayoutProps { - column_row_classes: LayoutModel.get_column_row_classes(props.columns, props.rows), - layaout_type: LayoutModel.get_layout_type(props.layaout_type), - } - } -} - -impl LayoutModel { - fn get_column_row_classes(self, columns_prop: Vec, rows_prop: Vec) -> String { - let columns = columns_prop.into_iter().map(|column| { - self.get_column(column) - }).collect::(); - - let rows = rows_prop.into_iter().map(|row| { - self.get_row(row) - }).collect::(); - - let mut column_row_classes = [columns, rows].concat(); - column_row_classes.truncate(column_row_classes.len() - 1); - - column_row_classes - } - - fn get_column(self, column: Column) -> String { - match column { - Column::cl_xs(size) => format!("cl-xs-{} ", size), - Column::cl_s(size) => format!("cl-s-{} ", size), - Column::cl_m(size) => format!("cl-m-{} ", size), - Column::cl_l(size) => format!("cl-l-{} ", size), - Column::cl_xl(size) => format!("cl_xl-{} ", size), - } - } - - fn get_row(self, row: Row) -> String { - match row { - Row::rw_xs(size) => format!("rw-xs-{} ", size), - Row::rw_s(size) => format!("rw-s-{} ", size), - Row::rw_m(size) => format!("rw-m-{} ", size), - Row::rw_l(size) => format!("rw-l-{} ", size), - Row::rw_xl(size) => format!("rw-xl-{} ", size), - } - } - - fn get_layout_type(self, layaout_type: LayoutType) -> String { - match layaout_type { - LayoutType::Container => format!("container"), - LayoutType::Item => format!("item"), - } - } -} - diff --git a/crate/src/components/mod.rs b/crate/src/components/mod.rs index ff60a11..e11cc2d 100644 --- a/crate/src/components/mod.rs +++ b/crate/src/components/mod.rs @@ -1,4 +1,6 @@ pub mod button; -pub mod layout; +pub mod container; +pub mod column; +pub mod row; pub use self::button::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style}; \ No newline at end of file diff --git a/crate/src/components/row.rs b/crate/src/components/row.rs new file mode 100644 index 0000000..d30aa4e --- /dev/null +++ b/crate/src/components/row.rs @@ -0,0 +1,150 @@ +use yew::prelude::*; + +#[derive(Clone)] +pub enum Layout { + rw_xs(i8), + rw_s(i8), + rw_m(i8), + rw_l(i8), + rw_xl(i8), +} + +#[derive(Clone)] +pub enum RowAlign { + auto, + flex_start, + flex_end, + center, + baseline, + stretch, +} + +pub struct Row { + link: ComponentLink, + props: Props +} + +#[derive(Clone)] +struct RowProps { + row_align: String, + layouts_classes: String, +} + +#[derive(Clone, Copy)] +struct RowModel; + +#[derive(Clone, Properties)] +pub struct Props { + #[props(required)] + pub layouts: Vec, + pub row_align: RowAlign, + pub onsignal: DefaultCallback>, + pub children: Children, +} + +pub enum Msg { + Clicked, +} + +#[derive(Clone)] +pub struct DefaultCallback { + callback: T +} + +impl Default for DefaultCallback> { + fn default() -> Self { + let callback = DefaultCallback { + callback: Callback::noop(), + }; + + callback + } +} + +impl Default for RowAlign { + fn default() -> Self { + RowAlign::auto + } +} + +impl Component for Row { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Row { + link, + props + } + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Clicked => { + self.props.onsignal.callback.emit(()); + } + }; + + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + self.props = props; + true + } + + fn view(&self) -> Html { + let row_props = RowProps::from(self.props.clone()); + + html! { +
+ {self.props.children.render()} +
+ } + } +} + +impl From for RowProps{ + fn from(props: Props) -> Self { + RowProps { + layouts_classes: RowModel.get_layout_classes(props.layouts), + row_align: RowModel.get_row_align(props.row_align), + } + } +} + +impl RowModel { + fn get_layout_classes(self, layouts_prop: Vec) -> String { + let mut layouts = layouts_prop.into_iter().map(|layout| { + self.get_layout(layout) + }).collect::(); + + layouts.truncate(layouts.len() - 1); + + layouts + } + + fn get_layout(self, layout: Layout) -> String { + match layout { + Layout::rw_xs(size) => format!("rw-xs-{} ", size), + Layout::rw_s(size) => format!("rw-s-{} ", size), + Layout::rw_m(size) => format!("rw-m-{} ", size), + Layout::rw_l(size) => format!("rw-l-{} ", size), + Layout::rw_xl(size) => format!("rw-xl-{} ", size), + } + } + + fn get_row_align(self, align: RowAlign) -> String { + match align { + RowAlign::auto => format!("auto"), + RowAlign::baseline => format!("baseline"), + RowAlign::center => format!("center"), + RowAlign::flex_start => format!("flex-start"), + RowAlign::flex_end => format!("flex-end"), + RowAlign::stretch => format!("stretch"), + } + } +} From 916c607a9d249f0ae608c4f93e21a82f561e5097 Mon Sep 17 00:00:00 2001 From: spieljs Date: Tue, 11 Feb 2020 01:11:21 +0100 Subject: [PATCH 4/9] implementing container styles --- crate/src/components/column.rs | 8 +- crate/src/components/container.rs | 123 ++++++++++++++++++++++++++++-- 2 files changed, 122 insertions(+), 9 deletions(-) diff --git a/crate/src/components/column.rs b/crate/src/components/column.rs index 0f55958..caf63ae 100644 --- a/crate/src/components/column.rs +++ b/crate/src/components/column.rs @@ -19,6 +19,10 @@ pub enum ColumnAlign { stretch, } +pub enum Msg { + Clicked, +} + pub struct Column { link: ComponentLink, props: Props @@ -42,10 +46,6 @@ pub struct Props { pub children: Children, } -pub enum Msg { - Clicked, -} - #[derive(Clone)] pub struct DefaultCallback { callback: T diff --git a/crate/src/components/container.rs b/crate/src/components/container.rs index 13c10b4..0f3d5aa 100644 --- a/crate/src/components/container.rs +++ b/crate/src/components/container.rs @@ -24,14 +24,87 @@ pub enum ContainerType { wrap_reverse, } +#[derive(Clone)] +pub enum Mode { + safe_mode, + unsafe_mode, + no_mode, +} + +#[derive(Clone)] +pub enum JustifyContent { + flex_start(Mode), + flex_end(Mode), + center(Mode), + space_between(Mode), + space_around(Mode), + space_evenly(Mode), + start(Mode), + end(Mode), + left(Mode), + rigth(Mode), +} + +#[derive(Clone)] +pub enum AlignItems { + stretch(Mode), + flex_start(Mode), + flex_end(Mode), + center(Mode), + baseline(Mode), + first_baseline(Mode), + last_baseline(Mode), + start(Mode), + end(Mode), + self_start(Mode), + self_end(Mode), +} + +#[derive(Clone)] +pub enum AlignContent { + flex_start(Mode), + flex_end(Mode), + center(Mode), + space_between(Mode), + space_around(Mode), + space_evenly(Mode), + stretch(Mode), + start(Mode), + end(Mode), + baseline(Mode), + first_baseline(Mode), + last_baseline(Mode), +} + +pub enum Msg {} + #[derive(Clone, Properties)] pub struct Props { #[props(required)] pub container_type: ContainerType, + pub justify_content: JustifyContent, + pub align_content: AlignContent, + pub align_items: AlignItems, pub children: Children, } -pub enum Msg {} +impl Default for JustifyContent { + fn default() -> Self { + JustifyContent::flex_start(Mode::no_mode) + } +} + +impl Default for AlignContent { + fn default() -> Self { + AlignContent::stretch(Mode::no_mode) + } +} + +impl Default for AlignItems { + fn default() -> Self { + AlignItems::stretch(Mode::no_mode) + } +} impl Component for Container { type Message = Msg; @@ -54,11 +127,11 @@ impl Component for Container { } fn view(&self) -> Html { - let Container_props = ContainerProps::from(self.props.clone()); + let container_props = ContainerProps::from(self.props.clone()); html! {
{self.props.children.render()}
@@ -75,8 +148,8 @@ impl From for ContainerProps{ } impl ContainerModel { - fn get_container_type(self, layaout_type: ContainerType) -> String { - match layaout_type { + fn get_container_type(self, container_type: ContainerType) -> String { + match container_type { ContainerType::row => format!("row"), ContainerType::row_reverse => format!("row-reverse"), ContainerType::column => format!("column"), @@ -86,5 +159,45 @@ impl ContainerModel { ContainerType::wrap_reverse => format!("wrap-reverse"), } } + + fn get_mode(self, mode: Mode) -> String { + match mode { + Mode::no_mode => format!(""), + Mode::safe_mode => format!("-safe"), + Mode::unsafe_mode => format!("-unsafe"), + } + } + + fn get_justify_content(self, justify_content: JustifyContent) -> String { + match justify_content { + JustifyContent::flex_start(mode) => format!("justify-content-flex-start{}", self.get_mode(mode)), + JustifyContent::flex_end(mode) => format!("justify-content-flex-end{}", self.get_mode(mode)), + JustifyContent::start(mode) => format!("justify-content-start{}", self.get_mode(mode)), + JustifyContent::end(mode) => format!("justify-content-end{}", self.get_mode(mode)), + JustifyContent::left(mode) => format!("justify-content-left{}", self.get_mode(mode)), + JustifyContent::center(mode) => format!("justify-content-center{}", self.get_mode(mode)), + JustifyContent::rigth(mode) => format!("justify-content-right{}", self.get_mode(mode)), + JustifyContent::space_around(mode) => format!("justify-content-space-around{}", self.get_mode(mode)), + JustifyContent::space_between(mode) => format!("justify-content-space-between{}", self.get_mode(mode)), + JustifyContent::space_evenly(mode) => format!("justify-content-evenly{}", self.get_mode(mode)), + } + } + + fn get_align_content(self, align_content: AlignContent) -> String { + match align_content { + AlignContent::stretch(mode) => format!("align-content-stretch{}", self.get_mode(mode)), + AlignContent::flex_start(mode) => format!("align-content-flex-start{}", self.get_mode(mode)), + AlignContent::flex_end(mode) => format!("align-content-flex-end{}", self.get_mode(mode)), + AlignContent::start(mode) => format!("align-content-start{}", self.get_mode(mode)), + AlignContent::end(mode) => format!("align-content-end{}", self.get_mode(mode)), + AlignContent::center(mode) => format!("align-content-center{}", self.get_mode(mode)), + AlignContent::baseline(mode) => format!("align-content-baseline{}", self.get_mode(mode)), + AlignContent::first_baseline(mode) => format!("align-content-first-baseline{}", self.get_mode(mode)), + AlignContent::last_baseline(mode) => format!("align-content-last-baseline{}", self.get_mode(mode)), + AlignContent::space_around(mode) => format!("align-content-space-around{}", self.get_mode(mode)), + AlignContent::space_between(mode) => format!("align-content-space-between{}", self.get_mode(mode)), + AlignContent::space_evenly(mode) => format!("align-content-evenly{}", self.get_mode(mode)), + } + } } From 37622bec6f50ec65a6f2fd0046592c52680088cd Mon Sep 17 00:00:00 2001 From: spieljs Date: Wed, 12 Feb 2020 00:15:10 +0100 Subject: [PATCH 5/9] implement container --- app/components-styles/_global-variables.sass | 6 +++- .../_layout.sass | 0 app/components-styles/main.sass | 3 +- crate/src/components/container.rs | 30 ++++++++++++++++++- 4 files changed, 36 insertions(+), 3 deletions(-) rename app/{page-styles => components-styles}/_layout.sass (100%) diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass index dc32fef..e4da2bc 100644 --- a/app/components-styles/_global-variables.sass +++ b/app/components-styles/_global-variables.sass @@ -2,4 +2,8 @@ $regular-style: standard #918d94 #fff none, primary #654016 #fff none, secondary $light-style: standard #faf3f3 #918d94 none, primary #e9d7c4 #654016 none, secondary #ffd9ac #c77b21 none, success #b6f5c6 #1ca53e none, info #cedaff #008FD5 none, link #4fb0ff #034DA1 none, warning #fdffa8 #99a034 none, danger #fdc5c5 #ed1c24 none $outline-style: standard #fff #918d94 #918d94, primary #fff #654016 #654016, secondary #fff #c77b21 #c77b21, success #fff #40C600 #40C600, info #fff #008FD5 #008FD5, link #fff #034DA1 #034DA1, warning #fff #e6bd44 #e6bd44, danger #fff #ed1c24 #ed1c24 $sizes: (small: 12px, medium: 18px, big: 26px) - +$container-type: row, row-reverse, column, column-reverse, no-wrap, wrap, wrap-reverse +$justify-content: flex-start, flex-end, start, end, left, center, right, space-around, space-between, evenly +$align-content: stretch, flex-start, flex-end, start, end, center, baseline, first-baseline, last-baseline, space-around, space-between, evenly +$align-items: stretch, baseline, start, end, flex-start, flex-end, first-baseline, last-baseline, +$align-mode: null, safe, unsafe \ No newline at end of file diff --git a/app/page-styles/_layout.sass b/app/components-styles/_layout.sass similarity index 100% rename from app/page-styles/_layout.sass rename to app/components-styles/_layout.sass diff --git a/app/components-styles/main.sass b/app/components-styles/main.sass index a92396b..37cfdd3 100644 --- a/app/components-styles/main.sass +++ b/app/components-styles/main.sass @@ -1 +1,2 @@ -@import "_button.sass" \ No newline at end of file +@import "_button.sass" +@import "_layout.sass" \ No newline at end of file diff --git a/crate/src/components/container.rs b/crate/src/components/container.rs index 0f3d5aa..bc66264 100644 --- a/crate/src/components/container.rs +++ b/crate/src/components/container.rs @@ -11,6 +11,9 @@ struct ContainerModel; #[derive(Clone)] struct ContainerProps { container_type: String, + justify_content: String, + align_content: String, + align_items: String, } #[derive(Clone)] @@ -131,7 +134,13 @@ impl Component for Container { html! {
{self.props.children.render()}
@@ -143,6 +152,9 @@ impl From for ContainerProps{ fn from(props: Props) -> Self { ContainerProps { container_type: ContainerModel.get_container_type(props.container_type), + justify_content: ContainerModel.get_justify_content(props.justify_content), + align_content: ContainerModel.get_align_content(props.align_content), + align_items: ContainerModel.get_align_items(props.align_items), } } } @@ -199,5 +211,21 @@ impl ContainerModel { AlignContent::space_evenly(mode) => format!("align-content-evenly{}", self.get_mode(mode)), } } + + fn get_align_items(self, align_items: AlignItems) -> String { + match align_items { + AlignItems::stretch(mode) => format!("align-items-stretch{}", self.get_mode(mode)), + AlignItems::baseline(mode) => format!("align-items-baseline{}", self.get_mode(mode)), + AlignItems::start(mode) => format!("align-items-start{}", self.get_mode(mode)), + AlignItems::end(mode) => format!("align-items-end{}", self.get_mode(mode)), + AlignItems::flex_start(mode) => format!("align-items-start{}", self.get_mode(mode)), + AlignItems::flex_end(mode) => format!("align-items-flex-end{}", self.get_mode(mode)), + AlignItems::first_baseline(mode) => format!("align-items-first-baseline{}", self.get_mode(mode)), + AlignItems::last_baseline(mode) => format!("align-items-last-baseline{}", self.get_mode(mode)), + AlignItems::self_start(mode) => format!("align-items-self-start{}", self.get_mode(mode)), + AlignItems::self_end(mode) => format!("align-items-self-end{}", self.get_mode(mode)), + AlignItems::center(mode) => format!("align-items-center{}", self.get_mode(mode)) + } + } } From dddc81a27f3d010ddbe2cb947f40800b04437617 Mon Sep 17 00:00:00 2001 From: spieljs Date: Thu, 13 Feb 2020 01:24:56 +0100 Subject: [PATCH 6/9] optimize container code --- crate/Cargo.lock | 2 +- crate/Cargo.toml | 2 +- crate/src/components/container.rs | 175 ++++++++++++++++-------------- crate/src/lib.rs | 1 + 4 files changed, 98 insertions(+), 82 deletions(-) diff --git a/crate/Cargo.lock b/crate/Cargo.lock index ea3d182..8cb4856 100644 --- a/crate/Cargo.lock +++ b/crate/Cargo.lock @@ -724,7 +724,7 @@ dependencies = [ "failure 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)", "serde 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)", "serde_derive 1.0.104 (registry+https://github.com/rust-lang/crates.io-index)", - "serde_json 1.0.44 (registry+https://github.com/rust-lang/crates.io-index)", + "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)", "wasm-bindgen 0.2.58 (registry+https://github.com/rust-lang/crates.io-index)", "web-sys 0.3.35 (registry+https://github.com/rust-lang/crates.io-index)", "wee_alloc 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)", diff --git a/crate/Cargo.toml b/crate/Cargo.toml index 72ac859..fb91b57 100644 --- a/crate/Cargo.toml +++ b/crate/Cargo.toml @@ -23,4 +23,4 @@ failure = "0.1" yew = { version = "0.11.0", features = ["toml", "yaml", "msgpack", "cbor"]} yew-router = "0.8" web-sys = "0.3" -serde_json = "1.0" +stdweb = "0.4" diff --git a/crate/src/components/container.rs b/crate/src/components/container.rs index bc66264..fba2ccf 100644 --- a/crate/src/components/container.rs +++ b/crate/src/components/container.rs @@ -1,4 +1,5 @@ use yew::prelude::*; +use stdweb::js; pub struct Container { link: ComponentLink, @@ -11,20 +12,23 @@ struct ContainerModel; #[derive(Clone)] struct ContainerProps { container_type: String, - justify_content: String, align_content: String, align_items: String, } #[derive(Clone)] -pub enum ContainerType { +pub enum Direction { row, row_reverse, column, column_reverse, - no_wrap, +} + +#[derive(Clone)] +pub enum Wrap { + nowrap, wrap, - wrap_reverse, + wrap_reverse } #[derive(Clone)] @@ -84,7 +88,9 @@ pub enum Msg {} #[derive(Clone, Properties)] pub struct Props { #[props(required)] - pub container_type: ContainerType, + pub direction: Direction, + #[props(required)] + pub wrap: Wrap, pub justify_content: JustifyContent, pub align_content: AlignContent, pub align_items: AlignItems, @@ -114,6 +120,8 @@ impl Component for Container { type Properties = Props; fn create(props: Self::Properties, link: ComponentLink) -> Self { + ContainerModel.init(props.clone()); + Container { link, props @@ -125,106 +133,113 @@ impl Component for Container { } fn change(&mut self, props: Self::Properties) -> ShouldRender { + ContainerModel.init(props.clone()); self.props = props; true } fn view(&self) -> Html { - let container_props = ContainerProps::from(self.props.clone()); - html! { -
+
{self.props.children.render()}
} } } -impl From for ContainerProps{ - fn from(props: Props) -> Self { - ContainerProps { - container_type: ContainerModel.get_container_type(props.container_type), - justify_content: ContainerModel.get_justify_content(props.justify_content), - align_content: ContainerModel.get_align_content(props.align_content), - align_items: ContainerModel.get_align_items(props.align_items), - } - } -} - impl ContainerModel { - fn get_container_type(self, container_type: ContainerType) -> String { - match container_type { - ContainerType::row => format!("row"), - ContainerType::row_reverse => format!("row-reverse"), - ContainerType::column => format!("column"), - ContainerType::column_reverse => format!("column-reverse"), - ContainerType::no_wrap => format!("no-wrap"), - ContainerType::wrap => format!("wrap"), - ContainerType::wrap_reverse => format!("wrap-reverse"), - } + fn init (self, props: Props) { + self.get_flow(props.direction, props.wrap); + self.get_justify_content(props.justify_content); + self.get_align_content(props.align_content); + self.get_align_items(props.align_items); + } + + fn get_flow(self, direction: Direction, wrap: Wrap) { + let direction = match direction { + Direction::row => format!("row"), + Direction::row_reverse => format!("row-reverse"), + Direction::column => format!("column"), + Direction::column_reverse => format!("column-reverse"), + }; + + let wrap = match wrap { + Wrap::nowrap => format!("nowrap"), + Wrap::wrap => format!("wrap"), + Wrap::wrap_reverse => format!("wrap_reverse") + }; + + let value = format!("{} {}", direction, wrap); + + self.create_style(String::from("flexFlow"), value); } fn get_mode(self, mode: Mode) -> String { match mode { Mode::no_mode => format!(""), - Mode::safe_mode => format!("-safe"), - Mode::unsafe_mode => format!("-unsafe"), + Mode::safe_mode => format!(" safe"), + Mode::unsafe_mode => format!(" unsafe"), } } - fn get_justify_content(self, justify_content: JustifyContent) -> String { - match justify_content { - JustifyContent::flex_start(mode) => format!("justify-content-flex-start{}", self.get_mode(mode)), - JustifyContent::flex_end(mode) => format!("justify-content-flex-end{}", self.get_mode(mode)), - JustifyContent::start(mode) => format!("justify-content-start{}", self.get_mode(mode)), - JustifyContent::end(mode) => format!("justify-content-end{}", self.get_mode(mode)), - JustifyContent::left(mode) => format!("justify-content-left{}", self.get_mode(mode)), - JustifyContent::center(mode) => format!("justify-content-center{}", self.get_mode(mode)), - JustifyContent::rigth(mode) => format!("justify-content-right{}", self.get_mode(mode)), - JustifyContent::space_around(mode) => format!("justify-content-space-around{}", self.get_mode(mode)), - JustifyContent::space_between(mode) => format!("justify-content-space-between{}", self.get_mode(mode)), - JustifyContent::space_evenly(mode) => format!("justify-content-evenly{}", self.get_mode(mode)), - } + fn get_justify_content(self, justify_content: JustifyContent) { + let value = match justify_content { + JustifyContent::flex_start(mode) => format!("flex-start{}", self.get_mode(mode)), + JustifyContent::flex_end(mode) => format!("flex-end{}", self.get_mode(mode)), + JustifyContent::start(mode) => format!("start{}", self.get_mode(mode)), + JustifyContent::end(mode) => format!("end{}", self.get_mode(mode)), + JustifyContent::left(mode) => format!("left{}", self.get_mode(mode)), + JustifyContent::center(mode) => format!("center{}", self.get_mode(mode)), + JustifyContent::rigth(mode) => format!("right{}", self.get_mode(mode)), + JustifyContent::space_around(mode) => format!("space-around{}", self.get_mode(mode)), + JustifyContent::space_between(mode) => format!("space-between{}", self.get_mode(mode)), + JustifyContent::space_evenly(mode) => format!("evenly{}", self.get_mode(mode)), + }; + + self.create_style(String::from("justifyContent"), value) } - fn get_align_content(self, align_content: AlignContent) -> String { - match align_content { - AlignContent::stretch(mode) => format!("align-content-stretch{}", self.get_mode(mode)), - AlignContent::flex_start(mode) => format!("align-content-flex-start{}", self.get_mode(mode)), - AlignContent::flex_end(mode) => format!("align-content-flex-end{}", self.get_mode(mode)), - AlignContent::start(mode) => format!("align-content-start{}", self.get_mode(mode)), - AlignContent::end(mode) => format!("align-content-end{}", self.get_mode(mode)), - AlignContent::center(mode) => format!("align-content-center{}", self.get_mode(mode)), - AlignContent::baseline(mode) => format!("align-content-baseline{}", self.get_mode(mode)), - AlignContent::first_baseline(mode) => format!("align-content-first-baseline{}", self.get_mode(mode)), - AlignContent::last_baseline(mode) => format!("align-content-last-baseline{}", self.get_mode(mode)), - AlignContent::space_around(mode) => format!("align-content-space-around{}", self.get_mode(mode)), - AlignContent::space_between(mode) => format!("align-content-space-between{}", self.get_mode(mode)), - AlignContent::space_evenly(mode) => format!("align-content-evenly{}", self.get_mode(mode)), - } + fn get_align_content(self, align_content: AlignContent) { + let value = match align_content { + AlignContent::stretch(mode) => format!("stretch{}", self.get_mode(mode)), + AlignContent::flex_start(mode) => format!("flex-start{}", self.get_mode(mode)), + AlignContent::flex_end(mode) => format!("flex-end{}", self.get_mode(mode)), + AlignContent::start(mode) => format!("start{}", self.get_mode(mode)), + AlignContent::end(mode) => format!("end{}", self.get_mode(mode)), + AlignContent::center(mode) => format!("center{}", self.get_mode(mode)), + AlignContent::baseline(mode) => format!("baseline{}", self.get_mode(mode)), + AlignContent::first_baseline(mode) => format!("first-baseline{}", self.get_mode(mode)), + AlignContent::last_baseline(mode) => format!("last-baseline{}", self.get_mode(mode)), + AlignContent::space_around(mode) => format!("space-around{}", self.get_mode(mode)), + AlignContent::space_between(mode) => format!("space-between{}", self.get_mode(mode)), + AlignContent::space_evenly(mode) => format!("evenly{}", self.get_mode(mode)), + }; + + self.create_style(String::from("alignContent"), value); + } + + fn get_align_items(self, align_items: AlignItems) { + let value = match align_items { + AlignItems::stretch(mode) => format!("stretch{}", self.get_mode(mode)), + AlignItems::baseline(mode) => format!("baseline{}", self.get_mode(mode)), + AlignItems::start(mode) => format!("start{}", self.get_mode(mode)), + AlignItems::end(mode) => format!("end{}", self.get_mode(mode)), + AlignItems::flex_start(mode) => format!("start{}", self.get_mode(mode)), + AlignItems::flex_end(mode) => format!("flex-end{}", self.get_mode(mode)), + AlignItems::first_baseline(mode) => format!("first-baseline{}", self.get_mode(mode)), + AlignItems::last_baseline(mode) => format!("last-baseline{}", self.get_mode(mode)), + AlignItems::self_start(mode) => format!("self-start{}", self.get_mode(mode)), + AlignItems::self_end(mode) => format!("self-end{}", self.get_mode(mode)), + AlignItems::center(mode) => format!("center{}", self.get_mode(mode)) + }; + + self.create_style(String::from("alignItems"), value); } - fn get_align_items(self, align_items: AlignItems) -> String { - match align_items { - AlignItems::stretch(mode) => format!("align-items-stretch{}", self.get_mode(mode)), - AlignItems::baseline(mode) => format!("align-items-baseline{}", self.get_mode(mode)), - AlignItems::start(mode) => format!("align-items-start{}", self.get_mode(mode)), - AlignItems::end(mode) => format!("align-items-end{}", self.get_mode(mode)), - AlignItems::flex_start(mode) => format!("align-items-start{}", self.get_mode(mode)), - AlignItems::flex_end(mode) => format!("align-items-flex-end{}", self.get_mode(mode)), - AlignItems::first_baseline(mode) => format!("align-items-first-baseline{}", self.get_mode(mode)), - AlignItems::last_baseline(mode) => format!("align-items-last-baseline{}", self.get_mode(mode)), - AlignItems::self_start(mode) => format!("align-items-self-start{}", self.get_mode(mode)), - AlignItems::self_end(mode) => format!("align-items-self-end{}", self.get_mode(mode)), - AlignItems::center(mode) => format!("align-items-center{}", self.get_mode(mode)) + fn create_style(self, style: String, value: String) { + js! { + const container = document.getElementsByClassName(".container")[0]; + container.style[@{style}] = @{value}; } } } diff --git a/crate/src/lib.rs b/crate/src/lib.rs index 60132db..8bae201 100644 --- a/crate/src/lib.rs +++ b/crate/src/lib.rs @@ -5,6 +5,7 @@ extern crate cfg_if; extern crate wasm_bindgen; extern crate web_sys; +extern crate stdweb; extern crate yew; extern crate yew_router; From b70acf65f5e3f4963b916c27a3e23f01419ef77e Mon Sep 17 00:00:00 2001 From: spieljs Date: Sun, 23 Feb 2020 01:47:51 +0100 Subject: [PATCH 7/9] creating layout page --- app/components-styles/_global-variables.sass | 4 +- app/components-styles/_layout.sass | 11 +++ app/components-styles/_mixins.sass | 25 ++++++- crate/src/app.rs | 16 +++-- crate/src/components/column.rs | 64 ++++++++++------- crate/src/components/container.rs | 52 +++++++------- crate/src/components/mod.rs | 9 ++- crate/src/components/row.rs | 63 ++++++++++------- crate/src/lib.rs | 6 +- crate/src/page/button_page.rs | 74 +++++++++++++------- crate/src/page/layouts_page.rs | 42 +++++++++++ crate/src/page/mod.rs | 4 +- crate/src/utils.rs | 8 +++ 13 files changed, 260 insertions(+), 118 deletions(-) create mode 100644 crate/src/page/layouts_page.rs create mode 100644 crate/src/utils.rs diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass index e4da2bc..ee628b4 100644 --- a/app/components-styles/_global-variables.sass +++ b/app/components-styles/_global-variables.sass @@ -6,4 +6,6 @@ $container-type: row, row-reverse, column, column-reverse, no-wrap, wrap, wrap-r $justify-content: flex-start, flex-end, start, end, left, center, right, space-around, space-between, evenly $align-content: stretch, flex-start, flex-end, start, end, center, baseline, first-baseline, last-baseline, space-around, space-between, evenly $align-items: stretch, baseline, start, end, flex-start, flex-end, first-baseline, last-baseline, -$align-mode: null, safe, unsafe \ No newline at end of file +$align-mode: null, safe, unsafe +$screens: xs, s, m, l, xl +$type: cl, rw \ No newline at end of file diff --git a/app/components-styles/_layout.sass b/app/components-styles/_layout.sass index e69de29..38cc327 100644 --- a/app/components-styles/_layout.sass +++ b/app/components-styles/_layout.sass @@ -0,0 +1,11 @@ +@import "_global-variables.sass" +@import "_mixins.sass" + +.container + display: flex + .column + @each $screen in $screens + @include layout-screen($screen, cl) + .row + @each $screen in $screens + @include layout-screen($screen, rw) \ No newline at end of file diff --git a/app/components-styles/_mixins.sass b/app/components-styles/_mixins.sass index eef7102..0436244 100644 --- a/app/components-styles/_mixins.sass +++ b/app/components-styles/_mixins.sass @@ -5,9 +5,32 @@ color: $color border: get-border($border-color) +@mixin layout-screen($screen, $type) + @for $size from 1 through 12 + @if $screen == s + @media (min-width: 576px) + @include get-layout($type, $screen, $size) + @else if $screen == m + @media (min-width: 768px) + @include get-layout($type, $screen, $size) + @else if $screen == l + @media (min-width: 992px) + @include get-layout($type, $screen, $size) + @else if $screen == xl + @media (min-width: 1200px) + @include get-layout($type, $screen, $size) + @else + @include get-layout($type, $screen, $size) + + +@mixin get-layout($type, $screen, $size) + &.#{$type}-#{$screen}-#{$size} + flex-basis: 100% / (12/$size) + + @function get-border($border-color) $border: none @if $border-color != none $border: 1px solid $border-color - @return $border \ No newline at end of file + @return $border diff --git a/crate/src/app.rs b/crate/src/app.rs index f553ef1..10aed94 100644 --- a/crate/src/app.rs +++ b/crate/src/app.rs @@ -1,15 +1,17 @@ +use page::{ButtonPage, LayoutsPage}; use yew::prelude::*; -use yew_router::{prelude::*, Switch, switch::Permissive , route::Route}; -use page::ButtonPage; +use yew_router::{prelude::*, route::Route, switch::Permissive, Switch}; pub struct App; #[derive(Switch, Debug, Clone)] pub enum AppRouter { - #[to= "/!"] + #[to = "/!"] RootPath, - #[to= "/button!"] + #[to = "/button!"] ButtonPath, + #[to = "/layouts!"] + LayoutsPage, #[to = "/page-not-found"] PageNotFound(Permissive), } @@ -35,12 +37,16 @@ impl Component for App { AppRouter::RootPath => html!{

{"Yew Styles Component"}

+
}, AppRouter::ButtonPath => html!{}, + AppRouter::LayoutsPage => html!{}, AppRouter::PageNotFound(Permissive(None)) => html!{"Page not found"}, AppRouter::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)} } @@ -52,4 +58,4 @@ impl Component for App {
} } - } \ No newline at end of file +} diff --git a/crate/src/components/column.rs b/crate/src/components/column.rs index caf63ae..7a0dd67 100644 --- a/crate/src/components/column.rs +++ b/crate/src/components/column.rs @@ -1,7 +1,8 @@ +use utils::create_style; use yew::prelude::*; #[derive(Clone)] -pub enum Layout { +pub enum ColumnLayout { cl_xs(i8), cl_s(i8), cl_m(i8), @@ -25,12 +26,11 @@ pub enum Msg { pub struct Column { link: ComponentLink, - props: Props + props: Props, } #[derive(Clone)] struct ColumnProps { - column_align: String, layouts_classes: String, } @@ -40,7 +40,7 @@ struct ColumnModel; #[derive(Clone, Properties)] pub struct Props { #[props(required)] - pub layouts: Vec, + pub layouts: Vec, pub column_align: ColumnAlign, pub onsignal: DefaultCallback>, pub children: Children, @@ -48,7 +48,7 @@ pub struct Props { #[derive(Clone)] pub struct DefaultCallback { - callback: T + callback: T, } impl Default for DefaultCallback> { @@ -72,10 +72,13 @@ impl Component for Column { type Properties = Props; fn create(props: Self::Properties, link: ComponentLink) -> Self { - Column { - link, - props - } + Column { link, props } + } + + fn mounted(&mut self) -> ShouldRender { + ColumnModel.init(self.props.clone()); + + true } fn update(&mut self, msg: Self::Message) -> ShouldRender { @@ -89,6 +92,8 @@ impl Component for Column { } fn change(&mut self, props: Self::Properties) -> ShouldRender { + ColumnModel.init(props.clone()); + self.props = props; true } @@ -98,7 +103,7 @@ impl Component for Column { html! {
{self.props.children.render()} @@ -107,44 +112,49 @@ impl Component for Column { } } -impl From for ColumnProps{ +impl From for ColumnProps { fn from(props: Props) -> Self { ColumnProps { layouts_classes: ColumnModel.get_layout_classes(props.layouts), - column_align: ColumnModel.get_column_align(props.column_align), } } } impl ColumnModel { - fn get_layout_classes(self, layouts_prop: Vec) -> String { - let mut layouts = layouts_prop.into_iter().map(|layout| { - self.get_layout(layout) - }).collect::(); + fn init(self, props: Props) { + self.get_column_align(props.column_align); + } + + fn get_layout_classes(self, layouts_prop: Vec) -> String { + let mut layouts = layouts_prop + .into_iter() + .map(|layout| self.get_layout(layout)) + .collect::(); layouts.truncate(layouts.len() - 1); - layouts } - fn get_layout(self, layout: Layout) -> String { - match layout { - Layout::cl_xs(size) => format!("cl-xs-{} ", size), - Layout::cl_s(size) => format!("cl-s-{} ", size), - Layout::cl_m(size) => format!("cl-m-{} ", size), - Layout::cl_l(size) => format!("cl-l-{} ", size), - Layout::cl_xl(size) => format!("cl_xl-{} ", size), + fn get_layout(self, column_layout: ColumnLayout) -> String { + match column_layout { + ColumnLayout::cl_xs(size) => format!("cl-xs-{} ", size), + ColumnLayout::cl_s(size) => format!("cl-s-{} ", size), + ColumnLayout::cl_m(size) => format!("cl-m-{} ", size), + ColumnLayout::cl_l(size) => format!("cl-l-{} ", size), + ColumnLayout::cl_xl(size) => format!("cl-xl-{} ", size), } } - fn get_column_align(self, align: ColumnAlign) -> String { - match align { + fn get_column_align(self, align: ColumnAlign) { + let value = match align { ColumnAlign::auto => format!("auto"), ColumnAlign::baseline => format!("baseline"), ColumnAlign::center => format!("center"), ColumnAlign::flex_start => format!("flex-start"), ColumnAlign::flex_end => format!("flex-end"), ColumnAlign::stretch => format!("stretch"), - } + }; + + create_style(String::from("rowAlign"), value, String::from("column")); } } diff --git a/crate/src/components/container.rs b/crate/src/components/container.rs index fba2ccf..1121051 100644 --- a/crate/src/components/container.rs +++ b/crate/src/components/container.rs @@ -1,9 +1,10 @@ -use yew::prelude::*; use stdweb::js; +use utils::create_style; +use yew::prelude::*; pub struct Container { link: ComponentLink, - props: Props + props: Props, } #[derive(Clone, Copy)] @@ -28,7 +29,7 @@ pub enum Direction { pub enum Wrap { nowrap, wrap, - wrap_reverse + wrap_reverse, } #[derive(Clone)] @@ -36,7 +37,7 @@ pub enum Mode { safe_mode, unsafe_mode, no_mode, -} +} #[derive(Clone)] pub enum JustifyContent { @@ -120,12 +121,13 @@ impl Component for Container { type Properties = Props; fn create(props: Self::Properties, link: ComponentLink) -> Self { - ContainerModel.init(props.clone()); + Container { link, props } + } - Container { - link, - props - } + fn mounted(&mut self) -> ShouldRender { + ContainerModel.init(self.props.clone()); + + true } fn update(&mut self, _msg: Self::Message) -> ShouldRender { @@ -148,12 +150,12 @@ impl Component for Container { } impl ContainerModel { - fn init (self, props: Props) { + fn init(self, props: Props) { self.get_flow(props.direction, props.wrap); self.get_justify_content(props.justify_content); self.get_align_content(props.align_content); self.get_align_items(props.align_items); - } + } fn get_flow(self, direction: Direction, wrap: Wrap) { let direction = match direction { @@ -166,12 +168,12 @@ impl ContainerModel { let wrap = match wrap { Wrap::nowrap => format!("nowrap"), Wrap::wrap => format!("wrap"), - Wrap::wrap_reverse => format!("wrap_reverse") + Wrap::wrap_reverse => format!("wrap_reverse"), }; let value = format!("{} {}", direction, wrap); - self.create_style(String::from("flexFlow"), value); + create_style(String::from("flexFlow"), value, String::from("container")); } fn get_mode(self, mode: Mode) -> String { @@ -196,7 +198,11 @@ impl ContainerModel { JustifyContent::space_evenly(mode) => format!("evenly{}", self.get_mode(mode)), }; - self.create_style(String::from("justifyContent"), value) + create_style( + String::from("justifyContent"), + value, + String::from("container"), + ) } fn get_align_content(self, align_content: AlignContent) { @@ -215,7 +221,11 @@ impl ContainerModel { AlignContent::space_evenly(mode) => format!("evenly{}", self.get_mode(mode)), }; - self.create_style(String::from("alignContent"), value); + create_style( + String::from("alignContent"), + value, + String::from("container"), + ); } fn get_align_items(self, align_items: AlignItems) { @@ -230,17 +240,9 @@ impl ContainerModel { AlignItems::last_baseline(mode) => format!("last-baseline{}", self.get_mode(mode)), AlignItems::self_start(mode) => format!("self-start{}", self.get_mode(mode)), AlignItems::self_end(mode) => format!("self-end{}", self.get_mode(mode)), - AlignItems::center(mode) => format!("center{}", self.get_mode(mode)) + AlignItems::center(mode) => format!("center{}", self.get_mode(mode)), }; - self.create_style(String::from("alignItems"), value); - } - - fn create_style(self, style: String, value: String) { - js! { - const container = document.getElementsByClassName(".container")[0]; - container.style[@{style}] = @{value}; - } + create_style(String::from("alignItems"), value, String::from("container")); } } - diff --git a/crate/src/components/mod.rs b/crate/src/components/mod.rs index e11cc2d..65f21a8 100644 --- a/crate/src/components/mod.rs +++ b/crate/src/components/mod.rs @@ -1,6 +1,11 @@ pub mod button; -pub mod container; pub mod column; +pub mod container; pub mod row; -pub use self::button::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style}; \ No newline at end of file +pub use self::button::{ + get_button_style, get_button_type, get_size, Button, ButtonStyle, ButtonType, Size, +}; +pub use self::column::{Column, ColumnAlign, ColumnLayout}; +pub use self::container::{AlignContent, AlignItems, Container, Direction, JustifyContent, Wrap}; +pub use self::row::{Row, RowAlign, RowLayout}; diff --git a/crate/src/components/row.rs b/crate/src/components/row.rs index d30aa4e..b056ca2 100644 --- a/crate/src/components/row.rs +++ b/crate/src/components/row.rs @@ -1,7 +1,8 @@ +use utils::create_style; use yew::prelude::*; #[derive(Clone)] -pub enum Layout { +pub enum RowLayout { rw_xs(i8), rw_s(i8), rw_m(i8), @@ -21,12 +22,11 @@ pub enum RowAlign { pub struct Row { link: ComponentLink, - props: Props + props: Props, } #[derive(Clone)] struct RowProps { - row_align: String, layouts_classes: String, } @@ -36,7 +36,7 @@ struct RowModel; #[derive(Clone, Properties)] pub struct Props { #[props(required)] - pub layouts: Vec, + pub layouts: Vec, pub row_align: RowAlign, pub onsignal: DefaultCallback>, pub children: Children, @@ -48,7 +48,7 @@ pub enum Msg { #[derive(Clone)] pub struct DefaultCallback { - callback: T + callback: T, } impl Default for DefaultCallback> { @@ -72,10 +72,13 @@ impl Component for Row { type Properties = Props; fn create(props: Self::Properties, link: ComponentLink) -> Self { - Row { - link, - props - } + Row { link, props } + } + + fn mounted(&mut self) -> ShouldRender { + RowModel.init(self.props.clone()); + + true } fn update(&mut self, msg: Self::Message) -> ShouldRender { @@ -89,6 +92,7 @@ impl Component for Row { } fn change(&mut self, props: Self::Properties) -> ShouldRender { + RowModel.init(props.clone()); self.props = props; true } @@ -98,7 +102,7 @@ impl Component for Row { html! {
{self.props.children.render()} @@ -107,44 +111,49 @@ impl Component for Row { } } -impl From for RowProps{ +impl From for RowProps { fn from(props: Props) -> Self { RowProps { layouts_classes: RowModel.get_layout_classes(props.layouts), - row_align: RowModel.get_row_align(props.row_align), } } } impl RowModel { - fn get_layout_classes(self, layouts_prop: Vec) -> String { - let mut layouts = layouts_prop.into_iter().map(|layout| { - self.get_layout(layout) - }).collect::(); + fn init(self, props: Props) { + self.get_row_align(props.row_align); + } + + fn get_layout_classes(self, layouts_prop: Vec) -> String { + let mut layouts = layouts_prop + .into_iter() + .map(|layout| self.get_layout(layout)) + .collect::(); layouts.truncate(layouts.len() - 1); - layouts } - fn get_layout(self, layout: Layout) -> String { - match layout { - Layout::rw_xs(size) => format!("rw-xs-{} ", size), - Layout::rw_s(size) => format!("rw-s-{} ", size), - Layout::rw_m(size) => format!("rw-m-{} ", size), - Layout::rw_l(size) => format!("rw-l-{} ", size), - Layout::rw_xl(size) => format!("rw-xl-{} ", size), + fn get_layout(self, row_layout: RowLayout) -> String { + match row_layout { + RowLayout::rw_xs(size) => format!("rw-xs-{} ", size), + RowLayout::rw_s(size) => format!("rw-s-{} ", size), + RowLayout::rw_m(size) => format!("rw-m-{} ", size), + RowLayout::rw_l(size) => format!("rw-l-{} ", size), + RowLayout::rw_xl(size) => format!("rw-xl-{} ", size), } } - fn get_row_align(self, align: RowAlign) -> String { - match align { + fn get_row_align(self, align: RowAlign) { + let value = match align { RowAlign::auto => format!("auto"), RowAlign::baseline => format!("baseline"), RowAlign::center => format!("center"), RowAlign::flex_start => format!("flex-start"), RowAlign::flex_end => format!("flex-end"), RowAlign::stretch => format!("stretch"), - } + }; + + create_style(String::from("rowAlign"), value, String::from("row")); } } diff --git a/crate/src/lib.rs b/crate/src/lib.rs index 8bae201..8af6677 100644 --- a/crate/src/lib.rs +++ b/crate/src/lib.rs @@ -1,11 +1,11 @@ -#![recursion_limit="512"] +#![recursion_limit = "512"] #[macro_use] extern crate cfg_if; +extern crate stdweb; extern crate wasm_bindgen; extern crate web_sys; -extern crate stdweb; extern crate yew; extern crate yew_router; @@ -14,6 +14,7 @@ use wasm_bindgen::prelude::*; mod app; mod components; mod page; +mod utils; use app::App; cfg_if! { @@ -47,4 +48,3 @@ pub fn run() { yew::start_app::(); } - diff --git a/crate/src/page/button_page.rs b/crate/src/page/button_page.rs index 10192eb..3fa0f97 100644 --- a/crate/src/page/button_page.rs +++ b/crate/src/page/button_page.rs @@ -1,5 +1,7 @@ +use components::{ + get_button_style, get_button_type, get_size, Button, ButtonStyle, ButtonType, Size, +}; use yew::prelude::*; -use components::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style}; pub struct ButtonPage { link: ComponentLink, @@ -11,8 +13,7 @@ pub enum Msg { } #[derive(Clone, Properties)] -pub struct Props { -} +pub struct Props {} impl Component for ButtonPage { type Message = Msg; @@ -34,8 +35,7 @@ impl Component for ButtonPage { true } - fn view(&self)-> Html { - + fn view(&self) -> Html { html! {
@@ -59,31 +59,55 @@ fn to_first_upercase(word: &str) -> String { } fn get_button_styles(link: ComponentLink) -> Html { - let styles: Vec = vec!(ButtonStyle::Regular, ButtonStyle::Light, ButtonStyle::Outline); - - styles.into_iter().map(move |style| { - html! { - <> -

{get_button_style(style.clone()).to_uppercase()}

- {get_sizes(style, link.clone())} - - } - }).collect::() + let styles: Vec = vec![ + ButtonStyle::Regular, + ButtonStyle::Light, + ButtonStyle::Outline, + ]; + + styles + .into_iter() + .map(move |style| { + html! { + <> +

{get_button_style(style.clone()).to_uppercase()}

+ {get_sizes(style, link.clone())} + + } + }) + .collect::() } -fn get_sizes(button_style: ButtonStyle,link: ComponentLink) -> Html { - let sizes: Vec = vec!(Size::Small, Size::Medium, Size::Big); +fn get_sizes(button_style: ButtonStyle, link: ComponentLink) -> Html { + let sizes: Vec = vec![Size::Small, Size::Medium, Size::Big]; - sizes.into_iter().map(move |size| { - get_buttons(size, button_style.clone(), link.clone()) - }).collect::() + sizes + .into_iter() + .map(move |size| get_buttons(size, button_style.clone(), link.clone())) + .collect::() } fn get_buttons(size: Size, button_style: ButtonStyle, link: ComponentLink) -> Html { - let button_types: Vec<&str> = vec!("Standard", "Primary", "Secondary", "Info", "Link", "Success", "Warning", "Danger"); - let button_types_enum: Vec = vec!(ButtonType::Standard, ButtonType::Primary, ButtonType::Secondary, - ButtonType::Info, ButtonType::Link, ButtonType::Success, ButtonType::Warning, ButtonType::Danger); - + let button_types: Vec<&str> = vec![ + "Standard", + "Primary", + "Secondary", + "Info", + "Link", + "Success", + "Warning", + "Danger", + ]; + let button_types_enum: Vec = vec![ + ButtonType::Standard, + ButtonType::Primary, + ButtonType::Secondary, + ButtonType::Info, + ButtonType::Link, + ButtonType::Success, + ButtonType::Warning, + ButtonType::Danger, + ]; let mut index = 0; html! { @@ -101,9 +125,7 @@ fn get_buttons(size: Size, button_style: ButtonStyle, link: ComponentLink }; - index = index + 1; - button }).collect::() } diff --git a/crate/src/page/layouts_page.rs b/crate/src/page/layouts_page.rs new file mode 100644 index 0000000..8ed24d5 --- /dev/null +++ b/crate/src/page/layouts_page.rs @@ -0,0 +1,42 @@ +use components::{ + AlignContent, AlignItems, Column, ColumnAlign, ColumnLayout, Container, Direction, + JustifyContent, Row, RowAlign, RowLayout, Wrap, +}; +use yew::prelude::*; + +pub struct LayoutsPage; + +pub struct LayoutsPageModel; + +impl Component for LayoutsPage { + type Message = (); + type Properties = (); + + fn create(_props: Self::Properties, _link: ComponentLink) -> Self { + LayoutsPage {} + } + + fn update(&mut self, _: Self::Message) -> ShouldRender { + true + } + + fn view(&self) -> Html { + html! { + + {(1..5).map(|x| LayoutsPageModel.get_layouts(x)).collect::()} + + } + } +} + +impl LayoutsPageModel { + fn get_layouts(self, number: i8) -> Html { + html! { + +

{number}

+ + } + } +} diff --git a/crate/src/page/mod.rs b/crate/src/page/mod.rs index 51d54f6..463e75b 100644 --- a/crate/src/page/mod.rs +++ b/crate/src/page/mod.rs @@ -1,3 +1,5 @@ pub mod button_page; +pub mod layouts_page; -pub use self::button_page::ButtonPage; \ No newline at end of file +pub use self::button_page::ButtonPage; +pub use self::layouts_page::LayoutsPage; diff --git a/crate/src/utils.rs b/crate/src/utils.rs new file mode 100644 index 0000000..f2cab14 --- /dev/null +++ b/crate/src/utils.rs @@ -0,0 +1,8 @@ +use stdweb::js; + +pub fn create_style(style: String, value: String, wrap: String) { + js! { + const element = document.getElementsByClassName(@{wrap})[0]; + element.style[@{style}] = @{value}; + } +} From 51cb3cd0916a07b6e44fd65021cbd4d521f4a5f0 Mon Sep 17 00:00:00 2001 From: spieljs Date: Sun, 23 Feb 2020 23:30:14 +0100 Subject: [PATCH 8/9] implement layouts --- app/components-styles/_global-variables.sass | 3 +- app/components-styles/_layout.sass | 7 +- app/components-styles/_mixins.sass | 16 +- app/page-styles/_app.sass | 11 + app/page-styles/_layout.sass | 5 + app/page-styles/main.sass | 4 +- crate/src/app.rs | 70 ++++-- crate/src/components/column.rs | 160 ------------ crate/src/components/container.rs | 245 ++++++++++--------- crate/src/components/item.rs | 181 ++++++++++++++ crate/src/components/mod.rs | 10 +- crate/src/components/row.rs | 159 ------------ crate/src/lib.rs | 2 +- crate/src/page/layouts_page.rs | 158 +++++++++++- index.html | 2 +- 15 files changed, 545 insertions(+), 488 deletions(-) create mode 100644 app/page-styles/_app.sass create mode 100644 app/page-styles/_layout.sass delete mode 100644 crate/src/components/column.rs create mode 100644 crate/src/components/item.rs delete mode 100644 crate/src/components/row.rs diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass index ee628b4..b5f1138 100644 --- a/app/components-styles/_global-variables.sass +++ b/app/components-styles/_global-variables.sass @@ -7,5 +7,4 @@ $justify-content: flex-start, flex-end, start, end, left, center, right, space-a $align-content: stretch, flex-start, flex-end, start, end, center, baseline, first-baseline, last-baseline, space-around, space-between, evenly $align-items: stretch, baseline, start, end, flex-start, flex-end, first-baseline, last-baseline, $align-mode: null, safe, unsafe -$screens: xs, s, m, l, xl -$type: cl, rw \ No newline at end of file +$screens: xs, s, m, l, xl \ No newline at end of file diff --git a/app/components-styles/_layout.sass b/app/components-styles/_layout.sass index 38cc327..605891a 100644 --- a/app/components-styles/_layout.sass +++ b/app/components-styles/_layout.sass @@ -3,9 +3,6 @@ .container display: flex - .column + .item @each $screen in $screens - @include layout-screen($screen, cl) - .row - @each $screen in $screens - @include layout-screen($screen, rw) \ No newline at end of file + @include layout-screen($screen) \ No newline at end of file diff --git a/app/components-styles/_mixins.sass b/app/components-styles/_mixins.sass index 0436244..c06110c 100644 --- a/app/components-styles/_mixins.sass +++ b/app/components-styles/_mixins.sass @@ -5,26 +5,26 @@ color: $color border: get-border($border-color) -@mixin layout-screen($screen, $type) +@mixin layout-screen($screen) @for $size from 1 through 12 @if $screen == s @media (min-width: 576px) - @include get-layout($type, $screen, $size) + @include get-layout($screen, $size) @else if $screen == m @media (min-width: 768px) - @include get-layout($type, $screen, $size) + @include get-layout($screen, $size) @else if $screen == l @media (min-width: 992px) - @include get-layout($type, $screen, $size) + @include get-layout($screen, $size) @else if $screen == xl @media (min-width: 1200px) - @include get-layout($type, $screen, $size) + @include get-layout($screen, $size) @else - @include get-layout($type, $screen, $size) + @include get-layout($screen, $size) -@mixin get-layout($type, $screen, $size) - &.#{$type}-#{$screen}-#{$size} +@mixin get-layout($screen, $size) + &.it-#{$screen}-#{$size} flex-basis: 100% / (12/$size) diff --git a/app/page-styles/_app.sass b/app/page-styles/_app.sass new file mode 100644 index 0000000..7b0eb6b --- /dev/null +++ b/app/page-styles/_app.sass @@ -0,0 +1,11 @@ +.component-link + width: 90% + a + cursor: pointer + display: inline-block + width: 100% + + &:hover + background-color: rgb(230, 236, 241) + + \ No newline at end of file diff --git a/app/page-styles/_layout.sass b/app/page-styles/_layout.sass new file mode 100644 index 0000000..1ebfae0 --- /dev/null +++ b/app/page-styles/_layout.sass @@ -0,0 +1,5 @@ +.align + height: 400px + +.align-item + height: 200px diff --git a/app/page-styles/main.sass b/app/page-styles/main.sass index fa7c81a..e569d5d 100644 --- a/app/page-styles/main.sass +++ b/app/page-styles/main.sass @@ -1 +1,3 @@ -@import '_button.sass' \ No newline at end of file +@import '_app.sass' +@import '_button.sass' +@import '_layout.sass' diff --git a/crate/src/app.rs b/crate/src/app.rs index 10aed94..5de6ead 100644 --- a/crate/src/app.rs +++ b/crate/src/app.rs @@ -1,3 +1,4 @@ +use components::{AlignItems, Container, Direction, Item, ItemLayout, Mode, Wrap}; use page::{ButtonPage, LayoutsPage}; use yew::prelude::*; use yew_router::{prelude::*, route::Route, switch::Permissive, Switch}; @@ -30,32 +31,49 @@ impl Component for App { fn view(&self) -> Html { html! { -
- - render = Router::render(|switch: AppRouter | { - match switch { - AppRouter::RootPath => html!{ -
-

{"Yew Styles Component"}

- - -
- }, - AppRouter::ButtonPath => html!{}, - AppRouter::LayoutsPage => html!{}, - AppRouter::PageNotFound(Permissive(None)) => html!{"Page not found"}, - AppRouter::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)} - } - } ) - redirect = Router::redirect(|route: Route<()>| { - AppRouter::PageNotFound(Permissive(Some(route.route))) - }) - /> -
+ + + + +

{"Yew Styles Component"}

+ + + route=AppRouter::RootPath>{"Let's start"}> + + + route=AppRouter::LayoutsPage>{"Layouts"}> + + + route=AppRouter::ButtonPath>{"Button"}> + + + + + + render = Router::render(|switch: AppRouter | { + match switch { + AppRouter::RootPath => html!{ +
+

{"Welcome to Yew Style"}

+
+ }, + AppRouter::ButtonPath => html!{}, + AppRouter::LayoutsPage => html!{}, + AppRouter::PageNotFound(Permissive(None)) => html!{"Page not found"}, + AppRouter::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)} + } + } ) + redirect = Router::redirect(|route: Route<()>| { + AppRouter::PageNotFound(Permissive(Some(route.route))) + }) + /> + + } } } diff --git a/crate/src/components/column.rs b/crate/src/components/column.rs deleted file mode 100644 index 7a0dd67..0000000 --- a/crate/src/components/column.rs +++ /dev/null @@ -1,160 +0,0 @@ -use utils::create_style; -use yew::prelude::*; - -#[derive(Clone)] -pub enum ColumnLayout { - cl_xs(i8), - cl_s(i8), - cl_m(i8), - cl_l(i8), - cl_xl(i8), -} - -#[derive(Clone)] -pub enum ColumnAlign { - auto, - flex_start, - flex_end, - center, - baseline, - stretch, -} - -pub enum Msg { - Clicked, -} - -pub struct Column { - link: ComponentLink, - props: Props, -} - -#[derive(Clone)] -struct ColumnProps { - layouts_classes: String, -} - -#[derive(Clone, Copy)] -struct ColumnModel; - -#[derive(Clone, Properties)] -pub struct Props { - #[props(required)] - pub layouts: Vec, - pub column_align: ColumnAlign, - pub onsignal: DefaultCallback>, - pub children: Children, -} - -#[derive(Clone)] -pub struct DefaultCallback { - callback: T, -} - -impl Default for DefaultCallback> { - fn default() -> Self { - let callback = DefaultCallback { - callback: Callback::noop(), - }; - - callback - } -} - -impl Default for ColumnAlign { - fn default() -> Self { - ColumnAlign::auto - } -} - -impl Component for Column { - type Message = Msg; - type Properties = Props; - - fn create(props: Self::Properties, link: ComponentLink) -> Self { - Column { link, props } - } - - fn mounted(&mut self) -> ShouldRender { - ColumnModel.init(self.props.clone()); - - true - } - - fn update(&mut self, msg: Self::Message) -> ShouldRender { - match msg { - Msg::Clicked => { - self.props.onsignal.callback.emit(()); - } - }; - - false - } - - fn change(&mut self, props: Self::Properties) -> ShouldRender { - ColumnModel.init(props.clone()); - - self.props = props; - true - } - - fn view(&self) -> Html { - let column_props = ColumnProps::from(self.props.clone()); - - html! { -
- {self.props.children.render()} -
- } - } -} - -impl From for ColumnProps { - fn from(props: Props) -> Self { - ColumnProps { - layouts_classes: ColumnModel.get_layout_classes(props.layouts), - } - } -} - -impl ColumnModel { - fn init(self, props: Props) { - self.get_column_align(props.column_align); - } - - fn get_layout_classes(self, layouts_prop: Vec) -> String { - let mut layouts = layouts_prop - .into_iter() - .map(|layout| self.get_layout(layout)) - .collect::(); - - layouts.truncate(layouts.len() - 1); - layouts - } - - fn get_layout(self, column_layout: ColumnLayout) -> String { - match column_layout { - ColumnLayout::cl_xs(size) => format!("cl-xs-{} ", size), - ColumnLayout::cl_s(size) => format!("cl-s-{} ", size), - ColumnLayout::cl_m(size) => format!("cl-m-{} ", size), - ColumnLayout::cl_l(size) => format!("cl-l-{} ", size), - ColumnLayout::cl_xl(size) => format!("cl-xl-{} ", size), - } - } - - fn get_column_align(self, align: ColumnAlign) { - let value = match align { - ColumnAlign::auto => format!("auto"), - ColumnAlign::baseline => format!("baseline"), - ColumnAlign::center => format!("center"), - ColumnAlign::flex_start => format!("flex-start"), - ColumnAlign::flex_end => format!("flex-end"), - ColumnAlign::stretch => format!("stretch"), - }; - - create_style(String::from("rowAlign"), value, String::from("column")); - } -} diff --git a/crate/src/components/container.rs b/crate/src/components/container.rs index 1121051..4a5d961 100644 --- a/crate/src/components/container.rs +++ b/crate/src/components/container.rs @@ -1,4 +1,3 @@ -use stdweb::js; use utils::create_style; use yew::prelude::*; @@ -10,78 +9,71 @@ pub struct Container { #[derive(Clone, Copy)] struct ContainerModel; -#[derive(Clone)] -struct ContainerProps { - container_type: String, - align_content: String, - align_items: String, -} - #[derive(Clone)] pub enum Direction { - row, - row_reverse, - column, - column_reverse, + Row, + RowReverse, + Column, + ColumnReverse, } #[derive(Clone)] pub enum Wrap { - nowrap, - wrap, - wrap_reverse, + Nowrap, + Wrap, + WrapReverse, } #[derive(Clone)] pub enum Mode { - safe_mode, - unsafe_mode, - no_mode, + SafeMode, + UnsafeMode, + NoMode, } #[derive(Clone)] pub enum JustifyContent { - flex_start(Mode), - flex_end(Mode), - center(Mode), - space_between(Mode), - space_around(Mode), - space_evenly(Mode), - start(Mode), - end(Mode), - left(Mode), - rigth(Mode), + FlexStart(Mode), + FlexEnd(Mode), + Center(Mode), + SpaceBetween(Mode), + SpaceAround(Mode), + SpaceEvenly(Mode), + Start(Mode), + End(Mode), + Left(Mode), + Rigth(Mode), } #[derive(Clone)] pub enum AlignItems { - stretch(Mode), - flex_start(Mode), - flex_end(Mode), - center(Mode), - baseline(Mode), - first_baseline(Mode), - last_baseline(Mode), - start(Mode), - end(Mode), - self_start(Mode), - self_end(Mode), + Stretch(Mode), + FlexStart(Mode), + FlexEnd(Mode), + Center(Mode), + Baseline(Mode), + FirstBaseline(Mode), + LastBaseline(Mode), + Start(Mode), + End(Mode), + SelfStart(Mode), + SelfEnd(Mode), } #[derive(Clone)] pub enum AlignContent { - flex_start(Mode), - flex_end(Mode), - center(Mode), - space_between(Mode), - space_around(Mode), - space_evenly(Mode), - stretch(Mode), - start(Mode), - end(Mode), - baseline(Mode), - first_baseline(Mode), - last_baseline(Mode), + FlexStart(Mode), + FlexEnd(Mode), + Center(Mode), + SpaceBetween(Mode), + SpaceAround(Mode), + SpaceEvenly(Mode), + Stretch(Mode), + Start(Mode), + End(Mode), + Baseline(Mode), + FirstBaseline(Mode), + LastBaseline(Mode), } pub enum Msg {} @@ -92,27 +84,30 @@ pub struct Props { pub direction: Direction, #[props(required)] pub wrap: Wrap, + pub index: i16, pub justify_content: JustifyContent, pub align_content: AlignContent, pub align_items: AlignItems, + pub class_name: String, + pub name: String, pub children: Children, } impl Default for JustifyContent { fn default() -> Self { - JustifyContent::flex_start(Mode::no_mode) + JustifyContent::FlexStart(Mode::NoMode) } } impl Default for AlignContent { fn default() -> Self { - AlignContent::stretch(Mode::no_mode) + AlignContent::Stretch(Mode::NoMode) } } impl Default for AlignItems { fn default() -> Self { - AlignItems::stretch(Mode::no_mode) + AlignItems::Stretch(Mode::NoMode) } } @@ -142,7 +137,13 @@ impl Component for Container { fn view(&self) -> Html { html! { -
+
{self.props.children.render()}
} @@ -151,98 +152,122 @@ impl Component for Container { impl ContainerModel { fn init(self, props: Props) { - self.get_flow(props.direction, props.wrap); - self.get_justify_content(props.justify_content); - self.get_align_content(props.align_content); - self.get_align_items(props.align_items); + self.get_flow(props.direction, props.wrap, props.index, props.name.clone()); + self.get_justify_content(props.justify_content, props.index, props.name.clone()); + self.get_align_content(props.align_content, props.index, props.name.clone()); + self.get_align_items(props.align_items, props.index, props.name); } - fn get_flow(self, direction: Direction, wrap: Wrap) { + fn get_flow(self, direction: Direction, wrap: Wrap, index: i16, name: String) { let direction = match direction { - Direction::row => format!("row"), - Direction::row_reverse => format!("row-reverse"), - Direction::column => format!("column"), - Direction::column_reverse => format!("column-reverse"), + Direction::Row => format!("row"), + Direction::RowReverse => format!("row-reverse"), + Direction::Column => format!("column"), + Direction::ColumnReverse => format!("column-reverse"), }; let wrap = match wrap { - Wrap::nowrap => format!("nowrap"), - Wrap::wrap => format!("wrap"), - Wrap::wrap_reverse => format!("wrap_reverse"), + Wrap::Nowrap => format!("nowrap"), + Wrap::Wrap => format!("wrap"), + Wrap::WrapReverse => format!("wrap-reverse"), }; let value = format!("{} {}", direction, wrap); - create_style(String::from("flexFlow"), value, String::from("container")); + create_style( + String::from("flexFlow"), + value, + if name == "" { + format!("container-{}", index) + } else { + format!("container-{}-{}", name, index) + }, + ); } fn get_mode(self, mode: Mode) -> String { match mode { - Mode::no_mode => format!(""), - Mode::safe_mode => format!(" safe"), - Mode::unsafe_mode => format!(" unsafe"), + Mode::NoMode => format!(""), + Mode::SafeMode => format!(" safe"), + Mode::UnsafeMode => format!(" unsafe"), } } - fn get_justify_content(self, justify_content: JustifyContent) { + fn get_justify_content(self, justify_content: JustifyContent, index: i16, name: String) { let value = match justify_content { - JustifyContent::flex_start(mode) => format!("flex-start{}", self.get_mode(mode)), - JustifyContent::flex_end(mode) => format!("flex-end{}", self.get_mode(mode)), - JustifyContent::start(mode) => format!("start{}", self.get_mode(mode)), - JustifyContent::end(mode) => format!("end{}", self.get_mode(mode)), - JustifyContent::left(mode) => format!("left{}", self.get_mode(mode)), - JustifyContent::center(mode) => format!("center{}", self.get_mode(mode)), - JustifyContent::rigth(mode) => format!("right{}", self.get_mode(mode)), - JustifyContent::space_around(mode) => format!("space-around{}", self.get_mode(mode)), - JustifyContent::space_between(mode) => format!("space-between{}", self.get_mode(mode)), - JustifyContent::space_evenly(mode) => format!("evenly{}", self.get_mode(mode)), + JustifyContent::FlexStart(mode) => format!("flex-start{}", self.get_mode(mode)), + JustifyContent::FlexEnd(mode) => format!("flex-end{}", self.get_mode(mode)), + JustifyContent::Start(mode) => format!("start{}", self.get_mode(mode)), + JustifyContent::End(mode) => format!("end{}", self.get_mode(mode)), + JustifyContent::Left(mode) => format!("left{}", self.get_mode(mode)), + JustifyContent::Center(mode) => format!("center{}", self.get_mode(mode)), + JustifyContent::Rigth(mode) => format!("right{}", self.get_mode(mode)), + JustifyContent::SpaceAround(mode) => format!("space-around{}", self.get_mode(mode)), + JustifyContent::SpaceBetween(mode) => format!("space-between{}", self.get_mode(mode)), + JustifyContent::SpaceEvenly(mode) => format!("evenly{}", self.get_mode(mode)), }; create_style( String::from("justifyContent"), value, - String::from("container"), + if name == "" { + format!("container-{}", index) + } else { + format!("container-{}-{}", name, index) + }, ) } - fn get_align_content(self, align_content: AlignContent) { + fn get_align_content(self, align_content: AlignContent, index: i16, name: String) { let value = match align_content { - AlignContent::stretch(mode) => format!("stretch{}", self.get_mode(mode)), - AlignContent::flex_start(mode) => format!("flex-start{}", self.get_mode(mode)), - AlignContent::flex_end(mode) => format!("flex-end{}", self.get_mode(mode)), - AlignContent::start(mode) => format!("start{}", self.get_mode(mode)), - AlignContent::end(mode) => format!("end{}", self.get_mode(mode)), - AlignContent::center(mode) => format!("center{}", self.get_mode(mode)), - AlignContent::baseline(mode) => format!("baseline{}", self.get_mode(mode)), - AlignContent::first_baseline(mode) => format!("first-baseline{}", self.get_mode(mode)), - AlignContent::last_baseline(mode) => format!("last-baseline{}", self.get_mode(mode)), - AlignContent::space_around(mode) => format!("space-around{}", self.get_mode(mode)), - AlignContent::space_between(mode) => format!("space-between{}", self.get_mode(mode)), - AlignContent::space_evenly(mode) => format!("evenly{}", self.get_mode(mode)), + AlignContent::Stretch(mode) => format!("stretch{}", self.get_mode(mode)), + AlignContent::FlexStart(mode) => format!("flex-start{}", self.get_mode(mode)), + AlignContent::FlexEnd(mode) => format!("flex-end{}", self.get_mode(mode)), + AlignContent::Start(mode) => format!("start{}", self.get_mode(mode)), + AlignContent::End(mode) => format!("end{}", self.get_mode(mode)), + AlignContent::Center(mode) => format!("center{}", self.get_mode(mode)), + AlignContent::Baseline(mode) => format!("baseline{}", self.get_mode(mode)), + AlignContent::FirstBaseline(mode) => format!("first-baseline{}", self.get_mode(mode)), + AlignContent::LastBaseline(mode) => format!("last-baseline{}", self.get_mode(mode)), + AlignContent::SpaceAround(mode) => format!("space-around{}", self.get_mode(mode)), + AlignContent::SpaceBetween(mode) => format!("space-between{}", self.get_mode(mode)), + AlignContent::SpaceEvenly(mode) => format!("evenly{}", self.get_mode(mode)), }; create_style( String::from("alignContent"), value, - String::from("container"), + if name == "" { + format!("container-{}", index) + } else { + format!("container-{}-{}", name, index) + }, ); } - fn get_align_items(self, align_items: AlignItems) { + fn get_align_items(self, align_items: AlignItems, index: i16, name: String) { let value = match align_items { - AlignItems::stretch(mode) => format!("stretch{}", self.get_mode(mode)), - AlignItems::baseline(mode) => format!("baseline{}", self.get_mode(mode)), - AlignItems::start(mode) => format!("start{}", self.get_mode(mode)), - AlignItems::end(mode) => format!("end{}", self.get_mode(mode)), - AlignItems::flex_start(mode) => format!("start{}", self.get_mode(mode)), - AlignItems::flex_end(mode) => format!("flex-end{}", self.get_mode(mode)), - AlignItems::first_baseline(mode) => format!("first-baseline{}", self.get_mode(mode)), - AlignItems::last_baseline(mode) => format!("last-baseline{}", self.get_mode(mode)), - AlignItems::self_start(mode) => format!("self-start{}", self.get_mode(mode)), - AlignItems::self_end(mode) => format!("self-end{}", self.get_mode(mode)), - AlignItems::center(mode) => format!("center{}", self.get_mode(mode)), + AlignItems::Stretch(mode) => format!("stretch{}", self.get_mode(mode)), + AlignItems::Baseline(mode) => format!("baseline{}", self.get_mode(mode)), + AlignItems::Start(mode) => format!("start{}", self.get_mode(mode)), + AlignItems::End(mode) => format!("end{}", self.get_mode(mode)), + AlignItems::FlexStart(mode) => format!("start{}", self.get_mode(mode)), + AlignItems::FlexEnd(mode) => format!("flex-end{}", self.get_mode(mode)), + AlignItems::FirstBaseline(mode) => format!("first-baseline{}", self.get_mode(mode)), + AlignItems::LastBaseline(mode) => format!("last-baseline{}", self.get_mode(mode)), + AlignItems::SelfStart(mode) => format!("self-start{}", self.get_mode(mode)), + AlignItems::SelfEnd(mode) => format!("self-end{}", self.get_mode(mode)), + AlignItems::Center(mode) => format!("center{}", self.get_mode(mode)), }; - create_style(String::from("alignItems"), value, String::from("container")); + create_style( + String::from("alignItems"), + value, + if name == "" { + format!("container-{}", index) + } else { + format!("container-{}-{}", name, index) + }, + ); } } diff --git a/crate/src/components/item.rs b/crate/src/components/item.rs new file mode 100644 index 0000000..a2eadf8 --- /dev/null +++ b/crate/src/components/item.rs @@ -0,0 +1,181 @@ +use utils::create_style; +use yew::prelude::*; + +#[derive(Clone)] +pub enum ItemLayout { + ItXs(i8), + ItS(i8), + ItM(i8), + ItL(i8), + ItXl(i8), +} + +#[derive(Clone)] +pub enum AlignSelf { + Auto, + FlexStart, + FlexEnd, + Center, + Baseline, + Stretch, +} + +pub enum Msg { + Clicked, +} + +pub struct Item { + link: ComponentLink, + props: Props, +} + +#[derive(Clone)] +struct ItemProps { + layouts_classes: String, + name: String, + index: i16, + class_name: String, +} + +#[derive(Clone, Copy)] +struct ItemModel; + +#[derive(Clone, Properties)] +pub struct Props { + pub layouts: Vec, + pub align_self: AlignSelf, + pub name: String, + pub class_name: String, + pub onsignal: DefaultCallback>, + pub children: Children, + pub index: i16, +} + +#[derive(Clone)] +pub struct DefaultCallback { + callback: T, +} + +impl Default for DefaultCallback> { + fn default() -> Self { + let callback = DefaultCallback { + callback: Callback::noop(), + }; + + callback + } +} + +impl Default for AlignSelf { + fn default() -> Self { + AlignSelf::Auto + } +} + +impl Component for Item { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Item { link, props } + } + + fn mounted(&mut self) -> ShouldRender { + ItemModel.init(self.props.clone()); + + true + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Clicked => { + self.props.onsignal.callback.emit(()); + } + }; + + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + ItemModel.init(props.clone()); + + self.props = props; + true + } + + fn view(&self) -> Html { + let item_props = ItemProps::from(self.props.clone()); + + html! { +
+ {self.props.children.render()} +
+ } + } +} + +impl From for ItemProps { + fn from(props: Props) -> Self { + ItemProps { + layouts_classes: ItemModel.get_layout_classes(props.layouts), + name: props.name, + index: props.index, + class_name: props.class_name, + } + } +} + +impl ItemModel { + fn init(self, props: Props) { + self.get_item_align(props.align_self, props.index, props.name); + } + + fn get_layout_classes(self, layouts_prop: Vec) -> String { + let mut layouts = layouts_prop + .into_iter() + .map(|layout| self.get_layout(layout)) + .collect::(); + + layouts.truncate(layouts.len() - 1); + layouts + } + + fn get_layout(self, item_layout: ItemLayout) -> String { + match item_layout { + ItemLayout::ItXs(size) => format!("it-xs-{} ", size), + ItemLayout::ItS(size) => format!("it-s-{} ", size), + ItemLayout::ItM(size) => format!("it-m-{} ", size), + ItemLayout::ItL(size) => format!("it-l-{} ", size), + ItemLayout::ItXl(size) => format!("it-xl-{} ", size), + } + } + + fn get_item_align(self, align: AlignSelf, index: i16, name: String) { + let value = match align { + AlignSelf::Auto => format!("auto"), + AlignSelf::Baseline => format!("baseline"), + AlignSelf::Center => format!("center"), + AlignSelf::FlexStart => format!("flex-start"), + AlignSelf::FlexEnd => format!("flex-end"), + AlignSelf::Stretch => format!("stretch"), + }; + + create_style( + String::from("alignSelf"), + value, + if name == "" { + format!("item-{}", index) + } else { + format!("item-{}-{}", name, index) + }, + ); + } +} diff --git a/crate/src/components/mod.rs b/crate/src/components/mod.rs index 65f21a8..b9f5934 100644 --- a/crate/src/components/mod.rs +++ b/crate/src/components/mod.rs @@ -1,11 +1,11 @@ pub mod button; -pub mod column; pub mod container; -pub mod row; +pub mod item; pub use self::button::{ get_button_style, get_button_type, get_size, Button, ButtonStyle, ButtonType, Size, }; -pub use self::column::{Column, ColumnAlign, ColumnLayout}; -pub use self::container::{AlignContent, AlignItems, Container, Direction, JustifyContent, Wrap}; -pub use self::row::{Row, RowAlign, RowLayout}; +pub use self::container::{ + AlignContent, AlignItems, Container, Direction, JustifyContent, Mode, Wrap, +}; +pub use self::item::{AlignSelf, Item, ItemLayout}; diff --git a/crate/src/components/row.rs b/crate/src/components/row.rs deleted file mode 100644 index b056ca2..0000000 --- a/crate/src/components/row.rs +++ /dev/null @@ -1,159 +0,0 @@ -use utils::create_style; -use yew::prelude::*; - -#[derive(Clone)] -pub enum RowLayout { - rw_xs(i8), - rw_s(i8), - rw_m(i8), - rw_l(i8), - rw_xl(i8), -} - -#[derive(Clone)] -pub enum RowAlign { - auto, - flex_start, - flex_end, - center, - baseline, - stretch, -} - -pub struct Row { - link: ComponentLink, - props: Props, -} - -#[derive(Clone)] -struct RowProps { - layouts_classes: String, -} - -#[derive(Clone, Copy)] -struct RowModel; - -#[derive(Clone, Properties)] -pub struct Props { - #[props(required)] - pub layouts: Vec, - pub row_align: RowAlign, - pub onsignal: DefaultCallback>, - pub children: Children, -} - -pub enum Msg { - Clicked, -} - -#[derive(Clone)] -pub struct DefaultCallback { - callback: T, -} - -impl Default for DefaultCallback> { - fn default() -> Self { - let callback = DefaultCallback { - callback: Callback::noop(), - }; - - callback - } -} - -impl Default for RowAlign { - fn default() -> Self { - RowAlign::auto - } -} - -impl Component for Row { - type Message = Msg; - type Properties = Props; - - fn create(props: Self::Properties, link: ComponentLink) -> Self { - Row { link, props } - } - - fn mounted(&mut self) -> ShouldRender { - RowModel.init(self.props.clone()); - - true - } - - fn update(&mut self, msg: Self::Message) -> ShouldRender { - match msg { - Msg::Clicked => { - self.props.onsignal.callback.emit(()); - } - }; - - false - } - - fn change(&mut self, props: Self::Properties) -> ShouldRender { - RowModel.init(props.clone()); - self.props = props; - true - } - - fn view(&self) -> Html { - let row_props = RowProps::from(self.props.clone()); - - html! { -
- {self.props.children.render()} -
- } - } -} - -impl From for RowProps { - fn from(props: Props) -> Self { - RowProps { - layouts_classes: RowModel.get_layout_classes(props.layouts), - } - } -} - -impl RowModel { - fn init(self, props: Props) { - self.get_row_align(props.row_align); - } - - fn get_layout_classes(self, layouts_prop: Vec) -> String { - let mut layouts = layouts_prop - .into_iter() - .map(|layout| self.get_layout(layout)) - .collect::(); - - layouts.truncate(layouts.len() - 1); - layouts - } - - fn get_layout(self, row_layout: RowLayout) -> String { - match row_layout { - RowLayout::rw_xs(size) => format!("rw-xs-{} ", size), - RowLayout::rw_s(size) => format!("rw-s-{} ", size), - RowLayout::rw_m(size) => format!("rw-m-{} ", size), - RowLayout::rw_l(size) => format!("rw-l-{} ", size), - RowLayout::rw_xl(size) => format!("rw-xl-{} ", size), - } - } - - fn get_row_align(self, align: RowAlign) { - let value = match align { - RowAlign::auto => format!("auto"), - RowAlign::baseline => format!("baseline"), - RowAlign::center => format!("center"), - RowAlign::flex_start => format!("flex-start"), - RowAlign::flex_end => format!("flex-end"), - RowAlign::stretch => format!("stretch"), - }; - - create_style(String::from("rowAlign"), value, String::from("row")); - } -} diff --git a/crate/src/lib.rs b/crate/src/lib.rs index 8af6677..88f4e98 100644 --- a/crate/src/lib.rs +++ b/crate/src/lib.rs @@ -1,4 +1,4 @@ -#![recursion_limit = "512"] +#![recursion_limit = "2048"] #[macro_use] extern crate cfg_if; diff --git a/crate/src/page/layouts_page.rs b/crate/src/page/layouts_page.rs index 8ed24d5..5541549 100644 --- a/crate/src/page/layouts_page.rs +++ b/crate/src/page/layouts_page.rs @@ -1,6 +1,6 @@ use components::{ - AlignContent, AlignItems, Column, ColumnAlign, ColumnLayout, Container, Direction, - JustifyContent, Row, RowAlign, RowLayout, Wrap, + AlignContent, AlignItems, AlignSelf, Container, Direction, Item, ItemLayout, JustifyContent, + Mode, Wrap, }; use yew::prelude::*; @@ -22,21 +22,159 @@ impl Component for LayoutsPage { fn view(&self) -> Html { html! { - - {(1..5).map(|x| LayoutsPageModel.get_layouts(x)).collect::()} - +
+

{"Layouts"}

+

{"Wrap"}

+ + {(1..13).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"No wrap"}

+ + {(1..13).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"Wrap reverse"}

+ + {(1..13).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"Row direction:"}

+ + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"Row reverse direction:"}

+ + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"Column direction:"}

+ + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"Column reverse direction:"}

+ + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + +

{"Combination of column and row direction"}

+ + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + +

{"Justify Content"}

+ + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + +

{"To know about more options please visit "} + {"Justify Content"} +

+

{"Align Content"}

+ + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + +

{"To know about more options please visit "} + {"Align Content"} +

+

{"Align Items"}

+ + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + + + {(1..5).map(|x| LayoutsPageModel.get_items(x)).collect::()} + + + +

{"To know about more options please visit "} + {"Align Items"} +

+

{"Align self"}

+ + +

{"start"}

+ + +

{"center"}

+ + +

{"end"}

+ + +

{"To know about more options please visit "} + {"Align Self"} +

+
} } } impl LayoutsPageModel { - fn get_layouts(self, number: i8) -> Html { + fn get_items(self, number: i8) -> Html { html! { - -

{number}

- +

{number}

+ } } } diff --git a/index.html b/index.html index 326ef5d..0e0bf13 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - My awesome Yew with Yew-Router and Parcel application + Yew Styles Page From 3178b48a961102eb3b4421f5d213bfee6656b404 Mon Sep 17 00:00:00 2001 From: spieljs Date: Sun, 23 Feb 2020 23:32:18 +0100 Subject: [PATCH 9/9] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aed2044..4e05e3b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "url": "https://github.com/spielrs/yew-parcel-template" }, "name": "yewstyle-page", - "version": "0.1.0", + "version": "0.1.1", "license": "Apache-2.0/MIT", "scripts": { "start": "parcel index.html",