SortWidget: insert TitleBar (#8627)

frontend/ui/widget/sortwidget.lua

@@ -4,7 +4,6 @@ local BottomContainer = require("ui/widget/container/bottomcontainer")
 local Button = require("ui/widget/button")
 local CenterContainer = require("ui/widget/container/centercontainer")
 local CheckMark = require("ui/widget/checkmark")
-local CloseButton = require("ui/widget/closebutton")
 local Device = require("device")
 local Font = require("ui/font")
 local FrameContainer = require("ui/widget/container/framecontainer")
@@ -16,6 +15,7 @@ local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
+local TitleBar = require("ui/widget/titlebar")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
@@ -24,43 +24,6 @@ local util = require("util")
 local T = require("ffi/util").template
 local _ = require("gettext")
 
-local SortTitleWidget = VerticalGroup:new{
-    sort_page = nil,
-    title = "",
-    tface = Font:getFace("tfont"),
-    align = "left",
-}
-
-function SortTitleWidget:init()
-    self.close_button = CloseButton:new{ window = self }
-    local btn_width = self.close_button:getSize().w
-    -- title, close button, separation line
-    table.insert(self, OverlapGroup:new{
-        dimen = { w = self.width },
-        TextWidget:new{
-            text = self.title,
-            max_width = self.width - btn_width,
-            face = self.tface,
-        },
-        self.close_button,
-    })
-    self.title_bottom = OverlapGroup:new{
-        dimen = { w = self.width, h = Size.line.thick },
-        LineWidget:new{
-            dimen = Geom:new{ w = self.width, h = Size.line.thick },
-            background = Blitbuffer.COLOR_DARK_GRAY,
-            style = "solid",
-        },
-    }
-    table.insert(self, self.title_bottom)
-    table.insert(self, VerticalSpan:new{ width = Size.span.vertical_large })
-end
-
-function SortTitleWidget:onClose()
-    self.sort_page:onClose()
-    return true
-end
-
 local SortItemWidget = InputContainer:new{
     item = nil,
     face = Font:getFace("smallinfofont"),
@@ -290,7 +253,6 @@ function SortWidget:init()
     local bottom_line = LineWidget:new{
         dimen = Geom:new{ w = self.item_width, h = Size.line.thick },
         background = Blitbuffer.COLOR_DARK_GRAY,
-        style = "solid",
     }
     local vertical_footer = VerticalGroup:new{
         bottom_line,
@@ -301,30 +263,38 @@ function SortWidget:init()
         vertical_footer,
     }
     -- setup title bar
-    self.title_bar = SortTitleWidget:new{
+    self.title_bar = TitleBar:new{
+        width = self.dimen.w,
+        align = "left",
+        with_bottom_line = true,
+        bottom_line_color = Blitbuffer.COLOR_DARK_GRAY,
+        bottom_line_h_padding = padding,
         title = self.title,
-        width = self.item_width,
-        height = self.item_height,
-        sort_page = self,
+        close_callback = function() self:onClose() end,
+        show_parent = self,
     }
     -- setup main content
     self.item_margin = math.floor(self.item_height / 8)
     local line_height = self.item_height + self.item_margin
-    local content_height = self.dimen.h - self.title_bar:getSize().h - vertical_footer:getSize().h - padding
+    local content_height = self.dimen.h - self.title_bar:getHeight() - vertical_footer:getSize().h - padding
     self.items_per_page = math.floor(content_height / line_height)
     self.pages = math.ceil(#self.item_table / self.items_per_page)
     self.main_content = VerticalGroup:new{}
 
     self:_populateItems()
 
+    local padding_below_title = 0
+    if self.pages > 1 then -- center content vertically
+        padding_below_title = (content_height - self.items_per_page * line_height) / 2
+    end
     local frame_content = FrameContainer:new{
         height = self.dimen.h,
-        padding = padding,
+        padding = 0,
         bordersize = 0,
         background = Blitbuffer.COLOR_WHITE,
         VerticalGroup:new{
-            align = "left",
             self.title_bar,
+            VerticalSpan:new{ width = padding_below_title },
             self.main_content,
         },
     }

resources/icons/mdlight/appbar.menu.svg

@@ -10,7 +10,7 @@
    version="1.1"
    width="48"
    height="48"
-   viewBox="0 0 48 48"
+   viewBox="4 2 40 40"
    enable-background="new 0 0 24.00 24.00"
    xml:space="preserve"
    id="svg4"

resources/icons/mdlight/check.svg

@@ -10,7 +10,7 @@
    version="1.1"
    width="24"
    height="24"
-   viewBox="0 0 24.00 24.00"
+   viewBox="2 2 20 20"
    enable-background="new 0 0 24.00 24.00"
    xml:space="preserve"
    id="svg4"