diff --git a/frontend/apps/reader/modules/readertoc.lua b/frontend/apps/reader/modules/readertoc.lua index a944e5ff9..44fae7106 100644 --- a/frontend/apps/reader/modules/readertoc.lua +++ b/frontend/apps/reader/modules/readertoc.lua @@ -11,6 +11,7 @@ local Geom = require("ui/geometry") local InfoMessage = require("ui/widget/infomessage") local InputContainer = require("ui/widget/container/inputcontainer") local Menu = require("ui/widget/menu") +local Size = require("ui/size") local UIManager = require("ui/uimanager") local logger = require("logger") local util = require("util") @@ -601,7 +602,7 @@ function ReaderToc:onShowToc() self:fillToc() -- build menu items if #self.toc > 0 and not self.toc[1].text then - for _,v in ipairs(self.toc) do + for _, v in ipairs(self.toc) do v.text = self.toc_indent:rep(v.depth-1)..self:cleanUpTocTitle(v.title, true) v.mandatory = v.page if self.ui.document:hasHiddenFlows() then @@ -644,7 +645,7 @@ function ReaderToc:onShowToc() local items_font_size = G_reader_settings:readSetting("toc_items_font_size") or Menu.getItemFontSize(items_per_page) local items_show_separator = G_reader_settings:isTrue("toc_items_show_separator") -- Estimate expand/collapse icon size - -- *2/5 to acount for Menu top title and bottom icons, and add some air between consecutive icons + -- *2/5 to acount for Menu top title and bottom icons, and add some space between consecutive icons local icon_size = math.floor(Screen:getHeight() / items_per_page * 2/5) local button_width = icon_size * 2 self.expand_button = Button:new{ @@ -667,6 +668,7 @@ function ReaderToc:onShowToc() } -- update collapsible state + local can_collapse = false if #self.toc > 0 and #self.collapsed_toc == 0 then local depth = 0 for i = #self.toc, 1, -1 do @@ -677,6 +679,7 @@ function ReaderToc:onShowToc() callback = function() self:expandToc(i) end, indent = self.toc_indent:rep(v.depth-1), } + can_collapse = true end if v.depth < self.collapse_depth then table.insert(self.collapsed_toc, 1, v) @@ -685,11 +688,14 @@ function ReaderToc:onShowToc() end end + -- NOTE: If the ToC actually has multiple depth levels, we request smaller padding between items, + -- because we inflate the state Button's width on the left, mainly to give it a larger tap zone. + -- This yields *slightly* better alignment between state & mandatory (in terms of effective margins). local button_size = self.expand_button:getSize() local toc_menu = Menu:new{ title = _("Table of Contents"), item_table = self.collapsed_toc, - state_size = button_size, + state_size = can_collapse and button_size or nil, ui = self.ui, is_borderless = true, is_popout = false, @@ -700,7 +706,8 @@ function ReaderToc:onShowToc() align_baselines = true, items_per_page = items_per_page, items_font_size = items_font_size, - line_color = items_show_separator and Blitbuffer.COLOR_DARK_GRAY or Blitbuffer.COLOR_WHITE, + items_padding = can_collapse and math.floor(Size.padding.fullscreen / 2) or nil, -- c.f., note above. Menu's default is twice that. + line_color = items_show_separator and Blitbuffer.COLOR_DARK_GRAY or Blitbuffer.COLOR_WHITE on_close_ges = { GestureRange:new{ ges = "two_finger_swipe", @@ -747,7 +754,10 @@ function ReaderToc:onShowToc() function toc_menu:onMenuHold(item) -- Trim toc_indent local trimmed_text = util.ltrim(item.text) + -- Match the items' width local infomessage = InfoMessage:new{ + width = Screen:getWidth() - (Size.padding.fullscreen * (can_collapse and 4 or 3)), + alignment = "center", show_icon = false, text = trimmed_text, } diff --git a/frontend/ui/widget/infomessage.lua b/frontend/ui/widget/infomessage.lua index e35f0414d..383dc09b9 100644 --- a/frontend/ui/widget/infomessage.lua +++ b/frontend/ui/widget/infomessage.lua @@ -61,6 +61,8 @@ local InfoMessage = InputContainer:new{ icon = "notice-info", alpha = nil, -- if image or icon have an alpha channel (default to true for icons, false for images dismiss_callback = nil, + -- Passed to TextBoxWidget + alignment = "left", -- In case we'd like to use it to display some text we know a few more things about: lang = nil, para_direction_rtl = nil, @@ -132,6 +134,7 @@ function InfoMessage:init() face = self.face, width = text_width, height = self.height, + alignment = self.alignment, dialog = self, lang = self.lang, para_direction_rtl = self.para_direction_rtl, @@ -142,6 +145,7 @@ function InfoMessage:init() text = self.text, face = self.face, width = text_width, + alignment = self.alignment, lang = self.lang, para_direction_rtl = self.para_direction_rtl, auto_para_direction = self.auto_para_direction, diff --git a/frontend/ui/widget/menu.lua b/frontend/ui/widget/menu.lua index 89aea9673..112c41be0 100644 --- a/frontend/ui/widget/menu.lua +++ b/frontend/ui/widget/menu.lua @@ -407,7 +407,7 @@ function MenuItem:init() } local hgroup = HorizontalGroup:new{ align = "center", - HorizontalSpan:new{ width = Size.padding.fullscreen }, + HorizontalSpan:new{ width = self.items_padding or Size.padding.fullscreen }, } if self.shortcut then table.insert(hgroup, ItemShortCutIcon:new{ @@ -873,6 +873,7 @@ function Menu:init() radius = self.is_popout and math.floor(self.dimen.w / 20) or 0, content } + ------------------------------------------ -- start to set up input event callback -- ------------------------------------------ @@ -1066,6 +1067,7 @@ function Menu:updateItems(select_number) multilines_show_more_text = multilines_show_more_text, align_baselines = self.align_baselines, line_color = self.line_color, + items_padding = self.items_padding, } table.insert(self.item_group, item_tmp) -- this is for focus manager