diff --git a/crates/story/examples/dock.rs b/crates/story/examples/dock.rs index 4e36d60c..6e803919 100644 --- a/crates/story/examples/dock.rs +++ b/crates/story/examples/dock.rs @@ -505,11 +505,7 @@ pub fn open_new( } impl Render for StoryWorkspace { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - let sheet_layer = Root::render_sheet_layer(window, cx); - let dialog_layer = Root::render_dialog_layer(window, cx); - let notification_layer = Root::render_notification_layer(window, cx); - + fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement { div() .id("story-workspace") .on_action(cx.listener(Self::on_action_add_panel)) @@ -521,9 +517,6 @@ impl Render for StoryWorkspace { .flex_col() .child(self.title_bar.clone()) .child(self.dock_area.clone()) - .children(sheet_layer) - .children(dialog_layer) - .children(notification_layer) } } diff --git a/crates/story/examples/tiles.rs b/crates/story/examples/tiles.rs index 414522a2..7b5b3eca 100644 --- a/crates/story/examples/tiles.rs +++ b/crates/story/examples/tiles.rs @@ -409,11 +409,7 @@ pub fn open_new( } impl Render for StoryTiles { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - let sheet_layer = Root::render_sheet_layer(window, cx); - let dialog_layer = Root::render_dialog_layer(window, cx); - let notification_layer = Root::render_notification_layer(window, cx); - + fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement { div() .font_family(".SystemUIFont") .relative() @@ -424,9 +420,6 @@ impl Render for StoryTiles { .text_color(cx.theme().foreground) .child(TitleBar::new().child(div().flex().items_center().child("Story Tiles"))) .child(self.dock_area.clone()) - .children(sheet_layer) - .children(dialog_layer) - .children(notification_layer) } } diff --git a/crates/story/src/lib.rs b/crates/story/src/lib.rs index a519237d..bc69e02a 100644 --- a/crates/story/src/lib.rs +++ b/crates/story/src/lib.rs @@ -261,22 +261,13 @@ impl StoryRoot { } impl Render for StoryRoot { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - let sheet_layer = Root::render_sheet_layer(window, cx); - let dialog_layer = Root::render_dialog_layer(window, cx); - let notification_layer = Root::render_notification_layer(window, cx); - - div() - .size_full() - .child( - v_flex() - .size_full() - .child(self.title_bar.clone()) - .child(div().flex_1().overflow_hidden().child(self.view.clone())), - ) - .children(sheet_layer) - .children(dialog_layer) - .children(notification_layer) + fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement { + div().size_full().child( + v_flex() + .size_full() + .child(self.title_bar.clone()) + .child(div().flex_1().overflow_hidden().child(self.view.clone())), + ) } } diff --git a/crates/ui/src/notification.rs b/crates/ui/src/notification.rs index 5a16b2dc..246586c5 100644 --- a/crates/ui/src/notification.rs +++ b/crates/ui/src/notification.rs @@ -318,8 +318,8 @@ impl Render for Notification { .child( h_flex() .absolute() - .top_3p5() - .right_3p5() + .top_1p5() + .right_1p5() .invisible() .group_hover("", |this| this.visible()) .child( diff --git a/crates/ui/src/root.rs b/crates/ui/src/root.rs index f17d7470..25081add 100644 --- a/crates/ui/src/root.rs +++ b/crates/ui/src/root.rs @@ -3,7 +3,7 @@ use crate::{ input::InputState, notification::{Notification, NotificationList}, sheet::Sheet, - window_border, ActiveTheme, Placement, + window_border, ActiveTheme, Placement, TITLE_BAR_HEIGHT, }; use gpui::{ actions, canvas, div, prelude::FluentBuilder as _, AnyView, App, AppContext, Context, @@ -274,64 +274,64 @@ impl Root { } // Render Notification layer. - pub fn render_notification_layer( - window: &mut Window, - cx: &mut App, + fn render_notification_layer( + &mut self, + _: &mut Window, + _: &mut Context, ) -> Option { - let root = window.root::()??; - - let active_sheet_placement = root.read(cx).active_sheet.clone().map(|d| d.placement); + let active_sheet_placement = self.active_sheet.clone().map(|d| d.placement); let (mt, mr) = match active_sheet_placement { - Some(Placement::Right) => (None, root.read(cx).sheet_size), - Some(Placement::Top) => (root.read(cx).sheet_size, None), + Some(Placement::Right) => (None, self.sheet_size), + Some(Placement::Top) => (self.sheet_size, None), _ => (None, None), }; Some( div() .absolute() - .top_0() + .top(TITLE_BAR_HEIGHT) .right_0() .when_some(mt, |this, offset| this.mt(offset)) .when_some(mr, |this, offset| this.mr(offset)) - .child(root.read(cx).notification.clone()), + .child(self.notification.clone()), ) } /// Render the Sheet layer. - pub fn render_sheet_layer(window: &mut Window, cx: &mut App) -> Option { - let root = window.root::()??; + fn render_sheet_layer( + &mut self, + window: &mut Window, + cx: &mut Context, + ) -> Option { + let active_sheet = self.active_sheet.clone()?; + let root = cx.entity(); + let mut sheet = Sheet::new(window, cx); + sheet = (active_sheet.builder)(sheet, window, cx); + sheet.focus_handle = active_sheet.focus_handle.clone(); + sheet.placement = active_sheet.placement; - if let Some(active_sheet) = root.read(cx).active_sheet.clone() { - let mut sheet = Sheet::new(window, cx); - sheet = (active_sheet.builder)(sheet, window, cx); - sheet.focus_handle = active_sheet.focus_handle.clone(); - sheet.placement = active_sheet.placement; + let size = sheet.size; - let size = sheet.size; - - return Some( - div().relative().child(sheet).child( - canvas( - move |_, _, cx| root.update(cx, |r, _| r.sheet_size = Some(size)), - |_, _, _, _| {}, - ) - .absolute() - .size_full(), - ), - ); - } - - None + Some( + div().relative().child(sheet).child( + canvas( + move |_, _, cx| root.update(cx, |r, _| r.sheet_size = Some(size)), + |_, _, _, _| {}, + ) + .absolute() + .size_full(), + ), + ) } /// Render the Dialog layer. - pub fn render_dialog_layer(window: &mut Window, cx: &mut App) -> Option { - let root = window.root::()??; - - let active_dialogs = root.read(cx).active_dialogs.clone(); - + fn render_dialog_layer( + &mut self, + window: &mut Window, + cx: &mut Context, + ) -> Option { + let active_dialogs = self.active_dialogs.clone(); if active_dialogs.is_empty() { return None; } @@ -401,7 +401,10 @@ impl Render for Root { .font_family(".SystemUIFont") .bg(cx.theme().background) .text_color(cx.theme().foreground) - .child(self.view.clone()), + .child(self.view.clone()) + .children(self.render_sheet_layer(window, cx)) + .children(self.render_dialog_layer(window, cx)) + .children(self.render_notification_layer(window, cx)), ) } } diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 25c5ef3f..66eb1327 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -16,37 +16,6 @@ use gpui_component::WindowExt; ## Usage -### Setup application root view for display of dialogs - -You need to set up your application's root view to render the dialog layer. This is typically done in your main application struct's render method. - -The [Root::render_dialog_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_dialog_layer) function handles rendering any active dialogs on top of your app content. - -```rust -use gpui_component::TitleBar; - -struct MyApp { - view: AnyView, -} - -impl Render for MyApp { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - let dialog_layer = Root::render_dialog_layer(window, cx); - - div() - .size_full() - .child( - v_flex() - .size_full() - .child(TitleBar::new()) - .child(div().flex_1().overflow_hidden().child(self.view.clone())), - ) - // Render the dialog layer on top of the app content - .children(dialog_layer) - } -} -``` - ### Basic Dialog ```rust diff --git a/docs/docs/components/notification.md b/docs/docs/components/notification.md index c83664ac..30caa210 100644 --- a/docs/docs/components/notification.md +++ b/docs/docs/components/notification.md @@ -16,38 +16,6 @@ use gpui_component::WindowExt; ## Usage -### Setup application root view for display of notifications - -You need to set up your application's root view to render the notification layer. This is typically done in your main application struct's render method. - -The [Root::render_notification_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_notification_layer) function handles rendering any active modals on top of your app content. - -```rust -use gpui_component::TitleBar; - -struct MyApp { - view: AnyView, -} - -impl Render for MyApp { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - let notification_layer = Root::render_notification_layer(window, cx); - - - div() - .size_full() - .child( - v_flex() - .size_full() - .child(TitleBar::new()) - .child(div().flex_1().overflow_hidden().child(self.view.clone())), - ) - // Render the notification layer on top of the app content - .children(notification_layer) - } -} -``` - ### Basic Notification ```rust diff --git a/docs/docs/components/sheet.md b/docs/docs/components/sheet.md index 33ed57eb..e423d295 100644 --- a/docs/docs/components/sheet.md +++ b/docs/docs/components/sheet.md @@ -10,43 +10,11 @@ A Sheet (also known as a sidebar or slide-out panel) is a navigation component t ## Import ```rust -use gpui_component::WindowExt; -use gpui_component::Placement; +use gpui_component::{WindowExt, Placement}; ``` ## Usage -### Setup application root view for display of sheets - -You need to set up your application's root view to render the sheet layer. This is typically done in your main application struct's render method. - -The [Root::render_sheet_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_sheet_layer) function handles rendering any active modals on top of your app content. - -```rust -use gpui_component::TitleBar; - -struct MyApp { - view: AnyView, -} - -impl Render for MyApp { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - let sheet_layer = Root::render_sheet_layer(window, cx); - - div() - .size_full() - .child( - v_flex() - .size_full() - .child(TitleBar::new()) - .child(div().flex_1().overflow_hidden().child(self.view.clone())), - ) - // Render the sheet layer on top of the app content - .children(sheet_layer) - } -} -``` - ### Basic Sheet ```rust diff --git a/docs/docs/root.md b/docs/docs/root.md index 87709780..d591826f 100644 --- a/docs/docs/root.md +++ b/docs/docs/root.md @@ -30,33 +30,4 @@ fn main() { } ``` -## Overlays - -We have dialogs, sheets, notifications, we need placement for them to show, so [Root] provides methods to render these overlays: - -- [Root::render_dialog_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_dialog_layer) - Render the current opened modals. -- [Root::render_sheet_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_sheet_layer) - Render the current opened drawers. -- [Root::render_notification_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_notification_layer) - Render the notification list. - -We can put these layers in the `render` method your first level view (Root > YourFirstView): - -```rs -struct MyApp; - -impl Render for MyApp { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { - div() - .size_full() - .child("My App Content") - .children(Root::render_dialog_layer(cx)) - .children(Root::render_sheet_layer(cx)) - .children(Root::render_notification_layer(cx)) - } -} -``` - -:::tip -Here the example we used `children` method, it because if there is no opened dialogs, sheets, notifications, these methods will return `None`, so GPUI will not render anything. -::: - [Root]: https://docs.rs/gpui-component/latest/gpui_component/root/struct.Root.html diff --git a/examples/dialog_overlay/src/main.rs b/examples/dialog_overlay/src/main.rs index 0c0a6399..696b77a2 100644 --- a/examples/dialog_overlay/src/main.rs +++ b/examples/dialog_overlay/src/main.rs @@ -20,7 +20,7 @@ impl HelloWorld { } impl Render for HelloWorld { - fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { + fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement { div() .bg(gpui::white()) .size_full() @@ -72,8 +72,6 @@ impl Render for HelloWorld { }), ), ) - .children(Root::render_dialog_layer(window, cx)) - .children(Root::render_sheet_layer(window, cx)) } }