Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added unread message count badge on the Jump to bottom button (#131) #182

Closed
wants to merge 5 commits into from
Closed

Added unread message count badge on the Jump to bottom button (#131) #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
24be468
added unread_message_badge
alanpoon Oct 10, 2024
c1d1ab6
remove unneccesary changes
alanpoon Oct 11, 2024
35c5977
add jump to top
alanpoon Oct 11, 2024
bc2aa8c
added unread_notification_badge
alanpoon Oct 11, 2024
a9e4945
Merge branch 'main' into jtb_change_in_timeline_item#131
alanpoon Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions resources/icon_jump_to_top.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 108 additions & 10 deletions src/home/room_screen.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ live_design! {
import crate::shared::avatar::Avatar;
import crate::shared::text_or_image::TextOrImage;
import crate::shared::html_or_plaintext::*;
import crate::shared::icon_button::*;
import crate::profile::user_profile::UserProfileSlidingPane;
import crate::shared::typing_animation::TypingAnimation;
import crate::shared::icon_button::RobrixIconButton;
Expand Down Expand Up @@ -649,15 +650,16 @@ live_design! {
jump_to_bottom_view = <View> {
width: Fill,
height: Fill,
flow: Down,
flow: Overlay,
align: {x: 1.0, y: 1.0},
margin: {right: 15.0, bottom: 15.0},
margin: {right: 15.0, bottom: 0},
visible: false,

jump_to_bottom_button = <IconButton> {
jump_button = <RobrixIconButton> {
width: 50, height: 50,
draw_icon: {svg_file: (ICO_JUMP_TO_BOTTOM)},
icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
padding: 15,
margin: {bottom : 20}
icon_walk: {width: 20, height: 10, margin: {top: 0, right: 100} }
// draw a circular background for the button
draw_bg: {
instance background_color: #edededee,
Expand All @@ -668,6 +670,79 @@ live_design! {
sdf.fill_keep(self.background_color);
return sdf.result
}

}
draw_icon: {
instance color: #000
instance color_hover: #000
// 180.0: point upwards
uniform rotation_angle: 180.0,
}
animator: {
jump_button = {
default: down
down = {
redraw: true,
from: { all: Forward {duration: 2.0} }
ease: ExpDecay {d1: 0.80, d2: 0.97}
apply: { draw_icon: {rotation_angle: 0.0} }
}
up = {
redraw: true,
from: { all: Forward {duration: 0.5} }
ease: ExpDecay {d1: 0.80, d2: 0.97}
apply: { draw_icon: {rotation_angle: 180.0} }
}
}
}
}
// Badge overlay for unread messages
unread_notification_badge = <View> {
width: 12, height: 12,
abs_pos: vec2(-20.0, 15.0)
visible: true,
show_bg: true,
draw_bg: {
instance background_color: (#58DC6C)

fn pixel(self) -> vec4 {
let sdf = Sdf2d::viewport(self.pos * self.rect_size);
let c = self.rect_size * 0.5;
sdf.circle(c.x, c.x, c.x);
sdf.fill_keep(self.background_color);
return sdf.result;
}
}
}
// Badge overlay for unread messages
unread_message_badge = <View> {
width: 20, height: 20,
abs_pos: vec2(-15.0, 72.0)
visible: true,
show_bg: true,
draw_bg: {
instance background_color: (#5D5E5E)

fn pixel(self) -> vec4 {
let sdf = Sdf2d::viewport(self.pos * self.rect_size);
let c = self.rect_size * 0.5;
sdf.circle(c.x, c.x, c.x);
sdf.fill_keep(self.background_color);
return sdf.result;
}
}

// Text to display the unread message count
label = <Label> {
width: Fill,
height: Fill,
text: "0",
margin: {top: 4.0, left: 5.0},
draw_text:{
color: #ffffff,
wrap: Ellipsis,
text_style: <USERNAME_TEXT_STYLE>{ font_size: 8. }
}
}
}
}
Expand Down Expand Up @@ -1275,14 +1350,16 @@ impl Widget for RoomScreen {

const SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS: usize = 30;
const SCROLL_TO_BOTTOM_SPEED: f64 = 90.0;
if self.button(id!(jump_to_bottom_button)).clicked(&actions) {
portal_list.smooth_scroll_to_end(

if let Some(ref mut but) = self.button(id!(jump_button)).borrow_mut() {
if but.clicked(&actions) {
portal_list.smooth_scroll_to_end(
cx,
SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS,
SCROLL_TO_BOTTOM_SPEED,
);
jump_to_bottom_view.set_visible(false);
self.redraw(cx);
);
jump_to_bottom_view.set_visible(false);
}
}
}

Expand Down Expand Up @@ -1454,6 +1531,7 @@ impl RoomScreen {
/// Redraws this RoomScreen view if any updates were applied.
fn process_timeline_updates(&mut self, cx: &mut Cx, portal_list: &PortalListRef) {
let top_space = self.view(id!(top_space));
let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
let curr_first_id = portal_list.first_id();
let Some(tl) = self.tl_state.as_mut() else { return };

Expand Down Expand Up @@ -1539,6 +1617,26 @@ impl RoomScreen {
}
tl.items = new_items;
done_loading = true;
// Set number of unread messages to unread_notification_badge
if let Some(room_id) = &self.room_id {
if let Some(num_unread)= get_client()
.and_then(|c| c.get_room(room_id)).map(|room| room.num_unread_messages()) {
println!("num_unread {:?}", num_unread);
let unread_notifications_badge = jump_to_bottom_view.view(id!(unread_notifications_badge));
let unread_message_badge = jump_to_bottom_view.view(id!(unread_message_badge));
if num_unread > 0 {
unread_message_badge.label(id!(label)).set_text(&format!("{}",num_unread));
unread_message_badge.set_visible(true);
unread_notifications_badge.set_visible(false);
if let Some(ref mut but) = jump_to_bottom_view.button(id!(jump_button)).borrow_mut() {
but.animator_play(cx, id!(jump_button.down));
}
} else {
unread_message_badge.set_visible(false);
}
}
}

}
TimelineUpdate::PaginationRunning(direction) => {
if direction == PaginationDirection::Backwards {
Expand Down