center a div

Nate Butler created 2 years ago

Change summary

crates/go_to_line2/src/go_to_line.rs          |  2 
crates/ui2/src/components/elevated_surface.rs |  2 
crates/workspace2/src/modal_layer.rs          | 22 ++++++++++----------
crates/workspace2/src/workspace2.rs           |  2 
4 files changed, 14 insertions(+), 14 deletions(-)

Detailed changes

crates/go_to_line2/src/go_to_line.rs

@@ -32,7 +32,7 @@ impl Render for GoToLine {
     type Element = Div<Self>;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-        modal(cx).child(div().bg(red()).w(px(100.0)).h(px(100.0)))
+        modal(cx).child(div().m_4().bg(red()).w(px(100.0)).h(px(100.0)))
     }
 }
 

crates/ui2/src/components/elevated_surface.rs

@@ -1,4 +1,4 @@
-use gpui::{div, hsla, point, px, BoxShadow, Div};
+use gpui::Div;
 
 use crate::{prelude::*, v_stack};
 

crates/workspace2/src/modal_layer.rs

@@ -1,9 +1,10 @@
 use std::{any::TypeId, sync::Arc};
 
 use gpui::{
-    div, AnyView, AppContext, Component, DispatchPhase, Div, ParentElement, Render,
+    div, hsla, px, red, AnyView, AppContext, Component, DispatchPhase, Div, ParentElement, Render,
     StatelessInteractive, Styled, View, ViewContext,
 };
+use ui::v_stack;
 
 use crate::Workspace;
 
@@ -83,7 +84,7 @@ impl ModalLayer {
     // whatever
 
     pub fn render(&self, workspace: &Workspace, cx: &ViewContext<Workspace>) -> Div<Workspace> {
-        let mut parent = div().relative();
+        let mut parent = div().relative().bg(red()).size_full();
 
         for (_, action) in cx.global::<ModalRegistry>().registered_modals.iter() {
             parent = (action)(parent);
@@ -92,21 +93,20 @@ impl ModalLayer {
         parent.when_some(self.open_modal.as_ref(), |parent, open_modal| {
             let container1 = div()
                 .absolute()
+                .flex()
+                .flex_col()
+                .items_center()
                 .size_full()
                 .top_0()
                 .left_0()
-                .right_0()
-                .bottom_0();
+                .z_index(400);
 
             // transparent layer
-            let container2 = div()
-                .flex()
-                .h_96()
-                .justify_center()
-                .size_full()
+            let container2 = v_stack()
+                .bg(hsla(0.5, 0.5, 0.5, 0.5))
+                .h(px(0.0))
                 .relative()
-                .top_20()
-                .z_index(400);
+                .top_20();
 
             parent.child(container1.child(container2.child(open_modal.clone())))
         })

crates/workspace2/src/workspace2.rs

@@ -3710,10 +3710,10 @@ impl Render for Workspace {
                 self.modal_layer
                     .read(cx)
                     .render(self, cx)
+                    .relative()
                     .flex_1()
                     .w_full()
                     .flex()
-                    .flex_row()
                     .overflow_hidden()
                     .border_t()
                     .border_b()