Merge 'add border behind pfp' #597

Hello new contributor! jglad (4): #597 add border behind pfp replace with full circle border make optional fix formatting
damus-io · Feb 4, 2025 · 635c977 · 635c977
2 parents 623b461 + cd72cc3
commit 635c977
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 34 deletions.
diff --git 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))
+                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
@@ -228,14 +228,19 @@ impl<'a> NoteView<'a> {
                     anim_speed,
                 );
 
-                ui.put(rect, ui::ProfilePic::new(self.img_cache, pic).size(size))
-                    .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);
@@ -246,7 +251,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
@@ -113,13 +113,21 @@ 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
@@ -62,7 +62,9 @@ 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
@@ -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
@@ -10,18 +10,24 @@ pub struct ProfilePic<'cache, 'url> {
     cache: &'cache mut ImageCache,
     url: &'url str,
     size: f32,
+    border: Option<f32>,
 }
 
 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,13 +66,20 @@ 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(
     ui: &mut egui::Ui,
     img_cache: &mut ImageCache,
     url: &str,
     ui_size: f32,
+    border: Option<f32>,
 ) -> egui::Response {
     #[cfg(feature = "profiling")]
     puffin::profile_function!();
@@ -81,7 +94,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,35 +110,57 @@ 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<f32>,
+) -> egui::Response {
     #[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 (rect, response) = ui.allocate_at_least(vec2(size, size), Sense::hover());
+    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<f32>) -> egui::Response {
     let (rect, response) = ui.allocate_at_least(vec2(size, size), Sense::hover());
+
+    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, border_width: f32) {
+    let border_size = size + (border_width * 2.0);
+    ui.painter().circle_filled(
+        center,
+        border_size / 2.0,
+        ui.visuals().widgets.noninteractive.bg_stroke.color,
+    );
+}
+
 mod preview {
     use super::*;
     use crate::ui;
@@ -172,11 +207,16 @@ mod preview {
                             anim_speed,
                         );
 
-                        ui.put(rect, ui::ProfilePic::new(app.img_cache, url).size(size))
-                            .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
@@ -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,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));
+                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
@@ -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);
+        let widget = ProfilePic::new(self.img_cache, profile_url)
+            .size(cur_pfp_size)
+            .border(2.0);
 
         ui.put(helper.get_animation_rect(), widget);