Style keyboard elements

itemcontroller.lua

@@ -148,8 +148,9 @@ local PAGES = {
     local pageState = state:currentPageState({
       sortMode = 1,
       filter = "",
-      displayKeyboard = true,
+      displayKeyboard = false,
-      currentPage = 1
+      currentPage = 1,
+      reloadState = function() end
     })
 
     local function _genSort(func, invert, tiebreaker)
@@ -411,24 +412,35 @@ local PAGES = {
     }
 
     local function charInputKeyList(chars, backspace)
-      local keys = {}
+      local keys = { Element:new{ id = "LPAD", bgColor = colors.cyan, width = 0 } }
       for i=1,#chars do
         local key = chars:sub(i, i)
         -- ((not backspace) and i == #keys and 0) or 1
-        table.insert(keys, Padding:new{ bgColor = colors.black, right = 0, element = Text:new{
+        table.insert(keys, Padding:new{ bgColor = colors.cyan, right = 1, element = Text:new{
           id = key,
           text = key,
-          bgColor = colors.gray
+          bgColor = colors.gray,
+          onClick = function()
+            pageState.filter = pageState.filter..key
+            pageState.reloadState()
+            return true
+          end
         }})
       end
       if backspace then
         table.insert(keys, Text:new{
           id = KEY_BACKSPACE,
           text = "<--",
-          bgColor = colors.gray
+          bgColor = colors.gray,
+          onClick = function()
+            pageState.filter = fitText(pageState.filter, math.max(0, #pageState.filter - 1))
+            pageState.reloadState()
+            return true
+          end
         })
       end
       return List:new{
+        bgColor = colors.cyan,
         [Orientation:getId()] = Orientation.HORIZONTAL,
         [Children:getId()] = keys
       }
@@ -442,9 +454,15 @@ local PAGES = {
       table.insert(keyboardLines.elements, keyLineList)
     end
 
+    for _,line in ipairs(keyboardLines.elements) do
+      local pad = line:findById("LPAD")
+      pad:setWidth(keyboardWidth - (KEYBOARD_HPAD * 2) - line:getWidth())
+    end
+
     table.insert(keyboardLines.elements, 1, Text:new{ id = ID_FILTER_DISPLAY })
 
     local keyboardList = Padding:new{ bgColor = colors.cyan, left = KEYBOARD_HPAD, right = KEYBOARD_HPAD, element = List:new{
+      bgColor = colors.cyan,
       [Orientation:getId()] = Orientation.VERTICAL,
       [Children:getId()] = keyboardLines.elements
     }}
@@ -530,23 +548,6 @@ local PAGES = {
       screenContainer:setDirty(true)
     end
 
-    for _,line in ipairs(keyboardLines.lines) do
-      for i=1,#line[1] do
-        local key = line[1]:sub(i, i)
-        keyboardList:findById(key):setOnClick(function()
-          pageState.filter = pageState.filter..key
-          reloadState()
-          return true
-        end)
-      end
-    end
-
-    keyboardList:findById(KEY_BACKSPACE):setOnClick(function()
-      pageState.filter = fitText(pageState.filter, math.max(0, #pageState.filter - 1))
-      reloadState()
-      return true
-    end)
-
     local function bindTabActionButtons()
       local function onClickHandler(change)
         return function()
@@ -571,7 +572,7 @@ local PAGES = {
 
     keyboardButton:setOnClick(function()
       Logger:debug("Toggling keyboard...")
-      pageState.showKeyboard = not pageState.showKeyboard
+      pageState.displayKeyboard = not pageState.displayKeyboard
 
       reloadState()
       return true
@@ -600,6 +601,8 @@ local PAGES = {
       return true
     end)
 
+    pageState.reloadState = reloadState
+
     reloadState()
 
     return renderDefault(state, screenContainer)