From bccbf950805e21cdea3c0bc0724704b4730eb964 Mon Sep 17 00:00:00 2001 From: poire-z Date: Wed, 13 Sep 2017 10:12:29 +0200 Subject: [PATCH] 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 | 13 ++++++++++++- frontend/ui/widget/iconbutton.lua | 23 +++++++++++++++++++++-- frontend/ui/widget/touchmenu.lua | 24 +++++++++--------------- 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua index 9cd311320..6bc75763c 100644 --- a/frontend/ui/widget/configdialog.lua +++ b/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, } diff --git a/frontend/ui/widget/iconbutton.lua b/frontend/ui/widget/iconbutton.lua index b972b34ed..c7f552de0 100644 --- a/frontend/ui/widget/iconbutton.lua +++ b/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.dimen = self.image:getSize() + 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() diff --git a/frontend/ui/widget/touchmenu.lua b/frontend/ui/widget/touchmenu.lua index 20a6d459d..fe84e48f9 100644 --- a/frontend/ui/widget/touchmenu.lua +++ b/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 --[[