actionbar: remove border on reply button, add expand animation

Signed-off-by: William Casarin <[email protected]>
damus-io · Jun 13, 2024 · c4e0c71 · c4e0c71
1 parent db1642b
commit c4e0c71
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/src/ui/anim.rs b/src/ui/anim.rs
@@ -4,16 +4,16 @@ pub fn hover_expand(
     size: f32,
     expand_size: f32,
     anim_speed: f32,
-) -> (egui::Rect, f32) {
+) -> (egui::Rect, f32, egui::Response) {
     // Allocate space for the profile picture with a fixed size
     let default_size = size + expand_size;
     let (rect, response) =
-        ui.allocate_exact_size(egui::vec2(default_size, default_size), egui::Sense::hover());
+        ui.allocate_exact_size(egui::vec2(default_size, default_size), egui::Sense::click());
 
     let val = ui
         .ctx()
         .animate_bool_with_time(id, response.hovered(), anim_speed);
 
     let size = size + val * expand_size;
-    (rect, size)
+    (rect, size, response)
 }
diff --git a/src/ui/note/mod.rs b/src/ui/note/mod.rs
@@ -207,7 +207,7 @@ impl<'a> Note<'a> {
                 if self.app.is_mobile() {
                     ui.add(ui::ProfilePic::new(&mut self.app.img_cache, pic));
                 } else {
-                    let (rect, size) = ui::anim::hover_expand(
+                    let (rect, size, _resp) = ui::anim::hover_expand(
                         ui,
                         egui::Id::new((profile_key, note_key)),
                         pfp_size,
@@ -295,7 +295,7 @@ impl<'a> Note<'a> {
                     ));
 
                     if self.options().has_actionbar() {
-                        note_action = render_note_actionbar(ui).inner;
+                        note_action = render_note_actionbar(ui, note_key).inner;
                     }
                 });
             })
@@ -313,7 +313,10 @@ pub enum BarAction {
     Reply,
 }
 
-fn render_note_actionbar(ui: &mut egui::Ui) -> egui::InnerResponse<Option<BarAction>> {
+fn render_note_actionbar(
+    ui: &mut egui::Ui,
+    note_key: NoteKey,
+) -> egui::InnerResponse<Option<BarAction>> {
     ui.horizontal(|ui| {
         let img_data = if ui.style().visuals.dark_mode {
             egui::include_image!("../../../assets/icons/reply.png")
@@ -322,16 +325,25 @@ fn render_note_actionbar(ui: &mut egui::Ui) -> egui::InnerResponse<Option<BarAct
         };
 
         ui.spacing_mut().button_padding = egui::vec2(0.0, 0.0);
-        if ui
-            .add(
-                egui::Button::image(egui::Image::new(img_data).max_width(10.0))
-                    //.stroke(egui::Stroke::NONE)
-                    .frame(false)
-                    .stroke(egui::Stroke::NONE)
-                    .fill(ui.style().visuals.panel_fill),
-            )
-            .clicked()
-        {
+
+        let button_size = 10.0;
+        let expand_size = 5.0;
+        let anim_speed = 0.05;
+
+        let (rect, size, resp) = ui::anim::hover_expand(
+            ui,
+            ui.id().with(("reply_anim", note_key)),
+            button_size,
+            expand_size,
+            anim_speed,
+        );
+
+        // align rect to note contents
+        let rect = rect.translate(egui::vec2(-(expand_size / 2.0), 0.0));
+
+        ui.put(rect, egui::Image::new(img_data).max_width(size));
+
+        if resp.clicked() {
             Some(BarAction::Reply)
         } else {
             None

diff --git a/src/ui/profile/picture.rs b/src/ui/profile/picture.rs
@@ -164,7 +164,7 @@ mod preview {
                     let expand_size = 10.0;
                     let anim_speed = 0.05;
 
-                    let (rect, size) = ui::anim::hover_expand(
+                    let (rect, size, _resp) = ui::anim::hover_expand(
                         ui,
                         egui::Id::new(profile.key().unwrap()),
                         ui::ProfilePic::default_size(),