mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
refactor: save popover
This commit is contained in:
luoxiao
parent
902da02e30
commit
c41d177782
6 changed files with 77 additions and 136 deletions
|
|
@ -67,6 +67,10 @@ impl ConfigInjection {
|
|||
pub fn id(&self) -> &String {
|
||||
&self.id
|
||||
}
|
||||
|
||||
pub fn use_() -> ConfigInjection {
|
||||
expect_context()
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
mod theme;
|
||||
|
||||
pub use theme::PopoverTheme;
|
||||
|
||||
use crate::{use_theme, Theme};
|
||||
use crate::ConfigInjection;
|
||||
use leptos::{leptos_dom::helpers::TimeoutHandle, *};
|
||||
use std::time::Duration;
|
||||
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
|
||||
|
|
@ -25,27 +21,8 @@ pub fn Popover(
|
|||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("popover", include_str!("./popover.css"));
|
||||
let theme = use_theme(Theme::light);
|
||||
let css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
theme.with(|theme| {
|
||||
let background_color = if tooltip {
|
||||
&theme.popover.tooltip_background_color
|
||||
} else {
|
||||
&theme.popover.background_color
|
||||
};
|
||||
css_vars.push_str(&format!("--thaw-background-color: {};", background_color));
|
||||
let font_color = if tooltip {
|
||||
"#fff"
|
||||
} else {
|
||||
// TODO
|
||||
// &theme.common.font_color
|
||||
""
|
||||
};
|
||||
css_vars.push_str(&format!("--thaw-font-color: {};", font_color));
|
||||
});
|
||||
css_vars
|
||||
});
|
||||
let config_provider = ConfigInjection::use_();
|
||||
|
||||
let popover_ref = create_node_ref::<html::Div>();
|
||||
let target_ref = create_node_ref::<html::Div>();
|
||||
let is_show_popover = create_rw_signal(false);
|
||||
|
|
@ -140,18 +117,20 @@ pub fn Popover(
|
|||
let:display
|
||||
>
|
||||
<div
|
||||
class=if tooltip { "thaw-popover thaw-popover--tooltip" } else { "thaw-popover" }
|
||||
style=move || {
|
||||
display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
|
||||
class=if tooltip {
|
||||
"thaw-config-provider thaw-popover-surface thaw-popover--tooltip" }
|
||||
else {
|
||||
"thaw-config-provider thaw-popover-surface"
|
||||
}
|
||||
data-thaw-id=config_provider.id().clone()
|
||||
style=move || display.get()
|
||||
|
||||
ref=popover_ref
|
||||
on:mouseenter=on_mouse_enter
|
||||
on:mouseleave=on_mouse_leave
|
||||
>
|
||||
<div class=class.map(|c| move || c.get())>{children()}</div>
|
||||
<div class="thaw-popover__angle-container">
|
||||
<div class="thaw-popover__angle"></div>
|
||||
<div class="thaw-popover-surface__angle">
|
||||
</div>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,56 @@
|
|||
.thaw-popover {
|
||||
div.thaw-popover-surface {
|
||||
position: relative;
|
||||
padding: 8px 14px;
|
||||
background-color: var(--thaw-background-color);
|
||||
color: var(--thaw-font-color);
|
||||
border-radius: 3px;
|
||||
transform-origin: inherit;
|
||||
|
||||
padding: 16px;
|
||||
border-radius: var(--borderRadiusMedium);
|
||||
border: 1px solid var(--colorTransparentStroke);
|
||||
box-shadow: var(--shadow16);
|
||||
line-height: var(--lineHeightBase300);
|
||||
font-weight: var(--fontWeightRegular);
|
||||
font-size: var(--fontSizeBase300);
|
||||
font-family: var(--fontFamilyBase);
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.thaw-popover-surface__angle {
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.thaw-popover-trigger {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.thaw-popover__angle-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.thaw-popover__angle {
|
||||
position: absolute;
|
||||
background: var(--thaw-background-color);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
[data-thaw-placement="top-start"] > .thaw-popover,
|
||||
[data-thaw-placement="top-end"] > .thaw-popover,
|
||||
[data-thaw-placement="top"] > .thaw-popover {
|
||||
[data-thaw-placement="top-start"] > .thaw-popover-surface,
|
||||
[data-thaw-placement="top-end"] > .thaw-popover-surface,
|
||||
[data-thaw-placement="top"] > .thaw-popover-surface {
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-thaw-placement="top-start"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="top-end"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="top"] .thaw-popover__angle-container {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[data-thaw-placement="top-start"] .thaw-popover__angle,
|
||||
[data-thaw-placement="top-end"] .thaw-popover__angle,
|
||||
[data-thaw-placement="top"] .thaw-popover__angle {
|
||||
left: 50%;
|
||||
[data-thaw-placement="top-start"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="top-end"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="top"] .thaw-popover-surface__angle {
|
||||
transform: rotate(45deg) translateX(-7px);
|
||||
}
|
||||
|
||||
[data-thaw-placement="bottom-start"] > .thaw-popover,
|
||||
[data-thaw-placement="bottom-end"] > .thaw-popover,
|
||||
[data-thaw-placement="bottom"] > .thaw-popover {
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-thaw-placement="bottom-start"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="bottom-end"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="bottom"] .thaw-popover__angle-container {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[data-thaw-placement="bottom-start"] .thaw-popover__angle,
|
||||
[data-thaw-placement="bottom-end"] .thaw-popover__angle,
|
||||
[data-thaw-placement="bottom"] .thaw-popover__angle {
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
[data-thaw-placement="bottom-start"] > .thaw-popover-surface,
|
||||
[data-thaw-placement="bottom-end"] > .thaw-popover-surface,
|
||||
[data-thaw-placement="bottom"] > .thaw-popover-surface {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
[data-thaw-placement="bottom-start"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="bottom-end"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="bottom"] .thaw-popover-surface__angle {
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
[data-thaw-placement="left-start"] > .thaw-popover,
|
||||
|
|
@ -80,9 +61,9 @@
|
|||
6px 0 16px 0 rgba(0, 0, 0, 0.08), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-thaw-placement="left-start"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="left-end"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="left"] .thaw-popover__angle-container {
|
||||
[data-thaw-placement="left-start"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="left-end"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="left"] .thaw-popover-surface__angle {
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
right: -10px;
|
||||
|
|
@ -90,9 +71,9 @@
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-thaw-placement="left-start"] .thaw-popover__angle,
|
||||
[data-thaw-placement="left-end"] .thaw-popover__angle,
|
||||
[data-thaw-placement="left"] .thaw-popover__angle {
|
||||
[data-thaw-placement="left-start"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="left-end"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="left"] .thaw-popover-surface__angle::before {
|
||||
top: 50%;
|
||||
transform: rotate(45deg) translateX(-7px);
|
||||
}
|
||||
|
|
@ -105,9 +86,9 @@
|
|||
-6px 0 16px 0 rgba(0, 0, 0, 0.08), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-thaw-placement="right-start"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="right-end"] .thaw-popover__angle-container,
|
||||
[data-thaw-placement="right"] .thaw-popover__angle-container {
|
||||
[data-thaw-placement="right-start"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="right-end"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="right"] .thaw-popover-surface__angle {
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
left: -10px;
|
||||
|
|
@ -115,28 +96,28 @@
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-thaw-placement="right-start"] .thaw-popover__angle,
|
||||
[data-thaw-placement="right-end"] .thaw-popover__angle,
|
||||
[data-thaw-placement="right"] .thaw-popover__angle {
|
||||
[data-thaw-placement="right-start"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="right-end"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="right"] .thaw-popover-surface__angle::before {
|
||||
top: 50%;
|
||||
transform: rotate(45deg) translateY(-7px);
|
||||
}
|
||||
|
||||
[data-thaw-placement="bottom-start"] .thaw-popover__angle,
|
||||
[data-thaw-placement="top-start"] .thaw-popover__angle {
|
||||
[data-thaw-placement="bottom-start"] .thaw-popover-surface__angle,
|
||||
[data-thaw-placement="top-start"] .thaw-popover-surface__angle {
|
||||
left: 16px;
|
||||
}
|
||||
[data-thaw-placement="bottom-end"] .thaw-popover__angle,
|
||||
[data-thaw-placement="top-end"] .thaw-popover__angle {
|
||||
[data-thaw-placement="bottom-end"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="top-end"] .thaw-popover-surface__angle::before {
|
||||
left: initial;
|
||||
right: 7px;
|
||||
}
|
||||
[data-thaw-placement="right-start"] .thaw-popover__angle,
|
||||
[data-thaw-placement="left-start"] .thaw-popover__angle {
|
||||
[data-thaw-placement="right-start"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="left-start"] .thaw-popover-surface__angle::before {
|
||||
top: 16px;
|
||||
}
|
||||
[data-thaw-placement="right-end"] .thaw-popover__angle,
|
||||
[data-thaw-placement="left-end"] .thaw-popover__angle {
|
||||
[data-thaw-placement="right-end"] .thaw-popover-surface__angle::before,
|
||||
[data-thaw-placement="left-end"] .thaw-popover-surface__angle::before {
|
||||
top: initial;
|
||||
bottom: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
use crate::theme::ThemeMethod;
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct PopoverTheme {
|
||||
pub background_color: String,
|
||||
pub tooltip_background_color: String,
|
||||
}
|
||||
|
||||
impl ThemeMethod for PopoverTheme {
|
||||
fn light() -> Self {
|
||||
Self {
|
||||
background_color: "#fff".into(),
|
||||
tooltip_background_color: "#262626".into(),
|
||||
}
|
||||
}
|
||||
|
||||
fn dark() -> Self {
|
||||
Self {
|
||||
background_color: "#48484e".into(),
|
||||
tooltip_background_color: "#48484e".into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,6 +94,7 @@ pub struct ColorTheme {
|
|||
pub color_transparent_stroke: String,
|
||||
|
||||
pub shadow4: String,
|
||||
pub shadow16: String,
|
||||
}
|
||||
|
||||
impl ColorTheme {
|
||||
|
|
@ -192,6 +193,7 @@ impl ColorTheme {
|
|||
color_transparent_stroke: "transparent".into(),
|
||||
|
||||
shadow4: "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)".into(),
|
||||
shadow16: "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)".into(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -290,6 +292,7 @@ impl ColorTheme {
|
|||
color_transparent_stroke: "transparent".into(),
|
||||
|
||||
shadow4: "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)".into(),
|
||||
shadow16: "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)".into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ use self::common::CommonTheme;
|
|||
use crate::{
|
||||
mobile::{NavBarTheme, TabbarTheme},
|
||||
AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, CalendarTheme, ColorPickerTheme,
|
||||
DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme,
|
||||
DatePickerTheme, InputTheme, MessageTheme, ProgressTheme, ScrollbarTheme,
|
||||
SelectTheme, TimePickerTheme, UploadTheme,
|
||||
};
|
||||
pub use color::ColorTheme;
|
||||
|
|
@ -34,7 +34,6 @@ pub struct Theme {
|
|||
pub calendar: CalendarTheme,
|
||||
pub time_picker: TimePickerTheme,
|
||||
pub date_picker: DatePickerTheme,
|
||||
pub popover: PopoverTheme,
|
||||
pub scrollbar: ScrollbarTheme,
|
||||
pub back_top: BackTopTheme,
|
||||
pub anchor: AnchorTheme,
|
||||
|
|
@ -59,7 +58,6 @@ impl Theme {
|
|||
calendar: CalendarTheme::light(),
|
||||
time_picker: TimePickerTheme::light(),
|
||||
date_picker: DatePickerTheme::light(),
|
||||
popover: PopoverTheme::light(),
|
||||
scrollbar: ScrollbarTheme::light(),
|
||||
back_top: BackTopTheme::light(),
|
||||
anchor: AnchorTheme::light(),
|
||||
|
|
@ -83,7 +81,6 @@ impl Theme {
|
|||
calendar: CalendarTheme::dark(),
|
||||
time_picker: TimePickerTheme::dark(),
|
||||
date_picker: DatePickerTheme::dark(),
|
||||
popover: PopoverTheme::dark(),
|
||||
scrollbar: ScrollbarTheme::dark(),
|
||||
back_top: BackTopTheme::dark(),
|
||||
anchor: AnchorTheme::dark(),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue