Start styling notification panel
This commit is contained in:
Max Brunsfeld
parent
c20e781441
commit
23400a5a70
5 changed files with 81 additions and 39 deletions
|
|
@ -443,7 +443,8 @@ impl ChatPanel {
|
|||
Flex::row()
|
||||
.with_child(render_avatar(
|
||||
message.sender.avatar.clone(),
|
||||
&theme,
|
||||
&theme.chat_panel.avatar,
|
||||
theme.chat_panel.avatar_container,
|
||||
))
|
||||
.with_child(
|
||||
Label::new(
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ use call::{report_call_event_for_room, ActiveCall, Room};
|
|||
use feature_flags::{ChannelsAlpha, FeatureFlagAppExt};
|
||||
use gpui::{
|
||||
actions,
|
||||
elements::{Empty, Image},
|
||||
elements::{ContainerStyle, Empty, Image},
|
||||
geometry::{
|
||||
rect::RectF,
|
||||
vector::{vec2f, Vector2F},
|
||||
|
|
@ -20,7 +20,7 @@ use gpui::{
|
|||
AnyElement, AppContext, Element, ImageData, Task,
|
||||
};
|
||||
use std::{rc::Rc, sync::Arc};
|
||||
use theme::Theme;
|
||||
use theme::AvatarStyle;
|
||||
use time::{OffsetDateTime, UtcOffset};
|
||||
use util::ResultExt;
|
||||
use workspace::AppState;
|
||||
|
|
@ -133,8 +133,11 @@ fn notification_window_options(
|
|||
}
|
||||
}
|
||||
|
||||
fn render_avatar<T: 'static>(avatar: Option<Arc<ImageData>>, theme: &Arc<Theme>) -> AnyElement<T> {
|
||||
let avatar_style = theme.chat_panel.avatar;
|
||||
fn render_avatar<T: 'static>(
|
||||
avatar: Option<Arc<ImageData>>,
|
||||
avatar_style: &AvatarStyle,
|
||||
container: ContainerStyle,
|
||||
) -> AnyElement<T> {
|
||||
avatar
|
||||
.map(|avatar| {
|
||||
Image::from_data(avatar)
|
||||
|
|
@ -154,7 +157,7 @@ fn render_avatar<T: 'static>(avatar: Option<Arc<ImageData>>, theme: &Arc<Theme>)
|
|||
.into_any()
|
||||
})
|
||||
.contained()
|
||||
.with_style(theme.chat_panel.avatar_container)
|
||||
.with_style(container)
|
||||
.into_any()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ use rpc::proto;
|
|||
use serde::{Deserialize, Serialize};
|
||||
use settings::SettingsStore;
|
||||
use std::{sync::Arc, time::Duration};
|
||||
use theme::{IconButton, Theme};
|
||||
use theme::{ui, Theme};
|
||||
use time::{OffsetDateTime, UtcOffset};
|
||||
use util::{ResultExt, TryFutureExt};
|
||||
use workspace::{
|
||||
|
|
@ -197,9 +197,9 @@ impl NotificationPanel {
|
|||
let NotificationPresenter {
|
||||
actor,
|
||||
text,
|
||||
icon,
|
||||
needs_response,
|
||||
can_navigate,
|
||||
..
|
||||
} = self.present_notification(entry, cx)?;
|
||||
|
||||
let theme = theme::current(cx);
|
||||
|
|
@ -227,17 +227,21 @@ impl NotificationPanel {
|
|||
Flex::column()
|
||||
.with_child(
|
||||
Flex::row()
|
||||
.with_children(
|
||||
actor.map(|actor| render_avatar(actor.avatar.clone(), &theme)),
|
||||
)
|
||||
.with_child(render_icon_button(&theme.chat_panel.icon_button, icon))
|
||||
.with_children(actor.map(|actor| {
|
||||
render_avatar(
|
||||
actor.avatar.clone(),
|
||||
&style.avatar,
|
||||
style.avatar_container,
|
||||
)
|
||||
}))
|
||||
.with_child(
|
||||
Label::new(
|
||||
format_timestamp(timestamp, now, self.local_timezone),
|
||||
style.timestamp.text.clone(),
|
||||
)
|
||||
.contained()
|
||||
.with_style(style.timestamp.container),
|
||||
.with_style(style.timestamp.container)
|
||||
.flex_float(),
|
||||
)
|
||||
.align_children_center(),
|
||||
)
|
||||
|
|
@ -245,8 +249,12 @@ impl NotificationPanel {
|
|||
.with_children(if let Some(is_accepted) = response {
|
||||
Some(
|
||||
Label::new(
|
||||
if is_accepted { "Accepted" } else { "Declined" },
|
||||
style.button.text.clone(),
|
||||
if is_accepted {
|
||||
"You Accepted"
|
||||
} else {
|
||||
"You Declined"
|
||||
},
|
||||
style.read_text.text.clone(),
|
||||
)
|
||||
.into_any(),
|
||||
)
|
||||
|
|
@ -573,19 +581,34 @@ impl View for NotificationPanel {
|
|||
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> AnyElement<Self> {
|
||||
let theme = theme::current(cx);
|
||||
let style = &theme.notification_panel;
|
||||
let element = if self.client.user_id().is_none() {
|
||||
self.render_sign_in_prompt(&theme, cx)
|
||||
} else if self.notification_list.item_count() == 0 {
|
||||
self.render_empty_state(&theme, cx)
|
||||
} else {
|
||||
List::new(self.notification_list.clone())
|
||||
.contained()
|
||||
.with_style(theme.chat_panel.list)
|
||||
Flex::column()
|
||||
.with_child(
|
||||
Flex::row()
|
||||
.with_child(Label::new("Notifications", style.title.text.clone()))
|
||||
.with_child(ui::svg(&style.title_icon).flex_float())
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.title.container)
|
||||
.constrained()
|
||||
.with_height(style.title_height),
|
||||
)
|
||||
.with_child(
|
||||
List::new(self.notification_list.clone())
|
||||
.contained()
|
||||
.with_style(style.list)
|
||||
.flex(1., true),
|
||||
)
|
||||
.into_any()
|
||||
};
|
||||
element
|
||||
.contained()
|
||||
.with_style(theme.chat_panel.container)
|
||||
.with_style(style.container)
|
||||
.constrained()
|
||||
.with_min_width(150.)
|
||||
.into_any()
|
||||
|
|
@ -675,19 +698,6 @@ impl Panel for NotificationPanel {
|
|||
}
|
||||
}
|
||||
|
||||
fn render_icon_button<V: View>(style: &IconButton, svg_path: &'static str) -> impl Element<V> {
|
||||
Svg::new(svg_path)
|
||||
.with_color(style.color)
|
||||
.constrained()
|
||||
.with_width(style.icon_width)
|
||||
.aligned()
|
||||
.constrained()
|
||||
.with_width(style.button_width)
|
||||
.with_height(style.button_width)
|
||||
.contained()
|
||||
.with_style(style.container)
|
||||
}
|
||||
|
||||
pub struct NotificationToast {
|
||||
notification_id: u64,
|
||||
actor: Option<Arc<User>>,
|
||||
|
|
|
|||
|
|
@ -653,6 +653,9 @@ pub struct ChatPanel {
|
|||
pub struct NotificationPanel {
|
||||
#[serde(flatten)]
|
||||
pub container: ContainerStyle,
|
||||
pub title: ContainedText,
|
||||
pub title_icon: SvgStyle,
|
||||
pub title_height: f32,
|
||||
pub list: ContainerStyle,
|
||||
pub avatar: AvatarStyle,
|
||||
pub avatar_container: ContainerStyle,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { background, text } from "./components"
|
||||
import { background, border, text } from "./components"
|
||||
import { icon_button } from "../component/icon_button"
|
||||
import { useTheme } from "../theme"
|
||||
import { interactive } from "../element"
|
||||
|
||||
export default function chat_panel(): any {
|
||||
export default function (): any {
|
||||
const theme = useTheme()
|
||||
const layer = theme.middle
|
||||
|
||||
|
|
@ -12,12 +12,32 @@ export default function chat_panel(): any {
|
|||
avatar: {
|
||||
icon_width: 24,
|
||||
icon_height: 24,
|
||||
corner_radius: 4,
|
||||
corner_radius: 12,
|
||||
outer_width: 24,
|
||||
outer_corner_radius: 16,
|
||||
outer_corner_radius: 24,
|
||||
},
|
||||
title: {
|
||||
...text(layer, "sans", "default"),
|
||||
padding: { left: 8, right: 8 },
|
||||
border: border(layer, { bottom: true }),
|
||||
},
|
||||
title_height: 32,
|
||||
title_icon: {
|
||||
asset: "icons/feedback.svg",
|
||||
color: text(theme.lowest, "sans", "default").color,
|
||||
dimensions: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
},
|
||||
read_text: {
|
||||
padding: { top: 4, bottom: 4 },
|
||||
...text(layer, "sans", "disabled"),
|
||||
},
|
||||
unread_text: {
|
||||
padding: { top: 4, bottom: 4 },
|
||||
...text(layer, "sans", "base"),
|
||||
},
|
||||
read_text: text(layer, "sans", "disabled"),
|
||||
unread_text: text(layer, "sans", "base"),
|
||||
button: interactive({
|
||||
base: {
|
||||
...text(theme.lowest, "sans", "on", { size: "xs" }),
|
||||
|
|
@ -42,7 +62,12 @@ export default function chat_panel(): any {
|
|||
bottom: 2,
|
||||
},
|
||||
},
|
||||
list: {},
|
||||
list: {
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
icon_button: icon_button({
|
||||
variant: "ghost",
|
||||
color: "variant",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue