vrr/zed
2
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2026-08-25 08:53:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

workspace: Add visual indicator for editor zoom (#61039)

Browse source 
The earlier editor-only zoom implementation in #32860 rendered the
active pane with padding, a border, rounded corners, and a shadow. In
addition to keeping docks visible, that treatment made the transient
editor zoom mode apparent.

The current `ToggleEditorZoom` implementation (#53911) only omits
sibling panes from the pane group, without any visual indication.
Without a persistent control or decoration, the result can look like an
ordinary single-pane layout, so users cannot tell whether toggling the
command will restore hidden splits.

So this commit renders the maximized pane as an inset card with padding,
a subtle theme border, rounded corners, and a shadow. Keeping this
treatment in `PaneGroup` makes it apply only to editor zoom, leaves
docks untouched, and distinguishes it from `ToggleZoom`'s square
workspace overlay.

## Showcase

<img width="862" height="415" alt="Screenshot 2026-07-15 at 18 51 30"
src="https://github.com/user-attachments/assets/f61c61ce-79b7-4e3a-a9c4-0775931fa90d"
/>

---

Release Notes:

- N/A

---------

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
This commit is contained in:
Shuhei Kadowaki 2026-07-16 08:21:16 +09:00 • committed by GitHub
parent 9dfdaa62b7
commit 367cd75963
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

52
crates/workspace/src/pane_group.rs
View file

@ -545,39 +545,55 @@ impl Member {
};
}
if let Some(maximized) = maximized {
let is_maximized = if let Some(maximized) = maximized {
if maximized.upgrade().as_ref() != Some(pane) {
return PaneRenderResult {
element: div().into_any(),
contains_active_pane: false,
};
}
}
true
} else {
false
};
let decoration = render_cx.decorate(pane, cx);
let is_active = pane == render_cx.active_pane();
let pane = div()
.relative()
.size_full()
.when(is_maximized, |this| {
this.bg(cx.theme().colors().background)
.border_1()
.border_color(cx.theme().colors().border)
.shadow_lg()
.overflow_hidden()
})
.child(
AnyView::from(pane.clone())
.cached(StyleRefinement::default().v_flex().size_full()),
)
.when_some(decoration.border, |this, color| {
this.child(
div()
.absolute()
.size_full()
.left_0()
.top_0()
.border_2()
.border_color(color),
)
})
.children(decoration.status_box);
PaneRenderResult {
element: div()
.relative()
.flex_1()
.size_full()
.child(
AnyView::from(pane.clone())
.cached(StyleRefinement::default().v_flex().size_full()),
)
.when_some(decoration.border, |this, color| {
this.child(
div()
.absolute()
.size_full()
.left_0()
.top_0()
.border_2()
.border_color(color),
)
})
.children(decoration.status_box)
.when(is_maximized, |this| this.p_2())
.child(pane)
.into_any(),
contains_active_pane: is_active,
}