zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-27 09:02:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

Standardize TabBar start_slot and end_slot elements (#11403)

Browse Source 
- Unifies spacing between left and right sides of the tab bar
- Use the default icon color for `end_slot` tools. This should help more
clearly differentiate when forward or backward navigation is disabled
due to the tools on the other side not looking so much like the disabled
navigation arrows.
- Rework the TabBar implementation in `pane.rs` to directly pass in
items to the `start_slot` instead of an unneeded extra horizontal
layout.

Left side:

![CleanShot 2024-05-05 at 11 08
35@2x](https://github.com/zed-industries/zed/assets/1714999/ec80fda5-17ce-4cd4-ae54-8c63dcc79e69)

Right side:

![CleanShot 2024-05-05 at 11 09
04@2x](https://github.com/zed-industries/zed/assets/1714999/0281e462-202f-407b-b6b7-7acbcde9138f)

Release Notes:

- Standardized some Tab Bar UI elements. You many notice some slight
spacing or color changes.
This commit is contained in:
Nate Butler 2024-05-05 19:59:18 -04:00 committed by GitHub
parent 1e84f01041
commit 08c9157a1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
crates/ui/src/components/tab_bar.rs
View File

@ -107,7 +107,7 @@ impl RenderOnce for TabBar {
h_flex()
.flex_none()
.gap(Spacing::Small.rems(cx))
.px(Spacing::Small.rems(cx))
.px(Spacing::Medium.rems(cx))
.border_b()
.border_r()
.border_color(cx.theme().colors().border)

57
crates/workspace/src/pane.rs
View File

@ -313,12 +313,14 @@ impl Pane {
custom_drop_handle: None,
can_split: true,
render_tab_bar_buttons: Rc::new(move |pane, cx| {
// Ideally we would return a vec of elements here to pass directly to the [TabBar]'s
// `end_slot`, but due to needing a view here that isn't possible.
h_flex()
.gap_2()
// Instead we need to replicate the spacing from the [TabBar]'s `end_slot` here.
.gap(Spacing::Small.rems(cx))
.child(
IconButton::new("plus", IconName::Plus)
.icon_size(IconSize::Small)
.icon_color(Color::Muted)
.on_click(cx.listener(|pane, _, cx| {
let menu = ContextMenu::build(cx, |menu, _| {
menu.action("New File", NewFile.boxed_clone())
@ -340,7 +342,6 @@ impl Pane {
.child(
IconButton::new("split", IconName::Split)
.icon_size(IconSize::Small)
.icon_color(Color::Muted)
.on_click(cx.listener(|pane, _, cx| {
let menu = ContextMenu::build(cx, |menu, _| {
menu.action("Split Right", SplitRight.boxed_clone())
@ -361,7 +362,6 @@ impl Pane {
let zoomed = pane.is_zoomed();
IconButton::new("toggle_zoom", IconName::Maximize)
.icon_size(IconSize::Small)
.icon_color(Color::Muted)
.selected(zoomed)
.selected_icon(IconName::Minimize)
.on_click(cx.listener(|pane, _, cx| {
@ -1668,38 +1668,31 @@ impl Pane {
}
fn render_tab_bar(&mut self, cx: &mut ViewContext<'_, Pane>) -> impl IntoElement {
let navigate_backward = IconButton::new("navigate_backward", IconName::ArrowLeft)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.on_click({
let view = cx.view().clone();
move |_, cx| view.update(cx, Self::navigate_backward)
})
.disabled(!self.can_navigate_backward())
.tooltip(|cx| Tooltip::for_action("Go Back", &GoBack, cx));
let navigate_forward = IconButton::new("navigate_forward", IconName::ArrowRight)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.on_click({
let view = cx.view().clone();
move |_, cx| view.update(cx, Self::navigate_forward)
})
.disabled(!self.can_navigate_forward())
.tooltip(|cx| Tooltip::for_action("Go Forward", &GoForward, cx));
TabBar::new("tab_bar")
.track_scroll(self.tab_bar_scroll_handle.clone())
.when(
self.display_nav_history_buttons.unwrap_or_default(),
|tab_bar| {
tab_bar.start_child(
h_flex()
.gap_2()
.child(
IconButton::new("navigate_backward", IconName::ArrowLeft)
.icon_size(IconSize::Small)
.on_click({
let view = cx.view().clone();
move |_, cx| view.update(cx, Self::navigate_backward)
})
.disabled(!self.can_navigate_backward())
.tooltip(|cx| Tooltip::for_action("Go Back", &GoBack, cx)),
)
.child(
IconButton::new("navigate_forward", IconName::ArrowRight)
.icon_size(IconSize::Small)
.on_click({
let view = cx.view().clone();
move |_, cx| view.update(cx, Self::navigate_forward)
})
.disabled(!self.can_navigate_forward())
.tooltip(|cx| {
Tooltip::for_action("Go Forward", &GoForward, cx)
}),
),
)
},
|tab_bar| tab_bar.start_children(vec![navigate_backward, navigate_forward]),
)
.when(self.has_focus(cx), |tab_bar| {
tab_bar.end_child({