Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add stories for collab notifications (#3967)

Browse source 
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:
Marshall Bowers 2024-01-08 21:54:59 -05:00 • committed by GitHub
parent c40a7f3445
commit 4afa5fb23e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 169 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

52
crates/collab_ui/src/notifications/incoming_call_notification.rs
View file

@ -1,15 +1,12 @@
use crate::notification_window_options;
use crate::notifications::collab_notification::CollabNotification;
use call::{ActiveCall, IncomingCall};
use futures::StreamExt;
use gpui::{
img, px, AppContext, ParentElement, Render, RenderOnce, Styled, ViewContext,
VisualContext as _, WindowHandle,
};
use gpui::{prelude::*, AppContext, WindowHandle};
use settings::Settings;
use std::sync::{Arc, Weak};
use theme::ThemeSettings;
use ui::prelude::*;
use ui::{h_stack, v_stack, Button, Label};
use ui::{prelude::*, Button, Label};
use util::ResultExt;
use workspace::AppState;
@ -31,8 +28,8 @@ pub fn init(app_state: &Arc<AppState>, cx: &mut AppContext) {
if let Some(incoming_call) = incoming_call {
let unique_screens = cx.update(|cx| cx.displays()).unwrap();
let window_size = gpui::Size {
width: px(380.),
height: px(64.),
width: px(400.),
height: px(72.),
};
for screen in unique_screens {
@ -129,35 +126,22 @@ impl Render for IncomingCallNotification {
cx.set_rem_size(ui_font_size);
h_stack()
.font(ui_font)
.text_ui()
.justify_between()
.size_full()
.overflow_hidden()
.elevation_3(cx)
.p_2()
.gap_2()
.child(
img(self.state.call.calling_user.avatar_uri.clone())
.w_12()
.h_12()
.rounded_full(),
div().size_full().font(ui_font).child(
CollabNotification::new(
self.state.call.calling_user.avatar_uri.clone(),
Button::new("accept", "Accept").on_click({
let state = self.state.clone();
move |_, cx| state.respond(true, cx)
}),
Button::new("decline", "Decline").on_click({
let state = self.state.clone();
move |_, cx| state.respond(false, cx)
}),
)
.child(v_stack().overflow_hidden().child(Label::new(format!(
"{} is sharing a project in Zed",
self.state.call.calling_user.github_login
))))
.child(
v_stack()
.child(Button::new("accept", "Accept").render(cx).on_click({
let state = self.state.clone();
move |_, cx| state.respond(true, cx)
}))
.child(Button::new("decline", "Decline").render(cx).on_click({
let state = self.state.clone();
move |_, cx| state.respond(false, cx)
})),
)
)))),
)
}
}