From c560be3740c817ffeddd060b89b434aa099e12d7 Mon Sep 17 00:00:00 2001
From: hius07 <62179190+hius07@users.noreply.github.com>
Date: Fri, 16 Apr 2021 23:00:02 +0300
Subject: [PATCH] SortWidget: Redesign the footer to be more in line w/ Menu &
KeyValuePage
---
frontend/ui/widget/sortwidget.lua | 143 +++++++++-----------------
resources/icons/mdlight/cancel.svg | 5 +
resources/icons/mdlight/check.svg | 5 +
resources/icons/mdlight/move.down.svg | 55 ++++++++++
resources/icons/mdlight/move.up.svg | 55 ++++++++++
5 files changed, 166 insertions(+), 97 deletions(-)
create mode 100644 resources/icons/mdlight/cancel.svg
create mode 100644 resources/icons/mdlight/check.svg
create mode 100644 resources/icons/mdlight/move.down.svg
create mode 100644 resources/icons/mdlight/move.up.svg
diff --git a/frontend/ui/widget/sortwidget.lua b/frontend/ui/widget/sortwidget.lua
index 0d00b1cf4..30288e524 100644
--- a/frontend/ui/widget/sortwidget.lua
+++ b/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)
diff --git a/resources/icons/mdlight/cancel.svg b/resources/icons/mdlight/cancel.svg
new file mode 100644
index 000000000..e35a0ddaa
--- /dev/null
+++ b/resources/icons/mdlight/cancel.svg
@@ -0,0 +1,5 @@
+
+
+
diff --git a/resources/icons/mdlight/check.svg b/resources/icons/mdlight/check.svg
new file mode 100644
index 000000000..f329bdff2
--- /dev/null
+++ b/resources/icons/mdlight/check.svg
@@ -0,0 +1,5 @@
+
+
+
diff --git a/resources/icons/mdlight/move.down.svg b/resources/icons/mdlight/move.down.svg
new file mode 100644
index 000000000..adefb0e58
--- /dev/null
+++ b/resources/icons/mdlight/move.down.svg
@@ -0,0 +1,55 @@
+
+
diff --git a/resources/icons/mdlight/move.up.svg b/resources/icons/mdlight/move.up.svg
new file mode 100644
index 000000000..9de725165
--- /dev/null
+++ b/resources/icons/mdlight/move.up.svg
@@ -0,0 +1,55 @@
+
+