From 05c8cd2155244770c562502ccd47a7f77af62458 Mon Sep 17 00:00:00 2001 From: poire-z Date: Sat, 20 Feb 2021 19:09:57 +0100 Subject: [PATCH] SkimToWidget: remove title bar, add bookmark button Remove the title bar, as it was just taking uneeded space over the book content. Add a middle button in the top row to toggle bookmark for the current page. Rework the UI building to get more consistent and aligned buttons and progress bar. Move SkimToWidget from apps/reader/ to ui/widgets/. --- frontend/apps/reader/modules/readergoto.lua | 2 +- .../reader => ui/widget}/skimtowidget.lua | 230 +++++++----------- 2 files changed, 95 insertions(+), 137 deletions(-) rename frontend/{apps/reader => ui/widget}/skimtowidget.lua (66%) diff --git a/frontend/apps/reader/modules/readergoto.lua b/frontend/apps/reader/modules/readergoto.lua index a02aaa773..12baa43f6 100644 --- a/frontend/apps/reader/modules/readergoto.lua +++ b/frontend/apps/reader/modules/readergoto.lua @@ -1,7 +1,7 @@ local Event = require("ui/event") local InputContainer = require("ui/widget/container/inputcontainer") local InputDialog = require("ui/widget/inputdialog") -local SkimToWidget = require("apps/reader/skimtowidget") +local SkimToWidget = require("ui/widget/skimtowidget") local UIManager = require("ui/uimanager") local _ = require("gettext") local T = require("ffi/util").template diff --git a/frontend/apps/reader/skimtowidget.lua b/frontend/ui/widget/skimtowidget.lua similarity index 66% rename from frontend/apps/reader/skimtowidget.lua rename to frontend/ui/widget/skimtowidget.lua index 67adcfc06..7281ae2b1 100644 --- a/frontend/apps/reader/skimtowidget.lua +++ b/frontend/ui/widget/skimtowidget.lua @@ -1,24 +1,18 @@ local BD = require("ui/bidi") local Blitbuffer = require("ffi/blitbuffer") local Button = require("ui/widget/button") -local CenterContainer = require("ui/widget/container/centercontainer") -local CloseButton = require("ui/widget/closebutton") local Device = require("device") local Event = require("ui/event") -local Font = require("ui/font") local FrameContainer = require("ui/widget/container/framecontainer") local FocusManager = require("ui/widget/focusmanager") local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") local HorizontalGroup = require("ui/widget/horizontalgroup") local HorizontalSpan = require("ui/widget/horizontalspan") -local LineWidget = require("ui/widget/linewidget") local Math = require("optmath") local MovableContainer = require("ui/widget/container/movablecontainer") -local OverlapGroup = require("ui/widget/overlapgroup") local ProgressWidget = require("ui/widget/progresswidget") local Size = require("ui/size") -local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") local VerticalSpan = require("ui/widget/verticalspan") @@ -26,25 +20,12 @@ local WidgetContainer = require("ui/widget/container/widgetcontainer") local _ = require("gettext") local Screen = Device.screen -local SkimToWidget = FocusManager:new{ - title_face = Font:getFace("x_smalltfont"), - width = nil, - height = nil, -} +local SkimToWidget = FocusManager:new{} function SkimToWidget:init() - self.buttons_layout = {} - self.selected = { x = 1, y = 2 } - self.medium_font_face = Font:getFace("ffont") - self.screen_width = Screen:getWidth() - self.screen_height = Screen:getHeight() - self.span = math.ceil(self.screen_height * 0.01) - self.width = math.floor(self.screen_width * 0.95) - self.button_bordersize = Size.border.button - -- the buttons need some kind of separation but maybe I should just implement - -- margin_left and margin_right… - self.button_margin = self.button_bordersize - self.button_width = math.floor(self.screen_width * 0.16) - (2*self.button_margin) + local screen_width = Screen:getWidth() + local screen_height = Screen:getHeight() + if Device:hasKeys() then self.key_events.Close = { { "Back" }, doc = "close skimto page" } end @@ -55,38 +36,38 @@ function SkimToWidget:init() ges = "tap", range = Geom:new{ x = 0, y = 0, - w = self.screen_width, - h = self.screen_height, + w = screen_width, + h = screen_height, } }, }, } end - local dialog_title = _("Skim") - self.curr_page = self.ui:getCurrentPage() - self.page_count = self.document:getPageCount() - local curr_page_display = tostring(self.curr_page) - if self.ui.pagemap and self.ui.pagemap:wantsPageLabels() then - curr_page_display = self.ui.pagemap:getCurrentPageLabel(true) - end + self.buttons_layout = {} + self.selected = { x = 1, y = 2 } - self.ticks_flattened = self.ui.toc:getTocTicksFlattened() + local frame_width = math.floor(screen_width * 0.95) + local frame_border_size = Size.border.window + local frame_padding = Size.padding.fullscreen -- large padding for airy feeling + local inner_width = frame_width - 2 * (frame_border_size + frame_padding) - local skimto_title = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.title, - bordersize = 0, - TextWidget:new{ - text = dialog_title, - face = self.title_face, - bold = true, - max_width = math.floor(self.screen_width * 0.95), - }, - } + -- In this inner width, we'll be showing 5 buttons, with the middle one + -- separated a bit more from the others + local button_span_unit_width = Size.span.horizontal_small + 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) / 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 + + self.curr_page = self.ui:getCurrentPage() + self.page_count = self.document:getPageCount() + self.ticks_flattened = self.ui.toc:getTocTicksFlattened() self.progress_bar = ProgressWidget:new{ - width = math.floor(self.screen_width * 0.9), + width = inner_width, height = Size.item.height_big, percentage = self.curr_page / self.page_count, ticks = self.ticks_flattened, @@ -94,34 +75,13 @@ function SkimToWidget:init() last = self.page_count, alt = self.ui.document.flows, } - self.skimto_progress = FrameContainer:new{ - padding = Size.padding.button, - margin = Size.margin.small, - bordersize = 0, - self.progress_bar, - } - local skimto_line = LineWidget:new{ - dimen = Geom:new{ - w = self.width, - h = Size.line.thick, - } - } - local skimto_bar = OverlapGroup:new{ - dimen = { - w = self.width, - h = skimto_title:getSize().h - }, - skimto_title, - CloseButton:new{ window = self, padding_top = Size.margin.title, }, - } + -- Bottom row buttons local button_minus = Button:new{ text = "-1", - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -130,11 +90,9 @@ function SkimToWidget:init() } local button_minus_ten = Button:new{ text = "-10", - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -143,11 +101,9 @@ function SkimToWidget:init() } local button_plus = Button:new{ text = "+1", - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -156,11 +112,9 @@ function SkimToWidget:init() } local button_plus_ten = Button:new{ text = "+10", - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -168,34 +122,40 @@ function SkimToWidget:init() end, } self.current_page_text = Button:new{ - text = curr_page_display, - bordersize = 0, - margin = self.button_margin, + text_func = function() + local curr_page_display = tostring(self.curr_page) + if self.ui.pagemap and self.ui.pagemap:wantsPageLabels() then + curr_page_display = self.ui.pagemap:getCurrentPageLabel(true) + end + return curr_page_display + end, radius = 0, padding = 0, + bordersize = 0, enabled = true, - width = math.floor(self.screen_width * 0.2) - (2*self.button_margin), + width = button_width, -- no border/padding: use outer button width show_parent = self, callback = function() self.callback_switch_to_goto() end, } + -- Top row buttons local chapter_next_text = "▷│" local chapter_prev_text = "│◁" local bookmark_next_text = "☆▷" local bookmark_prev_text = "◁☆" + local bookmark_enabled_text = "★" + local bookmark_disabled_text = "☆" if BD.mirroredUILayout() then chapter_next_text, chapter_prev_text = chapter_prev_text, chapter_next_text bookmark_next_text, bookmark_prev_text = bookmark_prev_text, bookmark_next_text end local button_chapter_next = Button:new{ text = chapter_next_text, - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -208,14 +168,11 @@ function SkimToWidget:init() self:goToPage(self.page_count) end, } - local button_chapter_prev = Button:new{ text = chapter_prev_text, - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -228,14 +185,11 @@ function SkimToWidget:init() self:goToPage(1) end, } - local button_bookmark_next = Button:new{ text = bookmark_next_text, - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -246,14 +200,11 @@ function SkimToWidget:init() self:goToBookmark(page) end, } - local button_bookmark_prev = Button:new{ text = bookmark_prev_text, - bordersize = self.button_bordersize, - margin = self.button_margin, radius = 0, enabled = true, - width = self.button_width, + width = button_inner_width, show_parent = self, vsync = true, callback = function() @@ -264,76 +215,86 @@ function SkimToWidget:init() self:goToBookmark(page) end, } + self.button_bookmark_toggle = Button:new{ + text_func = function() + return self.ui.view.dogear_visible and bookmark_enabled_text or bookmark_disabled_text + end, + radius = 0, + enabled = true, + width = button_inner_width, + show_parent = self, + vsync = true, + callback = function() + self.ui:handleEvent(Event:new("ToggleBookmark")) + self:update() + end, + hold_callback = function() + self.ui:handleEvent(Event:new("ShowBookmark")) + UIManager:close(self) + end, + } - local horizontal_span_up = HorizontalSpan:new{ width = math.floor(self.screen_width * 0.2) } - local button_table_up = HorizontalGroup:new{ + local row_span = VerticalSpan:new{ width = Size.padding.fullscreen } + local small_button_span = HorizontalSpan:new{ width = button_span_unit_width } + local large_button_span = HorizontalSpan:new{ width = button_span_unit_width * larger_span_units } + + local top_buttons_row = HorizontalGroup:new{ align = "center", button_chapter_prev, + small_button_span, button_bookmark_prev, - horizontal_span_up, + large_button_span, + self.button_bookmark_toggle, + large_button_span, button_bookmark_next, + small_button_span, button_chapter_next, } - - local vertical_group_up = VerticalGroup:new{ align = "center" } - local padding_span_up = VerticalSpan:new{ width = math.ceil(self.screen_height * 0.015) } - table.insert(vertical_group_up, padding_span_up) - table.insert(vertical_group_up, button_table_up) - table.insert(vertical_group_up, padding_span_up) - - local button_table_down = HorizontalGroup:new{ + local bottom_buttons_row = HorizontalGroup:new{ align = "center", button_minus, + small_button_span, button_minus_ten, + large_button_span, self.current_page_text, + large_button_span, button_plus_ten, + small_button_span, button_plus, } - local vertical_group_down = VerticalGroup:new{ align = "center" } - local padding_span = VerticalSpan:new{ width = math.ceil(self.screen_height * 0.015) } - table.insert(vertical_group_down, padding_span) - table.insert(vertical_group_down, button_table_down) - table.insert(vertical_group_down, padding_span) self.skimto_frame = FrameContainer:new{ - radius = Size.radius.window, - bordersize = Size.border.window, - padding = 0, margin = 0, + bordersize = frame_border_size, + padding = frame_padding, + radius = Size.radius.window, background = Blitbuffer.COLOR_WHITE, VerticalGroup:new{ align = "center", - skimto_bar, - skimto_line, - vertical_group_up, - CenterContainer:new{ - dimen = Geom:new{ - w = skimto_line:getSize().w, - h = self.skimto_progress:getSize().h, - }, - self.skimto_progress, - }, - vertical_group_down, + top_buttons_row, + row_span, + self.progress_bar, + row_span, + bottom_buttons_row, } } self.movable = MovableContainer:new{ - -- alpha = 0.8, self.skimto_frame, } self[1] = WidgetContainer:new{ align = "center", dimen =Geom:new{ x = 0, y = 0, - w = self.screen_width, - h = self.screen_height, + w = screen_width, + h = screen_height, }, self.movable, } if Device:hasDPad() then self.buttons_layout = { - { button_chapter_prev, button_bookmark_prev, button_bookmark_next, button_chapter_next }, - { button_minus, button_minus_ten, button_plus_ten, button_plus }, + { button_chapter_prev, button_bookmark_prev, self.button_bookmark_toggle, button_bookmark_next, button_chapter_next }, + { button_minus, button_minus_ten, self.current_page_text, button_plus_ten, button_plus }, } self.layout = self.buttons_layout self.layout[2][1]:onFocus() @@ -361,11 +322,8 @@ function SkimToWidget:update() self.curr_page = self.page_count end self.progress_bar.percentage = self.curr_page / self.page_count - local curr_page_display = tostring(self.curr_page) - if self.ui.pagemap and self.ui.pagemap:wantsPageLabels() then - curr_page_display = self.ui.pagemap:getCurrentPageLabel(true) - end - self.current_page_text:setText(curr_page_display, self.current_page_text.width) + self.current_page_text:setText(self.current_page_text:text_func(), self.current_page_text.width) + self.button_bookmark_toggle:setText(self.button_bookmark_toggle:text_func(), self.button_bookmark_toggle.width) end function SkimToWidget:addOriginToLocationStack(add_current)