Fix some widget title height and close button alignment (#3366)

frontend/apps/reader/skimtowidget.lua

@@ -69,7 +69,7 @@ function SkimToWidget:init()
 
     self.skimto_title = FrameContainer:new{
         padding = Size.padding.default,
-        margin = Size.margin.default,
+        margin = Size.margin.title,
         bordersize = 0,
         TextWidget:new{
             text = self.dialog_title,
@@ -112,7 +112,7 @@ function SkimToWidget:init()
             h = self.skimto_title:getSize().h
         },
         self.skimto_title,
-        CloseButton:new{ window = self, },
+        CloseButton:new{ window = self, padding_top = Size.margin.title, },
     }
     self.button_minus = Button:new{
         text = "-1",

frontend/ui/widget/closebutton.lua

@@ -15,8 +15,6 @@ Example:
 local Font = require("ui/font")
 local FrameContainer = require("ui/widget/container/framecontainer")
 local GestureRange = require("ui/gesturerange")
-local HorizontalGroup = require("ui/widget/horizontalgroup")
-local HorizontalSpan = require("ui/widget/horizontalspan")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local TextWidget = require("ui/widget/textwidget")
 local Screen = require("device").screen
@@ -24,23 +22,32 @@ local Screen = require("device").screen
 local CloseButton = InputContainer:new{
     overlap_align = "right",
     window = nil,
+    padding_left = Screen:scaleBySize(14), -- for larger touch area
+    padding_right = 0,
+    padding_top = 0,
+    padding_bottom = 0,
 }
 
 function CloseButton:init()
     local text_widget = TextWidget:new{
         text = "×",
-        face = Font:getFace("cfont", 32),
+        face = Font:getFace("cfont", 30),
     }
-    local padding_span = HorizontalSpan:new{ width = Screen:scaleBySize(14) }
+
+    local text_size = text_widget:getSize()
+    -- The text box height is greater than its width, and we want this × to
+    -- be diagonally aligned with our top right border
+    local text_width_pad = (text_size.h - text_size.w) / 2
+    -- We also add the provided padding_right
 
     self[1] = FrameContainer:new{
         bordersize = 0,
         padding = 0,
-        HorizontalGroup:new{
-            padding_span,
-            text_widget,
-            padding_span,
-        }
+        padding_top = self.padding_top,
+        padding_bottom = self.padding_bottom,
+        padding_left = self.padding_left,
+        padding_right = self.padding_right + text_width_pad,
+        text_widget,
     }
 
     self.ges_events.Close = {

frontend/ui/widget/datewidget.lua

@@ -107,7 +107,7 @@ function DateWidget:update()
 
     local date_title = FrameContainer:new{
         padding = Size.padding.default,
-        margin = Size.margin.default,
+        margin = Size.margin.title,
         bordersize = 0,
         TextWidget:new{
             text = self.title_text,
@@ -128,7 +128,7 @@ function DateWidget:update()
             h = date_title:getSize().h
         },
         date_title,
-        CloseButton:new{ window = self, },
+        CloseButton:new{ window = self, padding_top = Size.margin.title, },
     }
     local buttons = {
         {

frontend/ui/widget/dictquicklookup.lua

@@ -415,7 +415,7 @@ function DictQuickLookup:update()
             h = self.dict_title:getSize().h
         },
         self.dict_title,
-        CloseButton:new{ window = self, },
+        CloseButton:new{ window = self, padding_top = self.title_margin, },
     }
 
     self.dict_frame = FrameContainer:new{

frontend/ui/widget/frontlightwidget.lua

@@ -238,6 +238,7 @@ end
 function FrontLightWidget:update()
     -- header
     self.light_title = FrameContainer:new{
+        padding = Size.padding.default,
         margin = Size.margin.title,
         bordersize = 0,
         TextWidget:new{
@@ -266,7 +267,7 @@ function FrontLightWidget:update()
             h = self.light_title:getSize().h
         },
         self.light_title,
-        CloseButton:new{ window = self, },
+        CloseButton:new{ window = self, padding_top = Size.margin.title, },
     }
     self.light_frame = FrameContainer:new{
         radius = Size.radius.window,

frontend/ui/widget/keyvaluepage.lua

@@ -50,6 +50,7 @@ local KeyValueTitle = VerticalGroup:new{
     title = "",
     tface = Font:getFace("tfont"),
     align = "left",
+    use_top_page_count = false,
 }
 
 function KeyValueTitle:init()
@@ -74,19 +75,6 @@ function KeyValueTitle:init()
         self.close_button,
     })
     -- page count and separation line
-    self.page_cnt = FrameContainer:new{
-        padding = Size.padding.default,
-        margin = 0,
-        bordersize = 0,
-        background = Blitbuffer.COLOR_WHITE,
-        -- overlap offset x will be updated in setPageCount method
-        overlap_offset = {0, -15},
-        TextWidget:new{
-            text = "",  -- page count
-            fgcolor = Blitbuffer.COLOR_GREY,
-            face = Font:getFace("smallffont"),
-        },
-    }
     self.title_bottom = OverlapGroup:new{
         dimen = { w = self.width, h = Size.line.thick },
         LineWidget:new{
@@ -94,8 +82,23 @@ function KeyValueTitle:init()
             background = Blitbuffer.COLOR_GREY,
             style = "solid",
         },
-        self.page_cnt,
     }
+    if self.use_top_page_count then
+        self.page_cnt = FrameContainer:new{
+            padding = Size.padding.default,
+            margin = 0,
+            bordersize = 0,
+            background = Blitbuffer.COLOR_WHITE,
+            -- overlap offset x will be updated in setPageCount method
+            overlap_offset = {0, -15},
+            TextWidget:new{
+                text = "",  -- page count
+                fgcolor = Blitbuffer.COLOR_GREY,
+                face = Font:getFace("smallffont"),
+            },
+        }
+        table.insert(self.title_bottom, self.page_cnt)
+    end
     table.insert(self, self.title_bottom)
     table.insert(self, VerticalSpan:new{ width = Size.span.vertical_large })
 end
@@ -248,6 +251,7 @@ local KeyValuePage = InputContainer:new{
     height = nil,
     -- index for the first item to show
     show_page = 1,
+    use_top_page_count = false,
 }
 
 function KeyValuePage:init()
@@ -365,6 +369,7 @@ function KeyValuePage:init()
         title = self.title,
         width = self.item_width,
         height = self.item_height,
+        use_top_page_count = self.use_top_page_count,
         kv_page = self,
     }
     -- setup main content

frontend/ui/widget/textviewer.lua

@@ -89,7 +89,7 @@ function TextViewer:init()
         }
     end
 
-    local closeb = CloseButton:new{ window = self, }
+    local closeb = CloseButton:new{ window = self, padding_top = Size.padding.tiny, }
     local title_text = TextBoxWidget:new{
         text = self.title,
         face = self.title_face,
@@ -98,15 +98,14 @@ function TextViewer:init()
     }
     local titlew = FrameContainer:new{
         padding = self.title_padding,
+        -- TextBoxWidget has less text top & bottom padding than TextWidget
+        -- (for a reasonable line height with multi lines), but we
+        -- can get the same as TextWidget by simply adding Size.padding.small
+        padding_top = self.title_padding + Size.padding.small,
+        padding_bottom = self.title_padding + Size.padding.small,
         margin = self.title_margin,
         bordersize = 0,
-        CenterContainer:new{
-            dimen = Geom:new{
-                w = self.width,
-                h = title_text:getSize().h,
-            },
-            title_text
-        }
+        title_text
     }
     titlew = OverlapGroup:new{
         dimen = {

frontend/ui/widget/timewidget.lua

@@ -93,7 +93,8 @@ function TimeWidget:update()
     }
 
     local time_title = FrameContainer:new{
-        margin = Size.margin.small,
+        padding = Size.padding.default,
+        margin = Size.margin.title,
         bordersize = 0,
         TextWidget:new{
             text = self.title_text,
@@ -114,7 +115,7 @@ function TimeWidget:update()
             h = time_title:getSize().h
         },
         time_title,
-        CloseButton:new{ window = self, },
+        CloseButton:new{ window = self, padding_top = Size.margin.title, },
     }
     local buttons = {
         {