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

refactor: card

Browse source
This commit is contained in:
luoxiao 2024-05-13 17:32:45 +08:00
parent d45f7b908e
commit 246c509b29
11 changed files with 155 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demo/src/components/site_header.rs
View file

@ -23,9 +23,7 @@ pub fn SiteHeader() -> impl IntoView {
theme.set(Theme::dark());
}
});
let style = create_memo(move |_| {
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());
let search_options = create_memo(move |_| {
@ -88,6 +86,9 @@ pub fn SiteHeader() -> impl IntoView {
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
position: relative;
border-bottom: 1px solid var(--colorNeutralStroke2);
}
.demo-name {
cursor: pointer;
@ -124,7 +125,7 @@ pub fn SiteHeader() -> impl IntoView {
}
"
</Style>
<LayoutHeader class="demo-header" style>
<LayoutHeader class="demo-header">
<Space
on:click=move |_| {
let navigate = use_navigate();

11
demo/src/pages/components.rs
View file

@ -62,16 +62,7 @@ pub fn ComponentsPage() -> impl IntoView {
<NavDrawer selected_value=select_name>
{gen_menu_data().into_view()}
<NavDrawerFooter slot>
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined
style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
/>
</NavDrawerFooter>
</NavDrawer>
</div>
<Layout content_style="padding: 8px 12px 28px; display: flex;" class="doc-content">

11
demo/src/pages/home.rs
View file

@ -18,10 +18,15 @@ pub fn Home() -> impl IntoView {
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Thaw UI"</h1>
<p>"An easy to use leptos component library"</p>
<Space>
<Button on_click=move |_| {
<Button
appearance=ButtonAppearance::Primary
on_click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
}>"Read the docs"</Button>
navigate("/components/button", Default::default());
}
>
"Read the docs"
</Button>
<Button
appearance=ButtonAppearance::Subtle
on_click=move |_| {

12
demo_markdown/docs/card/mod.md
View file

@ -9,7 +9,17 @@ view! {
"content"
</Card>
<Card title="title">
<CardHeader slot>"header"</CardHeader>
<CardHeader>
"Header"
<CardHeaderDescription slot>
"Description"
</CardHeaderDescription>
<CardHeaderAction slot>
<Button appearance=ButtonAppearance::Transparent>
"..."
</Button>
</CardHeaderAction>
</CardHeader>
"content"
</Card>
<Card title="title">

25
thaw/src/card/card-header.css Normal file
View file

@ -0,0 +1,25 @@
.thaw-card-header {
display: grid;
grid-auto-columns: min-content 1fr min-content;
align-items: center;
--thaw-card-header--gap: 12px;
}
.thaw-card-header__header {
grid-row-start: 1;
grid-column-start: 2;
display: flex;
}
.thaw-card-header__description {
grid-row-start: 2;
grid-column-start: 2;
display: flex;
}
.thaw-card-header__action {
grid-column-start: 3;
grid-row-start: span 2;
display: flex;
margin-left: var(--thaw-card-header--gap);
}

19
thaw/src/card/card.css
View file

@ -1,11 +1,24 @@
.thaw-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--thaw-border-color);
border-radius: 3px;
overflow: hidden;
background-color: var(--thaw-background-color); /* moving here so that applying padding to card element works correctly */
box-sizing: border-box;
max-width: 100%;
width: 720px;
margin: auto;
padding: var(--thaw-card--size);
row-gap: var(--thaw-card--size);
column-gap: var(--thaw-card--size);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
box-shadow: var(--shadow4);
border-radius: var(--borderRadiusMedium);
--thaw-card--size: 12px;
}
.thaw-card__header {
font-weight: 600;
display: flex;

39
thaw/src/card/card_header.rs Normal file
View file

@ -0,0 +1,39 @@
use leptos::*;
use thaw_components::OptionComp;
use thaw_utils::mount_style;
#[component]
pub fn CardHeader(
#[prop(optional)] card_header_description: Option<CardHeaderDescription>,
#[prop(optional)] card_header_action: Option<CardHeaderAction>,
children: Children,
) -> impl IntoView {
mount_style("card-header", include_str!("./card-header.css"));
view! {
<div class="thaw-card-header">
<div class="thaw-card-header__header">
{children()}
</div>
<OptionComp value=card_header_description let:description>
<div class="thaw-card-header__description">
{(description.children)()}
</div>
</OptionComp>
<OptionComp value=card_header_action let:action>
<div class="thaw-card-header__action">
{(action.children)()}
</div>
</OptionComp>
</div>
}
}
#[slot]
pub struct CardHeaderDescription {
children: Children,
}
#[slot]
pub struct CardHeaderAction {
children: Children,
}

58
thaw/src/card/mod.rs
View file

@ -1,12 +1,15 @@
mod card_header;
pub use card_header::*;
use crate::{use_theme, Theme};
use leptos::*;
use thaw_components::*;
use thaw_utils::{class_list, mount_style, OptionalProp};
#[slot]
pub struct CardHeader {
children: Children,
}
// #[slot]
// pub struct CardHeader {
// children: Children,
// }
#[slot]
pub struct CardHeaderExtra {
@ -23,7 +26,7 @@ pub struct CardFooter {
#[component]
pub fn Card(
#[prop(optional, into)] title: OptionalProp<MaybeSignal<String>>,
#[prop(optional)] card_header: Option<CardHeader>,
// #[prop(optional)] card_header: Option<CardHeader>,
#[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
@ -51,31 +54,32 @@ pub fn Card(
<div
class=class_list!["thaw-card", class.map(| c | move || c.get())]
style=move || css_vars.get()
role="group"
>
{if card_header.is_some() || title.is_some() {
view! {
<div class="thaw-card__header">
<div class="thaw-card__header-content">
// {if card_header.is_some() || title.is_some() {
// view! {
// <div class="thaw-card__header">
// <div class="thaw-card__header-content">
{if let Some(header) = card_header {
(header.children)().into_view()
} else if let Some(title) = title.into_option() {
(move || title.get()).into_view()
} else {
unreachable!()
}}
// {if let Some(header) = card_header {
// (header.children)().into_view()
// } else if let Some(title) = title.into_option() {
// (move || title.get()).into_view()
// } else {
// unreachable!()
// }}
</div>
<OptionComp value=card_header_extra let:header_extra>
<div class="thaw-card__header-extra">{(header_extra.children)()}</div>
</OptionComp>
</div>
}
.into()
} else {
None
}}
// </div>
// <OptionComp value=card_header_extra let:header_extra>
// <div class="thaw-card__header-extra">{(header_extra.children)()}</div>
// </OptionComp>
// </div>
// }
// .into()
// } else {
// None
// }}
<div class="thaw-card__content">{children()}</div>
<OptionComp value=card_footer let:footer>

2
thaw/src/modal/mod.rs
View file

@ -113,7 +113,7 @@ pub fn Modal(
style=move || display.get()
>
<Card>
<CardHeader slot>
<CardHeader>
<span class="thaw-model-title">{move || title.get()}</span>
</CardHeader>
<CardHeaderExtra slot>

14
thaw/src/nav/nav-drawer.css
View file

@ -2,7 +2,7 @@
overflow: hidden;
width: 260px;
max-width: 100vw;
height: auto;
height: 100%;
/* max-height: 100vh; */
box-sizing: border-box;
display: flex;
@ -15,12 +15,18 @@
}
.thaw-nav-drawer__body {
padding: 0 var(--spacingVerticalMNudge);
flex: 1 1 0%;
flex: 1;
align-self: stretch;
position: relative;
z-index: 1;
/* overflow: auto; */
overflow: auto;
}
.thaw-nav-drawer__body
> .thaw-scrollbar
> .thaw-scrollbar__container
> .thaw-scrollbar__content {
padding: 0 var(--spacingVerticalMNudge);
}
.thaw-nav-drawer__footer {

6
thaw/src/theme/color.rs
View file

@ -45,6 +45,8 @@ pub struct ColorTheme {
pub color_transparent_background: String,
pub color_transparent_background_hover: String,
pub color_transparent_background_pressed: String,
pub shadow4: String,
}
impl ColorTheme {
@ -93,6 +95,8 @@ impl ColorTheme {
color_transparent_background: "transparent".into(),
color_transparent_background_hover: "transparent".into(),
color_transparent_background_pressed: "transparent".into(),
shadow4: "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)".into(),
}
}
@ -141,6 +145,8 @@ impl ColorTheme {
color_transparent_background: "transparent".into(),
color_transparent_background_hover: "transparent".into(),
color_transparent_background_pressed: "transparent".into(),
shadow4: "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)".into(),
}
}
}