Add `div.z_index`

Marshall Bowers created 2 years ago

Change summary

crates/gpui3/src/elements/div.rs       | 10 ++++++++--
crates/gpui3/src/style.rs              |  3 +++
crates/ui2/src/components/toast.rs     |  3 ++-
crates/ui2/src/components/workspace.rs | 22 ++++++++--------------
4 files changed, 21 insertions(+), 17 deletions(-)

Detailed changes

crates/gpui3/src/elements/div.rs

@@ -46,11 +46,12 @@ impl<S: 'static + Send + Sync> Element for Div<S> {
         cx: &mut ViewContext<S>,
     ) -> Result<()> {
         let style = self.computed_style();
-        cx.stack(0, |cx| style.paint(bounds, cx));
+        let z_index = style.z_index.unwrap_or(0);
+        cx.stack(z_index, |cx| style.paint(bounds, cx));
 
         let overflow = &style.overflow;
         style.apply_text_style(cx, |cx| {
-            cx.stack(1, |cx| {
+            cx.stack(z_index + 1, |cx| {
                 style.apply_overflow(bounds, cx, |cx| self.paint_children(overflow, state, cx))
             })
         })?;
@@ -67,6 +68,11 @@ impl<S: 'static + Send + Sync> Element for Div<S> {
 }
 
 impl<S: 'static> Div<S> {
+    pub fn z_index(mut self, z_index: u32) -> Self {
+        self.declared_style().z_index = Some(z_index);
+        self
+    }
+
     pub fn overflow_hidden(mut self) -> Self {
         self.declared_style().overflow.x = Some(Overflow::Hidden);
         self.declared_style().overflow.y = Some(Overflow::Hidden);

crates/gpui3/src/style.rs

@@ -95,6 +95,8 @@ pub struct Style {
 
     /// TEXT
     pub text: TextStyleRefinement,
+
+    pub z_index: Option<u32>,
 }
 
 #[derive(Clone, Debug)]
@@ -335,6 +337,7 @@ impl Default for Style {
             corner_radii: Corners::default(),
             box_shadow: Default::default(),
             text: TextStyleRefinement::default(),
+            z_index: None,
         }
     }
 }

crates/ui2/src/components/toast.rs

@@ -52,7 +52,8 @@ impl<S: 'static + Send + Sync> Toast<S> {
             div = div.right_4();
         }
 
-        div.absolute()
+        div.z_index(5)
+            .absolute()
             .bottom_4()
             .flex()
             .py_2()

crates/ui2/src/components/workspace.rs

@@ -7,8 +7,9 @@ use gpui3::{relative, rems, Size};
 use crate::prelude::*;
 use crate::{
     hello_world_rust_editor_with_status_example, random_players_with_call_status, theme, v_stack,
-    ChatMessage, ChatPanel, EditorPane, Livestream, Pane, PaneGroup, Panel, PanelAllowedSides,
-    PanelSide, ProjectPanel, SplitDirection, StatusBar, Terminal, TitleBar,
+    ChatMessage, ChatPanel, EditorPane, Label, Livestream, Pane, PaneGroup, Panel,
+    PanelAllowedSides, PanelSide, ProjectPanel, SplitDirection, StatusBar, Terminal, TitleBar,
+    Toast, ToastOrigin,
 };
 
 #[derive(Element)]
@@ -180,17 +181,10 @@ impl<S: 'static + Send + Sync + Clone> WorkspaceElement<S> {
                     ),
             )
             .child(StatusBar::new())
-        // An example of a toast is below
-        // Currently because of stacking order this gets obscured by other elements
-
-        // .child(Toast::new(
-        //     ToastOrigin::Bottom,
-        //     |_, payload| {
-        //         let theme = payload.downcast_ref::<Arc<Theme>>().unwrap();
-
-        //         vec![Label::new("label").into_any()]
-        //     },
-        //     Box::new(theme.clone()),
-        // ))
+            .child(Toast::new(
+                ToastOrigin::Bottom,
+                |_, _| vec![Label::new("label").into_any()],
+                Box::new(()),
+            ))
     }
 }