adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: menu

Browse source
This commit is contained in:
luoxiao 2023-09-21 21:57:34 +08:00
parent 31ed109806
commit 1f27e44014
9 changed files with 88 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -1,3 +1,5 @@
{
"rust-analyzer.check.targets": ["wasm32-unknown-unknown"],
"rust-analyzer.linkedProjects": [
"gh-pages/Cargo.toml"
]
}

2
Cargo.toml
View file

@ -14,7 +14,7 @@ license = "MIT"
[dependencies]
leptos = { version = "0.5.0-rc2", features = ["csr"] }
stylers = { git = "https://github.com/abishekatp/stylers", rev = "4bfd2df" }
stylers = "0.3.2"
web-sys = { version = "0.3.62", features = ["DomRect"] }
leptos_dom = { version = "0.5.0-rc2" }
wasm-bindgen = "0.2.85"

43
gh-pages/src/pages/menu/mod.rs
View file

@ -1,3 +1,4 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -6,26 +7,26 @@ use melt_ui::*;
pub fn MenuPage() -> impl IntoView {
let selected = create_rw_signal(String::from("o"));
view! {
<Card>
{ move || selected.get() }
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
<CardFooter slot>
<Code>
<pre>
{
indoc!(r#"
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
"#)
}
</pre>
</Code>
</CardFooter>
</Card>
<div style="width: 896px; margin: 0 auto;">
<h1>"Menu"</h1>
<Demo>
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
<DemoCode slot>
{
indoc!(r#"
let selected = create_rw_signal(String::from("o"));
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
"#)
}
</DemoCode>
</Demo>
</div>
}
}

18
gh-pages/src/pages/slider/mod.rs
View file

@ -1,3 +1,5 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -6,6 +8,20 @@ pub fn SliderPage() -> impl IntoView {
let value = create_rw_signal(0.0);
view! {
<Slider value/>
<div style="width: 896px; margin: 0 auto;">
<h1>"Slider"</h1>
<Demo>
<Slider value/>
<DemoCode slot>
{
indoc!(r#"
let value = create_rw_signal(0.0);
<Slider value/>
"#)
}
</DemoCode>
</Demo>
</div>
}
}

18
src/menu/menu-item.css
View file

@ -1,16 +1,20 @@
.melt-menu-item__content {
margin: 6px 8px;
padding: 12px 10px;
padding-left: 14px;
margin: 0.3rem 0.4rem;
padding: 0.6rem 0.8rem 0.6rem 1rem;
color: var(--font-color);
cursor: pointer;
border-radius: var(--border-radius);
border-radius: 0.25rem;
transition-property: color, background-color;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.melt-menu-item__content:hover {
color: var(--font-color);
.melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
background-color: var(--bg-color-hover);
}
.melt-menu-item__content--selected {
color: var(--font-color);
color: var(--font-color-active);
background-color: var(--bg-color);
}

6
src/menu/menu_item.rs
View file

@ -19,10 +19,10 @@ pub fn MenuItem(
let mut css_vars = String::new();
let theme = theme.get();
let font_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--font-color: {font_color};"));
css_vars.push_str(&format!("--font-color-active: {font_color};"));
css_vars.push_str(&format!("--font-color: {};", theme.menu.color));
css_vars.push_str(&format!("--bg-color: {font_color}1a;"));
let border_radius = theme.common.border_radius.clone();
css_vars.push_str(&format!("--border-radius: {border_radius};"));
css_vars.push_str(&format!("--bg-color-hover: {};", theme.menu.item_color_hover));
css_vars
});
view! { class=class_name,

2
src/menu/mod.rs
View file

@ -1,7 +1,9 @@
mod menu_item;
mod theme;
use leptos::*;
pub use menu_item::*;
pub use theme::MenuTheme;
#[component]
pub fn Menu(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {

23
src/menu/theme.rs Normal file
View file

@ -0,0 +1,23 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct MenuTheme {
pub color: String,
pub item_color_hover: String,
}
impl ThemeMethod for MenuTheme {
fn light() -> Self {
Self {
color: "#333639".into(),
item_color_hover: "#f3f5f6".into(),
}
}
fn dark() -> Self {
Self {
color: "#333639".into(),
item_color_hover: "#f3f5f6".into(),
}
}
}

7
src/theme/mod.rs
View file

@ -2,7 +2,7 @@ mod common;
use leptos::*;
use self::common::CommonTheme;
use crate::{ButtonTheme, InputTheme};
use crate::{ButtonTheme, InputTheme, MenuTheme};
pub trait ThemeMethod {
fn light() -> Self;
@ -14,6 +14,7 @@ pub struct Theme {
pub common: CommonTheme,
pub button: ButtonTheme,
pub input: InputTheme,
pub menu: MenuTheme,
}
impl Theme {
@ -22,6 +23,7 @@ impl Theme {
common: CommonTheme::light(),
button: ButtonTheme::light(),
input: InputTheme::light(),
menu: MenuTheme::light(),
}
}
pub fn dark() -> Self {
@ -29,6 +31,7 @@ impl Theme {
common: CommonTheme::dark(),
button: ButtonTheme::dark(),
input: InputTheme::dark(),
menu: MenuTheme::dark(),
}
}
}
@ -39,6 +42,7 @@ impl ThemeMethod for Theme {
common: CommonTheme::light(),
button: ButtonTheme::light(),
input: InputTheme::dark(),
menu: MenuTheme::dark(),
}
}
fn dark() -> Self {
@ -46,6 +50,7 @@ impl ThemeMethod for Theme {
common: CommonTheme::dark(),
button: ButtonTheme::dark(),
input: InputTheme::dark(),
menu: MenuTheme::dark(),
}
}
}