Add stories for collab notifications (#3967)
This PR adds some basic stories for collab notifications to make them easier to work on: <img width="1076" alt="Screenshot 2024-01-08 at 9 43 39 PM" src="https://github.com/zed-industries/zed/assets/1486634/4a0adcfa-1134-49c2-b589-74ac1d52af4c"> I factored out a `CollabNotification` component that defines the general structure for one of these notifications, and this is the component that we use in the stories, with representative values passed to it to simulate the different instances of the notification. We can't use the actual notification components in the stories due to their data dependencies. Release Notes: - N/A
This commit is contained in:
parent
c40a7f3445
commit
4afa5fb23e
10 changed files with 169 additions and 83 deletions
52
crates/collab_ui/src/notifications/collab_notification.rs
Normal file
52
crates/collab_ui/src/notifications/collab_notification.rs
Normal file
|
@ -0,0 +1,52 @@
|
|||
use gpui::{img, prelude::*, AnyElement};
|
||||
use smallvec::SmallVec;
|
||||
use ui::prelude::*;
|
||||
|
||||
#[derive(IntoElement)]
|
||||
pub struct CollabNotification {
|
||||
avatar_uri: SharedString,
|
||||
accept_button: Button,
|
||||
dismiss_button: Button,
|
||||
children: SmallVec<[AnyElement; 2]>,
|
||||
}
|
||||
|
||||
impl CollabNotification {
|
||||
pub fn new(
|
||||
avatar_uri: impl Into<SharedString>,
|
||||
accept_button: Button,
|
||||
dismiss_button: Button,
|
||||
) -> Self {
|
||||
Self {
|
||||
avatar_uri: avatar_uri.into(),
|
||||
accept_button,
|
||||
dismiss_button,
|
||||
children: SmallVec::new(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl ParentElement for CollabNotification {
|
||||
fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
|
||||
&mut self.children
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for CollabNotification {
|
||||
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
|
||||
h_stack()
|
||||
.text_ui()
|
||||
.justify_between()
|
||||
.size_full()
|
||||
.overflow_hidden()
|
||||
.elevation_3(cx)
|
||||
.p_2()
|
||||
.gap_2()
|
||||
.child(img(self.avatar_uri).w_12().h_12().rounded_full())
|
||||
.child(v_stack().overflow_hidden().children(self.children))
|
||||
.child(
|
||||
v_stack()
|
||||
.child(self.accept_button)
|
||||
.child(self.dismiss_button),
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue