From fd0759e351b4f45d6bd98abb6ce7ce40a3d6463f Mon Sep 17 00:00:00 2001 From: poire-z Date: Thu, 23 Mar 2023 18:37:44 +0100 Subject: [PATCH] Book map, Page browser: add top left menu Split original very long help text (which was very slow to display) into 2 parts: About... and Available gestures. Also add -/+ buttons to change things (which can already and more practically be done with swipes along the edges) to give a bit of meat to these menus. --- frontend/ui/widget/bookmapwidget.lua | 134 +++++++++++++++++-- frontend/ui/widget/pagebrowserwidget.lua | 163 +++++++++++++++++++++-- 2 files changed, 277 insertions(+), 20 deletions(-) diff --git a/frontend/ui/widget/bookmapwidget.lua b/frontend/ui/widget/bookmapwidget.lua index 900e48529..03e43b0fe 100644 --- a/frontend/ui/widget/bookmapwidget.lua +++ b/frontend/ui/widget/bookmapwidget.lua @@ -1,5 +1,6 @@ local BD = require("ui/bidi") local Blitbuffer = require("ffi/blitbuffer") +local ButtonDialog = require("ui/widget/buttondialog") local CenterContainer = require("ui/widget/container/centercontainer") local Device = require("device") local Font = require("ui/font") @@ -609,8 +610,8 @@ function BookMapWidget:init() self.title_bar = TitleBar:new{ fullscreen = true, title = self.title, - left_icon = "info", - left_icon_tap_callback = function() self:showHelp() end, + left_icon = "appbar.menu", + left_icon_tap_callback = function() self:showMenu() end, left_icon_hold_callback = function() self:toggleDefaultSettings() -- toggle between user settings and default view end, @@ -1018,14 +1019,119 @@ function BookMapWidget:update() end -function BookMapWidget:showHelp() +function BookMapWidget:showMenu() + local button_dialog + -- Width of our -/+ buttons, so it looks fine with Button's default font size of 20 + local plus_minus_width = Screen:scaleBySize(60) + local buttons = { + {{ + text = _("About book map"), + align = "left", + callback = function() + self:showAbout() + end, + }}, + {{ + text = _("Available gestures"), + align = "left", + callback = function() + self:showGestures() + end, + }}, + {{ + text = _("Switch current/initial views"), + align = "left", + enabled_func = function() return self.toc_depth > 0 end, + callback = function() + self:toggleDefaultSettings() + end, + }}, + {{ + text = _("Switch grid/flat views"), + align = "left", + enabled_func = function() return self.toc_depth > 0 end, + callback = function() + self.flat_map = not self.flat_map + self:saveSettings() + self:update() + end, + }}, + { + { + text = _("Chapters"), + callback = function() end, + align = "left", + }, + { + text = "\u{2796}", -- Heavy minus sign + enabled_func = function() return self.toc_depth > 0 end, + callback = function() + if self:updateTocDepth(self.flat_map and 1 or -1, nil) then + self:update() + end + end, + width = plus_minus_width, + }, + { + text = "\u{2795}", -- Heavy plus sign + enabled_func = function() return self.toc_depth < self.max_toc_depth end, + callback = function() + if self:updateTocDepth(self.flat_map and -1 or 1, nil) then + self:update() + end + end, + width = plus_minus_width, + } + }, + { + { + text = _("Page slot width"), + callback = function() end, + align = "left", + -- Below, minus increases page per row and plus decreases it. + -- It feels more natural this way: + will make everything (page slots and the grid) bigger. + }, + { + text = "\u{2796}", -- Heavy minus sign + enabled_func = function() return self.pages_per_row < self.max_pages_per_row end, + callback = function() + if self:updatePagesPerRow(10, true) then + self:update() + end + end, + width = plus_minus_width, + }, + { + text = "\u{2795}", -- Heavy plus sign + enabled_func = function() return self.pages_per_row > self.min_pages_per_row end, + callback = function() + if self:updatePagesPerRow(-10, true) then + self:update() + end + end, + width = plus_minus_width, + } + }, + } + button_dialog = ButtonDialog:new{ + -- width = math.floor(Screen:getWidth() / 2), + width = math.floor(Screen:getWidth() * 0.9), -- max width, will get smaller + shrink_unneeded_width = true, + buttons = buttons, + anchor = function() + return self.title_bar.left_button.image.dimen + end, + } + UIManager:show(button_dialog) +end +function BookMapWidget:showAbout() UIManager:show(InfoMessage:new{ text = _([[ Book map displays an overview of the book content. -If statistics are enabled, black bars are shown for already read pages (gray for pages read in the current reading session). Their heights vary with the time spent reading the page. -Chapters are shown above their pages. -Under the pages can be found some indicators: +If statistics are enabled, black bars are shown for already read pages (gray for pages read in the current reading session). Their heights vary depending on the time spent reading the page. +Chapters are shown above the pages they encompass. +Under the pages, these indicators may be shown: ▲ current page ❶ ❷ … previous locations ▒ highlighted text @@ -1033,14 +1139,24 @@ Under the pages can be found some indicators:  bookmarked page ▢ focused page when coming from Pages browser +On a newly opened book, the book map will start in grid mode showing all chapter levels, fitting on a single screen, to give the best initial overview of the book's content.]]), + }) +end + +function BookMapWidget:showGestures() + UIManager:show(InfoMessage:new{ + text = _([[ Tap on a location in the book to browse thumbnails of the pages there. + Swipe along the left screen edge to change the level of chapters to include in the book map, and the type of book map (grid or flat) when crossing the level 0. + Swipe along the bottom screen edge to change the width of page slots. + Swipe or pan vertically on content to scroll. -Any multiswipe will close the book map. -On a newly opened book, the book map will start in grid mode showing all chapter levels, fitting on a single screen, to give the best initial overview of the book's content. -Long-press on ⓘ to switch between current and initial views.]]), +Long-press on ≡ to switch between current and initial views. + +Any multiswipe will close the book map.]]), }) end diff --git a/frontend/ui/widget/pagebrowserwidget.lua b/frontend/ui/widget/pagebrowserwidget.lua index b9c5547cf..804849e86 100644 --- a/frontend/ui/widget/pagebrowserwidget.lua +++ b/frontend/ui/widget/pagebrowserwidget.lua @@ -1,5 +1,6 @@ local BD = require("ui/bidi") local Blitbuffer = require("ffi/blitbuffer") +local ButtonDialog = require("ui/widget/buttondialog") local CenterContainer = require("ui/widget/container/centercontainer") local Device = require("device") local Event = require("ui/event") @@ -106,11 +107,11 @@ function PageBrowserWidget:init() self.title_bar = TitleBar:new{ fullscreen = true, title = self.title, - left_icon = "info", - left_icon_tap_callback = function() self:showHelp() end, + left_icon = "appbar.menu", + left_icon_tap_callback = function() self:showMenu() end, left_icon_hold_callback = function() -- Cycle nb of toc span levels shown in bottom row - if self:updateNbTocSpans(-1, true) then + if self:updateNbTocSpans(-1, true, true) then self:updateLayout() end end, @@ -613,19 +614,152 @@ function PageBrowserWidget:showTile(grid_idx, page, tile, do_refresh) end end -function PageBrowserWidget:showHelp() +function PageBrowserWidget:showMenu() + local button_dialog + -- Width of our -/+ buttons, so it looks fine with Button's default font size of 20 + local plus_minus_width = Screen:scaleBySize(60) + local buttons = { + {{ + text = _("About page browser"), + align = "left", + callback = function() + self:showAbout() + end, + }}, + {{ + text = _("Available gestures"), + align = "left", + callback = function() + self:showGestures() + end, + }}, + { + { + text = _("Thumbnail columns"), + callback = function() end, + align = "left", + }, + { + text = "\u{2796}", -- Heavy minus sign + enabled_func = function() return self.nb_cols > self.min_nb_cols end, + callback = function() + if self:updateNbCols(-1, true) then + self:updateLayout() + end + end, + width = plus_minus_width, + }, + { + text = "\u{2795}", -- Heavy plus sign + enabled_func = function() return self.nb_cols < self.max_nb_cols end, + callback = function() + if self:updateNbCols(1, true) then + self:updateLayout() + end + end, + width = plus_minus_width, + } + }, + { + { + text = _("Thumbnail rows"), + callback = function() end, + align = "left", + }, + { + text = "\u{2796}", -- Heavy minus sign + enabled_func = function() return self.nb_rows > self.min_nb_rows end, + callback = function() + if self:updateNbRows(-1, true) then + self:updateLayout() + end + end, + width = plus_minus_width, + }, + { + text = "\u{2795}", -- Heavy plus sign + enabled_func = function() return self.nb_rows < self.max_nb_rows end, + callback = function() + if self:updateNbRows(1, true) then + self:updateLayout() + end + end, + width = plus_minus_width, + } + }, + { + { + text = _("Chapters in bottom ribbon"), + callback = function() end, + align = "left", + }, + { + text = "\u{2796}", -- Heavy minus sign + enabled_func = function() return self.nb_toc_spans > 0 end, + callback = function() + if self:updateNbTocSpans(-1, true) then + self:updateLayout() + end + end, + width = plus_minus_width, + }, + { + text = "\u{2795}", -- Heavy plus sign + enabled_func = function() return self.nb_toc_spans < self.max_toc_depth end, + callback = function() + if self:updateNbTocSpans(1, true) then + self:updateLayout() + end + end, + width = plus_minus_width, + } + }, + } + button_dialog = ButtonDialog:new{ + -- width = math.floor(Screen:getWidth() / 2), + width = math.floor(Screen:getWidth() * 0.9), -- max width, will get smaller + shrink_unneeded_width = true, + buttons = buttons, + anchor = function() + return self.title_bar.left_button.image.dimen + end, + } + UIManager:show(button_dialog) +end + +function PageBrowserWidget:showAbout() UIManager:show(InfoMessage:new{ text = _([[ Page browser shows thumbnails of pages. -The bottom ribbon displays an extract of the book map around the shown pages: see the book map help for details. +The bottom ribbon displays an extract of the book map around the pages displayed: + +If statistics are enabled, black bars are shown for already read pages (gray for pages read in the current reading session). Their heights vary depending on the time spent reading the page. +Chapters are shown above the pages they encompass. +Under the pages, these indicators may be shown: +▲ current page +❶ ❷ … previous locations +▒ highlighted text + highlighted text with notes + bookmarked page]]), + }) +end +function PageBrowserWidget:showGestures() + UIManager:show(InfoMessage:new{ + text = _([[ Swipe along the top or left screen edge to change the number of columns or rows of thumbnails. -Swipe vertically to move one row, horizontally to move one page. + +Swipe vertically to move one row, horizontally to move one screen. + Swipe horizontally in the bottom ribbon to move by the full stripe. + Tap in the bottom ribbon on a page to focus thumbnails on this page. + Tap on a thumbnail to read this page. -Long-press on ⓘ to decrease or reset the number of chapter levels shown in the bottom ribbon. + +Long-press on ≡ to decrease or reset the number of chapter levels shown in the bottom ribbon. + Any multiswipe will close the page browser.]]), }) end @@ -681,19 +815,26 @@ function PageBrowserWidget:saveSettings(reset) G_reader_settings:saveSetting("page_browser_nb_cols", self.nb_cols) end -function PageBrowserWidget:updateNbTocSpans(value, relative) +function PageBrowserWidget:updateNbTocSpans(value, relative, rollover) local new_nb_toc_spans if relative then new_nb_toc_spans = self.nb_toc_spans + value else new_nb_toc_spans = value end - -- We don't cap, we cycle if new_nb_toc_spans < 0 then - new_nb_toc_spans = self.max_toc_depth + if rollover then + new_nb_toc_spans = self.max_toc_depth + else + new_nb_toc_spans = 0 + end end if new_nb_toc_spans > self.max_toc_depth then - new_nb_toc_spans = 0 + if rollover then + new_nb_toc_spans = 0 + else + new_nb_toc_spans = self.max_toc_depth + end end if new_nb_toc_spans == self.nb_toc_spans then return false