skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Round the top corners of stack pane headers 

Each header now has rounded top corners (square at the bottom where it meets
the pane content) so it reads as a tab atop the pane.
This commit is contained in:
Skyler Lehmkuhl 2026-06-30 01:02:13 -04:00
parent 76e7963f03
commit 0e3c437d50
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lightningbeam-ui/lightningbeam-editor/src/mobile/stack.rs
View File

@ -26,6 +26,8 @@ const N: usize = STACK.len();
/// Height of each band's drag header (and the bottom-edge footer). The whole header is the grab /// Height of each band's drag header (and the bottom-edge footer). The whole header is the grab
/// target — there's no thin divider bar. /// target — there's no thin divider bar.
const HEADER_H: f32 = 52.0; const HEADER_H: f32 = 52.0;
/// Corner radius (px) for the rounded top of each header.
const HEADER_RADIUS: u8 = 9;
const FOOTER_H: f32 = 28.0; const FOOTER_H: f32 = 28.0;
/// Width of a header right-side button (fullscreen, node toggle). /// Width of a header right-side button (fullscreen, node toggle).
const BTN_W: f32 = 44.0; const BTN_W: f32 = 44.0;
@ -239,7 +241,13 @@ pub fn render(ui: &mut egui::Ui, rect: egui::Rect, rc: &mut RenderContext, state
fn draw_header(ui: &egui::Ui, hr: egui::Rect, sp: StackPane, show_instruments: bool, fullscreen: bool) { fn draw_header(ui: &egui::Ui, hr: egui::Rect, sp: StackPane, show_instruments: bool, fullscreen: bool) {
let p = ui.painter(); let p = ui.painter();
p.rect_filled(hr, 0.0, C_HEADER); // Rounded top corners so the header reads as a tab atop the pane; square at the bottom where
// it meets the pane content.
p.rect_filled(
hr,
egui::CornerRadius { nw: HEADER_RADIUS, ne: HEADER_RADIUS, sw: 0, se: 0 },
C_HEADER,
);
p.hline(hr.x_range(), hr.bottom(), egui::Stroke::new(1.0, C_LINE)); p.hline(hr.x_range(), hr.bottom(), egui::Stroke::new(1.0, C_LINE));
let cy = hr.center().y; let cy = hr.center().y;
// Grip glyph on the left (Lucide). // Grip glyph on the left (Lucide).