Archives
/
koreader
mirror of https://github.com/koreader/koreader
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

SkimToWidget: remove title bar, add bookmark button

Browse Source 
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/.
pull/7322/head
poire-z 3 years ago
parent 0f7722d4a6
commit 05c8cd2155
2 changed files with 95 additions and 137 deletions
Show Stats Download Patch File Download Diff File

2
frontend/apps/reader/modules/readergoto.lua
Unescape Escape View File

@ -1,7 +1,7 @@
local Event = require("ui/event") local Event = require("ui/event")
local InputContainer = require("ui/widget/container/inputcontainer") local InputContainer = require("ui/widget/container/inputcontainer")
local InputDialog = require("ui/widget/inputdialog") local InputDialog = require("ui/widget/inputdialog")
local SkimToWidget = require("apps/reader/skimtowidget") local SkimToWidget = require("ui/widget/skimtowidget")
local UIManager = require("ui/uimanager") local UIManager = require("ui/uimanager")
local _ = require("gettext") local _ = require("gettext")
local T = require("ffi/util").template local T = require("ffi/util").template

230
frontend/apps/reader/skimtowidget.lua → frontend/ui/widget/skimtowidget.lua
Unescape Escape View File

@ -1,24 +1,18 @@
local BD = require("ui/bidi") local BD = require("ui/bidi")
local Blitbuffer = require("ffi/blitbuffer") local Blitbuffer = require("ffi/blitbuffer")
local Button = require("ui/widget/button") local Button = require("ui/widget/button")
local CenterContainer = require("ui/widget/container/centercontainer")
local CloseButton = require("ui/widget/closebutton")
local Device = require("device") local Device = require("device")
local Event = require("ui/event") local Event = require("ui/event")
local Font = require("ui/font")
local FrameContainer = require("ui/widget/container/framecontainer") local FrameContainer = require("ui/widget/container/framecontainer")
local FocusManager = require("ui/widget/focusmanager") local FocusManager = require("ui/widget/focusmanager")
local Geom = require("ui/geometry") local Geom = require("ui/geometry")
local GestureRange = require("ui/gesturerange") local GestureRange = require("ui/gesturerange")
local HorizontalGroup = require("ui/widget/horizontalgroup") local HorizontalGroup = require("ui/widget/horizontalgroup")
local HorizontalSpan = require("ui/widget/horizontalspan") local HorizontalSpan = require("ui/widget/horizontalspan")
local LineWidget = require("ui/widget/linewidget")
local Math = require("optmath") local Math = require("optmath")
local MovableContainer = require("ui/widget/container/movablecontainer") local MovableContainer = require("ui/widget/container/movablecontainer")
local OverlapGroup = require("ui/widget/overlapgroup")
local ProgressWidget = require("ui/widget/progresswidget") local ProgressWidget = require("ui/widget/progresswidget")
local Size = require("ui/size") local Size = require("ui/size")
local TextWidget = require("ui/widget/textwidget")
local UIManager = require("ui/uimanager") local UIManager = require("ui/uimanager")
local VerticalGroup = require("ui/widget/verticalgroup") local VerticalGroup = require("ui/widget/verticalgroup")
local VerticalSpan = require("ui/widget/verticalspan") local VerticalSpan = require("ui/widget/verticalspan")
@ -26,25 +20,12 @@ local WidgetContainer = require("ui/widget/container/widgetcontainer")
local _ = require("gettext") local _ = require("gettext")
local Screen = Device.screen local Screen = Device.screen
local SkimToWidget = FocusManager:new{ local SkimToWidget = FocusManager:new{}
title_face = Font:getFace("x_smalltfont"),
width = nil,
height = nil,
}
function SkimToWidget:init() function SkimToWidget:init()
self.buttons_layout = {} local screen_width = Screen:getWidth()
self.selected = { x = 1, y = 2 } local screen_height = Screen:getHeight()
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)
if Device:hasKeys() then if Device:hasKeys() then
self.key_events.Close = { { "Back" }, doc = "close skimto page" } self.key_events.Close = { { "Back" }, doc = "close skimto page" }
end end
@ -55,38 +36,38 @@ function SkimToWidget:init()
ges = "tap", ges = "tap",
range = Geom:new{ range = Geom:new{
x = 0, y = 0, x = 0, y = 0,
w = self.screen_width, w = screen_width,
h = self.screen_height, h = screen_height,
} }
}, },
}, },
} }
end 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) self.buttons_layout = {}
if self.ui.pagemap and self.ui.pagemap:wantsPageLabels() then self.selected = { x = 1, y = 2 }
curr_page_display = self.ui.pagemap:getCurrentPageLabel(true)
end
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{ -- In this inner width, we'll be showing 5 buttons, with the middle one
padding = Size.padding.default, -- separated a bit more from the others
margin = Size.margin.title, local button_span_unit_width = Size.span.horizontal_small
bordersize = 0, local larger_span_units = 3 -- 3 x small span width
TextWidget:new{ local nb_span_units = 2 + 2*larger_span_units
text = dialog_title, local button_width = math.floor( (inner_width - nb_span_units * button_span_unit_width) / 5)
face = self.title_face, local button_inner_width = button_width - 2 * (Size.border.button + Size.padding.button)
bold = true, -- Update inner_width (possibly smaller because of math.floor())
max_width = math.floor(self.screen_width * 0.95), 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{ self.progress_bar = ProgressWidget:new{
width = math.floor(self.screen_width * 0.9), width = inner_width,
height = Size.item.height_big, height = Size.item.height_big,
percentage = self.curr_page / self.page_count, percentage = self.curr_page / self.page_count,
ticks = self.ticks_flattened, ticks = self.ticks_flattened,
@ -94,34 +75,13 @@ function SkimToWidget:init()
last = self.page_count, last = self.page_count,
alt = self.ui.document.flows, 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{ -- Bottom row buttons
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, },
}
local button_minus = Button:new{ local button_minus = Button:new{
text = "-1", text = "-1",
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -130,11 +90,9 @@ function SkimToWidget:init()
} }
local button_minus_ten = Button:new{ local button_minus_ten = Button:new{
text = "-10", text = "-10",
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -143,11 +101,9 @@ function SkimToWidget:init()
} }
local button_plus = Button:new{ local button_plus = Button:new{
text = "+1", text = "+1",
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -156,11 +112,9 @@ function SkimToWidget:init()
} }
local button_plus_ten = Button:new{ local button_plus_ten = Button:new{
text = "+10", text = "+10",
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -168,34 +122,40 @@ function SkimToWidget:init()
end, end,
} }
self.current_page_text = Button:new{ self.current_page_text = Button:new{
text = curr_page_display, text_func = function()
bordersize = 0, local curr_page_display = tostring(self.curr_page)
margin = self.button_margin, 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, radius = 0,
padding = 0, padding = 0,
bordersize = 0,
enabled = true, 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, show_parent = self,
callback = function() callback = function()
self.callback_switch_to_goto() self.callback_switch_to_goto()
end, end,
} }
-- Top row buttons
local chapter_next_text = "▷│" local chapter_next_text = "▷│"
local chapter_prev_text = "│◁" local chapter_prev_text = "│◁"
local bookmark_next_text = "☆▷" local bookmark_next_text = "☆▷"
local bookmark_prev_text = "◁☆" local bookmark_prev_text = "◁☆"
local bookmark_enabled_text = "★"
local bookmark_disabled_text = "☆"
if BD.mirroredUILayout() then if BD.mirroredUILayout() then
chapter_next_text, chapter_prev_text = chapter_prev_text, chapter_next_text chapter_next_text, chapter_prev_text = chapter_prev_text, chapter_next_text
bookmark_next_text, bookmark_prev_text = bookmark_prev_text, bookmark_next_text bookmark_next_text, bookmark_prev_text = bookmark_prev_text, bookmark_next_text
end end
local button_chapter_next = Button:new{ local button_chapter_next = Button:new{
text = chapter_next_text, text = chapter_next_text,
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -208,14 +168,11 @@ function SkimToWidget:init()
self:goToPage(self.page_count) self:goToPage(self.page_count)
end, end,
} }
local button_chapter_prev = Button:new{ local button_chapter_prev = Button:new{
text = chapter_prev_text, text = chapter_prev_text,
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -228,14 +185,11 @@ function SkimToWidget:init()
self:goToPage(1) self:goToPage(1)
end, end,
} }
local button_bookmark_next = Button:new{ local button_bookmark_next = Button:new{
text = bookmark_next_text, text = bookmark_next_text,
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -246,14 +200,11 @@ function SkimToWidget:init()
self:goToBookmark(page) self:goToBookmark(page)
end, end,
} }
local button_bookmark_prev = Button:new{ local button_bookmark_prev = Button:new{
text = bookmark_prev_text, text = bookmark_prev_text,
bordersize = self.button_bordersize,
margin = self.button_margin,
radius = 0, radius = 0,
enabled = true, enabled = true,
width = self.button_width, width = button_inner_width,
show_parent = self, show_parent = self,
vsync = true, vsync = true,
callback = function() callback = function()
@ -264,76 +215,86 @@ function SkimToWidget:init()
self:goToBookmark(page) self:goToBookmark(page)
end, 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 row_span = VerticalSpan:new{ width = Size.padding.fullscreen }
local button_table_up = HorizontalGroup:new{ 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", align = "center",
button_chapter_prev, button_chapter_prev,
small_button_span,
button_bookmark_prev, button_bookmark_prev,
horizontal_span_up, large_button_span,
self.button_bookmark_toggle,
large_button_span,
button_bookmark_next, button_bookmark_next,
small_button_span,
button_chapter_next, button_chapter_next,
} }
local bottom_buttons_row = HorizontalGroup:new{
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{
align = "center", align = "center",
button_minus, button_minus,
small_button_span,
button_minus_ten, button_minus_ten,
large_button_span,
self.current_page_text, self.current_page_text,
large_button_span,
button_plus_ten, button_plus_ten,
small_button_span,
button_plus, 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{ self.skimto_frame = FrameContainer:new{
radius = Size.radius.window,
bordersize = Size.border.window,
padding = 0,
margin = 0, margin = 0,
bordersize = frame_border_size,
padding = frame_padding,
radius = Size.radius.window,
background = Blitbuffer.COLOR_WHITE, background = Blitbuffer.COLOR_WHITE,
VerticalGroup:new{ VerticalGroup:new{
align = "center", align = "center",
skimto_bar, top_buttons_row,
skimto_line, row_span,
vertical_group_up, self.progress_bar,
CenterContainer:new{ row_span,
dimen = Geom:new{ bottom_buttons_row,
w = skimto_line:getSize().w,
h = self.skimto_progress:getSize().h,
},
self.skimto_progress,
},
vertical_group_down,
} }
} }
self.movable = MovableContainer:new{ self.movable = MovableContainer:new{
-- alpha = 0.8,
self.skimto_frame, self.skimto_frame,
} }
self[1] = WidgetContainer:new{ self[1] = WidgetContainer:new{
align = "center", align = "center",
dimen =Geom:new{ dimen =Geom:new{
x = 0, y = 0, x = 0, y = 0,
w = self.screen_width, w = screen_width,
h = self.screen_height, h = screen_height,
}, },
self.movable, self.movable,
} }
if Device:hasDPad() then if Device:hasDPad() then
self.buttons_layout = { self.buttons_layout = {
{ button_chapter_prev, button_bookmark_prev, button_bookmark_next, button_chapter_next }, { button_chapter_prev, button_bookmark_prev, self.button_bookmark_toggle, button_bookmark_next, button_chapter_next },
{ button_minus, button_minus_ten, button_plus_ten, button_plus }, { button_minus, button_minus_ten, self.current_page_text, button_plus_ten, button_plus },
} }
self.layout = self.buttons_layout self.layout = self.buttons_layout
self.layout[2][1]:onFocus() self.layout[2][1]:onFocus()
@ -361,11 +322,8 @@ function SkimToWidget:update()
self.curr_page = self.page_count self.curr_page = self.page_count
end end
self.progress_bar.percentage = self.curr_page / self.page_count self.progress_bar.percentage = self.curr_page / self.page_count
local curr_page_display = tostring(self.curr_page) self.current_page_text:setText(self.current_page_text:text_func(), self.current_page_text.width)
if self.ui.pagemap and self.ui.pagemap:wantsPageLabels() then self.button_bookmark_toggle:setText(self.button_bookmark_toggle:text_func(), self.button_bookmark_toggle.width)
curr_page_display = self.ui.pagemap:getCurrentPageLabel(true)
end
self.current_page_text:setText(curr_page_display, self.current_page_text.width)
end end
function SkimToWidget:addOriginToLocationStack(add_current) function SkimToWidget:addOriginToLocationStack(add_current)
Write Preview
Loading…
Cancel
Save