TextViewer widget, used when onHold on truncated item in KeyValuePage

frontend/ui/widget/keyvaluepage.lua

@@ -32,6 +32,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local RenderText = require("ui/rendertext")
+local TextViewer = require("ui/widget/textviewer")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -117,6 +118,8 @@ local KeyValueItem = InputContainer:new{
     tface = Font:getFace("smallinfofontbold"),
     width = nil,
     height = nil,
+    textviewer_width = nil,
+    textviewer_height = nil,
 }
 
 function KeyValueItem:init()
@@ -150,6 +153,15 @@ function KeyValueItem:init()
                 self.show_value = RenderText:truncateTextByWidth(self.value, self.cface, frame_internal_width - key_w_rendered, true)
                 self.show_key = self.key
             end
+            -- allow for displaying the non-truncated texts with Hold
+            if Device:isTouchDevice() then
+                self.ges_events.Hold = {
+                    GestureRange:new{
+                        ges = "hold",
+                        range = self.dimen,
+                    }
+                }
+            end
         -- misalign to fit all info
         else
             key_w = key_w_rendered + space_w_rendered
@@ -195,6 +207,17 @@ function KeyValueItem:onTap()
     return true
 end
 
+function KeyValueItem:onHold()
+    local textviewer = TextViewer:new{
+        title = self.key,
+        text = self.value,
+        width = self.textviewer_width,
+        height = self.textviewer_height,
+    }
+    UIManager:show(textviewer)
+    return true
+end
+
 
 local KeyValuePage = InputContainer:new{
     title = "",
@@ -210,6 +233,11 @@ function KeyValuePage:init()
         h = self.height or Screen:getHeight(),
     }
 
+    if Device:hasKeys() then
+        self.key_events = {
+            Close = { {"Back"}, doc = "close page" },
+        }
+    end
     if Device:isTouchDevice() then
         self.ges_events.Swipe = {
             GestureRange:new{
@@ -236,6 +264,11 @@ function KeyValuePage:init()
     self.items_per_page = math.floor(content_height / line_height)
     self.pages = math.ceil(#self.kv_pairs / self.items_per_page)
     self.main_content = VerticalGroup:new{}
+
+    -- set textviewer height to let our title fully visible
+    self.textviewer_width = self.item_width
+    self.textviewer_height = self.dimen.h - 2*self.title_bar:getSize().h
+
     self:_populateItems()
     -- assemble page
     self[1] = FrameContainer:new{
@@ -285,11 +318,15 @@ function KeyValuePage:_populateItems()
                     key = entry[1],
                     value = entry[2],
                     callback = entry.callback,
+                    textviewer_width = self.textviewer_width,
+                    textviewer_height = self.textviewer_height,
                 }
             )
         elseif type(entry) == "string" then
             local c = string.sub(entry, 1, 1)
             if c == "-" then
+                table.insert(self.main_content,
+                             VerticalSpan:new{ width = self.item_margin })
                 table.insert(self.main_content, LineWidget:new{
                     background = Blitbuffer.COLOR_LIGHT_GREY,
                     dimen = Geom:new{
@@ -316,6 +353,12 @@ function KeyValuePage:onSwipe(arg, ges_ev)
     elseif ges_ev.direction == "east" then
         self:prevPage()
         return true
+    else
+        -- trigger full refresh
+        UIManager:setDirty(nil, "full")
+        -- a long diagonal swipe may also be used for taking a screenshot,
+        -- so let it propagate
+        return false
     end
 end
 

frontend/ui/widget/textviewer.lua

@@ -0,0 +1,238 @@
+--[[
+Display some text in scrollable view
+]]
+local Blitbuffer = require("ffi/blitbuffer")
+local ButtonTable = require("ui/widget/buttontable")
+local CenterContainer = require("ui/widget/container/centercontainer")
+local CloseButton = require("ui/widget/closebutton")
+local Device = require("device")
+local Geom = require("ui/geometry")
+local Font = require("ui/font")
+local FrameContainer = require("ui/widget/container/framecontainer")
+local GestureRange = require("ui/gesturerange")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local LineWidget = require("ui/widget/linewidget")
+local OverlapGroup = require("ui/widget/overlapgroup")
+local ScrollTextWidget = require("ui/widget/scrolltextwidget")
+local TextWidget = require("ui/widget/textwidget")
+local UIManager = require("ui/uimanager")
+local VerticalGroup = require("ui/widget/verticalgroup")
+local WidgetContainer = require("ui/widget/container/widgetcontainer")
+local logger = require("logger")
+local _ = require("gettext")
+local Screen = Device.screen
+
+local TextViewer = InputContainer:new{
+    title = nil,
+    text = nil,
+    width = nil,
+    height = nil,
+
+    title_face = Font:getFace("x_smalltfont"),
+    text_face = Font:getFace("x_smallinfofont"),
+    title_padding = Screen:scaleBySize(5),
+    title_margin = Screen:scaleBySize(2),
+    text_padding = Screen:scaleBySize(10),
+    text_margin = Screen:scaleBySize(2),
+    button_padding = Screen:scaleBySize(14),
+}
+
+function TextViewer:init()
+    local orig_dimen = self.frame and self.frame.dimen or Geom:new{}
+    -- calculate window dimension
+    self.align = "center"
+    self.region = Geom:new{
+        x = 0, y = 0,
+        w = Screen:getWidth(),
+        h = Screen:getHeight(),
+    }
+    self.width = self.width or Screen:getWidth() - Screen:scaleBySize(30)
+    self.height = self.height or Screen:getHeight() - Screen:scaleBySize(30)
+
+    if Device:hasKeys() then
+        self.key_events = {
+            Close = { {"Back"}, doc = "close text viewer" }
+        }
+    end
+
+    if Device:isTouchDevice() then
+        self.ges_events = {
+            TapClose = {
+                GestureRange:new{
+                    ges = "tap",
+                    range = Geom:new{
+                        x = 0, y = 0,
+                        w = Screen:getWidth(),
+                        h = Screen:getHeight(),
+                    }
+                },
+            },
+            Swipe = {
+                GestureRange:new{
+                    ges = "swipe",
+                    range = Geom:new{
+                        x = 0, y = 0,
+                        w = Screen:getWidth(),
+                        h = Screen:getHeight(),
+                    }
+                },
+            },
+        }
+    end
+
+    local title_text = TextWidget:new{
+        text = self.title,
+        face = self.title_face,
+        bold = true,
+        width = self.width - 2*self.title_padding - 2*self.title_margin,
+    }
+    local titlew = FrameContainer:new{
+        padding = self.title_padding,
+        margin = self.title_margin,
+        bordersize = 0,
+        CenterContainer:new{
+            dimen = Geom:new{
+                w = self.width,
+                h = title_text:getSize().h,
+            },
+            title_text
+        }
+    }
+    titlew = OverlapGroup:new{
+        dimen = {
+            w = self.width,
+            h = titlew:getSize().h
+        },
+        titlew,
+        CloseButton:new{ window = self, },
+    }
+
+    local separator = LineWidget:new{
+        dimen = Geom:new{
+            w = self.width,
+            h = Screen:scaleBySize(2),
+        }
+    }
+
+    local buttons = {
+        {
+            {
+                text = _("Close"),
+                callback = function()
+                    UIManager:close(self)
+                end,
+            },
+        },
+    }
+    local button_table = ButtonTable:new{
+        width = self.width - self.button_padding,
+        button_font_face = "cfont",
+        button_font_size = 20,
+        buttons = buttons,
+        zero_sep = true,
+        show_parent = self,
+    }
+
+    local textw_height = self.height - titlew:getSize().h - separator:getSize().h - button_table:getSize().h
+
+    self.scroll_text_w = ScrollTextWidget:new{
+            text = self.text,
+            face = self.text_face,
+            width = self.width - 2*self.text_padding - 2*self.text_margin,
+            height = textw_height - 2*self.text_padding -2*self.text_margin,
+            dialog = self,
+            justified = true,
+    }
+    local textw = FrameContainer:new{
+        padding = self.text_padding,
+        margin = self.text_margin,
+        bordersize = 0,
+        self.scroll_text_w
+    }
+
+    self.frame = FrameContainer:new{
+        radius = 8,
+        bordersize = 3,
+        padding = 0,
+        margin = 0,
+        background = Blitbuffer.COLOR_WHITE,
+        VerticalGroup:new{
+            align = "left",
+            titlew,
+            separator,
+            CenterContainer:new{
+                dimen = Geom:new{
+                    w = self.width,
+                    h = textw:getSize().h,
+                },
+                textw,
+            },
+            CenterContainer:new{
+                dimen = Geom:new{
+                    w = self.width,
+                    h = button_table:getSize().h,
+                },
+                button_table,
+            }
+        }
+    }
+    self[1] = WidgetContainer:new{
+        align = self.align,
+        dimen = self.region,
+        self.frame,
+    }
+    UIManager:setDirty("all", function()
+        local update_region = self.frame.dimen:combine(orig_dimen)
+        logger.dbg("update region", update_region)
+        return "partial", update_region
+    end)
+end
+
+function TextViewer:onCloseWidget()
+    UIManager:setDirty(nil, function()
+        return "partial", self.frame.dimen
+    end)
+    return true
+end
+
+function TextViewer:onShow()
+    UIManager:setDirty(self, function()
+        return "ui", self.frame.dimen
+    end)
+    return true
+end
+
+function TextViewer:onAnyKeyPressed()
+    UIManager:close(self)
+    return true
+end
+
+function TextViewer:onTapClose(arg, ges_ev)
+    if ges_ev.pos:notIntersectWith(self.frame.dimen) then
+        self:onClose()
+    end
+    return true
+end
+
+function TextViewer:onClose()
+    UIManager:close(self)
+    return true
+end
+
+function TextViewer:onSwipe(arg, ges)
+    if ges.direction == "west" then
+        self.scroll_text_w:scrollText(1)
+        return true
+    elseif ges.direction == "east" then
+        self.scroll_text_w:scrollText(-1)
+        return true
+    else
+        -- trigger full refresh
+        UIManager:setDirty(nil, "full")
+        -- a long diagonal swipe may also be used for taking a screenshot,
+        -- so let it propagate
+        return false
+    end
+end
+
+return TextViewer