[UX] Improve ConfigDialog (#3443)

frontend/ui/widget/configdialog.lua

@@ -1,3 +1,4 @@
+local Button = require("ui/widget/button")
 local Blitbuffer = require("ffi/blitbuffer")
 local BottomContainer = require("ui/widget/container/bottomcontainer")
 local CenterContainer = require("ui/widget/container/centercontainer")
@@ -15,6 +16,7 @@ local IconButton = require("ui/widget/iconbutton")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
+local RenderText = require("ui/rendertext")
 local RightContainer = require("ui/widget/container/rightcontainer")
 local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
@@ -144,20 +146,25 @@ function ConfigOption:init()
     -- make default styles
     local default_name_font_size = 20
     local default_item_font_size = 16
-    local default_items_spacing = 30
+    local default_items_spacing = 40
     local default_option_height = 50
     local default_option_padding = Size.padding.large
     local max_option_name_width = 0
+    local txt_width = 0
+    local padding_small = Size.padding.small
+    local padding_button = Size.padding.button
     for c = 1, #self.options do
         local name_font_face = self.options[c].name_font_face and self.options[c].name_font_face or "cfont"
         local name_font_size = self.options[c].name_font_size and self.options[c].name_font_size or default_name_font_size
-        local option_name_width = TextWidget:new{
+        local text = self.options[c].name_text
-            text = self.options[c].name_text,
+        local face = Font:getFace(name_font_face, name_font_size)
-            face = Font:getFace(name_font_face, name_font_size),
+        if text ~= nil then
-        }:getSize().w
+            txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x
-        max_option_name_width = math.max(max_option_name_width, option_name_width)
+        end
+        max_option_name_width = math.max(max_option_name_width, txt_width)
     end
     local default_name_align_right = math.max((max_option_name_width + Screen:scaleBySize(10))/Screen:getWidth(), 0.33)
+    default_name_align_right = math.min(default_name_align_right, 0.5)
     local default_item_align_center = 1 - default_name_align_right
 
     -- fill vertical group of config tab
@@ -180,18 +187,38 @@ function ConfigOption:init()
             local option_height = Screen:scaleBySize(self.options[c].height and self.options[c].height or default_option_height)
             local item_spacing_width = Screen:scaleBySize(self.options[c].spacing and self.options[c].spacing or default_items_spacing)
             local enabled = true
+            if item_align == 1.0 then
+                name_align = 0
+            end
+            if name_align + item_align > 1 then
+                name_align = 0.5
+                item_align = 0.5
+            end
             if self.options[c].enabled_func then
                 enabled = self.options[c].enabled_func(self.config.configurable)
             end
             local horizontal_group = HorizontalGroup:new{}
             if self.options[c].name_text then
+                local text = self.options[c].name_text
+                local face = Font:getFace(name_font_face, name_font_size)
+                local width_name_text = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x
+                if math.floor(name_align * Screen:getWidth()) - 2*padding_small < width_name_text then
+                    text = RenderText:truncateTextByWidth(text, face, name_align * Screen:getWidth() - 2*padding_small)
+                end
+
                 local option_name_container = RightContainer:new{
                     dimen = Geom:new{ w = Screen:getWidth()*name_align, h = option_height},
                 }
-                local option_name = TextWidget:new{
+                local option_name = Button:new{
-                    text = self.options[c].name_text,
+                    text = text,
-                    face = Font:getFace(name_font_face, name_font_size),
+                    bordersize = 0,
-                    fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
+                    face = face,
+                    enabled = enabled,
+                    padding = padding_small,
+                    text_font_face = name_font_face,
+                    text_font_size = name_font_size,
+                    text_font_bold = false,
+                    hold_callback = self.options[c].name_text_hold_callback,
                 }
                 table.insert(option_name_container, option_name)
                 table.insert(horizontal_group, option_name_container)
@@ -261,20 +288,28 @@ function ConfigOption:init()
             end
             if self.options[c].item_text then
                 local items_count = #self.options[c].item_text
-                local middle_index = math.ceil(items_count/2)
+                local items_width = 0
-                local middle_item = OptionTextItem:new{
+                for d = 1, #self.options[c].item_text do
-                    TextWidget:new{
+                    local item = OptionTextItem:new{
-                        text = self.options[c].item_text[middle_index],
+                        TextWidget:new{
-                        face = Font:getFace(item_font_face,
+                            text = self.options[c].item_text[d],
-                            option_items_fixed and item_font_size[middle_index]
+                            face = Font:getFace(item_font_face,
+                            option_items_fixed and item_font_size[d]
                             or item_font_size),
+                        }
                     }
-                }
+                    items_width = items_width + item:getSize().w
-                local max_item_spacing = (Screen:getWidth() * item_align -
+                end
-                        middle_item:getSize().w * items_count) / items_count
+                local max_item_spacing = (Screen:getWidth() * item_align - items_width) / items_count
+                local width = math.min(max_item_spacing, item_spacing_width)
+
+                if max_item_spacing < item_spacing_width / 2 then
+                    width = item_spacing_width / 2
+                end
                 local items_spacing = HorizontalSpan:new{
-                    width = math.min(max_item_spacing, item_spacing_width)
+                    width = width
                 }
+                local max_item_text_width = (Screen:getWidth() * item_align - items_count * width) / items_count
                 for d = 1, #self.options[c].item_text do
                     local option_item
                     if option_items_fixed then
@@ -284,18 +319,24 @@ function ConfigOption:init()
                                 face = Font:getFace(item_font_face, item_font_size[d]),
                                 fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
                             },
-                            padding = Size.padding.button,
+                            padding = padding_button,
                             color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                             enabled = enabled,
                         }
                     else
+                        local text = self.options[c].item_text[d]
+                        local face = Font:getFace(item_font_face, item_font_size)
+                        local width_item_text = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x
+                        if max_item_text_width < width_item_text then
+                            text = RenderText:truncateTextByWidth(text, face, max_item_text_width)
+                        end
                         option_item = OptionTextItem:new{
                             TextWidget:new{
-                                text = self.options[c].item_text[d],
+                                text = text,
-                                face = Font:getFace(item_font_face, item_font_size),
+                                face = face,
                                 fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
                             },
-                            padding = -Size.padding.button,
+                            padding = -padding_button,
                             color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                             enabled = enabled,
                         }
@@ -335,7 +376,7 @@ function ConfigOption:init()
                             file = self.options[c].item_icons[d],
                             dim = not enabled,
                         },
-                        padding = -Size.padding.button,
+                        padding = -padding_button,
                         color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                         enabled = enabled,
                     }
@@ -356,9 +397,8 @@ function ConfigOption:init()
             end
 
             if self.options[c].toggle then
-                local max_toggle_width = Screen:getWidth() / 2
+                local max_toggle_width = Screen:getWidth() * 0.5
-                local toggle_width = Screen:scaleBySize(self.options[c].width
+                local toggle_width = Screen:scaleBySize(self.options[c].width or max_toggle_width)
-                                                        or 216)
                 local row_count = self.options[c].row_count or 1
                 local toggle_height = Screen:scaleBySize(self.options[c].height
                                                          or 30 * row_count)

frontend/ui/widget/toggleswitch.lua

@@ -66,11 +66,18 @@ function ToggleSwitch:init()
         w = self.width / self.n_pos,
         h = self.height / self.row_count,
     }
+    local button_width = math.floor(self.width / self.n_pos)
     for i = 1, #self.toggle do
+        local text = self.toggle[i]
+        local face = Font:getFace(self.font_face, self.font_size)
+        local txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text, nil, self.bold).x
+        if  button_width - Size.padding.default < txt_width then
+            text = RenderText:truncateTextByWidth(text, face, button_width - Size.padding.default, nil, self.bold)
+        end
         local label = ToggleLabel:new{
             align = "center",
-            text = self.toggle[i],
+            text = text,
-            face = Font:getFace(self.font_face, self.font_size),
+            face = face,
         }
         local content = CenterContainer:new{
             dimen = center_dimen,