From a70817743a14b3b63d4ce6ac80ed414b05674dc3 Mon Sep 17 00:00:00 2001 From: jglad Date: Tue, 28 Jan 2025 18:10:21 +0100 Subject: [PATCH 1/4] #597 add border behind pfp --- .../notedeck_columns/src/ui/profile/picture.rs | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/crates/notedeck_columns/src/ui/profile/picture.rs b/crates/notedeck_columns/src/ui/profile/picture.rs index 1f223a2c..cdf1cd54 100644 --- a/crates/notedeck_columns/src/ui/profile/picture.rs +++ b/crates/notedeck_columns/src/ui/profile/picture.rs @@ -113,9 +113,9 @@ fn pfp_image(ui: &mut egui::Ui, img: &TextureHandle, size: f32) -> egui::Respons #[cfg(feature = "profiling")] puffin::profile_function!(); - //img.show_max_size(ui, egui::vec2(size, size)) - ui.add(egui::Image::new(img).max_width(size)) - //.with_options() + let response = ui.add(egui::Image::new(img).max_width(size)); + draw_profile_border(ui, response.rect.center(), size); + response } fn paint_circle(ui: &mut egui::Ui, size: f32) -> egui::Response { @@ -123,9 +123,21 @@ fn paint_circle(ui: &mut egui::Ui, size: f32) -> egui::Response { ui.painter() .circle_filled(rect.center(), size / 2.0, ui.visuals().weak_text_color()); + draw_profile_border(ui, rect.center(), size); response } +fn draw_profile_border(ui: &mut egui::Ui, center: egui::Pos2, size: f32) { + let border_color = ui.visuals().widgets.noninteractive.bg_stroke.color; + let border_width = 2.0; + + ui.painter().circle_stroke( + center, + size / 2.0, + egui::Stroke::new(border_width, border_color), + ); +} + mod preview { use super::*; use crate::ui; From a0f2521bdd94aac724f16328335773210e9e8710 Mon Sep 17 00:00:00 2001 From: jglad Date: Wed, 29 Jan 2025 18:19:42 +0100 Subject: [PATCH 2/4] replace with full circle border --- .../src/ui/profile/picture.rs | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/crates/notedeck_columns/src/ui/profile/picture.rs b/crates/notedeck_columns/src/ui/profile/picture.rs index cdf1cd54..15eed513 100644 --- a/crates/notedeck_columns/src/ui/profile/picture.rs +++ b/crates/notedeck_columns/src/ui/profile/picture.rs @@ -113,28 +113,29 @@ fn pfp_image(ui: &mut egui::Ui, img: &TextureHandle, size: f32) -> egui::Respons #[cfg(feature = "profiling")] puffin::profile_function!(); - let response = ui.add(egui::Image::new(img).max_width(size)); - draw_profile_border(ui, response.rect.center(), size); + let (rect, response) = ui.allocate_at_least(vec2(size, size), Sense::hover()); + draw_bg_border(ui, rect.center(), size); + ui.put(rect, egui::Image::new(img).max_width(size)); + response } fn paint_circle(ui: &mut egui::Ui, size: f32) -> egui::Response { let (rect, response) = ui.allocate_at_least(vec2(size, size), Sense::hover()); + + draw_bg_border(ui, rect.center(), size); ui.painter() .circle_filled(rect.center(), size / 2.0, ui.visuals().weak_text_color()); - draw_profile_border(ui, rect.center(), size); response } -fn draw_profile_border(ui: &mut egui::Ui, center: egui::Pos2, size: f32) { - let border_color = ui.visuals().widgets.noninteractive.bg_stroke.color; - let border_width = 2.0; - - ui.painter().circle_stroke( +fn draw_bg_border(ui: &mut egui::Ui, center: egui::Pos2, size: f32) { + let border_size = size + 4.0; + ui.painter().circle_filled( center, - size / 2.0, - egui::Stroke::new(border_width, border_color), + border_size / 2.0, + ui.visuals().widgets.noninteractive.bg_stroke.color, ); } From 803f427f7734aa1d353fb76442ee65d9616474c0 Mon Sep 17 00:00:00 2001 From: jglad Date: Thu, 30 Jan 2025 19:14:02 +0100 Subject: [PATCH 3/4] make optional --- .../notedeck_columns/src/ui/column/header.rs | 2 +- crates/notedeck_columns/src/ui/note/mod.rs | 5 ++- crates/notedeck_columns/src/ui/note/post.rs | 8 +++- .../notedeck_columns/src/ui/profile/edit.rs | 2 +- crates/notedeck_columns/src/ui/profile/mod.rs | 4 +- .../src/ui/profile/picture.rs | 41 ++++++++++++------- .../src/ui/profile/preview.rs | 8 +++- crates/notedeck_columns/src/ui/side_panel.rs | 2 +- 8 files changed, 48 insertions(+), 24 deletions(-) diff --git a/crates/notedeck_columns/src/ui/column/header.rs b/crates/notedeck_columns/src/ui/column/header.rs index 727d1f9e..bdb83bf8 100644 --- a/crates/notedeck_columns/src/ui/column/header.rs +++ b/crates/notedeck_columns/src/ui/column/header.rs @@ -398,7 +398,7 @@ impl<'a> NavTitle<'a> { .as_ref() .ok() .and_then(move |p| { - Some(ui::ProfilePic::from_profile(self.img_cache, p)?.size(pfp_size)) + Some(ui::ProfilePic::from_profile(self.img_cache, p)?.size(pfp_size).border(2.0)) }) } diff --git a/crates/notedeck_columns/src/ui/note/mod.rs b/crates/notedeck_columns/src/ui/note/mod.rs index dda30143..08e1dffa 100644 --- a/crates/notedeck_columns/src/ui/note/mod.rs +++ b/crates/notedeck_columns/src/ui/note/mod.rs @@ -228,7 +228,7 @@ impl<'a> NoteView<'a> { anim_speed, ); - ui.put(rect, ui::ProfilePic::new(self.img_cache, pic).size(size)) + ui.put(rect, ui::ProfilePic::new(self.img_cache, pic).size(size).border(2.0)) .on_hover_ui_at_pointer(|ui| { ui.set_max_width(300.0); ui.add(ui::ProfilePreview::new( @@ -246,7 +246,8 @@ impl<'a> NoteView<'a> { None => ui .add( ui::ProfilePic::new(self.img_cache, ui::ProfilePic::no_pfp_url()) - .size(pfp_size), + .size(pfp_size) + .border(2.0), ) .interact(sense), } diff --git a/crates/notedeck_columns/src/ui/note/post.rs b/crates/notedeck_columns/src/ui/note/post.rs index e4283d7c..03d3c793 100644 --- a/crates/notedeck_columns/src/ui/note/post.rs +++ b/crates/notedeck_columns/src/ui/note/post.rs @@ -113,13 +113,17 @@ impl<'a> PostView<'a> { .get_profile_by_pubkey(txn, self.poster.pubkey.bytes()) .as_ref() .ok() - .and_then(|p| Some(ui::ProfilePic::from_profile(self.img_cache, p)?.size(pfp_size))); + .and_then(|p| Some(ui::ProfilePic::from_profile(self.img_cache, p)? + .size(pfp_size) + .border(2.0))); if let Some(pfp) = poster_pfp { ui.add(pfp); } else { ui.add( - ui::ProfilePic::new(self.img_cache, ui::ProfilePic::no_pfp_url()).size(pfp_size), + ui::ProfilePic::new(self.img_cache, ui::ProfilePic::no_pfp_url()) + .size(pfp_size) + .border(2.0), ); } diff --git a/crates/notedeck_columns/src/ui/profile/edit.rs b/crates/notedeck_columns/src/ui/profile/edit.rs index ec29c3dc..1be8b951 100644 --- a/crates/notedeck_columns/src/ui/profile/edit.rs +++ b/crates/notedeck_columns/src/ui/profile/edit.rs @@ -62,7 +62,7 @@ impl<'a> EditProfileView<'a> { }); ui.put( pfp_rect, - ProfilePic::new(self.img_cache, pfp_url).size(size), + ProfilePic::new(self.img_cache, pfp_url).size(size).border(2.0), ); in_frame(ui, |ui| { diff --git a/crates/notedeck_columns/src/ui/profile/mod.rs b/crates/notedeck_columns/src/ui/profile/mod.rs index 6fd094e4..25260720 100644 --- a/crates/notedeck_columns/src/ui/profile/mod.rs +++ b/crates/notedeck_columns/src/ui/profile/mod.rs @@ -149,7 +149,9 @@ impl<'a> ProfileView<'a> { ui.horizontal(|ui| { ui.put( pfp_rect, - ProfilePic::new(self.img_cache, get_profile_url(Some(&profile))).size(size), + ProfilePic::new(self.img_cache, get_profile_url(Some(&profile))) + .size(size) + .border(2.0), ); if ui.add(copy_key_widget(&pfp_rect)).clicked() { diff --git a/crates/notedeck_columns/src/ui/profile/picture.rs b/crates/notedeck_columns/src/ui/profile/picture.rs index 15eed513..138245be 100644 --- a/crates/notedeck_columns/src/ui/profile/picture.rs +++ b/crates/notedeck_columns/src/ui/profile/picture.rs @@ -10,18 +10,19 @@ pub struct ProfilePic<'cache, 'url> { cache: &'cache mut ImageCache, url: &'url str, size: f32, + border: Option, } impl egui::Widget for ProfilePic<'_, '_> { fn ui(self, ui: &mut egui::Ui) -> egui::Response { - render_pfp(ui, self.cache, self.url, self.size) + render_pfp(ui, self.cache, self.url, self.size, self.border) } } impl<'cache, 'url> ProfilePic<'cache, 'url> { pub fn new(cache: &'cache mut ImageCache, url: &'url str) -> Self { let size = Self::default_size(); - ProfilePic { cache, url, size } + ProfilePic { cache, url, size, border: None } } pub fn from_profile( @@ -60,6 +61,12 @@ impl<'cache, 'url> ProfilePic<'cache, 'url> { self.size = size; self } + + #[inline] + pub fn border(mut self, width: f32) -> Self { + self.border = Some(width); + self + } } fn render_pfp( @@ -67,6 +74,7 @@ fn render_pfp( img_cache: &mut ImageCache, url: &str, ui_size: f32, + border: Option, ) -> egui::Response { #[cfg(feature = "profiling")] puffin::profile_function!(); @@ -81,7 +89,7 @@ fn render_pfp( } match img_cache.map()[url].ready() { - None => paint_circle(ui, ui_size), + None => paint_circle(ui, ui_size, border), // Failed to fetch profile! Some(Err(_err)) => { @@ -97,41 +105,46 @@ fn render_pfp( } match img_cache.map().get(url).unwrap().ready() { - None => paint_circle(ui, ui_size), + None => paint_circle(ui, ui_size, border), Some(Err(_e)) => { //error!("Image load error: {:?}", e); - paint_circle(ui, ui_size) + paint_circle(ui, ui_size, border) } - Some(Ok(img)) => pfp_image(ui, img, ui_size), + Some(Ok(img)) => pfp_image(ui, img, ui_size, border), } } - Some(Ok(img)) => pfp_image(ui, img, ui_size), + Some(Ok(img)) => pfp_image(ui, img, ui_size, border), } } -fn pfp_image(ui: &mut egui::Ui, img: &TextureHandle, size: f32) -> egui::Response { +fn pfp_image(ui: &mut egui::Ui, img: &TextureHandle, size: f32, border: Option) + -> egui::Response { #[cfg(feature = "profiling")] puffin::profile_function!(); let (rect, response) = ui.allocate_at_least(vec2(size, size), Sense::hover()); - draw_bg_border(ui, rect.center(), size); + if let Some(border_width) = border { + draw_bg_border(ui, rect.center(), size, border_width); + } ui.put(rect, egui::Image::new(img).max_width(size)); response } -fn paint_circle(ui: &mut egui::Ui, size: f32) -> egui::Response { +fn paint_circle(ui: &mut egui::Ui, size: f32, border: Option) -> egui::Response { let (rect, response) = ui.allocate_at_least(vec2(size, size), Sense::hover()); - draw_bg_border(ui, rect.center(), size); + if let Some(border_width) = border { + draw_bg_border(ui, rect.center(), size, border_width); + } ui.painter() .circle_filled(rect.center(), size / 2.0, ui.visuals().weak_text_color()); response } -fn draw_bg_border(ui: &mut egui::Ui, center: egui::Pos2, size: f32) { - let border_size = size + 4.0; +fn draw_bg_border(ui: &mut egui::Ui, center: egui::Pos2, size: f32, border_width: f32) { + let border_size = size + (border_width * 2.0); ui.painter().circle_filled( center, border_size / 2.0, @@ -185,7 +198,7 @@ mod preview { anim_speed, ); - ui.put(rect, ui::ProfilePic::new(app.img_cache, url).size(size)) + ui.put(rect, ui::ProfilePic::new(app.img_cache, url).size(size).border(2.0)) .on_hover_ui_at_pointer(|ui| { ui.set_max_width(300.0); ui.add(ui::ProfilePreview::new(&profile, app.img_cache)); diff --git a/crates/notedeck_columns/src/ui/profile/preview.rs b/crates/notedeck_columns/src/ui/profile/preview.rs index c52655d5..62081591 100644 --- a/crates/notedeck_columns/src/ui/profile/preview.rs +++ b/crates/notedeck_columns/src/ui/profile/preview.rs @@ -39,7 +39,9 @@ impl<'a, 'cache> ProfilePreview<'a, 'cache> { ui.put( pfp_rect, - ProfilePic::new(self.cache, get_profile_url(Some(self.profile))).size(size), + ProfilePic::new(self.cache, get_profile_url(Some(self.profile))) + .size(size) + .border(2.0), ); ui.add(display_name_widget( get_display_name(Some(self.profile)), @@ -89,7 +91,9 @@ impl egui::Widget for SimpleProfilePreview<'_, '_> { fn ui(self, ui: &mut egui::Ui) -> egui::Response { Frame::none() .show(ui, |ui| { - ui.add(ProfilePic::new(self.cache, get_profile_url(self.profile)).size(48.0)); + ui.add(ProfilePic::new(self.cache, get_profile_url(self.profile)) + .size(48.0) + .border(1.5)); ui.vertical(|ui| { ui.add(display_name_widget(get_display_name(self.profile), true)); if !self.is_nsec { diff --git a/crates/notedeck_columns/src/ui/side_panel.rs b/crates/notedeck_columns/src/ui/side_panel.rs index aa67bed7..cb1e5b62 100644 --- a/crates/notedeck_columns/src/ui/side_panel.rs +++ b/crates/notedeck_columns/src/ui/side_panel.rs @@ -266,7 +266,7 @@ impl<'a> DesktopSidePanel<'a> { let txn = nostrdb::Transaction::new(self.ndb).expect("should be able to create txn"); let profile_url = get_account_url(&txn, self.ndb, self.selected_account); - let widget = ProfilePic::new(self.img_cache, profile_url).size(cur_pfp_size); + let widget = ProfilePic::new(self.img_cache, profile_url).size(cur_pfp_size).border(2.0); ui.put(helper.get_animation_rect(), widget); From cd72cc36e8388be318f49a3fac152098de5730ce Mon Sep 17 00:00:00 2001 From: jglad Date: Fri, 31 Jan 2025 08:41:25 +0100 Subject: [PATCH 4/4] fix formatting --- .../notedeck_columns/src/ui/column/header.rs | 6 +++- crates/notedeck_columns/src/ui/note/mod.rs | 21 ++++++++----- crates/notedeck_columns/src/ui/note/post.rs | 10 +++++-- .../notedeck_columns/src/ui/profile/edit.rs | 4 ++- .../src/ui/profile/picture.rs | 30 ++++++++++++++----- .../src/ui/profile/preview.rs | 8 +++-- crates/notedeck_columns/src/ui/side_panel.rs | 4 ++- 7 files changed, 58 insertions(+), 25 deletions(-) diff --git a/crates/notedeck_columns/src/ui/column/header.rs b/crates/notedeck_columns/src/ui/column/header.rs index bdb83bf8..05c27766 100644 --- a/crates/notedeck_columns/src/ui/column/header.rs +++ b/crates/notedeck_columns/src/ui/column/header.rs @@ -398,7 +398,11 @@ impl<'a> NavTitle<'a> { .as_ref() .ok() .and_then(move |p| { - Some(ui::ProfilePic::from_profile(self.img_cache, p)?.size(pfp_size).border(2.0)) + Some( + ui::ProfilePic::from_profile(self.img_cache, p)? + .size(pfp_size) + .border(2.0), + ) }) } diff --git a/crates/notedeck_columns/src/ui/note/mod.rs b/crates/notedeck_columns/src/ui/note/mod.rs index 08e1dffa..c4cedecb 100644 --- a/crates/notedeck_columns/src/ui/note/mod.rs +++ b/crates/notedeck_columns/src/ui/note/mod.rs @@ -228,14 +228,19 @@ impl<'a> NoteView<'a> { anim_speed, ); - ui.put(rect, ui::ProfilePic::new(self.img_cache, pic).size(size).border(2.0)) - .on_hover_ui_at_pointer(|ui| { - ui.set_max_width(300.0); - ui.add(ui::ProfilePreview::new( - profile.as_ref().unwrap(), - self.img_cache, - )); - }); + ui.put( + rect, + ui::ProfilePic::new(self.img_cache, pic) + .size(size) + .border(2.0), + ) + .on_hover_ui_at_pointer(|ui| { + ui.set_max_width(300.0); + ui.add(ui::ProfilePreview::new( + profile.as_ref().unwrap(), + self.img_cache, + )); + }); if resp.hovered() || resp.clicked() { ui::show_pointer(ui); diff --git a/crates/notedeck_columns/src/ui/note/post.rs b/crates/notedeck_columns/src/ui/note/post.rs index 03d3c793..3d10f40f 100644 --- a/crates/notedeck_columns/src/ui/note/post.rs +++ b/crates/notedeck_columns/src/ui/note/post.rs @@ -113,9 +113,13 @@ impl<'a> PostView<'a> { .get_profile_by_pubkey(txn, self.poster.pubkey.bytes()) .as_ref() .ok() - .and_then(|p| Some(ui::ProfilePic::from_profile(self.img_cache, p)? - .size(pfp_size) - .border(2.0))); + .and_then(|p| { + Some( + ui::ProfilePic::from_profile(self.img_cache, p)? + .size(pfp_size) + .border(2.0), + ) + }); if let Some(pfp) = poster_pfp { ui.add(pfp); diff --git a/crates/notedeck_columns/src/ui/profile/edit.rs b/crates/notedeck_columns/src/ui/profile/edit.rs index 1be8b951..b8107840 100644 --- a/crates/notedeck_columns/src/ui/profile/edit.rs +++ b/crates/notedeck_columns/src/ui/profile/edit.rs @@ -62,7 +62,9 @@ impl<'a> EditProfileView<'a> { }); ui.put( pfp_rect, - ProfilePic::new(self.img_cache, pfp_url).size(size).border(2.0), + ProfilePic::new(self.img_cache, pfp_url) + .size(size) + .border(2.0), ); in_frame(ui, |ui| { diff --git a/crates/notedeck_columns/src/ui/profile/picture.rs b/crates/notedeck_columns/src/ui/profile/picture.rs index 138245be..64d06d59 100644 --- a/crates/notedeck_columns/src/ui/profile/picture.rs +++ b/crates/notedeck_columns/src/ui/profile/picture.rs @@ -22,7 +22,12 @@ impl egui::Widget for ProfilePic<'_, '_> { impl<'cache, 'url> ProfilePic<'cache, 'url> { pub fn new(cache: &'cache mut ImageCache, url: &'url str) -> Self { let size = Self::default_size(); - ProfilePic { cache, url, size, border: None } + ProfilePic { + cache, + url, + size, + border: None, + } } pub fn from_profile( @@ -117,8 +122,12 @@ fn render_pfp( } } -fn pfp_image(ui: &mut egui::Ui, img: &TextureHandle, size: f32, border: Option) - -> egui::Response { +fn pfp_image( + ui: &mut egui::Ui, + img: &TextureHandle, + size: f32, + border: Option, +) -> egui::Response { #[cfg(feature = "profiling")] puffin::profile_function!(); @@ -198,11 +207,16 @@ mod preview { anim_speed, ); - ui.put(rect, ui::ProfilePic::new(app.img_cache, url).size(size).border(2.0)) - .on_hover_ui_at_pointer(|ui| { - ui.set_max_width(300.0); - ui.add(ui::ProfilePreview::new(&profile, app.img_cache)); - }); + ui.put( + rect, + ui::ProfilePic::new(app.img_cache, url) + .size(size) + .border(2.0), + ) + .on_hover_ui_at_pointer(|ui| { + ui.set_max_width(300.0); + ui.add(ui::ProfilePreview::new(&profile, app.img_cache)); + }); } }); }); diff --git a/crates/notedeck_columns/src/ui/profile/preview.rs b/crates/notedeck_columns/src/ui/profile/preview.rs index 62081591..f637b81f 100644 --- a/crates/notedeck_columns/src/ui/profile/preview.rs +++ b/crates/notedeck_columns/src/ui/profile/preview.rs @@ -91,9 +91,11 @@ impl egui::Widget for SimpleProfilePreview<'_, '_> { fn ui(self, ui: &mut egui::Ui) -> egui::Response { Frame::none() .show(ui, |ui| { - ui.add(ProfilePic::new(self.cache, get_profile_url(self.profile)) - .size(48.0) - .border(1.5)); + ui.add( + ProfilePic::new(self.cache, get_profile_url(self.profile)) + .size(48.0) + .border(2.0), + ); ui.vertical(|ui| { ui.add(display_name_widget(get_display_name(self.profile), true)); if !self.is_nsec { diff --git a/crates/notedeck_columns/src/ui/side_panel.rs b/crates/notedeck_columns/src/ui/side_panel.rs index cb1e5b62..c4fbc9f0 100644 --- a/crates/notedeck_columns/src/ui/side_panel.rs +++ b/crates/notedeck_columns/src/ui/side_panel.rs @@ -266,7 +266,9 @@ impl<'a> DesktopSidePanel<'a> { let txn = nostrdb::Transaction::new(self.ndb).expect("should be able to create txn"); let profile_url = get_account_url(&txn, self.ndb, self.selected_account); - let widget = ProfilePic::new(self.img_cache, profile_url).size(cur_pfp_size).border(2.0); + let widget = ProfilePic::new(self.img_cache, profile_url) + .size(cur_pfp_size) + .border(2.0); ui.put(helper.get_animation_rect(), widget);