use borderless flat bookmark/toc window

frontend/apps/reader/modules/readerbookmark.lua

@@ -95,21 +95,21 @@ function ReaderBookmark:onShowBookmark()
         end
         v.text = "Page "..page.." "..v.notes.." @ "..v.datetime
     end
-    
-    local menu_container = CenterContainer:new{
-        dimen = Screen:getSize(),
-    }
 
     local bm_menu = Menu:new{
         title = "Bookmarks",
         item_table = self.bookmarks,
-        width = Screen:getWidth()-50,
-        height = Screen:getHeight()-50,
+        width = Screen:getWidth(),
+        height = Screen:getHeight(),
         show_parent = menu_container,
+        is_borderless = true,
+    }
+
+    local menu_container = CenterContainer:new{
+        dimen = Screen:getSize(),
+        bm_menu,
     }
-    
-    table.insert(menu_container, bm_menu)
-    
+
     -- buid up menu widget method as closure
     local doc = self.ui.document
     local view = self.view

frontend/apps/reader/modules/readertoc.lua

@@ -118,20 +118,20 @@ function ReaderToc:onShowToc()
         end
     end
 
-    local menu_container = CenterContainer:new{
-        dimen = Screen:getSize(),
-    }
-
     local toc_menu = Menu:new{
         title = _("Table of Contents"),
         item_table = self.toc,
         ui = self.ui,
-        width = Screen:getWidth()-50,
-        height = Screen:getHeight()-50,
+        width = Screen:getWidth(),
+        height = Screen:getHeight(),
         show_parent = menu_container,
+        is_borderless = true,
     }
 
-    table.insert(menu_container, toc_menu)
+    local menu_container = CenterContainer:new{
+        dimen = Screen:getSize(),
+        toc_menu,
+    }
 
     function toc_menu:onMenuChoice(item)
         self.ui:handleEvent(Event:new("PageUpdate", item.page))

frontend/ui/widget/menu.lua

@@ -285,6 +285,7 @@ local Menu = FocusManager:new{
     width = 500,
     -- height will be calculated according to item number if not given
     height = nil,
+    header_padding = Screen:scaleByDPI(10),
     dimen = Geom:new{},
     item_table = {},
     item_shortcuts = {
@@ -324,7 +325,7 @@ function Menu:_recalculateDimen()
         w = self.dimen.w,
         h = Screen:scaleByDPI(46), -- hardcoded for now
     }
-    self.perpage = math.floor((self.dimen.h - self.dimen.x) / self.item_dimen.h) - 2
+    self.perpage = math.floor((self.dimen.h - self.dimen.y - self.header_padding) / self.item_dimen.h) - 2
     self.page_num = math.ceil(#self.item_table / self.perpage)
 end
 
@@ -372,7 +373,10 @@ function Menu:init()
         self.page_info_right_chev
     }
 
-    local header = self.title_bar
+    local header = VerticalGroup:new{
+        VerticalSpan:new{width = self.header_padding},
+        self.title_bar,
+    }
     local body = self.item_group
     local footer = BottomContainer:new{
         dimen = self.dimen:copy(),