SortWidget: Redesign the footer to be more in line w/ Menu & KeyValuePage

frontend/ui/widget/sortwidget.lua

@@ -28,13 +28,12 @@ local SortTitleWidget = VerticalGroup:new{
     title = "",
     tface = Font:getFace("tfont"),
     align = "left",
-    use_top_page_count = false,
 }
 
 function SortTitleWidget:init()
     self.close_button = CloseButton:new{ window = self }
     local btn_width = self.close_button:getSize().w
-    -- title and close button
+    -- title, close button, separation line
     table.insert(self, OverlapGroup:new{
         dimen = { w = self.width },
         TextWidget:new{
@@ -44,7 +43,6 @@ function SortTitleWidget:init()
         },
         self.close_button,
     })
-    -- page count and separation line
     self.title_bottom = OverlapGroup:new{
         dimen = { w = self.width, h = Size.line.thick },
         LineWidget:new{
@@ -53,43 +51,15 @@ function SortTitleWidget:init()
             style = "solid",
         },
     }
-    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_DARK_GRAY,
-                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
 
-function SortTitleWidget:setPageCount(curr, total)
-    if total == 1 then
-        -- remove page count if there is only one page
-        table.remove(self.title_bottom, 2)
-        return
-    end
-    self.page_cnt[1]:setText(curr .. "/" .. total)
-    self.page_cnt.overlap_offset[1] = (self.width - self.page_cnt:getSize().w - 10)
-    self.title_bottom[2] = self.page_cnt
-end
-
 function SortTitleWidget:onClose()
     self.sort_page:onClose()
     return true
 end
 
-
 local SortItemWidget = InputContainer:new{
     item = nil,
     face = Font:getFace("smallinfofont"),
@@ -129,7 +99,7 @@ function SortItemWidget:init()
         checked = true,
     }
 
-    local text_max_width = self.width - 2*Size.padding.default - checked_widget:getSize().w
+    local text_max_width = self.width - 2 * Size.padding.default - checked_widget:getSize().w
 
     self[1] = FrameContainer:new{
         padding = 0,
@@ -178,15 +148,13 @@ local SortWidget = InputContainer:new{
     height = nil,
     -- index for the first item to show
     show_page = 1,
-    use_top_page_count = false,
     -- table of items to sort
     item_table = {},
     callback = nil,
 }
 
 function SortWidget:init()
-    -- no item is selected on start
-    self.marked = 0
+    self.marked = 0 -- no item is selected on start
     self.dimen = Geom:new{
         w = self.width or Screen:getWidth(),
         h = self.height or Screen:getHeight(),
@@ -209,40 +177,37 @@ function SortWidget:init()
     local padding = Size.padding.large
     self.width_widget = self.dimen.w - 2 * padding
     self.item_width = self.dimen.w - 2 * padding
+    self.footer_center_width = math.floor(self.width_widget * 22 / 100)
+    self.footer_button_width = math.floor(self.width_widget * 12 / 100)
     self.item_height = Size.item.height_big
-
     -- group for footer
-    local footer_left_text = "◀"
-    local footer_right_text = "▶"
-    local footer_first_up_text = "◀◀"
-    local footer_last_down_text = "▶▶"
+    local chevron_left = "chevron.left"
+    local chevron_right = "chevron.right"
+    local chevron_first = "chevron.first"
+    local chevron_last = "chevron.last"
     if BD.mirroredUILayout() then
-        footer_left_text, footer_right_text = footer_right_text, footer_left_text
-        footer_first_up_text, footer_last_down_text = footer_last_down_text, footer_first_up_text
+        chevron_left, chevron_right = chevron_right, chevron_left
+        chevron_first, chevron_last = chevron_last, chevron_first
     end
     self.footer_left = Button:new{
-        text = footer_left_text,
-        width = self.width_widget * 13 / 100,
+        icon = chevron_left,
+        width = self.footer_button_width,
         callback = function() self:prevPage() end,
-        text_font_size = 28,
         bordersize = 0,
-        padding = 0,
         radius = 0,
         show_parent = self,
     }
     self.footer_right = Button:new{
-        text = footer_right_text,
-        width = self.width_widget * 13 / 100,
+        icon = chevron_right,
+        width = self.footer_button_width,
         callback = function() self:nextPage() end,
-        text_font_size = 28,
         bordersize = 0,
-        padding = 0,
         radius = 0,
         show_parent = self,
     }
     self.footer_first_up = Button:new{
-        text = footer_first_up_text,
-        width = self.width_widget * 13 / 100,
+        icon = chevron_first,
+        width = self.footer_button_width,
         callback = function()
             if self.marked > 0 then
                 self:moveItem(-1)
@@ -250,15 +215,13 @@ function SortWidget:init()
                 self:goToPage(1)
             end
         end,
-        text_font_size = 28,
         bordersize = 0,
-        padding = 0,
         radius = 0,
         show_parent = self,
     }
     self.footer_last_down = Button:new{
-        text = footer_last_down_text,
-        width = self.width_widget * 13 / 100,
+        icon = chevron_last,
+        width = self.footer_button_width,
         callback = function()
             if self.marked > 0 then
                 self:moveItem(1)
@@ -266,42 +229,35 @@ function SortWidget:init()
                 self:goToPage(self.pages)
             end
         end,
-        text_font_size = 28,
         bordersize = 0,
-        padding = 0,
         radius = 0,
         show_parent = self,
     }
     self.footer_cancel = Button:new{
-        text = "✘",
-        width = self.width_widget * 13 / 100,
+        icon = "cancel",
+        width = self.footer_button_width,
         callback = function() self:onClose() end,
         bordersize = 0,
-        text_font_size = 28,
-        padding = 0,
         radius = 0,
         show_parent = self,
     }
-
     self.footer_ok = Button:new{
-        text= "✓",
-        width = self.width_widget * 13 / 100,
+        icon = "check",
+        width = self.footer_button_width,
         callback = function() self:onReturn() end,
         bordersize = 0,
-        padding = 0,
         radius = 0,
-        text_font_size = 28,
         show_parent = self,
     }
-
     self.footer_page = Button:new{
         text = "",
         hold_input = {
             title = _("Enter page number"),
-            type = "number",
             hint_func = function()
                 return "(" .. "1 - " .. self.pages .. ")"
             end,
+            type = "number",
+            deny_blank_input = true,
             callback = function(input)
                 local page = tonumber(input)
                 if page and page >= 1 and page <= self.pages then
@@ -315,27 +271,16 @@ function SortWidget:init()
         margin = 0,
         text_font_face = "pgfont",
         text_font_bold = false,
-        width = self.width_widget * 22 / 100,
+        width = self.footer_center_width,
         show_parent = self,
     }
-    local button_vertical_line = LineWidget:new{
-        dimen = Geom:new{ w = Size.line.thick, h = math.floor(self.item_height * 1.25) },
-        background = Blitbuffer.COLOR_DARK_GRAY,
-        style = "solid",
-    }
     self.page_info = HorizontalGroup:new{
         self.footer_cancel,
-        button_vertical_line,
         self.footer_first_up,
-        button_vertical_line,
         self.footer_left,
-        button_vertical_line,
         self.footer_page,
-        button_vertical_line,
         self.footer_right,
-        button_vertical_line,
         self.footer_last_down,
-        button_vertical_line,
         self.footer_ok,
     }
     local bottom_line = LineWidget:new{
@@ -345,7 +290,7 @@ function SortWidget:init()
     }
     local vertical_footer = VerticalGroup:new{
         bottom_line,
-        self.page_info
+        self.page_info,
     }
     local footer = BottomContainer:new{
         dimen = self.dimen:copy(),
@@ -356,11 +301,10 @@ function SortWidget:init()
         title = self.title,
         width = self.item_width,
         height = self.item_height,
-        use_top_page_count = self.use_top_page_count,
         sort_page = self,
     }
     -- setup main content
-    self.item_margin = self.item_height / 8
+    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
     self.items_per_page = math.floor(content_height / line_height)
@@ -426,7 +370,7 @@ function SortWidget:moveItem(diff)
     local move_to = self.marked + diff
     if move_to > 0 and move_to <= #self.item_table then
         table.insert(self.item_table, move_to, table.remove(self.item_table, self.marked))
-        self.show_page = math.ceil(move_to/self.items_per_page)
+        self.show_page = math.ceil(move_to / self.items_per_page)
         self.marked = move_to
         self:_populateItems()
     end
@@ -442,7 +386,6 @@ function SortWidget:_populateItems()
     else
         page_last = #self.item_table
     end
-
     for idx = idx_offset + 1, page_last do
         table.insert(self.main_content, VerticalSpan:new{ width = self.item_margin })
         local invert_status = false
@@ -461,25 +404,31 @@ function SortWidget:_populateItems()
             }
         )
     end
-
-    self.footer_page:setText(T(_("%1 / %2"), self.show_page, self.pages), self.width_widget * 22 / 100)
-    local footer_first_up_text = "◀◀"
-    local footer_last_down_text = "▶▶"
+    self.footer_page:setText(T(_("Page %1 of %2"), self.show_page, self.pages), self.footer_center_width)
+    if self.pages > 1 then
+        self.footer_page:enable()
+    else
+        self.footer_page:disableWithoutDimming()
+    end
+    local chevron_first = "chevron.first"
+    local chevron_last = "chevron.last"
+    local move_up = "move.up"
+    local move_down = "move.down"
     if BD.mirroredUILayout() then
-        footer_first_up_text, footer_last_down_text = footer_last_down_text, footer_first_up_text
+        chevron_first, chevron_last = chevron_last, chevron_first
+        move_up, move_down = move_down, move_up
     end
     if self.marked > 0 then
-        self.footer_first_up:setText("▲", self.width_widget * 13 / 100)
-        self.footer_last_down:setText("▼", self.width_widget * 13 / 100)
+        self.footer_first_up:setIcon(move_up, self.footer_button_width)
+        self.footer_last_down:setIcon(move_down, self.footer_button_width)
     else
-        self.footer_first_up:setText(footer_first_up_text, self.width_widget * 13 / 100)
-        self.footer_last_down:setText(footer_last_down_text, self.width_widget * 13 / 100)
+        self.footer_first_up:setIcon(chevron_first, self.footer_button_width)
+        self.footer_last_down:setIcon(chevron_last, self.footer_button_width)
     end
     self.footer_left:enableDisable(self.show_page > 1)
     self.footer_right:enableDisable(self.show_page < self.pages)
-    self.footer_first_up:enableDisable(self.show_page > 1 or self.marked > 0)
+    self.footer_first_up:enableDisable(self.show_page > 1 or (self.marked > 0 and self.marked > 1))
     self.footer_last_down:enableDisable(self.show_page < self.pages or (self.marked > 0 and self.marked < #self.item_table))
-
     UIManager:setDirty(self, function()
         return "ui", self.dimen
     end)