Icons tweaks (#114)

This commit is contained in:
Cecile Tonglet 2021-06-25 15:28:41 +01:00 committed by GitHub
parent 1d87e39e87
commit 2e240fdb07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 38 deletions

View file

@ -12,6 +12,7 @@ mod example;
mod html_select;
mod icon;
mod input_group;
mod logo;
mod menu;
mod panel_stack;
mod progressbar;
@ -27,6 +28,7 @@ mod tree;
pub use app::*;
pub use example::*;
pub use logo::*;
#[macro_export]
macro_rules! log {

37
yewprint-doc/src/logo.rs Normal file
View file

@ -0,0 +1,37 @@
use yew::prelude::*;
pub struct Logo {
props: LogoProps,
}
#[derive(Clone, PartialEq, Properties)]
pub struct LogoProps {
#[prop_or_default]
pub class: Classes,
}
impl Component for Logo {
type Message = ();
type Properties = LogoProps;
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
Self { props }
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
todo!()
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if props != self.props {
self.props = props;
true
} else {
false
}
}
fn view(&self) -> Html {
crate::include_raw_html!("logo.svg", &self.props.class.to_string())
}
}

View file

@ -1,4 +1,4 @@
use crate::app::DocMenu;
use crate::{DocMenu, Logo};
use std::borrow::Cow;
use yew::prelude::*;
use yewprint::{Icon, IconName, Menu, MenuDivider, MenuItem};
@ -33,7 +33,9 @@ impl Component for Example {
<Menu>
<MenuItem
text={html!("Custom SVG icon")}
// add the yewprint icon
icon_html=html! {
<Logo class=classes!("custom-icon") />
}
/>
<MenuDivider />
<MenuItem

View file

@ -3,7 +3,7 @@ mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::{Switch, H1, H5};
use yewprint::H1;
pub struct PanelStackDoc {
callback: Callback<ExampleProps>,
@ -46,12 +46,7 @@ impl Component for PanelStackDoc {
<div>
<ExampleContainer
source=source
props=Some(html! {
<PanelStackProps
callback={self.callback.clone()}
props=example_props.clone()
/>
})
props=None
>
<Example with example_props />
</ExampleContainer>
@ -60,30 +55,3 @@ impl Component for PanelStackDoc {
}
}
}
crate::build_example_prop_component! {
PanelStackProps for ExampleProps =>
fn view(&self) -> Html {
html! {
<div>
<H5>{"Props"}</H5>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
animate: !props.animate,
..props
})
checked=self.props.animate
label=html!("Animate indicator")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
vertical: !props.vertical,
..props
})
checked=self.props.vertical
label=html!("Use vertical tabs")
/>
</div>
}
}
}

View file

@ -113,6 +113,12 @@
padding: 10px;
row-gap: 10px;
}
.custom-icon > svg {
width: 16px;
height: 16px;
padding-top: 2px;
}
</style>
</head>

View file

@ -81,7 +81,9 @@ pub struct MenuItemProps {
#[prop_or_default]
pub intent: Option<Intent>,
#[prop_or_default]
pub icon: IconName,
pub icon: Option<IconName>,
#[prop_or_default]
pub icon_html: Option<Html>,
#[prop_or_default]
pub onclick: Callback<MouseEvent>,
// TODO: pub children: html::Children,
@ -124,7 +126,19 @@ impl Component for MenuItem {
tabIndex={(!self.props.disabled).then(|| "0")}
onclick={self.props.onclick.clone()}
>
<Icon icon={self.props.icon} />
{
if let Some(icon_name) = self.props.icon {
html! {
<Icon icon={icon_name} />
}
} else if let Some(html) = self.props.icon_html.clone() {
html
} else {
html! {
<Icon icon=IconName::Blank />
}
}
}
<div class=classes!("bp3-text", "bp3-fill", self.props.text_class.clone())>
{self.props.text.clone()}
</div>