Align and compact Draw popup with accent border

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 GROUP_ID: &str = "draw_extension_group";
-const GAP: f32 = 3.0;
+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<String>) -> 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<String>) -> 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::<Vec<Element<'static, Message>>>()).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::<Vec<Element<'static, Message>>>()).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))
 }

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.