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)

resources/icons/mdlight/cancel.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+	<path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 11.503,22C 6.25634,22 2.00305,17.7467 2.00305,12.5C 2.00305,7.25329 6.25634,2.99999 11.503,2.99999C 16.7497,2.99999 21.003,7.25329 21.003,12.5C 21.003,17.7467 16.7498,22 11.503,22 Z M 11.5031,21C 16.1975,21 20.003,17.1944 20.003,12.5C 20.003,10.3319 19.1913,8.35344 17.8552,6.85187L 5.85494,18.8522C 7.35651,20.1883 9.33499,21 11.5031,21 Z M 11.5031,3.99999C 6.80863,3.99999 3.00305,7.80557 3.00305,12.5C 3.00305,14.6665 3.81361,16.6437 5.14801,18.1449L 17.1479,6.14495C 15.6468,4.81054 13.6696,3.99999 11.5031,3.99999 Z "/>
+</svg>

resources/icons/mdlight/check.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+	<path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 18.8995,8.1005L 9,18L 4.05025,13.0503L 4.75736,12.3431L 9,16.5858L 18.1924,7.3934L 18.8995,8.1005 Z "/>
+</svg>

resources/icons/mdlight/move.down.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   enable-background="new 0 0 76.00 76.00"
+   xml:space="preserve"
+   id="svg4"
+   sodipodi:docname="move.down.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
+   id="metadata10"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs8" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="2560"
+   inkscape:window-height="1381"
+   id="namedview6"
+   showgrid="true"
+   inkscape:zoom="21"
+   inkscape:cx="24"
+   inkscape:cy="24"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg4"
+   inkscape:document-rotation="0"
+   inkscape:snap-page="true"><inkscape:grid
+     type="xygrid"
+     id="grid835"
+     originx="0"
+     originy="0" /></sodipodi:namedview>
+	
+<path
+   style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   d="M 24,31 40,15 H 8 Z"
+   id="path833"
+   sodipodi:nodetypes="cccc" /></svg>

resources/icons/mdlight/move.up.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   enable-background="new 0 0 76.00 76.00"
+   xml:space="preserve"
+   id="svg4"
+   sodipodi:docname="move.up.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
+   id="metadata10"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs8" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="2560"
+   inkscape:window-height="1381"
+   id="namedview6"
+   showgrid="true"
+   inkscape:zoom="21"
+   inkscape:cx="24"
+   inkscape:cy="24"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg4"
+   inkscape:document-rotation="0"
+   inkscape:snap-page="true"><inkscape:grid
+     type="xygrid"
+     id="grid835"
+     originx="0"
+     originy="0" /></sodipodi:namedview>
+	
+<path
+   style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   d="m 24,15.5 16,16 H 8 Z"
+   id="path833"
+   sodipodi:nodetypes="cccc" /></svg>