SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix(shell-core): chevron sits BELOW the toolbar shape button

Browse source 
Was overlapping the icon at the lower-right of the button. Moved to
the gutter directly below the button, horizontally centered, sized
10 px in muted-foreground. Toolbar now reserves a 10 px extra
bottom slot after ShapeSlot so the chevron has room without bumping
the next button. Hit area extended to include the chevron gutter
so clicking on the caret also opens the picker.
This commit is contained in:
Kayshen-X 2026-05-10 23:14:56 +08:00
parent 79b44e722d
commit 1cacc0eac2
1 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
crates/openpencil-shell-core/src/widgets/toolbar.rs
View file

@ -27,6 +27,10 @@ const BUTTON_RADIUS: f32 = 8.0;
const ICON_SIZE: f32 = 18.0;
const STROKE_W: f32 = 1.6;
const BUTTON_GAP: f32 = 4.0;
/// Extra vertical room reserved AFTER the shape slot so the
/// chevron-down affordance has space to sit below the button
/// without overlapping the next item (matches the TS layout).
const SHAPE_SLOT_BOTTOM_EXTRA: f32 = 10.0;
const SECTION_GAP: f32 = 12.0;
const PAD_TOP: f32 = 8.0;
const PAD_BOTTOM: f32 = 8.0;
@ -118,13 +122,20 @@ impl Toolbar {
h += if prev_was_item { SECTION_GAP } else { 0.0 };
prev_was_item = false;
}
ToolbarItem::Tool(_, _) | ToolbarItem::Action(_, _) | ToolbarItem::ShapeSlot => {
ToolbarItem::Tool(_, _) | ToolbarItem::Action(_, _) => {
if prev_was_item {
h += BUTTON_GAP;
}
h += BUTTON_SIZE;
prev_was_item = true;
}
ToolbarItem::ShapeSlot => {
if prev_was_item {
h += BUTTON_GAP;
}
h += BUTTON_SIZE + SHAPE_SLOT_BOTTOM_EXTRA;
prev_was_item = true;
}
}
}
h + PAD_BOTTOM
@ -222,14 +233,17 @@ impl Toolbar {
if prev_was_item {
y += BUTTON_GAP;
}
// Hit area covers the button + its chevron
// gutter so a click on the chevron itself
// also opens the picker.
let button_rect = Rect {
origin: Point2D::new(button_x, y),
size: Point2D::new(BUTTON_SIZE, BUTTON_SIZE),
size: Point2D::new(BUTTON_SIZE, BUTTON_SIZE + SHAPE_SLOT_BOTTOM_EXTRA),
};
if hit(button_rect, point) {
return Some(ToolbarHit::ToggleShapePicker);
}
y += BUTTON_SIZE;
y += BUTTON_SIZE + SHAPE_SLOT_BOTTOM_EXTRA;
prev_was_item = true;
}
}
@ -331,27 +345,20 @@ impl Widget for Toolbar {
icon_for_shape(self.shape_tool),
active,
);
// Tiny chevron-down at the lower-right of the
// button — signals the dropdown affordance the
// way the TS shape-tool-dropdown does.
let chev_size = 8.0;
let chev_color = if active {
self.theme.primary_foreground
} else {
self.theme.muted_foreground
};
// Chevron-down sits just BELOW the button,
// horizontally centered — matches the TS
// shape-tool-dropdown affordance (caret in the
// gutter, not overlapping the icon).
let chev_size = 10.0;
draw_icon(
cx.backend,
Icon::ChevronDown,
Point2D::new(
button_x + BUTTON_SIZE - chev_size - 3.0,
y + BUTTON_SIZE - chev_size - 3.0,
),
Point2D::new(button_x + (BUTTON_SIZE - chev_size) / 2.0, y + BUTTON_SIZE),
chev_size,
chev_color,
1.6,
self.theme.muted_foreground,
1.4,
);
y += BUTTON_SIZE;
y += BUTTON_SIZE + SHAPE_SLOT_BOTTOM_EXTRA;
prev_was_item = true;
}
}