Add horizontal_padding to IconButton (#3213)

TouchMenu (top menu) and ConfigDialog (bottom menu) updated
to make use of that. This provides a wider sensitivity to
menu buttons.

frontend/ui/widget/configdialog.lua

@@ -433,6 +433,18 @@ function MenuBar:init()
         menu_items[c] = menu_icon
     end
 
+    local available_width = Screen:getWidth() - icons_width
+    -- local padding = math.floor(available_width / #menu_items / 2) -- all for padding
+    -- local padding = math.floor(available_width / #menu_items / 2 / 2) -- half padding, half spacing ?
+    local padding = math.min(math.floor(available_width / #menu_items / 2), Screen:scaleBySize(20)) -- as in TouchMenuBar
+    if padding > 0 then
+        for c = 1, #menu_items do
+            menu_items[c]:setHorizontalPadding(padding)
+        end
+        available_width = available_width - 2*padding*#menu_items
+    end
+    local spacing_width = math.ceil(available_width / (#menu_items+1))
+
     local icon_sep_black = LineWidget:new{
         background = Blitbuffer.COLOR_BLACK,
         dimen = Geom:new{
@@ -447,7 +459,6 @@ function MenuBar:init()
             h = icons_height,
         }
     }
-    local spacing_width = math.ceil((Screen:getWidth() - icons_width) / (#menu_items+1))
     local spacing = HorizontalSpan:new{
         width = spacing_width,
     }

frontend/ui/widget/iconbutton.lua

@@ -2,6 +2,8 @@
 Button with a big icon image! Designed for touch devices.
 --]]
 
+local HorizontalGroup = require("ui/widget/horizontalgroup")
+local HorizontalSpan = require("ui/widget/horizontalspan")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local ImageWidget = require("ui/widget/imagewidget")
 local GestureRange = require("ui/gesturerange")
@@ -13,6 +15,7 @@ local IconButton = InputContainer:new{
     -- show_parent is used for UIManager:setDirty, so we can trigger repaint
     show_parent = nil,
     scale_for_dpi = true,
+    horizontal_padding = 0,
     callback = function() end,
 }
 
@@ -23,11 +26,27 @@ function IconButton:init()
     }
 
     self.show_parent = self.show_parent or self
+
+    self.button = HorizontalGroup:new{}
+    table.insert(self.button, HorizontalSpan:new{})
+    table.insert(self.button, self.image)
+    table.insert(self.button, HorizontalSpan:new{})
+
+    self[1] = self.button
+    self:update()
+end
+
+function IconButton:update()
+    self.button[1].width = self.horizontal_padding
+    self.button[3].width = self.horizontal_padding
     self.dimen = self.image:getSize()
-
+    self.dimen.w = self.dimen.w + 2*self.horizontal_padding
     self:initGesListener()
+end
 
-    self[1] = self.image
+function IconButton:setHorizontalPadding(padding)
+    self.horizontal_padding = padding
+    self:update()
 end
 
 function IconButton:initGesListener()

frontend/ui/widget/touchmenu.lua

@@ -159,11 +159,10 @@ function TouchMenuBar:init()
     local icons_sep_width = icon_sep_width * (#self.icons + 1)
     -- we assume all icons are of the same width
     local tmp_ib = IconButton:new{icon_file = self.icons[1]}
+    -- content_width is the width of all the icon images
     local content_width = tmp_ib:getSize().w * #self.icons + icons_sep_width
     local spacing_width = (self.width - content_width)/(#self.icons*2)
-    local spacing = HorizontalSpan:new{
-        width = math.min(spacing_width, Screen:scaleBySize(20))
-    }
+    local icon_padding = math.min(spacing_width, Screen:scaleBySize(20))
     self.height = tmp_ib:getSize().h + Screen:scaleBySize(10)
     self.show_parent = self.show_parent or self
     self.bar_icon_group = HorizontalGroup:new{}
@@ -171,29 +170,24 @@ function TouchMenuBar:init()
     self.icon_widgets = {}
     -- hold icon seperators
     self.icon_seps = {}
-    -- hold all icon buttons
-    self.icon_buttons = {}
     -- the start_seg for first icon_widget should be 0
     -- we asign negative here to offset it in the loop
     local start_seg = -icon_sep_width
     local end_seg = start_seg
     -- self.width is the screen width
-    -- content_width is the width of the icons
-    -- (math.min(spacing_width, Screen:scaleBySize(20)) * #self.icons *2) is the combined width of spacing/separators
-    local stretch_width = self.width - content_width - (math.min(spacing_width, Screen:scaleBySize(20)) * #self.icons * 2) + icon_sep_width
+    -- content_width is the width of all the icon images
+    -- (2 * icon_padding * #self.icons) is the combined width of icons paddings
+    local stretch_width = self.width - content_width - (2 * icon_padding * #self.icons) + icon_sep_width
 
     for k, v in ipairs(self.icons) do
         local ib = IconButton:new{
             show_parent = self.show_parent,
             icon_file = v,
             callback = nil,
+            horizontal_padding = icon_padding,
         }
 
-        table.insert(self.icon_widgets, HorizontalGroup:new{
-            spacing, ib, spacing,
-        })
-
-        table.insert(self.icon_buttons, ib)
+        table.insert(self.icon_widgets, ib)
 
         -- we have to use local variable here for closure callback
         local _start_seg = end_seg + icon_sep_width
@@ -299,10 +293,10 @@ end
 function TouchMenuBar:switchToTab(index)
     -- a little safety check
     -- don't auto-activate a non-existent index
-    if index > #self.icon_buttons then
+    if index > #self.icon_widgets then
         index = 1
     end
-    self.icon_buttons[index].callback()
+    self.icon_widgets[index].callback()
 end
 
 --[[