refactor: save popover

thaw/src/config_provider/mod.rs

@@ -67,6 +67,10 @@ impl ConfigInjection {
     pub fn id(&self) -> &String {
         &self.id
     }
+
+    pub fn use_() -> ConfigInjection {
+        expect_context()
+    }
 }
 
 #[derive(Clone)]

thaw/src/popover/mod.rs

@@ -1,8 +1,4 @@
-mod theme;
+use crate::ConfigInjection;
-
-pub use theme::PopoverTheme;
-
-use crate::{use_theme, Theme};
 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 config_provider = ConfigInjection::use_();
-    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 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" }
+                        class=if tooltip {
-                        style=move || {
+                            "thaw-config-provider thaw-popover-surface thaw-popover--tooltip" }
-                            display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
+                        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-surface__angle">
-                            <div class="thaw-popover__angle"></div>
                         </div>
                     </div>
                 </CSSTransition>

thaw/src/popover/popover.css

@@ -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 {
+[data-thaw-placement="top-start"] > .thaw-popover-surface,
-    position: absolute;
+[data-thaw-placement="top-end"] > .thaw-popover-surface,
-}
+[data-thaw-placement="top"] > .thaw-popover-surface {
-
-.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 {
     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-start"] .thaw-popover-surface__angle,
-[data-thaw-placement="top-end"] .thaw-popover__angle-container,
+[data-thaw-placement="top-end"] .thaw-popover-surface__angle,
-[data-thaw-placement="top"] .thaw-popover__angle-container {
+[data-thaw-placement="top"] .thaw-popover-surface__angle {
-    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%;
     transform: rotate(45deg) translateX(-7px);
-}
+    bottom: -10px;
-
-[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 {
     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-start"] .thaw-popover-surface__angle,
-[data-thaw-placement="left-end"] .thaw-popover__angle-container,
+[data-thaw-placement="left-end"] .thaw-popover-surface__angle,
-[data-thaw-placement="left"] .thaw-popover__angle-container {
+[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-start"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="left-end"] .thaw-popover__angle,
+[data-thaw-placement="left-end"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="left"] .thaw-popover__angle {
+[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-start"] .thaw-popover-surface__angle,
-[data-thaw-placement="right-end"] .thaw-popover__angle-container,
+[data-thaw-placement="right-end"] .thaw-popover-surface__angle,
-[data-thaw-placement="right"] .thaw-popover__angle-container {
+[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-start"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="right-end"] .thaw-popover__angle,
+[data-thaw-placement="right-end"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="right"] .thaw-popover__angle {
+[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="bottom-start"] .thaw-popover-surface__angle,
-[data-thaw-placement="top-start"] .thaw-popover__angle {
+[data-thaw-placement="top-start"] .thaw-popover-surface__angle {
     left: 16px;
 }
-[data-thaw-placement="bottom-end"] .thaw-popover__angle,
+[data-thaw-placement="bottom-end"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="top-end"] .thaw-popover__angle {
+[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="right-start"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="left-start"] .thaw-popover__angle {
+[data-thaw-placement="left-start"] .thaw-popover-surface__angle::before {
     top: 16px;
 }
-[data-thaw-placement="right-end"] .thaw-popover__angle,
+[data-thaw-placement="right-end"] .thaw-popover-surface__angle::before,
-[data-thaw-placement="left-end"] .thaw-popover__angle {
+[data-thaw-placement="left-end"] .thaw-popover-surface__angle::before {
     top: initial;
     bottom: 7px;
 }

thaw/src/popover/theme.rs

@@ -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(),
-        }
-    }
-}

thaw/src/theme/color.rs

@@ -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(),
         }
     }
 }

thaw/src/theme/mod.rs

@@ -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(),