CheckButton: accurate vertical alignment (#8083)

frontend/ui/widget/checkbutton.lua

@@ -55,6 +55,7 @@ function CheckButton:initCheckButton(checked)
     self._checkmark = CheckMark:new{
         checked = self.checked,
         enabled = self.enabled,
+        face = self.face,
         parent = self.parent or self,
         show_parent = self.show_parent or self,
     }
@@ -64,10 +65,11 @@ function CheckButton:initCheckButton(checked)
         width = self.max_width - self._checkmark.dimen.w,
         fgcolor = self.enabled and Blitbuffer.COLOR_BLACK or Blitbuffer.COLOR_DARK_GRAY,
     }
+    local textbox_shift = math.max(0, self._checkmark.baseline - self._textwidget:getBaseline())
     self._verticalgroup = VerticalGroup:new{
         align = "left",
         VerticalSpan:new{
-            width = self.face.size * 0.18,
+            width = textbox_shift,
         },
         self._textwidget,
     }
@@ -121,10 +123,7 @@ function CheckButton:onTapCheckButton()
         else
             -- c.f., ui/widget/iconbutton for the canonical documentation about the flash_ui code flow
 
-            -- Unlike RadioButton, the frame's width stops at the text width, but we want our highlight to span the full width...
-            -- (That's when we have one, some callers don't pass a width, so, handle that, too).
             local highlight_dimen = self.dimen
-            highlight_dimen.w = self.width and self.width or self.dimen.w
 
             -- Highlight
             --

frontend/ui/widget/checkmark.lua

@@ -28,6 +28,7 @@ local CheckMark = InputContainer:new{
     face = Font:getFace("smallinfofont"),
     width = 0,
     height = 0,
+    baseline = 0,
     _mirroredUI = BD.mirroredUILayout(),
 }
 
@@ -41,6 +42,7 @@ function CheckMark:init()
         face = self.face,
         para_direction_rtl = para_direction_rtl,
     }
+    self.baseline = checked_widget:getBaseline()
     local unchecked_widget = TextWidget:new{
         text = "▢ ",
         face = self.face,

frontend/ui/widget/openwithdialog.lua

@@ -41,10 +41,11 @@ function OpenWithDialog:init()
     }
 
     self.face = Font:getFace("cfont", 22)
+    self.element_width = math.floor(self.width * 0.9)
 
     self.radio_button_table = RadioButtonTable:new{
         radio_buttons = self.radio_buttons,
-        width = math.floor(self.width * 0.9),
+        width = self.element_width,
         focused = true,
         scroll = false,
         parent = self,
@@ -70,9 +71,7 @@ function OpenWithDialog:init()
             end
         end,
 
-        width = math.floor(self.width * 0.9),
-        max_width = math.floor(self.width * 0.9 - 2 * Size.border.window),
-        height = self.height,
+        max_width = self.element_width,
         face = self.face,
 
         parent = self,
@@ -80,7 +79,7 @@ function OpenWithDialog:init()
     self._always_file_toggle = LeftContainer:new{
         bordersize = 0,
         dimen = Geom:new{
-            w = math.floor(self.width * 0.9),
+            w = self.element_width,
             h = self._check_file_button:getSize().h,
         },
         self._check_file_button,
@@ -96,9 +95,7 @@ function OpenWithDialog:init()
             end
         end,
 
-        width = math.floor(self.width * 0.9),
-        max_width = math.floor(self.width * 0.9 - 2 * Size.border.window),
-        height = self.height,
+        max_width = self.element_width,
         face = self.face,
 
         parent = self,
@@ -106,7 +103,7 @@ function OpenWithDialog:init()
     self._always_global_toggle = LeftContainer:new{
         bordersize = 0,
         dimen = Geom:new{
-            w = math.floor(self.width * 0.9),
+            w = self.element_width,
             h = self._check_global_button:getSize().h,
         },
         self._check_global_button,
@@ -140,7 +137,7 @@ function OpenWithDialog:init()
                 LineWidget:new{
                     background = Blitbuffer.COLOR_DARK_GRAY,
                     dimen = Geom:new{
-                        w = math.floor(self.width * 0.9),
+                        w = self.element_width,
                         h = Size.line.medium,
                     }
                 },

frontend/ui/widget/textboxwidget.lua

@@ -1050,6 +1050,10 @@ function TextBoxWidget:getLineHeight()
     return self.line_height_px
 end
 
+function TextBoxWidget:getBaseline()
+    return self.line_glyph_baseline
+end
+
 function TextBoxWidget:getVisibleHeightRatios()
     local low = (self.virtual_line_num - 1) / #self.vertical_string_list
     local high = (self.virtual_line_num - 1 + self.lines_per_page) / #self.vertical_string_list