git_ui: Fix graph icon button design in the panel (#49099)

Danilo Leal created 2 months ago

Adding the Git Graph icon and adjusting button sizing, spacing, and
positioning within the Git panel.

Release Notes:

- N/A

Change summary

assets/icons/git_graph.svg     |  4 +
crates/git_ui/src/git_panel.rs | 80 ++++++++++++++++++-----------------
crates/icons/src/icons.rs      |  1 
3 files changed, 47 insertions(+), 38 deletions(-)

Detailed changes

assets/icons/git_graph.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 3V11.8889C3 12.1836 3.11706 12.4662 3.32544 12.6746C3.53381 12.8829 3.81643 13 4.11111 13H13" stroke="#C6CAD0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.8889 6.33333L9.11112 9.11111L6.8889 6.88888L5.22223 8.55555" stroke="#C6CAD0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

crates/git_ui/src/git_panel.rs

@@ -4478,10 +4478,10 @@ impl GitPanel {
                 .child(
                     div()
                         .id("commit-msg-hover")
-                        .px_1()
                         .cursor_pointer()
-                        .line_clamp(1)
+                        .px_1()
                         .rounded_sm()
+                        .line_clamp(1)
                         .hover(|s| s.bg(cx.theme().colors().element_hover))
                         .child(
                             Label::new(commit.subject.clone())
@@ -4517,42 +4517,46 @@ impl GitPanel {
                             }
                         }),
                 )
-                .when(commit.has_parent, |this| {
-                    let has_unstaged = self.has_unstaged_changes();
-                    this.pr_2().child(
-                        h_flex().gap_1().child(
-                            panel_icon_button("undo", IconName::Undo)
-                                .icon_size(IconSize::XSmall)
-                                .icon_color(Color::Muted)
-                                .tooltip(move |_window, cx| {
-                                    Tooltip::with_meta(
-                                        "Uncommit",
-                                        Some(&git::Uncommit),
-                                        if has_unstaged {
-                                            "git reset HEAD^ --soft"
-                                        } else {
-                                            "git reset HEAD^"
-                                        },
-                                        cx,
-                                    )
-                                })
-                                .on_click(
-                                    cx.listener(|this, _, window, cx| this.uncommit(window, cx)),
-                                ),
-                        ),
-                    )
-                })
-                .when(window.is_action_available(&Open, cx), |this| {
-                    this.child(
-                        panel_icon_button("git-graph-button", IconName::ListTree)
-                            .icon_size(IconSize::XSmall)
-                            .icon_color(Color::Muted)
-                            .tooltip(|_window, cx| Tooltip::for_action("Open Git Graph", &Open, cx))
-                            .on_click(|_, window, cx| {
-                                window.dispatch_action(Open.boxed_clone(), cx)
-                            }),
-                    )
-                }),
+                .child(
+                    h_flex()
+                        .gap_0p5()
+                        .when(commit.has_parent, |this| {
+                            let has_unstaged = self.has_unstaged_changes();
+                            this.child(
+                                panel_icon_button("undo", IconName::Undo)
+                                    .icon_size(IconSize::Small)
+                                    .tooltip(move |_window, cx| {
+                                        Tooltip::with_meta(
+                                            "Uncommit",
+                                            Some(&git::Uncommit),
+                                            if has_unstaged {
+                                                "git reset HEAD^ --soft"
+                                            } else {
+                                                "git reset HEAD^"
+                                            },
+                                            cx,
+                                        )
+                                    })
+                                    .on_click(
+                                        cx.listener(|this, _, window, cx| {
+                                            this.uncommit(window, cx)
+                                        }),
+                                    ),
+                            )
+                        })
+                        .when(window.is_action_available(&Open, cx), |this| {
+                            this.child(
+                                panel_icon_button("git-graph-button", IconName::GitGraph)
+                                    .icon_size(IconSize::Small)
+                                    .tooltip(|_window, cx| {
+                                        Tooltip::for_action("Open Git Graph", &Open, cx)
+                                    })
+                                    .on_click(|_, window, cx| {
+                                        window.dispatch_action(Open.boxed_clone(), cx)
+                                    }),
+                            )
+                        }),
+                ),
         )
     }
 

crates/icons/src/icons.rs

@@ -142,6 +142,7 @@ pub enum IconName {
     GitBranch,
     GitBranchAlt,
     GitBranchPlus,
+    GitGraph,
     Github,
     Hash,
     HistoryRerun,