KeyValuePage: improve looks

Fixes #2578.

* key bolded
* values normally left-aligned at 50%
* allows misalignment for the sake of fitting everything on one line

frontend/apps/filemanager/filemanagerhistory.lua

@@ -1,16 +1,17 @@
-local InputContainer = require("ui/widget/container/inputcontainer")
-local CenterContainer = require("ui/widget/container/centercontainer")
 local ButtonDialog = require("ui/widget/buttondialog")
-local UIManager = require("ui/uimanager")
+local CenterContainer = require("ui/widget/container/centercontainer")
+local DocSettings = require("docsettings")
+local Font = require("ui/font")
+local InfoMessage = require("ui/widget/infomessage")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local KeyValuePage = require("ui/widget/keyvaluepage")
 local Menu = require("ui/widget/menu")
+local UIManager = require("ui/uimanager")
+local RenderText = require("ui/rendertext")
 local Screen = require("device").screen
 local _ = require("gettext")
-local KeyValuePage = require("ui/widget/keyvaluepage")
-local DocSettings = require("docsettings")
-local InfoMessage = require("ui/widget/infomessage")
 local T = require("ffi/util").template
-local RenderText = require("ui/rendertext")
-local Font = require("ui/font")
+
 local FileManagerHistory = InputContainer:extend{
     hist_menu_title = _("History"),
 }
@@ -64,11 +65,11 @@ function FileManagerHistory:buildBookInformationTable(book_props)
     end
 
     return {
-        { T(_("Title: %1"), book_props.title), "" },
-        { T(_("Authors: %1"), book_props.authors), "" },
-        { T(_("Series: %1"), book_props.series), "" },
-        { T(_("Pages: %1"), book_props.pages), "" },
-        { T(_("Language: %1"), string.upper(book_props.language)), "" },
+        { _("Title:"), book_props.title },
+        { _("Authors:"), book_props.authors },
+        { _("Series:"), book_props.series },
+        { _("Pages:"), book_props.pages },
+        { _("Language:"), string.upper(book_props.language) },
     }
 end
 

frontend/ui/widget/keyvaluepage.lua

@@ -19,23 +19,23 @@ Example:
 
 ]]
 
-local InputContainer = require("ui/widget/container/inputcontainer")
-local FrameContainer = require("ui/widget/container/framecontainer")
-local VerticalGroup = require("ui/widget/verticalgroup")
-local VerticalSpan = require("ui/widget/verticalspan")
-local OverlapGroup = require("ui/widget/overlapgroup")
-local LeftContainer = require("ui/widget/container/leftcontainer")
-local RightContainer = require("ui/widget/container/rightcontainer")
-local LineWidget = require("ui/widget/linewidget")
 local Blitbuffer = require("ffi/blitbuffer")
 local CloseButton = require("ui/widget/closebutton")
-local UIManager = require("ui/uimanager")
-local TextWidget = require("ui/widget/textwidget")
+local Device = require("device")
+local Font = require("ui/font")
+local FrameContainer = require("ui/widget/container/framecontainer")
+local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
+local HorizontalGroup = require("ui/widget/horizontalgroup")
+local InputContainer = require("ui/widget/container/inputcontainer")
+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 Geom = require("ui/geometry")
-local Font = require("ui/font")
-local Device = require("device")
+local TextWidget = require("ui/widget/textwidget")
+local UIManager = require("ui/uimanager")
+local VerticalGroup = require("ui/widget/verticalgroup")
+local VerticalSpan = require("ui/widget/verticalspan")
 local Screen = Device.screen
 
 local KeyValueTitle = VerticalGroup:new{
@@ -114,6 +114,7 @@ local KeyValueItem = InputContainer:new{
     key = nil,
     value = nil,
     cface = Font:getFace("cfont"),
+    tface = Font:getFace("tfont"),
     width = nil,
     height = nil,
 }
@@ -130,16 +131,28 @@ function KeyValueItem:init()
         }
     end
 
-    local key_w = RenderText:sizeUtf8Text(0, self.width, self.cface, self.key).x
-    local value_w = RenderText:sizeUtf8Text(0, self.width, self.cface, self.value).x
-    if key_w + value_w > self.width then
-        -- truncate key or value so they fits in one row
-        if key_w >= value_w then
-            self.show_key = RenderText:truncateTextByWidth(self.key, self.cface, self.width-value_w)
-            self.show_value = self.value
+    local key_w = self.width / 2
+    local value_w = self.width / 2
+    local key_w_rendered = RenderText:sizeUtf8Text(0, self.width, self.tface, self.key).x
+    local value_w_rendered = RenderText:sizeUtf8Text(0, self.width, self.cface, self.value).x
+    local space_w_rendered = RenderText:sizeUtf8Text(0, self.width, self.cface, " ").x
+    if key_w_rendered > key_w or value_w_rendered > value_w then
+        -- truncate key or value so they fit in one row
+        if key_w_rendered + value_w_rendered > self.width then
+            if key_w_rendered >= value_w_rendered then
+                key_w = self.width-value_w_rendered
+                self.show_key = RenderText:truncateTextByWidth(self.key, self.tface, self.width-value_w_rendered)
+                self.show_value = self.value
+            else
+                key_w = key_w_rendered + space_w_rendered
+                self.show_value = RenderText:truncateTextByWidth(self.value, self.cface, self.width-key_w_rendered, true)
+                self.show_key = self.key
+            end
+        -- misalign to fit all info
         else
-            self.show_value = RenderText:truncateTextByWidth(self.value, self.cface, self.width-key_w, true)
+            key_w = key_w_rendered + space_w_rendered
             self.show_key = self.key
+            self.show_value = self.value
         end
     else
         self.show_key = self.key
@@ -149,17 +162,23 @@ function KeyValueItem:init()
     self[1] = FrameContainer:new{
         padding = 0,
         bordersize = 0,
-        OverlapGroup:new{
+        HorizontalGroup:new{
             dimen = self.dimen:copy(),
             LeftContainer:new{
-                dimen = self.dimen:copy(),
+                dimen = {
+                    w = key_w,
+                    h = self.height
+                },
                 TextWidget:new{
                     text = self.show_key,
-                    face = self.cface,
+                    face = self.tface,
                 }
             },
-            RightContainer:new{
-                dimen = self.dimen:copy(),
+            LeftContainer:new{
+                dimen = {
+                    w = value_w,
+                    h = self.height
+                },
                 TextWidget:new{
                     text = self.show_value,
                     face = self.cface,

plugins/systemstat.koplugin/main.lua

@@ -30,7 +30,7 @@ function SystemStat:put(p)
 end
 
 function SystemStat:appendCounters()
-    self:put({_("KOReader Started at"), os.date("%c", self.start_sec)})
+    self:put({_("KOReader started at"), os.date("%c", self.start_sec)})
     if self.suspend_sec then
        self:put({_("  Last suspend time"), os.date("%c", self.suspend_sec)})
     end