From cfd43572c19833a539e37af936ef6541d915a2aa Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 6 Sep 2024 17:12:20 -0300 Subject: [PATCH] Tweak git blame tooltip design (#17517) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | |--------|--------| | Screenshot 2024-09-06 at 4 54 41 PM | Screenshot 2024-09-06 at 4 55 26 PM | --- Release Notes: - N/A --- crates/editor/src/blame_entry_tooltip.rs | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/crates/editor/src/blame_entry_tooltip.rs b/crates/editor/src/blame_entry_tooltip.rs index 13d3d642360fd6f920466137d89d6aeb50c93344..3b3d3e4630ce71b67ce6f926cd4c23cf151846d7 100644 --- a/crates/editor/src/blame_entry_tooltip.rs +++ b/crates/editor/src/blame_entry_tooltip.rs @@ -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();