Tweak git blame tooltip design (#17517)

This PR adds some tiny design tweaks to the git blame tooltip. I guess
the most "notable", so to speak, thing is the addition of a divider
between the pull request and commit hash buttons. I was motivated to do
that because, at first, I was unsure what the copy button would copy
(the PR number or the hash?). From the position only, you eventually
figure out, but hopefully, the divider will help bumping this affordance
a bit more. I experimented with adding a labeled "Copy commit hash"
button, but that'd clutter the design too much. Additionally, the top
border on the footer should also slightly help indicating the commit
message area is scrollable.

| Before | After |
|--------|--------|
| <img width="518" alt="Screenshot 2024-09-06 at 4 54 41 PM"
src="https://github.com/user-attachments/assets/68d8335d-946d-4149-b241-6892c0b9577e">
| <img width="513" alt="Screenshot 2024-09-06 at 4 55 26 PM"
src="https://github.com/user-attachments/assets/1dc1b47c-1b7f-4e94-a2c1-7e54b9940689">
|

---

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-09-06 17:12:20 -03:00 committed by GitHub
parent c90ae3d90a
commit cfd43572c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -9,7 +9,7 @@ use settings::Settings;
use std::hash::Hash;
use theme::ThemeSettings;
use time::UtcOffset;
use ui::{prelude::*, tooltip_container, Avatar};
use ui::{prelude::*, tooltip_container, Avatar, Divider, IconButtonShape};
use workspace::Workspace;
use crate::git::blame::{CommitDetails, GitRemote};
@ -160,6 +160,7 @@ impl Render for BlameEntryTooltip {
.gap_4()
.child(
h_flex()
.pb_1p5()
.gap_x_2()
.overflow_x_hidden()
.flex_wrap()
@ -173,7 +174,7 @@ impl Render for BlameEntryTooltip {
)
})
.border_b_1()
.border_color(cx.theme().colors().border),
.border_color(cx.theme().colors().border_variant),
)
.child(
div()
@ -189,10 +190,13 @@ impl Render for BlameEntryTooltip {
.text_color(cx.theme().colors().text_muted)
.w_full()
.justify_between()
.pt_1p5()
.border_t_1()
.border_color(cx.theme().colors().border_variant)
.child(absolute_timestamp)
.child(
h_flex()
.gap_2()
.gap_1p5()
.when_some(pull_request, |this, pr| {
this.child(
Button::new(
@ -203,19 +207,20 @@ impl Render for BlameEntryTooltip {
.icon(IconName::PullRequest)
.icon_color(Color::Muted)
.icon_position(IconPosition::Start)
.style(ButtonStyle::Transparent)
.style(ButtonStyle::Subtle)
.on_click(move |_, cx| {
cx.stop_propagation();
cx.open_url(pr.url.as_str())
}),
)
})
.child(Divider::vertical())
.child(
Button::new(
"commit-sha-button",
short_commit_id.clone(),
)
.style(ButtonStyle::Transparent)
.style(ButtonStyle::Subtle)
.color(Color::Muted)
.icon(IconName::FileGit)
.icon_color(Color::Muted)
@ -239,6 +244,8 @@ impl Render for BlameEntryTooltip {
)
.child(
IconButton::new("copy-sha-button", IconName::Copy)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.icon_color(Color::Muted)
.on_click(move |_, cx| {
cx.stop_propagation();