start work for good screenshots

ranile · Oct 29, 2020 · 310242d · 310242d
1 parent fd37532
commit 310242d
Show file tree

Hide file tree

Showing 10 changed files with 335 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 # Generated by Cargo
 # will have compiled files and executables
-/target/
+**/target/
 
 # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
@@ -11,3 +11,6 @@ Cargo.lock
 
 # Node stuff
 node_modules
+
+# Trunk stuff
+**/dist/
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
diff --git a/.idea/mat-web-comp.iml b/.idea/mat-web-comp.iml
diff --git a/screenshots/Cargo.toml b/screenshots/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "screenshots"
+version = "0.1.0"
+authors = ["Hamza <[email protected]>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+wasm-bindgen = "^0.2"
+yew = { git = "https://github.com/yewstack/yew/", branch = "master" }
+yew-router = { git = "https://github.com/yewstack/yew/", branch = "master" }
+yew-material = { path = "..", features = ["full"] }
diff --git a/screenshots/index.html b/screenshots/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Yew Material Screenshots</title>
+    <base data-trunk-public-url />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+    <link data-trunk href="styles/styles.scss" rel="scss">
+</head>
+<body>
+
+</body>
+</html>
diff --git a/screenshots/src/main.rs b/screenshots/src/main.rs
@@ -0,0 +1,241 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use yew_material::{
+    MatButton, MatSelect, MatListItem, MatFormfield, select::{SelectedDetail, ListIndex},
+};
+use yew_router::agent::RouteRequest;
+
+#[derive(Switch, Clone, Debug)]
+pub enum AppRoute {
+    #[to = "/button"]
+    Button,
+    #[to = "/checkbox"]
+    Checkbox,
+    #[to = "/radio"]
+    Radio,
+    #[to = "/switch"]
+    Switch,
+    #[to = "/fab"]
+    Fab,
+    #[to = "/icon-button-toggle"]
+    IconButtonToggle,
+    #[to = "/icon-button"]
+    IconButton,
+    #[to = "/icon"]
+    Icon,
+    #[to = "/circular-progress"]
+    CircularProgress,
+    #[to = "/drawer"]
+    Drawer,
+    #[to = "/form-field"]
+    FormField,
+    #[to = "/linear-progress"]
+    LinearProgress,
+    #[to = "/list"]
+    List,
+    #[to = "/slider"]
+    Slider,
+    #[to = "/tabs"]
+    Tabs,
+    #[to = "/snackbar"]
+    Snackbar,
+    #[to = "/textfield"]
+    Textfield,
+    #[to = "/textarea"]
+    TextArea,
+    #[to = "/select"]
+    Select,
+    #[to = "/menu"]
+    Menu,
+    #[to = "/dialog"]
+    Dialog,
+}
+
+impl ToString for AppRoute {
+    fn to_string(&self) -> String {
+        use AppRoute::*;
+
+        match self {
+            Button => "Button",
+            Checkbox => "Checkbox",
+            Radio => "Radio",
+            Switch => "Switch",
+            Fab => "Fab",
+            IconButtonToggle => "Icon button toggle",
+            IconButton => "Icon button",
+            Icon => "Icon",
+            CircularProgress => "Circular progress",
+            Drawer => "Drawer",
+            FormField => "Form field",
+            LinearProgress => "Linear progress",
+            List => "List",
+            Slider => "Slider",
+            Tabs => "Tabs",
+            Snackbar => "Snackbar",
+            Textfield => "Textfield",
+            TextArea => "TextArea",
+            Select => "Select",
+            Menu => "Menu",
+            Dialog => "Dialog",
+        }.to_string()
+    }
+}
+
+const COMPONENTS: [AppRoute; 21] = [
+    AppRoute::Button,
+    AppRoute::Checkbox,
+    AppRoute::Radio,
+    AppRoute::Switch,
+    AppRoute::Fab,
+    AppRoute::IconButtonToggle,
+    AppRoute::IconButton,
+    AppRoute::Icon,
+    AppRoute::CircularProgress,
+    AppRoute::Drawer,
+    AppRoute::FormField,
+    AppRoute::LinearProgress,
+    AppRoute::List,
+    AppRoute::Slider,
+    AppRoute::Tabs,
+    AppRoute::Snackbar,
+    AppRoute::Textfield,
+    AppRoute::TextArea,
+    AppRoute::Select,
+    AppRoute::Menu,
+    AppRoute::Dialog,
+];
+
+type AppRouter = Router<AppRoute>;
+type AppRouterAnchor = RouterAnchor<AppRoute>;
+
+pub struct App {
+    link: ComponentLink<Self>,
+    router: RouteAgentDispatcher<()>,
+}
+
+pub enum Msg {
+    Select(SelectedDetail),
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self { link, router: Default::default() }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Select(details) => {
+                let index = match details.index {
+                    ListIndex::Single(Some(index)) => index,
+                    _ => panic!("Unreachable executed"),
+                };
+                let component = COMPONENTS.get(index).expect("index too high. This should never happen").clone();
+                let route = Route::from(component);
+                self.router.send(RouteRequest::ChangeRoute(route));
+                true
+            }
+        }
+    }
+    fn change(&mut self, _props: Self::Properties) -> bool { false }
+
+    fn view(&self) -> Html {
+        use AppRoute::*;
+        let on_selected = self.link.callback(|details| Msg::Select(details));
+        let list_item = |comp: &AppRoute| {
+            html! {
+                <MatListItem value=format!("{:?}", comp) selected=true> { comp.to_string() } </MatListItem>
+            }
+        };
+
+        html! { <>
+        <main id="screenshots">
+            <MatSelect label="Components" outlined=true onselected=on_selected >
+                { for COMPONENTS.iter().map(list_item) }
+            </MatSelect>
+            <AppRouter render=AppRouter::render(Self::switch) />
+        </main>
+        </> }
+    }
+}
+
+impl App {
+    fn switch(switch: AppRoute) -> Html {
+        match switch {
+            AppRoute::Button => html! {
+                <section id="button" class="grid">
+                    <MatButton label="Button" />
+                    <MatButton label="Button" outlined=true />
+                    <MatButton label="Button" raised=true />
+                    <MatButton label="Button" dense=true />
+                </section>
+            },
+            AppRoute::Checkbox => html! {
+
+            },
+            AppRoute::Radio => html! {
+
+            },
+            AppRoute::Switch => html! {
+
+            },
+            AppRoute::Fab => html! {
+
+            },
+            AppRoute::IconButton => html! {
+
+            },
+            AppRoute::Icon => html! {
+
+            },
+            AppRoute::CircularProgress => html! {
+
+            },
+            AppRoute::Drawer => html! {
+
+            },
+            AppRoute::FormField => html! {
+
+            },
+            AppRoute::LinearProgress => html! {
+
+            },
+            AppRoute::List => html! {
+
+            },
+            AppRoute::IconButtonToggle => html! {
+
+            },
+            AppRoute::Slider => html! {
+
+            },
+            AppRoute::Tabs => html! {
+
+            },
+            AppRoute::Snackbar => html! {
+
+            },
+            AppRoute::Textfield => html! {
+
+            },
+            AppRoute::TextArea => html! {
+
+            },
+            AppRoute::Select => html! {
+
+            },
+            AppRoute::Menu => html! {
+
+            },
+            AppRoute::Dialog => html! {
+
+            },
+        }
+    }
+}
+
+fn main() {
+    yew::start_app::<App>()
+}
diff --git a/screenshots/styles/styles.scss b/screenshots/styles/styles.scss
@@ -0,0 +1,29 @@
+#screenshots {
+    $components: (
+            'mwc-button',
+    );
+
+    width: 360px;
+    height: 200px;
+
+    .grid {
+        width: 100%;
+        height: 100%;
+
+        display: grid;
+        align-content: center;
+        grid-template-columns: 1fr 1fr;
+        gap: 3em;
+
+        margin-top: 1em;
+
+        background-color: rgba(0, 0, 0, 0.07); // maybe 0.06?
+
+
+        @each $name in $components {
+            #{$name} {
+                margin: auto;
+            }
+        }
+    }
+}
diff --git a/src/list/selected_detail.rs b/src/list/selected_detail.rs
@@ -8,14 +8,14 @@ use js_sys::Object;
 /// [MWC Documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2)
 #[derive(Debug)]
 pub struct SelectedDetail {
-    index: ListIndex,
-    diff: Option<IndexDiff>,
+    pub index: ListIndex,
+    pub diff: Option<IndexDiff>,
 }
 
 #[derive(Debug)]
 pub struct IndexDiff {
-    added: Vec<usize>,
-    removed: Vec<usize>,
+    pub added: Vec<usize>,
+    pub removed: Vec<usize>,
 }
 
 impl From<JsValue> for SelectedDetail {

diff --git a/src/select.rs b/src/select.rs
@@ -4,7 +4,7 @@ use web_sys::{Node, CustomEvent};
 use crate::{add_event_listener, add_event_listener_with_one_param, to_option, to_option_string, NativeValidityState, validity_state::ValidityStateJS, ValidityTransform, ValidityState};
 use crate::utils::WeakComponentLink;
 use wasm_bindgen::JsCast;
-use crate::list::{ActionDetail, SelectedDetail};
+pub use crate::list::{ActionDetail, SelectedDetail, ListIndex};
 
 #[wasm_bindgen(module = "/build/mwc-select.js")]
 extern "C" {