reya/gpui-native-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

layout: make strips the titlebar with window controls

Browse Source
This commit is contained in:
reya
2026-11-02 19:04:13 +07:00
parent f295b25366
commit a6014b4ff3
13 changed files with 603 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/layout/src/dock.rs
+61 -8
View File
@@ -7,8 +7,8 @@ use gpui::prelude::FluentBuilder as _;
use gpui::{
AnyElement, AnyView, App, AppContext as _, Axis, Context, ElementId, Entity,
InteractiveElement as _, IntoElement, ParentElement as _, Render, RenderOnce, Role,
SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled as _, Window, canvas,
div, px, relative, size,
SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled as _, Window,
WindowControlArea, canvas, div, px, relative, size,
};
use gpui_native_core::common::{h_flex, v_flex};
use gpui_native_core::context_menu::ContextMenu;
@@ -18,6 +18,7 @@ use gpui_native_icons::IconRole;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::resize_handle::ResizeHandle;
use crate::window_controls::{TRAFFIC_LIGHT_PAD, WindowControls, maximize_on_double_click};
/// The narrowest either side of a split can get, as a fraction of the split.
const MIN_SPLIT_RATIO: f32 = 0.1;
@@ -680,6 +681,10 @@ enum TreeView {
pub struct Dock {
id: ElementId,
state: Entity<DockState>,
/// The pill bar is the window's titlebar: trailing window controls.
window_controls: bool,
/// The pill bar leads the window: pad for the macOS traffic lights.
traffic_light_pad: bool,
}
impl Dock {
@@ -691,14 +696,32 @@ impl Dock {
Self {
id: id.into(),
state,
window_controls: false,
traffic_light_pad: false,
}
}
/// Renders the window controls in the pill bar's trailing end.
pub fn window_controls(mut self, window_controls: bool) -> Self {
self.window_controls = window_controls;
self
}
/// Pads the pill bar's leading edge for the macOS traffic lights.
pub fn traffic_light_pad(mut self, traffic_light_pad: bool) -> Self {
self.traffic_light_pad = traffic_light_pad;
self
}
}
impl RenderOnce for Dock {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let tree = self.state.read(cx).snapshot();
let root = render_node(&self.id, &self.state, &tree, window, cx);
let titlebar = Titlebar {
window_controls: self.window_controls,
traffic_light_pad: self.traffic_light_pad,
};
let root = render_node(&self.id, &self.state, &tree, &titlebar, window, cx);
div()
.id(self.id.clone())
@@ -714,16 +737,24 @@ impl RenderOnce for Dock {
}
}
/// Which titlebar duties the pane's pill bar carries.
#[derive(Clone, Copy, Default)]
struct Titlebar {
window_controls: bool,
traffic_light_pad: bool,
}
fn render_node(
dock_id: &ElementId,
state: &Entity<DockState>,
node: &TreeView,
titlebar: &Titlebar,
window: &mut Window,
cx: &mut App,
) -> AnyElement {
match node {
TreeView::Pane(pane) => render_pane(dock_id, state, pane, cx),
TreeView::Split(split) => render_split(dock_id, state, split, window, cx),
TreeView::Pane(pane) => render_pane(dock_id, state, pane, titlebar, cx),
TreeView::Split(split) => render_split(dock_id, state, split, titlebar, window, cx),
}
}
@@ -731,6 +762,7 @@ fn render_split(
dock_id: &ElementId,
state: &Entity<DockState>,
split: &SplitView,
titlebar: &Titlebar,
window: &mut Window,
cx: &mut App,
) -> AnyElement {
@@ -790,7 +822,7 @@ fn render_split(
.min_w_0()
.min_h_0()
.overflow_hidden()
.child(render_node(dock_id, state, &split.a, window, cx)),
.child(render_node(dock_id, state, &split.a, titlebar, window, cx)),
)
.child(seam)
.child(
@@ -800,7 +832,7 @@ fn render_split(
.min_w_0()
.min_h_0()
.overflow_hidden()
.child(render_node(dock_id, state, &split.b, window, cx)),
.child(render_node(dock_id, state, &split.b, titlebar, window, cx)),
)
.into_any_element()
}
@@ -809,6 +841,7 @@ fn render_pane(
dock_id: &ElementId,
state: &Entity<DockState>,
pane: &PaneView,
titlebar: &Titlebar,
cx: &App,
) -> AnyElement {
if pane.tabs.is_empty() {
@@ -854,6 +887,7 @@ fn render_pane(
let dock_id = dock_id.clone();
let state = state.clone();
let pane = pane.clone();
let titlebar = *titlebar;
let padding_x = metrics.dense_padding_x;
move |_, _| {
let selected = pane
@@ -921,13 +955,32 @@ fn render_pane(
}
});
// Chrome-less like the future titlebar: the bar wraps the pills.
h_flex()
.id(SharedString::from(format!(
"{dock_id}-pane-{}-bar",
pane.key
)))
.debug_selector({
let id = SharedString::from(format!("{dock_id}-pane-{}-bar", pane.key));
move || id.to_string()
})
.flex_none()
.w_full()
.items_center()
.window_control_area(WindowControlArea::Drag)
.on_click(maximize_on_double_click())
.when(titlebar.traffic_light_pad, |bar| {
bar.pl(px(TRAFFIC_LIGHT_PAD))
})
.pr(padding_x)
.child(tabs)
.when(titlebar.window_controls, |bar| {
bar.child(div().flex_1())
.child(WindowControls::new(SharedString::from(format!(
"{dock_id}-pane-{}-controls",
pane.key
))))
})
.into_any_element()
}
})
crates/layout/src/lib.rs
+3
View File
@@ -9,4 +9,7 @@ pub mod resize_handle;
#[cfg(feature = "shell")]
pub mod shell;
#[cfg(feature = "window_controls")]
pub mod window_controls;
mod window_frame;
crates/layout/src/shell.rs
+43 -29
View File
@@ -3,8 +3,9 @@
use gpui::prelude::FluentBuilder as _;
use gpui::{
AnyElement, App, AppContext as _, Context, ElementId, Entity, IntoElement, ParentElement as _,
Pixels, RenderOnce, SharedString, Styled as _, Window, div, px,
AnyElement, App, AppContext as _, Context, ElementId, Entity, InteractiveElement as _,
IntoElement, ParentElement as _, Pixels, RenderOnce, SharedString,
StatefulInteractiveElement as _, Styled as _, Window, WindowControlArea, div, px,
};
use gpui_native_core::button::{Button, ButtonVariant};
use gpui_native_core::common::{Sizable as _, h_flex, v_flex};
@@ -13,6 +14,7 @@ use gpui_native_icons::IconRole;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::resize_handle::ResizeHandle;
use crate::window_controls::{TRAFFIC_LIGHT_PAD, WindowControls, maximize_on_double_click};
use crate::window_frame::frame;
/// The width a sidebar opens at.
@@ -254,37 +256,49 @@ fn sidebar_region(
strip_height: Pixels,
padding_x: Pixels,
) -> AnyElement {
let strip = h_flex()
.id(SharedString::from(format!("sidebar-strip-{}", side.name())))
.debug_selector(move || format!("sidebar-strip-{}", side.name()))
.flex_none()
.h(strip_height)
.items_center()
.justify_end()
.window_control_area(WindowControlArea::Drag)
.on_click(maximize_on_double_click())
.map(|strip| match side {
Side::Left => strip.when(cfg!(target_os = "macos"), |strip| {
strip.pl(px(TRAFFIC_LIGHT_PAD))
}),
Side::Right => strip.child(WindowControls::new("sidebar-window-controls")),
})
.px(padding_x)
.child(
Button::new(SharedString::from(format!(
"sidebar-toggle-{}",
side.name()
)))
.icon(side.toggle_icon())
.variant(ButtonVariant::Ghost)
.small()
.accessibility_label(side.toggle_label())
.on_click({
let state = state.clone();
move |_, _, cx| match side {
Side::Left => {
state.update(cx, |state, cx| state.set_left_sidebar_visible(false, cx))
}
Side::Right => {
state.update(cx, |state, cx| state.set_right_sidebar_visible(false, cx))
}
}
}),
);
v_flex()
.w(width)
.h_full()
.overflow_hidden()
.child(
h_flex()
.flex_none()
.h(strip_height)
.items_center()
.justify_end()
.px(padding_x)
.child(
Button::new(SharedString::from(format!(
"sidebar-toggle-{}",
side.name()
)))
.icon(side.toggle_icon())
.variant(ButtonVariant::Ghost)
.small()
.accessibility_label(side.toggle_label())
.on_click({
let state = state.clone();
move |_, _, cx| match side {
Side::Left => state
.update(cx, |state, cx| state.set_left_sidebar_visible(false, cx)),
Side::Right => state
.update(cx, |state, cx| state.set_right_sidebar_visible(false, cx)),
}
}),
),
)
.child(strip)
.child(div().flex_1().min_h_0().overflow_hidden().child(content))
.into_any_element()
}
crates/layout/src/window_controls.rs
+274
View File
@@ -0,0 +1,274 @@
//! The window controls: minimize, maximize/restore, close — in the platform's
//! own dress and behavior. The titlebar strips drag the window themselves via
//! `WindowControlArea::Drag`; macOS draws its traffic lights in the shell's
//! reserved pad and needs no controls of ours.
use gpui::{App, ClickEvent, ElementId, IntoElement, RenderOnce, Window, div};
#[cfg(any(target_os = "windows", target_os = "linux"))]
use gpui::prelude::FluentBuilder as _;
#[cfg(any(target_os = "windows", target_os = "linux"))]
use gpui::{
AnyElement, InteractiveElement as _, ParentElement as _, StatefulInteractiveElement as _,
Styled as _,
};
#[cfg(any(target_os = "windows", target_os = "linux"))]
use gpui_native_icons::{IconRole, icon};
#[cfg(any(target_os = "windows", target_os = "linux"))]
use gpui_native_theme::ActiveTheme as _;
#[cfg(target_os = "linux")]
use gpui::Decorations;
#[cfg(target_os = "windows")]
use gpui::{WindowControlArea, px, rgba};
/// macOS traffic-lights zone: the pad a leading titlebar strip reserves.
pub const TRAFFIC_LIGHT_PAD: f32 = 78.0;
/// The width of a Windows caption button.
#[cfg(target_os = "windows")]
const CAPTION_WIDTH: f32 = 36.0;
/// Windows paints its caption close hover red in every theme.
#[cfg(target_os = "windows")]
const WINDOWS_CLOSE_HOVER: (f32, f32, f32) = (232.0 / 255.0, 17.0 / 255.0, 32.0 / 255.0);
/// The window controls for the trailing end of a titlebar strip.
#[derive(IntoElement)]
pub struct WindowControls {
id: ElementId,
}
impl WindowControls {
/// Creates the controls row.
pub fn new<I>(id: I) -> Self
where
I: Into<ElementId>,
{
Self { id: id.into() }
}
}
impl RenderOnce for WindowControls {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let id = self.id.clone();
#[cfg(target_os = "macos")]
{
let _ = (id, window, cx);
div()
}
#[cfg(target_os = "windows")]
{
let controls = window.window_controls();
div()
.flex_none()
.flex()
.flex_row()
.h_full()
.when(controls.minimize, |row| {
row.child(caption_button(
cx,
SharedString::from(format!("{id}-minimize")),
IconRole::WindowMinimize,
WindowControlArea::Min,
window.is_minimizable(),
false,
))
})
.when(controls.maximize, |row| {
row.child(caption_button(
cx,
SharedString::from(format!("{id}-maximize")),
if window.is_maximized() {
IconRole::WindowRestore
} else {
IconRole::WindowMaximize
},
WindowControlArea::Max,
window.is_resizable(),
false,
))
})
.child(caption_button(
cx,
SharedString::from(format!("{id}-close")),
IconRole::Close,
WindowControlArea::Close,
true,
true,
))
}
#[cfg(target_os = "linux")]
{
let _ = id;
let controls = window.window_controls();
let client_decorated =
matches!(window.window_decorations(), Decorations::Client { .. });
div()
.flex_none()
.flex()
.flex_row()
.items_center()
.gap_1()
.when(client_decorated && controls.minimize, |row| {
row.child(circle_button(
cx,
"window-minimize",
IconRole::WindowMinimize,
window.is_minimizable(),
|window, _cx| window.minimize_window(),
))
})
.when(client_decorated && controls.maximize, |row| {
row.child(circle_button(
cx,
"window-maximize",
if window.is_maximized() {
IconRole::WindowRestore
} else {
IconRole::WindowMaximize
},
window.is_resizable(),
|window, _cx| window.zoom_window(),
))
})
.when(client_decorated, |row| {
row.child(circle_button(
cx,
"window-close",
IconRole::Close,
true,
|window, _cx| window.remove_window(),
))
})
}
}
}
/// Double-click on a titlebar strip maximizes where the platform does not do it.
pub fn maximize_on_double_click() -> impl Fn(&ClickEvent, &mut Window, &mut App) + 'static {
move |event, window, _cx| {
if event.click_count() != 2 {
return;
}
#[cfg(target_os = "macos")]
window.titlebar_double_click();
#[cfg(target_os = "linux")]
window.zoom_window();
#[cfg(target_os = "windows")]
{
let _ = (event, window);
}
}
}
/// One Windows caption button.
#[cfg(target_os = "windows")]
fn caption_button(
cx: &App,
id: ElementId,
role: IconRole,
area: WindowControlArea,
enabled: bool,
close: bool,
) -> AnyElement {
let theme = cx.theme();
let glyph_size = theme.sizes.small.caption_size;
let (close_r, close_g, close_b) = WINDOWS_CLOSE_HOVER;
let close_hover = rgba((
(close_r * 255.0) as u8,
(close_g * 255.0) as u8,
(close_b * 255.0) as u8,
0xff,
));
let hover = if close {
close_hover
} else {
theme.colors.muted_hover
};
div()
.id(id)
.debug_selector({
let id = SharedString::from(format!("window-control-{}", role.slug()));
move || id.to_string()
})
.occlude()
.flex()
.items_center()
.justify_center()
.w(px(CAPTION_WIDTH))
.h_full()
.window_control_area(area)
.text_color(if enabled {
theme.colors.foreground
} else {
theme.colors.muted_foreground
})
.when(enabled, |button| {
button
.cursor_pointer()
.hover(|hovered| {
hovered.bg(hover).text_color(if close {
gpui::white()
} else {
theme.colors.foreground
})
})
.active(|pressed| {
pressed
.bg(if close {
hover.opacity(0.8)
} else {
theme.ramps.secondary.pressed
})
.text_color(theme.colors.foreground)
})
})
.child(icon(role).size(glyph_size))
.into_any_element()
}
/// Adwaita's headerbar control: a small circle around a symbolic glyph.
#[cfg(target_os = "linux")]
fn circle_button<F>(
cx: &App,
id: &'static str,
role: IconRole,
enabled: bool,
action: F,
) -> AnyElement
where
F: Fn(&mut Window, &mut App) + 'static,
{
let theme = cx.theme();
let small = theme.sizes.small;
div()
.id(id)
.debug_selector(move || format!("window-control-{}", role.slug()))
.flex()
.items_center()
.justify_center()
.size(small.control_height)
.rounded(theme.radius.full)
.text_color(if enabled {
theme.colors.foreground
} else {
theme.colors.muted_foreground
})
.when(enabled, |button| {
button
.cursor_pointer()
.hover(|hovered| hovered.bg(theme.colors.muted_hover))
.on_click(move |_, window, cx| {
cx.stop_propagation();
action(window, cx);
})
})
.child(icon(role).size(small.dense_icon_size))
.into_any_element()
}