Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

demo: adaptive mobile #68

Merged
merged 2 commits into from
Jan 4, 2024
+209 −63
Merged

demo: adaptive mobile #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e72c7c
demo: adaptive mobile
luoxiaozero Jan 4, 2024
8715005
fix: demo callback
luoxiaozero Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion demo/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ edition = "2021"
leptos = { version = "0.5.4" }
leptos_meta = { version = "0.5.4" }
leptos_router = { version = "0.5.4" }
leptos_devtools = "0.0.1"
leptos_devtools = { version = "0.0.1", optional = true}
thaw = { path = "../thaw", default-features = false }
icondata = { version = "0.1.0", features = [
"AiCloseOutlined",
"AiCheckOutlined",
"AiGithubOutlined",
"AiUserOutlined",
"AiSearchOutlined",
"AiUnorderedListOutlined"
] }
demo_markdown = { path = "../demo_markdown" }

Expand Down
205 changes: 154 additions & 51 deletions demo/src/components/site_header.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
use leptos::*;
use leptos_router::use_navigate;
use leptos_meta::Style;
use leptos_router::{use_location, use_navigate};
use thaw::*;

#[component]
Expand All @@ -8,23 +9,21 @@ pub fn SiteHeader() -> impl IntoView {
let theme_name = create_memo(move |_| {
theme.with(|theme| {
if theme.name == *"light" {
"Dark"
"Dark".to_string()
} else {
"Light"
"Light".to_string()
}
})
});
let on_theme = move |_| {
let change_theme = Callback::new(move |_| {
if theme_name.get_untracked() == "Light" {
theme.set(Theme::light())
theme.set(Theme::light());
} else {
theme.set(Theme::dark())
theme.set(Theme::dark());
}
};
});
let style = create_memo(move |_| {
theme.with(|theme| {
format!("height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color)
})
theme.with(|theme| format!("border-bottom: 1px solid {}", theme.common.border_color))
});
let search_value = create_rw_signal(String::new());
let search_all_options = store_value(gen_search_all_options());
Expand Down Expand Up @@ -77,18 +76,58 @@ pub fn SiteHeader() -> impl IntoView {
}
});
on_cleanup(move || handle.remove());

let menu_value = use_menu_value(change_theme);
view! {
<LayoutHeader style>
<Space>
<img src="/thaw/logo.svg" style="width: 36px"/>
<div
style="cursor: pointer; display: flex; align-items: center; height: 100%; font-weight: 600; font-size: 20px"
on:click=move |_| {
let navigate = use_navigate();
navigate("/", Default::default());
<Style id="demo-header">
"
.demo-header {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.demo-name {
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
font-weight: 600;
font-size: 20px;
}
.demo-header__menu-mobile {
display: none;
}
.demo-header__menu-popover-mobile {
padding: 0;
}
@media screen and (max-width: 600px) {
.demo-header {
padding: 0 8px;
}
>

.demo-name {
display: none;
}
}
@media screen and (max-width: 1200px) {
.demo-header__right-btn {
display: none;
}
.demo-header__menu-mobile {
display: block;
}
}
"
</Style>
<LayoutHeader class="demo-header" style>
<Space
on:click=move |_| {
let navigate = use_navigate();
navigate("/", Default::default());
}>
<img src="/thaw/logo.svg" style="width: 36px"/>
<div class="demo-name">
"Thaw UI"
</div>
</Space>
Expand All @@ -105,39 +144,62 @@ pub fn SiteHeader() -> impl IntoView {
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiSearchOutlined) style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
</AutoCompletePrefix>
</AutoComplete>
<Button
variant=ButtonVariant::Text
on_click=move |_| {
let navigate = use_navigate();
navigate("/guide/installation", Default::default());
}
>
<Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile">
<PopoverTrigger slot class="demo-header__menu-mobile">
<Button
variant=ButtonVariant::Text
icon=icondata::AiIcon::AiUnorderedListOutlined
style="font-size: 22px; padding: 0px 6px;"
/>
</PopoverTrigger>
<div style="height: 70vh; overflow: auto;">
<Menu value=menu_value>
<MenuItem key=theme_name label=theme_name />
<MenuItem key="github" label="Github" />
{
use crate::pages::{gen_guide_menu_data, gen_menu_data};
vec![
gen_guide_menu_data().into_view(),
gen_menu_data().into_view(),
]
}
</Menu>
</div>
</Popover>
<Space class="demo-header__right-btn">
<Button
variant=ButtonVariant::Text
on_click=move |_| {
let navigate = use_navigate();
navigate("/guide/installation", Default::default());
}
>

"Guide"
</Button>
<Button
variant=ButtonVariant::Text
on_click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
}
>

"Components"
</Button>
<Button variant=ButtonVariant::Text on_click=on_theme>
{move || theme_name.get()}
</Button>
<Button
variant=ButtonVariant::Text
icon=icondata::AiIcon::AiGithubOutlined
round=true
style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
/>
"Guide"
</Button>
<Button
variant=ButtonVariant::Text
on_click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
}
>

"Components"
</Button>
<Button variant=ButtonVariant::Text on_click=Callback::new(move |_| change_theme.call(()))>
{move || theme_name.get()}
</Button>
<Button
variant=ButtonVariant::Text
icon=icondata::AiIcon::AiGithubOutlined
round=true
style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
/>
</Space>
</Space>

</LayoutHeader>
Expand All @@ -163,3 +225,44 @@ fn gen_search_all_options() -> Vec<AutoCompleteOption> {
}));
options
}

fn use_menu_value(change_theme: Callback<()>) -> RwSignal<String> {
use crate::pages::gen_guide_menu_data;
let guide = store_value(gen_guide_menu_data());
let navigate = use_navigate();
let loaction = use_location();

let menu_value = create_rw_signal({
let mut pathname = loaction.pathname.get_untracked();
if pathname.starts_with("/thaw/components/") {
pathname.drain(17..).collect()
} else if pathname.starts_with("/thaw/guide/") {
pathname.drain(12..).collect()
} else {
String::new()
}
});

_ = menu_value.watch(move |name| {
if name == "Dark" || name == "Light" {
change_theme.call(());
return;
} else if name == "github" {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
return;
}
let pathname = loaction.pathname.get_untracked();
if guide.with_value(|menu| {
menu.iter()
.any(|group| group.children.iter().any(|item| &item.value == name))
}) {
if !pathname.eq(&format!("/thaw/guide/{name}")) {
navigate(&format!("/guide/{name}"), Default::default());
}
} else if !pathname.eq(&format!("/thaw/components/{name}")) {
navigate(&format!("/components/{name}"), Default::default());
}
});

menu_value
}
22 changes: 21 additions & 1 deletion demo/src/pages/components.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
use crate::components::SiteHeader;
use leptos::*;
use leptos_meta::Style;
use leptos_router::{use_location, use_navigate, Outlet};
use thaw::*;

Expand All @@ -26,10 +27,29 @@ pub fn ComponentsPage() -> impl IntoView {
}
});
view! {
<Style>
"
.demo-components__component {
width: 896px;
margin: 0 auto;
}
.demo-md-table-box {
overflow: auto;
}
@media screen and (max-width: 1200px) {
.demo-components__sider {
display: none;
}
.demo-components__component {
width: 100%;
}
}
"
</Style>
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
<LayoutSider>
<LayoutSider class="demo-components__sider">
<Menu value=select_name>

{gen_menu_data().into_view()}
Expand Down
22 changes: 21 additions & 1 deletion demo/src/pages/guide.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
use crate::components::SiteHeader;
use leptos::*;
use leptos_meta::Style;
use leptos_router::{use_location, use_navigate, Outlet};
use thaw::*;

Expand All @@ -25,10 +26,29 @@ pub fn GuidePage() -> impl IntoView {
selected
});
view! {
<Style>
"
.demo-components__component {
width: 896px;
margin: 0 auto;
}
.demo-md-table-box {
overflow: auto;
}
@media screen and (max-width: 1200px) {
.demo-guide__sider {
display: none;
}
.demo-components__component {
width: 100%;
}
}
"
</Style>
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
<LayoutSider>
<LayoutSider class="demo-guide__sider">
<Menu value=selected>

{gen_guide_menu_data().into_view()}
Expand Down
2 changes: 1 addition & 1 deletion demo_markdown/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
#(#demos)*

view! {
<div style="width: 896px; margin: 0 auto;">
<div class="demo-components__component">
#body
</div>
}
Expand Down
18 changes: 10 additions & 8 deletions demo_markdown/src/markdown/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,14 +83,16 @@ fn iter_nodes<'a>(node: &'a AstNode<'a>, demos: &mut Vec<String>) -> TokenStream
let header_children: Vec<TokenStream> = children.drain(0..header_index).collect();

quote!(
<Table single_column=true>
<thead>
#(#header_children)*
</thead>
<tbody>
#(#children)*
</tbody>
</Table>
<div class="demo-md-table-box">
<Table single_column=true>
<thead>
#(#header_children)*
</thead>
<tbody>
#(#children)*
</tbody>
</Table>
</div>
)
}
NodeValue::TableRow(_) => {
Expand Down
Loading