Style incoming call notification (#3742)

This PR styles the incoming call notification.

<img width="405" alt="Screenshot 2023-12-20 at 3 56 39 PM"
src="https://github.com/zed-industries/zed/assets/1486634/9cfb89e7-ba5f-4463-bf53-a3f8a82e136f">

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers
2023-12-20 16:16:03 -05:00
committed by GitHub
2 changed files with 69 additions and 53 deletions
@@ -2,12 +2,14 @@ use crate::notification_window_options;
use call::{ActiveCall, IncomingCall};
use futures::StreamExt;
use gpui::{
div, px, red, AppContext, Div, Element, ParentElement, Render, RenderOnce, Styled, ViewContext,
img, px, AppContext, Div, ParentElement, Render, RenderOnce, Styled, ViewContext,
VisualContext as _, WindowHandle,
};
use settings::Settings;
use std::sync::{Arc, Weak};
use theme::ThemeSettings;
use ui::prelude::*;
use ui::{h_stack, v_stack, Avatar, Button, Label};
use ui::{h_stack, v_stack, Button, Label};
use util::ResultExt;
use workspace::AppState;
@@ -112,36 +114,52 @@ impl IncomingCallNotification {
state: Arc::new(IncomingCallNotificationState::new(call, app_state)),
}
}
fn render_caller(&self, cx: &mut ViewContext<Self>) -> impl Element {
h_stack()
.child(Avatar::new(self.state.call.calling_user.avatar_uri.clone()))
.child(
v_stack()
.child(Label::new(format!(
"{} is sharing a project in Zed",
self.state.call.calling_user.github_login
)))
.child(self.render_buttons(cx)),
)
}
fn render_buttons(&self, cx: &mut ViewContext<Self>) -> impl Element {
h_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)
}))
}
}
impl Render for IncomingCallNotification {
type Element = Div;
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
div().bg(red()).flex_none().child(self.render_caller(cx))
// TODO: Is there a better place for us to initialize the font?
let (ui_font, ui_font_size) = {
let theme_settings = ThemeSettings::get_global(cx);
(
theme_settings.ui_font.family.clone(),
theme_settings.ui_font_size.clone(),
)
};
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(),
)
.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)
})),
)
}
}
@@ -23,7 +23,7 @@ pub fn init(app_state: &Arc<AppState>, cx: &mut AppContext) {
} => {
let window_size = Size {
width: px(400.),
height: px(96.),
height: px(72.),
};
for screen in cx.displays() {
@@ -139,35 +139,33 @@ impl Render for ProjectSharedNotification {
.text_ui()
.justify_between()
.size_full()
.overflow_hidden()
.elevation_3(cx)
.p_2()
.gap_2()
.child(
h_stack()
.gap_2()
.child(
img(self.owner.avatar_uri.clone())
.w_16()
.h_16()
.rounded_full(),
)
.child(
v_stack()
.child(Label::new(self.owner.github_login.clone()))
.child(Label::new(format!(
"is sharing a project in Zed{}",
if self.worktree_root_names.is_empty() {
""
} else {
":"
}
)))
.children(if self.worktree_root_names.is_empty() {
None
} else {
Some(Label::new(self.worktree_root_names.join(", ")))
}),
),
img(self.owner.avatar_uri.clone())
.w_12()
.h_12()
.rounded_full(),
)
.child(
v_stack()
.overflow_hidden()
.child(Label::new(self.owner.github_login.clone()))
.child(Label::new(format!(
"is sharing a project in Zed{}",
if self.worktree_root_names.is_empty() {
""
} else {
":"
}
)))
.children(if self.worktree_root_names.is_empty() {
None
} else {
Some(Label::new(self.worktree_root_names.join(", ")))
}),
)
.child(
v_stack()