diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass index dc32fef..b5f1138 100644 --- a/app/components-styles/_global-variables.sass +++ b/app/components-styles/_global-variables.sass @@ -2,4 +2,9 @@ $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 +$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 new file mode 100644 index 0000000..605891a --- /dev/null +++ b/app/components-styles/_layout.sass @@ -0,0 +1,8 @@ +@import "_global-variables.sass" +@import "_mixins.sass" + +.container + display: flex + .item + @each $screen in $screens + @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 eef7102..c06110c 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) + @for $size from 1 through 12 + @if $screen == s + @media (min-width: 576px) + @include get-layout($screen, $size) + @else if $screen == m + @media (min-width: 768px) + @include get-layout($screen, $size) + @else if $screen == l + @media (min-width: 992px) + @include get-layout($screen, $size) + @else if $screen == xl + @media (min-width: 1200px) + @include get-layout($screen, $size) + @else + @include get-layout($screen, $size) + + +@mixin get-layout($screen, $size) + &.it-#{$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/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/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/Cargo.lock b/crate/Cargo.lock index ebff10d..8cb4856 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)", + "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 0aeee07..fb91b57 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" +stdweb = "0.4" diff --git a/crate/src/app.rs b/crate/src/app.rs index f553ef1..5de6ead 100644 --- a/crate/src/app.rs +++ b/crate/src/app.rs @@ -1,15 +1,18 @@ +use components::{AlignItems, Container, Direction, Item, ItemLayout, Mode, Wrap}; +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), } @@ -28,28 +31,49 @@ impl Component for App { fn view(&self) -> Html { html! { -
- - render = Router::render(|switch: AppRouter | { - match switch { - AppRouter::RootPath => html!{ -
-

{"Yew Styles Component"}

-
- {"Button"} -
-
- }, - AppRouter::ButtonPath => 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))) + }) + /> + + } } - } \ No newline at end of file +} 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/container.rs b/crate/src/components/container.rs new file mode 100644 index 0000000..4a5d961 --- /dev/null +++ b/crate/src/components/container.rs @@ -0,0 +1,273 @@ +use utils::create_style; +use yew::prelude::*; + +pub struct Container { + link: ComponentLink, + props: Props, +} + +#[derive(Clone, Copy)] +struct ContainerModel; + +#[derive(Clone)] +pub enum Direction { + Row, + RowReverse, + Column, + ColumnReverse, +} + +#[derive(Clone)] +pub enum Wrap { + Nowrap, + Wrap, + WrapReverse, +} + +#[derive(Clone)] +pub enum Mode { + SafeMode, + UnsafeMode, + NoMode, +} + +#[derive(Clone)] +pub enum JustifyContent { + 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), + 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 { + 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 {} + +#[derive(Clone, Properties)] +pub struct Props { + #[props(required)] + 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::FlexStart(Mode::NoMode) + } +} + +impl Default for AlignContent { + fn default() -> Self { + AlignContent::Stretch(Mode::NoMode) + } +} + +impl Default for AlignItems { + fn default() -> Self { + AlignItems::Stretch(Mode::NoMode) + } +} + +impl Component for Container { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Container { link, props } + } + + fn mounted(&mut self) -> ShouldRender { + ContainerModel.init(self.props.clone()); + + true + } + + fn update(&mut self, _msg: Self::Message) -> ShouldRender { + false + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + ContainerModel.init(props.clone()); + self.props = props; + true + } + + fn view(&self) -> Html { + html! { +
+ {self.props.children.render()} +
+ } + } +} + +impl ContainerModel { + fn init(self, props: Props) { + 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, index: i16, name: String) { + let direction = match direction { + 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::WrapReverse => format!("wrap-reverse"), + }; + + let value = format!("{} {}", direction, wrap); + + 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::NoMode => format!(""), + Mode::SafeMode => format!(" safe"), + Mode::UnsafeMode => format!(" unsafe"), + } + } + + fn get_justify_content(self, justify_content: JustifyContent, index: i16, name: String) { + let value = match justify_content { + 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, + if name == "" { + format!("container-{}", index) + } else { + format!("container-{}-{}", name, index) + }, + ) + } + + 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::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, + if name == "" { + format!("container-{}", index) + } else { + format!("container-{}-{}", name, index) + }, + ); + } + + 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::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, + 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 d1f1c50..b9f5934 100644 --- a/crate/src/components/mod.rs +++ b/crate/src/components/mod.rs @@ -1,3 +1,11 @@ pub mod button; +pub mod container; +pub mod item; -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::container::{ + AlignContent, AlignItems, Container, Direction, JustifyContent, Mode, Wrap, +}; +pub use self::item::{AlignSelf, Item, ItemLayout}; diff --git a/crate/src/lib.rs b/crate/src/lib.rs index 72d7adc..88f4e98 100644 --- a/crate/src/lib.rs +++ b/crate/src/lib.rs @@ -1,17 +1,20 @@ -#![recursion_limit="512"] +#![recursion_limit = "2048"] #[macro_use] extern crate cfg_if; +extern crate stdweb; extern crate wasm_bindgen; extern crate web_sys; extern crate yew; extern crate yew_router; + use wasm_bindgen::prelude::*; mod app; mod components; mod page; +mod utils; use app::App; cfg_if! { @@ -45,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..5541549 --- /dev/null +++ b/crate/src/page/layouts_page.rs @@ -0,0 +1,180 @@ +use components::{ + AlignContent, AlignItems, AlignSelf, Container, Direction, Item, ItemLayout, JustifyContent, + Mode, 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! { +
+

{"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_items(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}; + } +} 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 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",