diff --git a/src/ui/ribbon/draw_panel.rs b/src/ui/ribbon/draw_panel.rs index 4e8e78614..3766e3f37 100644 --- a/src/ui/ribbon/draw_panel.rs +++ b/src/ui/ribbon/draw_panel.rs @@ -13,8 +13,11 @@ use crate::t; use crate::ui::{icons, wrap_bar::PosReport}; const PANEL_ID: &str = "draw_extension"; -const CELL: f32 = 36.0; -const GAP: f32 = 3.0; +const GROUP_ID: &str = "draw_extension_group"; +const SCALE: f32 = 0.7; +const CELL: f32 = 36.0 * SCALE; +const GAP: f32 = 3.0 * SCALE; +const OPTION_HEIGHT: f32 = 30.0 * SCALE; struct Tool { command: &'static str, @@ -29,6 +32,14 @@ pub(super) fn owns_dropdown(id: &str) -> bool { id == PANEL_ID || TOOLS.iter().any(|tool| tool.command == id && !tool.options.is_empty()) } +pub(super) fn group_anchor<'a>(title: &str, content: Element<'a, Message>) -> Element<'a, Message> { + if title == "Draw" { + PosReport::new(GROUP_ID, content).into() + } else { + content + } +} + pub(super) fn group_title<'a>(title: &'static str, open: &Option) -> Element<'a, Message> { if title != "Draw" || TOOLS.is_empty() { return container(text(t!(title)).size(9).style(muted_text_style)).padding([1, 4]).into(); @@ -42,20 +53,20 @@ pub(super) fn group_title<'a>(title: &'static str, open: &Option) -> Ele } fn tool_button(tool: &Tool, active: bool) -> Element<'static, Message> { - let face = button(make_icon(IconKind::Svg(tool.icon), 23.0)) + let face = button(make_icon(IconKind::Svg(tool.icon), 23.0 * SCALE)) .on_press(Message::DropdownSelectItem { dropdown_id: PANEL_ID, cmd: tool.command }) .style(move |theme: &Theme, status| tool_btn_style(theme, active, status)) - .width(if tool.options.is_empty() { CELL } else { CELL - 11.0 }) + .width(if tool.options.is_empty() { CELL } else { CELL - 11.0 * SCALE }) .height(CELL) - .padding(3); + .padding(3.0 * SCALE); let tip = format!("{}\n{} {}", t!(tool.label), t!("Command:"), tool.command); let face: Element<'static, Message> = tooltip(face, make_tip(tip), tooltip::Position::Bottom) .delay(Duration::from_millis(400)).style(tip_style).into(); if !tool.options.is_empty() { - row![face, button(icons::themed_arrow_down(6.0)) + row![face, button(icons::themed_arrow_down(6.0 * SCALE)) .on_press(Message::ToggleRibbonDropdown(tool.command.to_string())) .style(move |theme: &Theme, status| tool_btn_style(theme, false, status)) - .width(11).height(CELL).padding(2)].into() + .width(11.0 * SCALE).height(CELL).padding(2.0 * SCALE)].into() } else { face } @@ -64,7 +75,7 @@ fn tool_button(tool: &Tool, active: bool) -> Element<'static, Message> { pub(super) fn overlay<'a>(ribbon: &Ribbon, id: &str, win: (f32, f32)) -> Element<'a, Message> { let width = (7.0 * (CELL + GAP) - GAP + 12.0).min((win.0 - 8.0).max(CELL + 12.0)); let (_, x, anchor_top) = ribbon.dd_anchor(PANEL_ID, width, win.0); - let anchor = crate::ui::wrap_bar::dropdown_bounds(PANEL_ID); + let anchor = crate::ui::wrap_bar::dropdown_bounds(GROUP_ID); let left = anchor.map_or(x, |b| b.x).clamp(0.0, (win.0 - width).max(0.0)); let top = anchor_top.min((win.1 - 80.0).max(0.0)); let available_height = (win.1 - top - 4.0).max(1.0); @@ -72,13 +83,13 @@ pub(super) fn overlay<'a>(ribbon: &Ribbon, id: &str, win: (f32, f32)) -> Element let option_tool = TOOLS.iter().find(|tool| tool.command == id && !tool.options.is_empty()); let content_height = option_tool.map_or_else( || TOOLS.len().div_ceil(cols) as f32 * (CELL + GAP) - GAP + 12.0, - |tool| tool.options.len() as f32 * 30.0, + |tool| tool.options.len() as f32 * OPTION_HEIGHT, ); let contents: Element<'static, Message> = if let Some(tool) = option_tool { column(tool.options.iter().map(|&(cmd, label)| { button(text(t!(label)).size(11)) .on_press(Message::DropdownSelectItem { dropdown_id: tool.command, cmd }) - .style(popup_row_style).width(Fill).height(30).padding([6, 10]).into() + .style(popup_row_style).width(Fill).height(OPTION_HEIGHT).padding([3, 7]).into() }).collect::>>()).into() } else { column(TOOLS.chunks(cols).map(|tools| { @@ -87,6 +98,10 @@ pub(super) fn overlay<'a>(ribbon: &Ribbon, id: &str, win: (f32, f32)) -> Element }).collect::>>()).spacing(GAP).padding(6).into() }; let panel = container(scrollable(contents).height(content_height.min(available_height))) - .width(width).style(popup_panel_style); + .width(width).style(|theme: &Theme| { + let mut style = popup_panel_style(theme); + style.border.color = theme.palette().primary.base.color; + style + }); dropdown_backdrop(position_ribbon_dropdown(panel.into(), false, left, top)) } diff --git a/src/ui/ribbon/mod.rs b/src/ui/ribbon/mod.rs index e0f2b2c49..7ffc5ec7b 100644 --- a/src/ui/ribbon/mod.rs +++ b/src/ui/ribbon/mod.rs @@ -1370,7 +1370,7 @@ fn render_group<'a>( r.push(e) }); - column![ + draw_panel::group_anchor(group.title, column![ tools_el, draw_panel::group_title(group.title, open_dd), ] @@ -1378,7 +1378,7 @@ fn render_group<'a>( .spacing(0) .padding([3u16, 4]) .height(Length::Fixed(TOOL_BAR_H)) - .into() + .into()) } /// The top-level command id of a ribbon item, if it has one.