Improve commit container at larger font sizes (#60331)
At larger font sizes (e.g. I have profiles that increase the font sizes when screen sharing) the commit button in the git panel editor does not stay aligned to the bottom-right of the screen, and overlaps the other elements: <details> <summary>Click to show showcase</summary> https://github.com/user-attachments/assets/e73034db-07a6-42d7-b993-9d8091e50b70 Notice the extra clipping of the commit message editor element: <img width="500" alt="image" src="https://github.com/user-attachments/assets/67d59405-57e2-4547-87c2-1c4728515c26" /> </details> This was happening because the floating icons on the right and the footer containing the commit button were positioned absolutely, used pixels instead of responsive rems, and had an offset that was calculated and did not account for changes in user rem size. So I've moved things around to be more "flexy"... basically just removing the absolute positioning and making the elements flush against one another. ## Testing I have tested this manually on macOS 27 beta 2 and Windows 11, both using various light/dark themes, window sizes, commit text, etc. ## Self-Review Checklist: - [x] I've reviewed my own diff for quality, security, and reliability - [x] Unsafe blocks (if any) have justifying comments - [x] The content adheres to Zed's UI standards ([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist) and [icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md) guidelines) - [ ] ~~Tests cover the new/changed behavior~~ - [x] Performance impact has been considered and is acceptable ## Showcase Here's a demo at different zoom levels, with and without text, when expanding the commit window, etc. <details> <summary>Click to view showcase</summary> https://github.com/user-attachments/assets/bea82da1-0c7f-4d51-a73b-d4bc4581a2b7 And here's another demo with debug colors for the different elements to see what's going on: https://github.com/user-attachments/assets/12fd3e95-5089-4e34-a84c-c352219ee197 </details> --- Release Notes: - Git Panel: Fixed overlapping elements in commit message container --------- Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com> Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
This commit is contained in:
authored and GitHub committed
1 parent
d3cd53e134
commit
5fb0cdfb15
1 file changed
+77
-97
@@ -5169,14 +5169,6 @@ impl GitPanel {
|
||||
let branch = active_repository.read(cx).branch.clone();
|
||||
let head_commit = active_repository.read(cx).head_commit.clone();
|
||||
|
||||
let footer_size = px(32.);
|
||||
let gap = px(9.0);
|
||||
let max_height = panel_editor_style
|
||||
.text
|
||||
.line_height_in_pixels(window.rem_size())
|
||||
* MAX_PANEL_EDITOR_LINES
|
||||
+ gap;
|
||||
|
||||
let git_panel = cx.entity();
|
||||
let display_name = SharedString::from(Arc::from(
|
||||
active_repository
|
||||
@@ -5200,6 +5192,58 @@ impl GitPanel {
|
||||
false
|
||||
};
|
||||
|
||||
let vertical_buttons = v_flex()
|
||||
.h_full()
|
||||
.gap_px()
|
||||
.p_1p5()
|
||||
.opacity(0.6)
|
||||
.hover(|s| s.opacity(1.0))
|
||||
.child(
|
||||
IconButton::new("expand-commit-editor", IconName::MaximizeAlt)
|
||||
.icon_size(IconSize::Small)
|
||||
.tooltip({
|
||||
move |_window, cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Open Commit Modal",
|
||||
&git::ExpandCommitEditor,
|
||||
&editor_focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
})
|
||||
.on_click(cx.listener({
|
||||
move |_, _, window, cx| {
|
||||
window.dispatch_action(git::ExpandCommitEditor.boxed_clone(), cx)
|
||||
}
|
||||
})),
|
||||
)
|
||||
.child({
|
||||
let (icon, label) = if self.commit_editor_expanded {
|
||||
(IconName::Minimize, "Collapse Commit Editor")
|
||||
} else {
|
||||
(IconName::Maximize, "Expand Commit Editor")
|
||||
};
|
||||
let focus_handle = self.focus_handle.clone();
|
||||
|
||||
IconButton::new("fill-commit-editor", icon)
|
||||
.icon_size(IconSize::Small)
|
||||
.tooltip({
|
||||
move |_window, cx| {
|
||||
Tooltip::for_action_in(
|
||||
label,
|
||||
&git::ToggleFillCommitEditor,
|
||||
&focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
})
|
||||
.on_click(cx.listener({
|
||||
move |_, _, window, cx| {
|
||||
window.dispatch_action(git::ToggleFillCommitEditor.boxed_clone(), cx)
|
||||
}
|
||||
}))
|
||||
});
|
||||
|
||||
let footer = v_flex()
|
||||
.when(self.commit_editor_expanded, |this| this.flex_1().min_h_0())
|
||||
.child(PanelRepoFooter::new(
|
||||
@@ -5233,13 +5277,8 @@ impl GitPanel {
|
||||
.child(
|
||||
panel_editor_container(window, cx)
|
||||
.id("commit-editor-container")
|
||||
.cursor_text()
|
||||
.relative()
|
||||
.w_full()
|
||||
.when(self.commit_editor_expanded, |this| this.flex_1().min_h_0())
|
||||
.when(!self.commit_editor_expanded, |this| {
|
||||
this.h(max_height + footer_size)
|
||||
})
|
||||
.border_t_1()
|
||||
.border_color(if title_exceeds_limit {
|
||||
cx.theme().status().warning_border
|
||||
@@ -5249,20 +5288,37 @@ impl GitPanel {
|
||||
.on_click(cx.listener(move |this, _: &ClickEvent, window, cx| {
|
||||
window.focus(&this.commit_editor.focus_handle(cx), cx);
|
||||
}))
|
||||
.child(
|
||||
h_flex()
|
||||
.size_full()
|
||||
.child(
|
||||
div()
|
||||
.pt_2()
|
||||
.px_2()
|
||||
.cursor_text()
|
||||
.flex_grow_1()
|
||||
.on_action(|&zed_actions::editor::MoveUp, _, cx| {
|
||||
cx.stop_propagation();
|
||||
})
|
||||
.on_action(|&zed_actions::editor::MoveDown, _, cx| {
|
||||
cx.stop_propagation();
|
||||
})
|
||||
.child(EditorElement::new(
|
||||
&self.commit_editor,
|
||||
panel_editor_style,
|
||||
)),
|
||||
)
|
||||
.child(vertical_buttons),
|
||||
)
|
||||
.child(
|
||||
h_flex()
|
||||
.id("commit-footer")
|
||||
.w_full()
|
||||
.p_1p5()
|
||||
.border_t_1()
|
||||
.when(editor_is_long, |el| {
|
||||
el.border_color(cx.theme().colors().border_variant)
|
||||
})
|
||||
.absolute()
|
||||
.bottom_0()
|
||||
.left_0()
|
||||
.w_full()
|
||||
.px_2()
|
||||
.h(footer_size)
|
||||
.flex_none()
|
||||
.justify_between()
|
||||
.child(
|
||||
self.render_generate_commit_message_button(cx)
|
||||
@@ -5274,80 +5330,6 @@ impl GitPanel {
|
||||
.children(enable_coauthors)
|
||||
.child(self.render_commit_button(cx)),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.when(self.commit_editor_expanded, |this| {
|
||||
this.flex_1().min_h_0().pb(footer_size)
|
||||
})
|
||||
.pr_2p5()
|
||||
.on_action(|&zed_actions::editor::MoveUp, _, cx| {
|
||||
cx.stop_propagation();
|
||||
})
|
||||
.on_action(|&zed_actions::editor::MoveDown, _, cx| {
|
||||
cx.stop_propagation();
|
||||
})
|
||||
.child(EditorElement::new(&self.commit_editor, panel_editor_style)),
|
||||
)
|
||||
.child(
|
||||
v_flex()
|
||||
.absolute()
|
||||
.top_2()
|
||||
.right_2()
|
||||
.gap_px()
|
||||
.opacity(0.6)
|
||||
.hover(|s| s.opacity(1.0))
|
||||
.child(
|
||||
IconButton::new("expand-commit-editor", IconName::MaximizeAlt)
|
||||
.icon_size(IconSize::Small)
|
||||
.tooltip({
|
||||
move |_window, cx| {
|
||||
Tooltip::for_action_in(
|
||||
"Open Commit Modal",
|
||||
&git::ExpandCommitEditor,
|
||||
&editor_focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
})
|
||||
.on_click(cx.listener({
|
||||
move |_, _, window, cx| {
|
||||
window.dispatch_action(
|
||||
git::ExpandCommitEditor.boxed_clone(),
|
||||
cx,
|
||||
)
|
||||
}
|
||||
})),
|
||||
)
|
||||
.child({
|
||||
let (icon, label) = if self.commit_editor_expanded {
|
||||
(IconName::Minimize, "Collapse Commit Editor")
|
||||
} else {
|
||||
(IconName::Maximize, "Expand Commit Editor")
|
||||
};
|
||||
let focus_handle = self.focus_handle.clone();
|
||||
|
||||
IconButton::new("fill-commit-editor", icon)
|
||||
.icon_size(IconSize::Small)
|
||||
.tooltip({
|
||||
move |_window, cx| {
|
||||
Tooltip::for_action_in(
|
||||
label,
|
||||
&git::ToggleFillCommitEditor,
|
||||
&focus_handle,
|
||||
cx,
|
||||
)
|
||||
}
|
||||
})
|
||||
.on_click(cx.listener({
|
||||
move |_, _, window, cx| {
|
||||
window.dispatch_action(
|
||||
git::ToggleFillCommitEditor.boxed_clone(),
|
||||
cx,
|
||||
)
|
||||
}
|
||||
}))
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -7468,8 +7450,6 @@ impl PanelHeader for GitPanel {}
|
||||
pub fn panel_editor_container(_window: &mut Window, cx: &mut App) -> Div {
|
||||
v_flex()
|
||||
.size_full()
|
||||
.gap(px(8.))
|
||||
.p_2()
|
||||
.bg(cx.theme().colors().editor_background)
|
||||
}
|
||||
|
||||
@@ -7689,9 +7669,9 @@ impl RenderOnce for PanelRepoFooter {
|
||||
});
|
||||
|
||||
h_flex()
|
||||
.h_9()
|
||||
.w_full()
|
||||
.px_2()
|
||||
.py_1p5()
|
||||
.justify_between()
|
||||
.gap_1()
|
||||
.child(
|
||||
|
||||
Reference in new issue
Block a user