From 7bbf80e5f78c59314729a5dd181335de5cc4b218 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Sat, 23 May 2026 12:30:18 +0700 Subject: [PATCH] =?UTF-8?q?fix(bubble):=20tune=20head=20proportions=20?= =?UTF-8?q?=E2=80=94=20smaller=20percent=20glyph,=20more=20breathing=20roo?= =?UTF-8?q?m?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User feedback on v0.1.13: design works, but the 5h percent glyph in the head crowds the ring at small bubble sizes (the "100%" string was wider than the ring's inner clear at MIN_BUBBLE_SIZE). Two parallel UI/UX reviewers converged on: - big_font_px ratio: head_diameter × 26/100 (was 35/100), floor 11 - small_font_px ratio: big × 55/100 (was 45/100), floor 9 - head_pad: 4 logical px (was 6) — recovers 4px of inner clear at small sizes - ring_stroke_w: clamped to [2, 4] (was floor 2 only) - label/glyph gap: big × 15/100, floor 2 (was implicit 0) - tail_bar_h: 5 logical px (was 6) — restores proportion against the 3-px head ring stroke Worked example at MIN_BUBBLE_SIZE=140 (head_diameter=47): before: "100%" glyph ≈ 32px wide vs 28px ring inner — overflow after: "100%" glyph ≈ 23px wide vs 32px ring inner — comfortable Worked example at MAX_BUBBLE_SIZE=360 (head_diameter=138): glyph ≈ 70px wide in 124px inner clear (~57%) — confident not crowding Deliberately not applying: - drop "7d" label (one reviewer wanted it): rejected — symmetry with "5h" matters for self-explanation at a glance, and the ~14px cost is acceptable - head_diameter bump to canvas_h × 1.08: rejected — only useful coupled with the label drop Build clean. --- src/bubble.rs | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/bubble.rs b/src/bubble.rs index 50ebcc3..b22a762 100644 --- a/src/bubble.rs +++ b/src/bubble.rs @@ -979,8 +979,8 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo let height_px = scale_to_dpi(bubble_height_logical(size_logical), dpi); let head_diameter = height_px; - let head_pad = scale_to_dpi(6, dpi); - let ring_stroke_w = scale_to_dpi(3, dpi).max(2) as f32; + let head_pad = scale_to_dpi(4, dpi); + let ring_stroke_w = scale_to_dpi(3, dpi).clamp(2, 4) as f32; let ring_cx = (head_diameter as f32) / 2.0; let ring_cy = (height_px as f32) / 2.0; // Ring centerline: midway between outer and inner edge, then keep stroke @@ -988,13 +988,14 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo let ring_outer = (head_diameter as f32) / 2.0 - (head_pad as f32); let ring_radius = ring_outer - ring_stroke_w / 2.0; - let big_font_px = (head_diameter * 35 / 100).max(scale_to_dpi(12, dpi)); - let small_font_px = ((big_font_px * 45) / 100).max(scale_to_dpi(8, dpi)); + let big_font_px = (head_diameter * 26 / 100).max(scale_to_dpi(11, dpi)); + let small_font_px = ((big_font_px * 55) / 100).max(scale_to_dpi(9, dpi)); let main_font_px = small_font_px; let head_label_h = small_font_px + scale_to_dpi(2, dpi); let head_pct_h = big_font_px + scale_to_dpi(2, dpi); - let head_total_h = head_label_h + head_pct_h; + let label_pct_gap = (big_font_px * 15 / 100).max(scale_to_dpi(2, dpi)); + let head_total_h = head_label_h + label_pct_gap + head_pct_h; let head_text_top = (height_px - head_total_h) / 2; let head_label_rect = RECT { left: scale_to_dpi(4, dpi), @@ -1004,7 +1005,7 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo }; let head_pct_rect = RECT { left: scale_to_dpi(4, dpi), - top: head_text_top + head_label_h, + top: head_text_top + head_label_h + label_pct_gap, right: head_diameter - scale_to_dpi(4, dpi), bottom: head_text_top + head_total_h, }; @@ -1023,7 +1024,7 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo let tail_bar_left = tail_label_right + pad; let tail_bar_right = (tail_countdown_left - pad).max(tail_bar_left + scale_to_dpi(20, dpi)); - let tail_bar_h = scale_to_dpi(6, dpi); + let tail_bar_h = scale_to_dpi(5, dpi); let tail_bar_top = (height_px - tail_bar_h) / 2; BubbleLayout {