[UX] Keyboard character selection popup (#4886)

frontend/ui/widget/virtualkeyboard.lua

@@ -17,9 +17,12 @@ local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
+local WidgetContainer = require("ui/widget/container/widgetcontainer")
 local logger = require("logger")
 local Screen = Device.screen
 
+local VirtualKeyPopup
+
 local VirtualKey = InputContainer:new{
     key = nil,
     icon = nil,
@@ -66,6 +69,13 @@ function VirtualKey:init()
         self.callback = function() self.keyboard:downLine() end
     else
         self.callback = function () self.keyboard:addChar(self.key) end
+        self.hold_callback = function()
+            if not self.key_chars then return end
+
+            VirtualKeyPopup:new{
+                parent_key = self,
+            }
+        end
         self.swipe_callback = function(ges)
             self.keyboard:addChar(self.key_chars[ges.direction])
         end
@@ -218,6 +228,163 @@ function VirtualKey:invert(invert, hold)
     self:update_keyboard(hold, false)
 end
 
+VirtualKeyPopup = FocusManager:new{
+    modal = true,
+    disable_double_tap = true,
+    inputbox = nil,
+    layout = {},
+}
+
+function VirtualKeyPopup:onTapClose(arg, ges)
+    if ges.pos:notIntersectWith(self[1][1].dimen) then
+        UIManager:close(self)
+        return true
+    end
+    return false
+end
+
+function VirtualKeyPopup:onClose()
+    UIManager:close(self)
+    return true
+end
+
+function VirtualKeyPopup:onPressKey()
+    self:getFocusItem():handleEvent(Event:new("TapSelect"))
+    return true
+end
+
+function VirtualKeyPopup:init()
+    local parent_key = self.parent_key
+    local key_chars = parent_key.key_chars
+    local key_char_orig = key_chars[1]
+
+    local extra_key_chars = {}
+    extra_key_chars[1] = key_chars[2]
+    extra_key_chars[2] = key_chars[3]
+    extra_key_chars[3] = key_chars[4]
+    local top_key_chars = {}
+    top_key_chars[1] = key_chars.northwest
+    top_key_chars[2] = key_chars.north
+    top_key_chars[3] = key_chars.northeast
+    local middle_key_chars = {}
+    middle_key_chars[1] = key_chars.west
+    middle_key_chars[2] = key_char_orig
+    middle_key_chars[3] = key_chars.east
+    local bottom_key_chars = {}
+    bottom_key_chars[1] = key_chars.southwest
+    bottom_key_chars[2] = key_chars.south
+    bottom_key_chars[3] = key_chars.southeast
+
+    local blank = HorizontalSpan:new{width = parent_key.width}
+    local h_key_padding = HorizontalSpan:new{width = parent_key.keyboard.key_padding}
+    local v_key_padding = VerticalSpan:new{width = parent_key.keyboard.key_padding}
+
+    local vertical_group = VerticalGroup:new{}
+    local horizontal_group_extra = HorizontalGroup:new{}
+    local horizontal_group_top = HorizontalGroup:new{}
+    local horizontal_group_middle = HorizontalGroup:new{}
+    local horizontal_group_bottom = HorizontalGroup:new{}
+
+    local function horizontalRow(chars, group)
+        local layout_horizontal = {}
+        for i = 1,3 do
+            local v = chars[i]
+
+            if v then
+                local virtual_key = VirtualKey:new{
+                    key = v,
+                    label = v,
+                    keyboard = parent_key.keyboard,
+                    key_chars = key_chars,
+                    width = parent_key.width,
+                    height = parent_key.height,
+                    hold_callback = nil,
+                }
+
+                if v == key_char_orig then
+                    virtual_key[1].background = Blitbuffer.COLOR_LIGHT_GRAY
+                end
+
+                table.insert(group, virtual_key)
+                table.insert(layout_horizontal, virtual_key)
+            else
+                table.insert(group, blank)
+            end
+            if i ~= #chars then
+                table.insert(group, h_key_padding)
+            end
+        end
+        table.insert(vertical_group, group)
+        table.insert(VirtualKeyPopup.layout, layout_horizontal)
+    end
+    horizontalRow(extra_key_chars, horizontal_group_extra)
+    table.insert(vertical_group, v_key_padding)
+    horizontalRow(top_key_chars, horizontal_group_top)
+    table.insert(vertical_group, v_key_padding)
+    horizontalRow(middle_key_chars, horizontal_group_middle)
+    table.insert(vertical_group, v_key_padding)
+    horizontalRow(bottom_key_chars, horizontal_group_bottom)
+
+    local keyboard_frame = FrameContainer:new{
+        margin = 0,
+        bordersize = Size.border.default,
+        background = Blitbuffer.COLOR_WHITE,
+        radius = 0,
+        padding = parent_key.keyboard.padding,
+        CenterContainer:new{
+            dimen = Geom:new{
+                w = parent_key.width*3 - 2*Size.border.default + 4*parent_key.keyboard.key_padding,
+                h = parent_key.height*4 - 2*Size.border.default + 5*parent_key.keyboard.key_padding,
+            },
+            vertical_group,
+        }
+    }
+    keyboard_frame.dimen = keyboard_frame:getSize()
+
+    VirtualKeyPopup.ges_events = {
+        TapClose = {
+            GestureRange:new{
+                ges = "tap",
+            }
+        },
+    }
+
+    if Device:hasDPad() then
+        VirtualKeyPopup.key_events.PressKey = { {"Press"}, doc = "select key" }
+    end
+    if Device:hasKeys() then
+        VirtualKeyPopup.key_events.Close = { {"Back"}, doc = "close keyboard" }
+    end
+
+    local position_container = WidgetContainer:new{
+        dimen = {
+            x = parent_key.dimen.x - parent_key.width - 6*parent_key.keyboard.padding - parent_key.keyboard.bordersize,
+            y = parent_key.dimen.y - parent_key.height*2 - 8*parent_key.keyboard.padding - parent_key.keyboard.bordersize,
+            h = Screen:getSize().h,
+            w = Screen:getSize().w,
+        },
+        keyboard_frame,
+    }
+    if position_container.dimen.x < 0 then
+        position_container.dimen.x = 0
+    elseif position_container.dimen.x + keyboard_frame.dimen.w > Screen:getWidth() then
+        position_container.dimen.x = Screen:getWidth() - keyboard_frame.dimen.w
+    end
+    if position_container.dimen.y < 0 then
+        position_container.dimen.y = 0
+    elseif position_container.dimen.y + keyboard_frame.dimen.h > Screen:getHeight() then
+        position_container.dimen.y = Screen:getHeight() - keyboard_frame.dimen.h
+    end
+
+    VirtualKeyPopup[1] = position_container
+
+    UIManager:show(VirtualKeyPopup)
+
+    UIManager:setDirty(self, function()
+        return "ui", keyboard_frame.dimen
+    end)
+end
+
 local VirtualKeyboard = FocusManager:new{
     modal = true,
     disable_double_tap = true,