diff --git a/crates/ui-egui/src/board_ui_tests.rs b/crates/ui-egui/src/board_ui_tests.rs index d184c934..cf939bad 100644 --- a/crates/ui-egui/src/board_ui_tests.rs +++ b/crates/ui-egui/src/board_ui_tests.rs @@ -38,17 +38,18 @@ fn pill(u: &Ui) -> Rect { crate::toolbar::pill_rect(u.app.canvas.rect, crate::toolbar::bar_width(&u.app)) } -/// The left edge of board toolbar group `i` (button 32 wide, a 10-wide caret after the groups with -/// flyouts, 4 between): move, ink, sticky, shapes, connector, text, section, stamp, comment. +/// The left edge of board toolbar group `i` (button 32 wide, a 16-wide caret 2 after it on the +/// groups with flyouts, 4 between): move, ink, sticky, shapes, connector, text, section, stamp, +/// comment. fn group_x(u: &Ui, i: usize) -> f32 { - const WIDTHS: [f32; 9] = [46.0, 46.0, 46.0, 46.0, 36.0, 36.0, 36.0, 46.0, 36.0]; + const WIDTHS: [f32; 9] = [54.0, 54.0, 54.0, 54.0, 36.0, 36.0, 36.0, 54.0, 36.0]; pill(u).min.x + 8.0 + WIDTHS.iter().take(i).sum::() } /// Open group `i`'s flyout from its caret and click option `n` in it (a row of 32-wide cells, 4 /// apart, 8 in from the flyout's edge, the flyout's bottom 8 above the pill). fn pick_option(u: &mut Ui, i: usize, n: usize) { - let caret = pos2(group_x(u, i) + 37.0, pill(u).center().y); + let caret = pos2(group_x(u, i) + 42.0, pill(u).center().y); click(u, caret); let at = pos2(group_x(u, i) + 8.0 + n as f32 * 36.0 + 16.0, pill(u).min.y - 8.0 - 24.0); click(u, at); @@ -78,7 +79,7 @@ fn the_board_toolbar_picks_tools_with_their_colours_shapes_and_stamps() { let connector = pos2(group_x(&u, 4) + 16.0, pill(&u).center().y); click(&mut u, connector); assert_eq!(u.app.session.tool.tool, ToolId::Connector); - let ink_caret = pos2(group_x(&u, 1) + 37.0, pill(&u).center().y); + let ink_caret = pos2(group_x(&u, 1) + 42.0, pill(&u).center().y); click(&mut u, ink_caret); assert_eq!(u.app.ui.tool_flyout, Some("ink")); } diff --git a/crates/ui-egui/src/toolbar.rs b/crates/ui-egui/src/toolbar.rs index 4a14b1fe..484231a8 100644 --- a/crates/ui-egui/src/toolbar.rs +++ b/crates/ui-egui/src/toolbar.rs @@ -17,6 +17,9 @@ const GLYPH: f32 = 18.0; /// The flyout carets: smaller than the marks, but on a box whose stroke rounds to the same width /// as theirs at 1×, 1.5× and 2× (a 10-point box drew them one physical pixel thinner). const CARET: f32 = 14.0; +/// A flyout caret's button: wide enough to hit, a little clear of its tool's (#988). +const FLYOUT_W: f32 = 16.0; +const FLYOUT_GAP: f32 = 2.0; /// `GLYPH`'s box centred in `r`. fn glyph_rect(r: Rect) -> Rect { @@ -130,7 +133,7 @@ pub(crate) fn bar_width(app: &FigApp) -> f32 { /// Actions, and the mode switcher (boards: the Design panel's button instead). fn main_width(groups: &[Group], board: bool) -> f32 { let (cell, gap) = (TOOL_CELL, 4.0); - let carets = groups.iter().filter(|g| g.has_flyout()).count() as f32 * 10.0; + let carets = groups.iter().filter(|g| g.has_flyout()).count() as f32 * (FLYOUT_GAP + FLYOUT_W); let end = if board { cell + 16.0 } else { 4.0 * 34.0 + 24.0 }; groups.len() as f32 * (cell + gap) + carets + 2.0 * (cell + gap) + 16.0 + end } @@ -190,7 +193,7 @@ fn group_cell(app: &mut FigApp, ui: &mut Ui, g: &Group, at: egui::Pos2, top: f32 let mut x = at.x + TOOL_CELL; if g.has_flyout() { flyout_caret(app, ui, g, pos2(x, at.y), t); - x += 10.0; + x += FLYOUT_GAP + FLYOUT_W; } if app.ui.tool_flyout == Some(g.key) { if g.options == Options::None { @@ -205,7 +208,7 @@ fn group_cell(app: &mut FigApp, ui: &mut Ui, g: &Group, at: egui::Pos2, top: f32 /// The caret after group `g`'s button (at `at`, its left edge and middle): opens or closes its /// flyout. fn flyout_caret(app: &mut FigApp, ui: &mut Ui, g: &Group, at: egui::Pos2, t: &Tokens) { - let cr = Rect::from_center_size(pos2(at.x + 5.0, at.y), vec2(10.0, TOOL_CELL)); + let cr = Rect::from_min_size(pos2(at.x + FLYOUT_GAP, at.y - TOOL_CELL / 2.0), vec2(FLYOUT_W, TOOL_CELL)); let cresp = ui.interact(cr, ui.scope_id().with(("flyout", g.key)), Sense::click()); let open = app.ui.tool_flyout == Some(g.key); a11y::menu_button(&cresp, tr(g.name), open);