Button: handle 'width' as the final outer width

All our widgets are considering their provided 'width'
as the outer width, except Button which considered it
as some 'inner width', to which padding/border/margin
were added. Let's have them all consistent.
Some other widgets using Button had tweaks to account
for that odd behaviour: fix and simplify them.
Also fix Button layout when text is left aligned.

frontend/ui/widget/button.lua

@@ -8,7 +8,6 @@ A button widget that shows text or an icon and handles callback when tapped.
         enabled = false, -- defaults to true
         callback = some_callback_function,
         width = Screen:scaleBySize(50),
-        max_width = Screen:scaleBySize(100),
         bordersize = Screen:scaleBySize(3),
         margin = 0,
         padding = Screen:scaleBySize(2),
@@ -55,6 +54,8 @@ local Button = InputContainer:extend{
     padding = Size.padding.button,
     padding_h = nil,
     padding_v = nil,
+    -- Provide only one of these two: 'width' to get a fixed width,
+    -- 'max_width' to allow it to be smaller if text or icon is smaller.
     width = nil,
     max_width = nil,
     avoid_text_truncation = true,
@@ -82,12 +83,13 @@ function Button:init()
         self.padding_v = self.padding
     end
 
-    local is_left_aligned = self.align == "left"
+    local outer_pad_width = 2*self.padding_h + 2*self.margin + 2*self.bordersize -- unscaled_size_check: ignore
-    local right_margin = is_left_aligned and (2 * Size.padding.large) or 0
 
     if self.text then
-        local max_width = self.max_width
+        local max_width = self.max_width or self.width
-            and self.max_width - 2*self.padding_h - 2*self.margin - 2*self.bordersize - right_margin or nil
+        if max_width then
+            max_width = max_width - outer_pad_width
+        end
         self.label_widget = TextWidget:new{
             text = self.text,
             max_width = max_width,
@@ -146,14 +148,17 @@ function Button:init()
         }
     end
     local widget_size = self.label_widget:getSize()
-    if self.width == nil then
+    local inner_width
-        self.width = widget_size.w
+    if self.width then
+        inner_width = self.width - outer_pad_width
+    else
+        inner_width = widget_size.w
     end
     -- set FrameContainer content
-    if is_left_aligned then
+    if self.align == "left" then
         self.label_container = LeftContainer:new{
             dimen = Geom:new{
-                w = self.width - 4 * Size.padding.large,
+                w = inner_width,
                 h = widget_size.h
             },
             self.label_widget,
@@ -161,7 +166,7 @@ function Button:init()
     else
         self.label_container = CenterContainer:new{
             dimen = Geom:new{
-                w = self.width,
+                w = inner_width,
                 h = widget_size.h
             },
             self.label_widget,

frontend/ui/widget/buttonprogresswidget.lua

@@ -73,7 +73,7 @@ function ButtonProgressWidget:update()
         buttons_count = buttons_count + 1
         span_count = span_count + 1
     end
-    local button_width_real = (self.width - span_count * self.horizontal_span_width) / buttons_count - 2*button_padding - 2*button_margin - 2*button_bordersize
+    local button_width_real = (self.width - span_count * self.horizontal_span_width) / buttons_count
     local button_width = math.floor(button_width_real)
     local button_width_adjust = button_width_real - button_width
     local button_width_to_add = 0
@@ -81,16 +81,14 @@ function ButtonProgressWidget:update()
     -- Minus button on the left
     if self.fine_tune then
         button_width_to_add = button_width_to_add + button_width_adjust
-        local margin = button_margin
-        local extra_border_size = 0
         local button = Button:new{
             text = "−",
             radius = 0,
-            margin = margin,
+            margin = button_margin,
             padding = button_padding,
-            bordersize = button_bordersize + extra_border_size,
+            bordersize = button_bordersize,
             enabled = true,
-            width = button_width - 2*extra_border_size,
+            width = button_width,
             preselect = false,
             text_font_face = self.font_face,
             text_font_size = self.font_size,
@@ -122,6 +120,7 @@ function ButtonProgressWidget:update()
         local margin = button_margin
         if self.thin_grey_style and highlighted then
             margin = 0 -- moved outside button so it's not inverted
+            real_button_width = real_button_width - 2*button_margin
         end
         local extra_border_size = 0
         if not self.thin_grey_style and is_default then
@@ -135,7 +134,7 @@ function ButtonProgressWidget:update()
             padding = button_padding,
             bordersize = button_bordersize + extra_border_size,
             enabled = true,
-            width = real_button_width - 2*extra_border_size,
+            width = real_button_width,
             preselect = highlighted,
             text_font_face = self.font_face,
             text_font_size = self.font_size,
@@ -183,16 +182,14 @@ function ButtonProgressWidget:update()
             real_button_width = button_width + math.floor(button_width_to_add)
             button_width_to_add = button_width_to_add - math.floor(button_width_to_add)
         end
-        local margin = button_margin
-        local extra_border_size = 0
         local button = Button:new{
             text = "＋",
             radius = 0,
-            margin = margin,
+            margin = button_margin,
             padding = button_padding,
-            bordersize = button_bordersize + extra_border_size,
+            bordersize = button_bordersize,
             enabled = true,
-            width = real_button_width - 2*extra_border_size,
+            width = real_button_width,
             preselect = false,
             text_font_face = self.font_face,
             text_font_size = self.font_size,
@@ -218,16 +215,14 @@ function ButtonProgressWidget:update()
             -- One pixel wider to better align the entire widget
             real_button_width = button_width + math.floor(button_width_to_add)
         end
-        local margin = button_margin
-        local extra_border_size = 0
         local button = Button:new{
             text = "⋮",
             radius = 0,
-            margin = margin,
+            margin = button_margin,
             padding = button_padding,
-            bordersize = button_bordersize + extra_border_size,
+            bordersize = button_bordersize,
             enabled = true,
-            width = real_button_width - 2*extra_border_size,
+            width = real_button_width,
             preselect = false,
             text_font_face = self.font_face,
             text_font_size = self.font_size,

frontend/ui/widget/buttontable.lua

@@ -19,8 +19,6 @@ local ButtonTable = FocusManager:extend{
         },
     },
     sep_width = Size.line.medium,
-    padding = Size.padding.default,
-
     zero_sep = false,
 }
 
@@ -65,11 +63,11 @@ function ButtonTable:init()
                 allow_hold_when_disabled = btn_entry.allow_hold_when_disabled,
                 vsync = btn_entry.vsync,
                 width = math.ceil((self.width - sizer_space)/column_cnt),
-                max_width = math.ceil((self.width - sizer_space)/column_cnt - 2*self.sep_width - 2*self.padding),
                 bordersize = 0,
                 margin = 0,
                 padding = Size.padding.buttontable, -- a bit taller than standalone buttons, for easier tap
-                padding_h = 0, -- allow text to take more of the horizontal space
+                padding_h = btn_entry.align == "left" and Size.padding.large or 0,
+                    -- allow text to take more of the horizontal space if centered
                 text_font_face = btn_entry.font_face,
                 text_font_size = btn_entry.font_size,
                 text_font_bold = btn_entry.font_bold,

frontend/ui/widget/configdialog.lua

@@ -288,8 +288,8 @@ function ConfigOption:init()
                 local name_widget_width = math.floor(name_align * Screen:getWidth())
                 -- We don't remove default_option_hpadding from name_text_max_width
                 -- to give more to text and avoid truncation: as it is right aligned,
-                -- the text can grow on the left, padding_small is enough.
+                -- the text can grow on the left.
-                local name_text_max_width = name_widget_width - 2*padding_small
+                local name_text_max_width = name_widget_width
                 local face = Font:getFace(name_font_face, name_font_size)
                 local option_name_container = RightContainer:new{
                     dimen = Geom:new{ w = name_widget_width, h = option_height},

frontend/ui/widget/numberpickerwidget.lua

@@ -236,7 +236,6 @@ function NumberPickerWidget:init()
         text_font_face = self.spinner_face.font,
         text_font_size = self.spinner_face.orig_size,
         width = self.width,
-        max_width = self.width,
         show_parent = self.show_parent,
         callback = callback_input,
     }

frontend/ui/widget/skimtowidget.lua

@@ -55,7 +55,6 @@ function SkimToWidget:init()
     local larger_span_units = 3 -- 3 x small span width
     local nb_span_units = 2 + 2*larger_span_units
     local button_width = math.floor( (inner_width - nb_span_units * button_span_unit_width) * (1/5))
-    local button_inner_width = button_width - 2 * (Size.border.button + Size.padding.button)
     -- Update inner_width (possibly smaller because of math.floor())
     inner_width = button_width * 5 + nb_span_units * button_span_unit_width
 
@@ -79,7 +78,7 @@ function SkimToWidget:init()
         text = "-1",
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -90,7 +89,7 @@ function SkimToWidget:init()
         text = "-10",
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -101,7 +100,7 @@ function SkimToWidget:init()
         text = "+1",
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -112,7 +111,7 @@ function SkimToWidget:init()
         text = "+10",
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -131,7 +130,7 @@ function SkimToWidget:init()
         padding = 0,
         bordersize = 0,
         enabled = true,
-        width = button_width, -- no border/padding: use outer button width
+        width = button_width,
         show_parent = self,
         callback = function()
             self.callback_switch_to_goto()
@@ -153,7 +152,7 @@ function SkimToWidget:init()
         text = chapter_next_text,
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -170,7 +169,7 @@ function SkimToWidget:init()
         text = chapter_prev_text,
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -187,7 +186,7 @@ function SkimToWidget:init()
         text = bookmark_next_text,
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -202,7 +201,7 @@ function SkimToWidget:init()
         text = bookmark_prev_text,
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         vsync = true,
         callback = function()
@@ -219,7 +218,7 @@ function SkimToWidget:init()
         end,
         radius = 0,
         enabled = true,
-        width = button_inner_width,
+        width = button_width,
         show_parent = self,
         callback = function()
             self.ui:handleEvent(Event:new("ToggleBookmark"))

plugins/vocabbuilder.koplugin/main.lua

@@ -532,7 +532,6 @@ function WordInfoDialog:init()
     self.book_title_button = Button:new{
         text = self.book_title .. book_title_triangle,
         width = width,
-        max_width = width,
         text_font_face = "NotoSans-Italic.ttf",
         text_font_size = 14,
         text_font_bold = false,
@@ -755,7 +754,6 @@ function VocabItemWidget:initItemWidget()
         self.forgot_button = Button:new{
             text = _("Forgot"),
             width = self.review_button_width,
-            max_width = self.review_button_width,
             radius = Size.radius.button,
             callback = function()
                 self:onForgot()
@@ -770,7 +768,6 @@ function VocabItemWidget:initItemWidget()
                 self:onGotIt()
             end,
             width = self.review_button_width,
-            max_width = self.review_button_width,
             show_parent = self,
         }
         right_widget = HorizontalGroup:new{
@@ -1359,7 +1356,7 @@ function VocabularyBuilderWidget:refreshFooter()
     local sync_size = TextWidget:getFontSizeToFitHeight("cfont", footer_height, Size.padding.buttontable*2)
     self.footer_sync = Button:new{
         text = "⇅",
-        width = self.footer_left_corner_width - Size.padding.large * 2,
+        width = self.footer_left_corner_width,
         text_font_size = sync_size,
         text_font_bold = false,
         bordersize = 0,