git_ui: Design Polish (#26361)
Polish PR - [ ] Horizontal scrollbar for git panel - [ ] Allow shift clicking a checkbox in any section to stage the whole section - [ ] Clean up design of no changes/pending push state in panel - [x] Ensure checkbox placeholder dot is centered in the checkbox - [x] Improve spacing between elements in git panel entries - [x] Update git branch icon to match branch selector text when disabled - [x] Truncate last commit message less aggressively in panel - [x] Clean up new panel header design - [x] Remove `_background` version control keys (backgrounds are derived from the foreground colors) ### Previous message truncation: Before:  After:  ### Make branch icon match when menu is disabled Before:  After:  Release Notes: - N/A *or* Added/Fixed/Improved ... --------- Co-authored-by: Cole Miller <cole@zed.dev> Co-authored-by: Cole Miller <m@cole-miller.net> Co-authored-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
This commit is contained in:
Nate Butler
GitHub
parent
63091459d8
commit
976fc3ee97
9 changed files with 180 additions and 156 deletions
|
|
@ -41,7 +41,8 @@ use language_model::{
|
|||
use menu::{Confirm, SecondaryConfirm, SelectFirst, SelectLast, SelectNext, SelectPrevious};
|
||||
use multi_buffer::ExcerptInfo;
|
||||
use panel::{
|
||||
panel_editor_container, panel_editor_style, panel_filled_button, panel_icon_button, PanelHeader,
|
||||
panel_button, panel_editor_container, panel_editor_style, panel_filled_button,
|
||||
panel_icon_button, PanelHeader,
|
||||
};
|
||||
use project::{
|
||||
git::{GitEvent, Repository},
|
||||
|
|
@ -103,13 +104,13 @@ enum TrashCancel {
|
|||
}
|
||||
|
||||
fn git_panel_context_menu(
|
||||
focus_handle: Option<FocusHandle>,
|
||||
focus_handle: FocusHandle,
|
||||
window: &mut Window,
|
||||
cx: &mut App,
|
||||
) -> Entity<ContextMenu> {
|
||||
ContextMenu::build(window, cx, |context_menu, _, _| {
|
||||
context_menu
|
||||
.when_some(focus_handle, |el, focus_handle| el.context(focus_handle))
|
||||
.context(focus_handle)
|
||||
.action("Stage All", StageAll.boxed_clone())
|
||||
.action("Unstage All", UnstageAll.boxed_clone())
|
||||
.separator()
|
||||
|
|
@ -2309,6 +2310,18 @@ impl GitPanel {
|
|||
self.has_staged_changes()
|
||||
}
|
||||
|
||||
fn render_overflow_menu(&self, id: impl Into<ElementId>) -> impl IntoElement {
|
||||
let focus_handle = self.focus_handle.clone();
|
||||
PopoverMenu::new(id.into())
|
||||
.trigger(
|
||||
IconButton::new("overflow-menu-trigger", IconName::EllipsisVertical)
|
||||
.icon_size(IconSize::Small)
|
||||
.icon_color(Color::Muted),
|
||||
)
|
||||
.menu(move |window, cx| Some(git_panel_context_menu(focus_handle.clone(), window, cx)))
|
||||
.anchor(Corner::TopRight)
|
||||
}
|
||||
|
||||
pub(crate) fn render_generate_commit_message_button(
|
||||
&self,
|
||||
cx: &Context<Self>,
|
||||
|
|
@ -2458,9 +2471,17 @@ impl GitPanel {
|
|||
tooltip = "git add --all ."
|
||||
}
|
||||
|
||||
let change_string = match self.entry_count {
|
||||
0 => "No Changes".to_string(),
|
||||
1 => "1 Change".to_string(),
|
||||
_ => format!("{} Changes", self.entry_count),
|
||||
};
|
||||
|
||||
self.panel_header_container(window, cx)
|
||||
.px_2()
|
||||
.child(
|
||||
Button::new("diff", "Open Diff")
|
||||
panel_button(change_string)
|
||||
.color(Color::Muted)
|
||||
.tooltip(Tooltip::for_action_title_in(
|
||||
"Open diff",
|
||||
&Diff,
|
||||
|
|
@ -2473,8 +2494,9 @@ impl GitPanel {
|
|||
}),
|
||||
)
|
||||
.child(div().flex_grow()) // spacer
|
||||
.child(self.render_overflow_menu("overflow_menu"))
|
||||
.child(
|
||||
Button::new("stage-unstage-all", text)
|
||||
panel_filled_button(text)
|
||||
.tooltip(Tooltip::for_action_title_in(
|
||||
tooltip,
|
||||
action.as_ref(),
|
||||
|
|
@ -2631,15 +2653,14 @@ impl GitPanel {
|
|||
.items_center()
|
||||
.py_2()
|
||||
.px(px(8.))
|
||||
// .bg(cx.theme().colors().background)
|
||||
// .border_t_1()
|
||||
.border_color(cx.theme().colors().border)
|
||||
.gap_1p5()
|
||||
.child(
|
||||
div()
|
||||
.flex_grow()
|
||||
.overflow_hidden()
|
||||
.max_w(relative(0.6))
|
||||
.items_center()
|
||||
.max_w(relative(0.85))
|
||||
.h_full()
|
||||
.child(
|
||||
Label::new(commit.subject.clone())
|
||||
|
|
@ -2946,7 +2967,7 @@ impl GitPanel {
|
|||
window: &mut Window,
|
||||
cx: &mut Context<Self>,
|
||||
) {
|
||||
let context_menu = git_panel_context_menu(Some(self.focus_handle.clone()), window, cx);
|
||||
let context_menu = git_panel_context_menu(self.focus_handle.clone(), window, cx);
|
||||
self.set_context_menu(context_menu, position, window, cx);
|
||||
}
|
||||
|
||||
|
|
@ -2993,6 +3014,9 @@ impl GitPanel {
|
|||
let marked = self.marked_entries.contains(&ix);
|
||||
let status_style = GitPanelSettings::get_global(cx).status_style;
|
||||
let status = entry.status;
|
||||
let modifiers = self.current_modifiers;
|
||||
let shift_held = modifiers.shift;
|
||||
|
||||
let has_conflict = status.is_conflicted();
|
||||
let is_modified = status.is_modified();
|
||||
let is_deleted = status.is_deleted();
|
||||
|
|
@ -3078,7 +3102,7 @@ impl GitPanel {
|
|||
.px(rems(0.75)) // ~12px
|
||||
.overflow_hidden()
|
||||
.flex_none()
|
||||
.gap(DynamicSpacing::Base04.rems(cx))
|
||||
.gap_1p5()
|
||||
.bg(base_bg)
|
||||
.hover(|this| this.bg(hover_bg))
|
||||
.active(|this| this.bg(active_bg))
|
||||
|
|
@ -3123,6 +3147,7 @@ impl GitPanel {
|
|||
.flex_none()
|
||||
.occlude()
|
||||
.cursor_pointer()
|
||||
.ml_neg_0p5()
|
||||
.child(
|
||||
Checkbox::new(checkbox_id, is_staged)
|
||||
.disabled(!has_write_access)
|
||||
|
|
@ -3144,17 +3169,35 @@ impl GitPanel {
|
|||
})
|
||||
})
|
||||
.tooltip(move |window, cx| {
|
||||
let tooltip_name = if entry_staging.is_fully_staged() {
|
||||
"Unstage"
|
||||
let is_staged = entry_staging.is_fully_staged();
|
||||
|
||||
let action = if is_staged { "Unstage" } else { "Stage" };
|
||||
let tooltip_name = if shift_held {
|
||||
format!("{} section", action)
|
||||
} else {
|
||||
"Stage"
|
||||
action.to_string()
|
||||
};
|
||||
|
||||
Tooltip::for_action(tooltip_name, &ToggleStaged, window, cx)
|
||||
let meta = if shift_held {
|
||||
format!(
|
||||
"Release shift to {} single entry",
|
||||
action.to_lowercase()
|
||||
)
|
||||
} else {
|
||||
format!("Shift click to {} section", action.to_lowercase())
|
||||
};
|
||||
|
||||
Tooltip::with_meta(
|
||||
tooltip_name,
|
||||
Some(&ToggleStaged),
|
||||
meta,
|
||||
window,
|
||||
cx,
|
||||
)
|
||||
}),
|
||||
),
|
||||
)
|
||||
.child(git_status_icon(status, cx))
|
||||
.child(git_status_icon(status))
|
||||
.child(
|
||||
h_flex()
|
||||
.items_center()
|
||||
|
|
@ -3456,27 +3499,11 @@ impl PanelRepoFooter {
|
|||
git_panel: None,
|
||||
}
|
||||
}
|
||||
|
||||
fn render_overflow_menu(&self, id: impl Into<ElementId>, cx: &App) -> impl IntoElement {
|
||||
let focus_handle = self
|
||||
.git_panel
|
||||
.as_ref()
|
||||
.map(|git_panel| git_panel.focus_handle(cx));
|
||||
PopoverMenu::new(id.into())
|
||||
.trigger(
|
||||
IconButton::new("overflow-menu-trigger", IconName::EllipsisVertical)
|
||||
.icon_size(IconSize::Small)
|
||||
.icon_color(Color::Muted),
|
||||
)
|
||||
.menu(move |window, cx| Some(git_panel_context_menu(focus_handle.clone(), window, cx)))
|
||||
.anchor(Corner::TopRight)
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for PanelRepoFooter {
|
||||
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let active_repo = self.active_repository.clone();
|
||||
let overflow_menu_id: SharedString = format!("overflow-menu-{}", active_repo).into();
|
||||
let repo_selector_trigger = Button::new("repo-selector", active_repo)
|
||||
.style(ButtonStyle::Transparent)
|
||||
.size(ButtonSize::None)
|
||||
|
|
@ -3565,7 +3592,11 @@ impl RenderOnce for PanelRepoFooter {
|
|||
div().child(
|
||||
Icon::new(IconName::GitBranchSmall)
|
||||
.size(IconSize::Small)
|
||||
.color(Color::Muted),
|
||||
.color(if single_repo {
|
||||
Color::Disabled
|
||||
} else {
|
||||
Color::Muted
|
||||
}),
|
||||
),
|
||||
)
|
||||
.child(repo_selector)
|
||||
|
|
@ -3584,7 +3615,6 @@ impl RenderOnce for PanelRepoFooter {
|
|||
.gap_1()
|
||||
.flex_shrink_0()
|
||||
.children(spinner)
|
||||
.child(self.render_overflow_menu(overflow_menu_id, cx))
|
||||
.when_some(branch, |this, branch| {
|
||||
let mut focus_handle = None;
|
||||
if let Some(git_panel) = self.git_panel.as_ref() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue