Mirrors/yewprint
2
0
Fork 0
mirror of https://github.com/yewprint/yewprint synced 2024-11-22 03:23:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Move menu to the left (#8)

Browse source
This commit is contained in:
Cecile Tonglet 2020-09-23 15:59:07 +02:00 committed by GitHub
parent d37ffa06c7
commit 768cb68384
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 125 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Cargo.toml
View file

@ -16,7 +16,7 @@ is-it-maintained-open-issues = { repository = "cecton/yewprint" }
[features]
default = []
dev = []
doc = []
[dependencies]
wasm-bindgen = "^0.2"

2
build.sh
View file

@ -1,7 +1,7 @@
#!/bin/bash
if [ ${#@} == 0 ]; then
options=(--release -- --features dev)
options=(--release -- --features doc)
else
options=()
fi

2
dev.sh
View file

@ -1,3 +1,3 @@
#!/bin/sh
exec cargo watch -s './build.sh --dev -- --features dev && simple-http-server -i --nocache --cors public/' -w src
exec cargo watch -s './build.sh --dev -- --features doc && simple-http-server -i --nocache --cors public/' -w src -w static

89
src/app.rs
View file

@ -6,11 +6,6 @@ use crate::menu::*;
use crate::tree::doc::*;
use yew::prelude::*;
const DARK_BG_COLOR: &str = "#30404d";
const LIGHT_BG_COLOR: &str = "#f5f8fa";
const DARK_FG_COLOR: &str = "#f5f8fa";
const LIGHT_FG_COLOR: &str = "#182026";
pub struct App {
link: ComponentLink<Self>,
doc_menu: DocMenu,
@ -49,42 +44,60 @@ impl Component for App {
}
fn view(&self) -> Html {
let (fg_color, bg_color) = if self.dark_theme {
(DARK_FG_COLOR, DARK_BG_COLOR)
} else {
(LIGHT_FG_COLOR, LIGHT_BG_COLOR)
};
let style = format!(
"min-height: 100vh; padding: 10px; background-color: {}; color: {}",
bg_color, fg_color
);
let class = if self.dark_theme { "bp3-dark" } else { "" };
let mut class = Classes::from("docs-app");
if self.dark_theme {
class.push("bp3-dark");
}
html! {
<div class={class} style={style}>
<div>
<Menu>
<MenuItem text={html!("Button")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button)) />
<MenuItem text={html!("Collapse")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Collapse)) />
<MenuItem text={html!("Icon")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon)) />
<MenuItem text={html!("Menu")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Menu)) />
<MenuItem text={html!("Switch")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Switch)) />
<MenuItem text={html!("Tree")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Tree)) />
</Menu>
<div class=class>
<div class="docs-nav-wrapper">
<div class="docs-nav">
<Menu>
<MenuItem
text={html!("Button")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
/>
<MenuItem
text={html!("Collapse")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Collapse))
/>
<MenuItem
text={html!("Icon")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon))
/>
<MenuItem
text={html!("Menu")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Menu))
/>
<MenuItem
text={html!("Switch")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Switch))
/>
<MenuItem
text={html!("Tree")}
onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Tree))
/>
</Menu>
</div>
</div>
{
match self.doc_menu {
DocMenu::Button => html! (<ButtonDoc />),
DocMenu::Switch => html! (<SwitchDoc
dark_theme=self.dark_theme
onclick=self.link.callback(|_| Msg::ToggleLight)
/>),
DocMenu::Collapse => html!(<CollapseDoc />),
DocMenu::Tree => html!(<TreeDoc />),
DocMenu::Icon => html!(<IconDoc />),
DocMenu::Menu => html!(),
}
}
<main class="docs-content-wrapper" role="main">
<div class="docs-page">
{
match self.doc_menu {
DocMenu::Button => html! (<ButtonDoc />),
DocMenu::Switch => html! (<SwitchDoc
dark_theme=self.dark_theme
onclick=self.link.callback(|_| Msg::ToggleLight)
/>),
DocMenu::Collapse => html!(<CollapseDoc />),
DocMenu::Tree => html!(<TreeDoc />),
DocMenu::Icon => html!(<IconDoc />),
DocMenu::Menu => html!(),
}
}
</div>
</main>
</div>
}
}

3
src/buttons.rs
View file

@ -43,7 +43,7 @@ impl Component for Button {
}
}
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
pub mod doc {
use super::*;
@ -78,6 +78,7 @@ pub mod doc {
fn view(&self) -> Html {
html! {
<div>
<h1>{"Button"}</h1>
<p> {"Counter: "} { self.counter }</p>
<div>
<Button onclick=self.link.callback(|_| Msg::AddOne)>{ "Add 1" }</Button>

5
src/collapse.rs
View file

@ -25,7 +25,7 @@ pub struct Props {
pub children: html::Children,
#[prop_or_default]
pub keep_children_mounted: bool,
#[prop_or_else(|| Duration::from_millis(200))]
#[prop_or(Duration::from_millis(200))]
pub transition_duration: Duration,
}
@ -197,7 +197,7 @@ impl Component for Collapse {
}
}
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
pub mod doc {
use super::*;
use crate::buttons::Button;
@ -236,6 +236,7 @@ pub mod doc {
fn view(&self) -> Html {
html! {
<div>
<h1>{"Collapse"}</h1>
<Button onclick=self.link.callback(|_| Msg::ToggleCollapse)>
{"Toggle collapse"}
</Button>

3
src/forms/controls.rs
View file

@ -53,7 +53,7 @@ impl Component for Switch {
}
}
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
pub mod doc {
use super::*;
@ -86,6 +86,7 @@ pub mod doc {
fn view(&self) -> Html {
html! {
<div>
<h1>{"Switch"}</h1>
<Switch
onclick=self.props.onclick.clone()
checked=self.props.dark_theme

3
src/icon.rs
View file

@ -94,7 +94,7 @@ impl Component for Icon {
}
}
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
pub mod doc {
use super::*;
@ -116,6 +116,7 @@ pub mod doc {
fn view(&self) -> Html {
html! {
<div>
<h1>{"Icon"}</h1>
<Icon icon=IconName::Print />
</div>
}

6
src/lib.rs
View file

@ -1,6 +1,6 @@
#![recursion_limit = "512"]
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
mod app;
pub mod buttons;
pub mod collapse;
@ -11,7 +11,7 @@ pub mod tree;
use yew::virtual_dom::Classes;
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
#[macro_export]
macro_rules! log {
($s:expr $(,$args:expr)*) => {{
@ -19,7 +19,7 @@ macro_rules! log {
}};
}
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
#[wasm_bindgen::prelude::wasm_bindgen(start)]
pub fn run_app() -> Result<(), wasm_bindgen::JsValue> {
yew::start_app::<app::App>();

2
src/menu.rs
View file

@ -109,7 +109,7 @@ impl Component for MenuItem {
if self.props.active {
anchor_class.push("bp3-active");
}
if let Some(intent) = self.props.intent.clone() {
if let Some(intent) = self.props.intent {
anchor_class = anchor_class.extend(intent);
} else if self.props.active {
anchor_class = anchor_class.extend(Intent::Primary);

3
src/tree.rs
View file

@ -363,7 +363,7 @@ impl Component for TreeNode {
}
}
#[cfg(feature = "dev")]
#[cfg(feature = "doc")]
pub mod doc {
use super::*;
@ -481,6 +481,7 @@ pub mod doc {
fn view(&self) -> Html {
html! {
<div>
<h1>{"Tree"}</h1>
<Tree<i32>
tree=self.tree.clone()
on_collapse=Some(self.callback_expand_node.clone())

56
static/index.html
View file

@ -16,6 +16,62 @@
.bp3-tree {
width: 350px;
}
.docs-app {
display: flex;
flex-direction: row;
margin: auto;
width: 100vw;
min-height: 100vh;
background-color: #f5f8fa;
}
.docs-nav {
width: 270px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
z-index: 10;
background-color: #fff;
}
.bp3-dark .docs-nav {
background-color: #394b59;
}
.docs-nav-wrapper {
flex-basis: 270px;
width: 270px;
flex-grow: 0;
flex-shrink: 0;
}
.docs-nav .bp3-menu {
background: inherit;
}
.docs-content-wrapper {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 830px;
}
.docs-page {
padding: 0 5px 40px 40px;
max-width: 830px;
}
.docs-app.bp3-dark {
background-color: #30404d;
}
.docs-page h1 {
line-height: 40px;
font-size: 36px;
}
</style>
</head>
<body></body>