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

notification panel: rework time formatting (#8997)

Browse source 
Follow up of #7994 to rework the notification panel timestamps.
This PR also includes some of the changes @evrsen proposed in #8996 
Here is what it looks like now:


https://github.com/zed-industries/zed/assets/53836821/d85450e7-eab6-4fe7-bd11-1d76c0e87258

Release Notes:
- Reworked date time formatting in the chat and the notification panel
- Added hover style to notifications and hovering tooltip on timestamps

---------

Co-authored-by: Evren Sen <146845123+evrsen@users.noreply.github.com>
This commit is contained in:
Bennet Bo Fenner 2024-03-13 04:02:04 +01:00 • committed by GitHub
parent a105b5f215
commit fb83cf2042
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 422 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

3
crates/collab_ui/src/chat_panel.rs
View file

@ -493,9 +493,10 @@ impl ChatPanel {
)
.child(
Label::new(time_format::format_localized_timestamp(
OffsetDateTime::now_utc(),
message.timestamp,
OffsetDateTime::now_utc(),
self.local_timezone,
time_format::TimestampFormat::EnhancedAbsolute,
))
.size(LabelSize::Small)
.color(Color::Muted),

60
crates/collab_ui/src/notification_panel.rs
View file

@ -19,7 +19,7 @@ use serde::{Deserialize, Serialize};
use settings::{Settings, SettingsStore};
use std::{sync::Arc, time::Duration};
use time::{OffsetDateTime, UtcOffset};
use ui::{h_flex, prelude::*, v_flex, Avatar, Button, Icon, IconButton, IconName, Label};
use ui::{h_flex, prelude::*, v_flex, Avatar, Button, Icon, IconButton, IconName, Label, Tooltip};
use util::{ResultExt, TryFutureExt};
use workspace::{
dock::{DockPosition, Panel, PanelEvent},
@ -228,6 +228,20 @@ impl NotificationPanel {
self.did_render_notification(notification_id, &notification, cx);
}
let relative_timestamp = time_format::format_localized_timestamp(
timestamp,
now,
self.local_timezone,
time_format::TimestampFormat::Relative,
);
let absolute_timestamp = time_format::format_localized_timestamp(
timestamp,
now,
self.local_timezone,
time_format::TimestampFormat::Absolute,
);
Some(
div()
.id(ix)
@ -237,6 +251,7 @@ impl NotificationPanel {
.px_2()
.py_1()
.gap_2()
.hover(|style| style.bg(cx.theme().colors().element_hover))
.when(can_navigate, |el| {
el.cursor(CursorStyle::PointingHand).on_click({
let notification = notification.clone();
@ -261,12 +276,17 @@ impl NotificationPanel {
.child(
h_flex()
.child(
Label::new(format_timestamp(
timestamp,
now,
self.local_timezone,
))
.color(Color::Muted),
div()
.id("notification_timestamp")
.hover(|style| {
style
.bg(cx.theme().colors().element_selected)
.rounded_md()
})
.child(Label::new(relative_timestamp).color(Color::Muted))
.tooltip(move |cx| {
Tooltip::text(absolute_timestamp.clone(), cx)
}),
)
.children(if let Some(is_accepted) = response {
Some(div().flex().flex_grow().justify_end().child(Label::new(
@ -757,29 +777,3 @@ impl Render for NotificationToast {
}
impl EventEmitter<DismissEvent> for NotificationToast {}
fn format_timestamp(
mut timestamp: OffsetDateTime,
mut now: OffsetDateTime,
local_timezone: UtcOffset,
) -> String {
timestamp = timestamp.to_offset(local_timezone);
now = now.to_offset(local_timezone);
let today = now.date();
let date = timestamp.date();
if date == today {
let difference = now - timestamp;
if difference >= Duration::from_secs(3600) {
format!("{}h", difference.whole_seconds() / 3600)
} else if difference >= Duration::from_secs(60) {
format!("{}m", difference.whole_seconds() / 60)
} else {
"just now".to_string()
}
} else if date.next_day() == Some(today) {
"yesterday".to_string()
} else {
format!("{:02}/{}/{}", date.month() as u32, date.day(), date.year())
}
}