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

Style notification panel (#3741)

Browse source 
This PR makes a first pass at styling the notification panel.

#### Signed out

<img width="381" alt="Screenshot 2023-12-20 at 11 41 25 AM"
src="https://github.com/zed-industries/zed/assets/1486634/f045fa17-4ebc-437f-a25b-d7695d47f18b">

#### No notifications

<img width="380" alt="Screenshot 2023-12-20 at 11 44 23 AM"
src="https://github.com/zed-industries/zed/assets/1486634/3a7543f2-8cd8-4788-8059-d5663f5f6b4c">

#### Notifications

<img width="386" alt="Screenshot 2023-12-20 at 1 27 08 PM"
src="https://github.com/zed-industries/zed/assets/1486634/13b81722-c47a-4c06-b37d-e6515cbfdb9d">

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2023-12-20 14:06:33 -05:00 • committed by GitHub
commit c1df27c792
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 179 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

29
crates/collab_ui2/src/collab_panel.rs
View file

@ -1624,14 +1624,15 @@ impl CollabPanel {
} }
fn render_signed_out(&mut self, cx: &mut ViewContext<Self>) -> Div { fn render_signed_out(&mut self, cx: &mut ViewContext<Self>) -> Div {
v_stack() let collab_blurb = "Work with your team in realtime with collaborative editing, voice, shared notes and more.";
.items_center()
.child(v_stack().gap_6().p_4()
.child(
Label::new("Work with your team in realtime with collaborative editing, voice, shared notes and more.")
)
.child(v_stack().gap_2()
v_stack()
.gap_6()
.p_4()
.child(Label::new(collab_blurb))
.child(
v_stack()
.gap_2()
.child( .child(
Button::new("sign_in", "Sign in") Button::new("sign_in", "Sign in")
.icon_color(Color::Muted) .icon_color(Color::Muted)
@ -1639,8 +1640,7 @@ impl CollabPanel {
.icon_position(IconPosition::Start) .icon_position(IconPosition::Start)
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.full_width() .full_width()
.on_click(cx.listener( .on_click(cx.listener(|this, _, cx| {
|this, _, cx| {
let client = this.client.clone(); let client = this.client.clone();
cx.spawn(|_, mut cx| async move { cx.spawn(|_, mut cx| async move {
client client
@ -1649,15 +1649,16 @@ impl CollabPanel {
.notify_async_err(&mut cx); .notify_async_err(&mut cx);
}) })
.detach() .detach()
}, })),
))) )
.child( .child(
div().flex().w_full().items_center().child( div().flex().w_full().items_center().child(
Label::new("Sign in to enable collaboration.") Label::new("Sign in to enable collaboration.")
.color(Color::Muted) .color(Color::Muted)
.size(LabelSize::Small) .size(LabelSize::Small),
)), ),
)) ),
)
} }
fn render_list_entry(&mut self, ix: usize, cx: &mut ViewContext<Self>) -> AnyElement { fn render_list_entry(&mut self, ix: usize, cx: &mut ViewContext<Self>) -> AnyElement {

162
crates/collab_ui2/src/notification_panel.rs
View file

@ -6,11 +6,11 @@ use collections::HashMap;
use db::kvp::KEY_VALUE_STORE; use db::kvp::KEY_VALUE_STORE;
use futures::StreamExt; use futures::StreamExt;
use gpui::{ use gpui::{
actions, div, list, px, serde_json, AnyElement, AppContext, AsyncWindowContext, CursorStyle, actions, div, img, list, px, serde_json, AnyElement, AppContext, AsyncWindowContext,
DismissEvent, Div, Element, EventEmitter, FocusHandle, FocusableView, InteractiveElement, CursorStyle, DismissEvent, Div, Element, EventEmitter, FocusHandle, FocusableView,
IntoElement, ListAlignment, ListScrollEvent, ListState, Model, ParentElement, Render, Stateful, InteractiveElement, IntoElement, ListAlignment, ListScrollEvent, ListState, Model,
StatefulInteractiveElement, Styled, Task, View, ViewContext, VisualContext, WeakView, ParentElement, Render, Stateful, StatefulInteractiveElement, Styled, Task, View, ViewContext,
WindowContext, VisualContext, WeakView, WindowContext,
}; };
use notifications::{NotificationEntry, NotificationEvent, NotificationStore}; use notifications::{NotificationEntry, NotificationEvent, NotificationStore};
use project::Fs; use project::Fs;
@ -19,7 +19,7 @@ use serde::{Deserialize, Serialize};
use settings::{Settings, SettingsStore}; use settings::{Settings, SettingsStore};
use std::{sync::Arc, time::Duration}; use std::{sync::Arc, time::Duration};
use time::{OffsetDateTime, UtcOffset}; use time::{OffsetDateTime, UtcOffset};
use ui::{h_stack, v_stack, Avatar, Button, Clickable, Icon, IconButton, IconElement, Label}; use ui::{h_stack, prelude::*, v_stack, Avatar, Button, Icon, IconButton, IconElement, Label};
use util::{ResultExt, TryFutureExt}; use util::{ResultExt, TryFutureExt};
use workspace::{ use workspace::{
dock::{DockPosition, Panel, PanelEvent}, dock::{DockPosition, Panel, PanelEvent},
@ -229,28 +229,57 @@ impl NotificationPanel {
Some( Some(
div() div()
.id(ix) .id(ix)
.flex()
.flex_row()
.size_full()
.px_2()
.py_1()
.gap_2()
.when(can_navigate, |el| {
el.cursor(CursorStyle::PointingHand).on_click({
let notification = notification.clone();
cx.listener(move |this, _, cx| {
this.did_click_notification(&notification, cx)
})
})
})
.children(actor.map(|actor| {
img(actor.avatar_uri.clone())
.flex_none()
.w_8()
.h_8()
.rounded_full()
}))
.child(
v_stack()
.gap_1()
.size_full()
.overflow_hidden()
.child(Label::new(text.clone()))
.child( .child(
h_stack() h_stack()
.children(actor.map(|actor| Avatar::new(actor.avatar_uri.clone())))
.child( .child(
v_stack().child(Label::new(text)).child( Label::new(format_timestamp(
h_stack()
.child(Label::new(format_timestamp(
timestamp, timestamp,
now, now,
self.local_timezone, self.local_timezone,
))) ))
.color(Color::Muted),
)
.children(if let Some(is_accepted) = response { .children(if let Some(is_accepted) = response {
Some(div().child(Label::new(if is_accepted { Some(div().flex().flex_grow().justify_end().child(Label::new(
if is_accepted {
"You accepted" "You accepted"
} else { } else {
"You declined" "You declined"
}))) },
)))
} else if needs_response { } else if needs_response {
Some( Some(
h_stack() h_stack()
.child(Button::new("decline", "Decline").on_click( .flex_grow()
{ .justify_end()
.child(Button::new("decline", "Decline").on_click({
let notification = notification.clone(); let notification = notification.clone();
let view = cx.view().clone(); let view = cx.view().clone();
move |_, cx| { move |_, cx| {
@ -262,8 +291,7 @@ impl NotificationPanel {
) )
}); });
} }
}, }))
))
.child(Button::new("accept", "Accept").on_click({ .child(Button::new("accept", "Accept").on_click({
let notification = notification.clone(); let notification = notification.clone();
let view = cx.view().clone(); let view = cx.view().clone();
@ -282,16 +310,7 @@ impl NotificationPanel {
None None
}), }),
), ),
),
) )
.when(can_navigate, |el| {
el.cursor(CursorStyle::PointingHand).on_click({
let notification = notification.clone();
cx.listener(move |this, _, cx| {
this.did_click_notification(&notification, cx)
})
})
})
.into_any(), .into_any(),
) )
} }
@ -439,28 +458,6 @@ impl NotificationPanel {
false false
} }
fn render_sign_in_prompt(&self) -> AnyElement {
Button::new(
"sign_in_prompt_button",
"Sign in to view your notifications",
)
.on_click({
let client = self.client.clone();
move |_, cx| {
let client = client.clone();
cx.spawn(move |cx| async move {
client.authenticate_and_connect(true, &cx).log_err().await;
})
.detach()
}
})
.into_any_element()
}
fn render_empty_state(&self) -> AnyElement {
Label::new("You have no notifications").into_any_element()
}
fn on_notification_event( fn on_notification_event(
&mut self, &mut self,
_: Model<NotificationStore>, _: Model<NotificationStore>,
@ -543,25 +540,72 @@ impl NotificationPanel {
} }
impl Render for NotificationPanel { impl Render for NotificationPanel {
type Element = AnyElement; type Element = Div;
fn render(&mut self, _: &mut ViewContext<Self>) -> AnyElement { fn render(&mut self, cx: &mut ViewContext<Self>) -> Div {
if self.client.user_id().is_none() {
self.render_sign_in_prompt()
} else if self.notification_list.item_count() == 0 {
self.render_empty_state()
} else {
v_stack() v_stack()
.bg(gpui::red()) .size_full()
.child( .child(
h_stack() h_stack()
.justify_between()
.px_2()
.py_1()
// Match the height of the tab bar so they line up.
.h(rems(ui::Tab::HEIGHT_IN_REMS))
.border_b_1()
.border_color(cx.theme().colors().border)
.child(Label::new("Notifications")) .child(Label::new("Notifications"))
.child(IconElement::new(Icon::Envelope)), .child(IconElement::new(Icon::Envelope)),
) )
.child(list(self.notification_list.clone()).size_full()) .map(|this| {
.size_full() if self.client.user_id().is_none() {
.into_any_element() this.child(
v_stack()
.gap_2()
.p_4()
.child(
Button::new("sign_in_prompt_button", "Sign in")
.icon_color(Color::Muted)
.icon(Icon::Github)
.icon_position(IconPosition::Start)
.style(ButtonStyle::Filled)
.full_width()
.on_click({
let client = self.client.clone();
move |_, cx| {
let client = client.clone();
cx.spawn(move |cx| async move {
client
.authenticate_and_connect(true, &cx)
.log_err()
.await;
})
.detach()
} }
}),
)
.child(
div().flex().w_full().items_center().child(
Label::new("Sign in to view notifications.")
.color(Color::Muted)
.size(LabelSize::Small),
),
),
)
} else if self.notification_list.item_count() == 0 {
this.child(
v_stack().p_4().child(
div().flex().w_full().items_center().child(
Label::new("You have no notifications.")
.color(Color::Muted)
.size(LabelSize::Small),
),
),
)
} else {
this.child(list(self.notification_list.clone()).size_full())
}
})
} }
} }