[UX] Add fine tune for zoom(dpi) and font size (#5432)

Close: #5312

frontend/ui/data/creoptions.lua

@@ -214,6 +214,10 @@ In the top menu → Settings → Status bar, you can choose whether the bottom m
             {
                 name = "render_dpi",
                 name_text = S.ZOOM_DPI,
+                more_options = true,
+                more_options_param = {
+                    value_hold_step = 20,
+                },
                 toggle = {S.OFF, "48", "96¹’¹", "167", "212", "300"},
                 values = {0, 48, 96, 167, 212, 300},
                 default_value = 96,
@@ -297,6 +301,18 @@ Note that your selected font size is not affected by this setting.]]),
                 name_text = S.FONTSIZE_FINE_TUNING,
                 toggle = Device:isTouchDevice() and {S.DECREASE, S.INCREASE} or nil,
                 item_text = not Device:isTouchDevice() and {S.DECREASE, S.INCREASE} or nil,
+                more_options = true,
+                more_options_param = {
+                    value_min = 12,
+                    value_max = 255,
+                    value_step = 0.5,
+                    precision = "%.1f",
+                    value_hold_step = 4,
+                    name = "font_size",
+                    name_text = _("Font Size"),
+                    event = "SetFontSize",
+                },
+                values = {},
                 event = "ChangeSize",
                 args = {"decrease", "increase"},
                 alternate = false,

frontend/ui/data/optionsutil.lua

@@ -25,7 +25,7 @@ function optionsutil.showValues(configurable, option, prefix)
     end
     local arg_table = {}
     if option.toggle and option.values then
-        for i=1,#option.toggle do
+        for i=1,#option.values do
             arg_table[option.values[i]] = option.toggle[i]
         end
     end
@@ -34,12 +34,15 @@ function optionsutil.showValues(configurable, option, prefix)
         if option.toggle and option.values then
             value_current = current
             current = arg_table[current]
+            if not current then current = value_current end
         end
     elseif option.toggle and option.values then
         value_current = current
         value_default = default
         default = arg_table[default]
         current = arg_table[current]
+        if not default then default = value_default end
+        if not current then current = value_current end
     end
     if option.labels and option.values then
         if option.more_options_param and option.more_options_param.value_table then

frontend/ui/widget/configdialog.lua

@@ -512,6 +512,11 @@ function ConfigOption:init()
                 local row_count = self.options[c].row_count or 1
                 local toggle_height = Screen:scaleBySize(self.options[c].height
                                                          or 30 * row_count)
+                if self.options[c].more_options then
+                    table.insert(self.options[c].toggle, "⋮")
+                    table.insert(self.options[c].args, "⋮")
+                    self.options[c].more_options = false
+                end
                 local switch = ToggleSwitch:new{
                     width = math.min(max_toggle_width, toggle_width),
                     height = toggle_height,
@@ -529,6 +534,12 @@ function ConfigOption:init()
                     config = self.config,
                     enabled = enabled,
                     row_count = row_count,
+                    callback = function(arg)
+                        if self.options[c].args[arg] == "⋮" then
+                            self.config:onConfigMoreChoose(self.options[c].values, self.options[c].name,
+                                self.options[c].event, arg, self.options[c].name_text, self.options[c].delay_repaint, self.options[c].more_options_param)
+                        end
+                    end
                 }
                 local position = current_item
                 switch:setPosition(position)
@@ -1065,10 +1076,19 @@ function ConfigDialog:onConfigMoreChoose(values, name, event, args, name_text, d
         local value_hold_step = 0
         if more_options_param.value_hold_step then
             value_hold_step = more_options_param.value_hold_step
-        elseif #values >1 then
+        elseif values and #values >1 then
             value_hold_step = values[2] - values[1]
         end
         if values and event then
+            if more_options_param.name then
+                name = more_options_param.name
+            end
+            if more_options_param.name_text then
+                name_text = more_options_param.name_text
+            end
+            if more_options_param.event then
+                event = more_options_param.event
+            end
             local SpinWidget = require("ui/widget/spinwidget")
             local curr_items = self.configurable[name]
             local value_index = nil
@@ -1093,6 +1113,7 @@ function ConfigDialog:onConfigMoreChoose(values, name, event, args, name_text, d
                 value_step = more_options_param.value_step or 1,
                 value_hold_step = value_hold_step,
                 value_max = more_options_param.value_max or values[#values],
+                precision = more_options_param.precision or "%02d",
                 ok_text = _("Apply"),
                 extra_text = _("Set default"),
                 extra_callback = function(spin)

frontend/ui/widget/toggleswitch.lua

@@ -157,7 +157,7 @@ function ToggleSwitch:setPosition(position)
     self:update()
 end
 
-function ToggleSwitch:togglePosition(position)
+function ToggleSwitch:togglePosition(position, update)
     if self.n_pos == 2 and self.alternate ~= false then
         self.position = (self.position+1)%self.n_pos
         self.position = self.position == 0 and self.n_pos or self.position
@@ -166,7 +166,9 @@ function ToggleSwitch:togglePosition(position)
     else
         self.position = position
     end
-    self:update()
+    if update then
+        self:update()
+    end
 end
 
 function ToggleSwitch:circlePosition()
@@ -193,7 +195,11 @@ function ToggleSwitch:onTapSelect(arg, gev)
     end
     if gev then
         local position = self:calculatePosition(gev)
-        self:togglePosition(position)
+        if self.args[position] ~= "⋮" then
+            self:togglePosition(position, true)
+        else
+            self:togglePosition(position, false)
+        end
     else
         self:circlePosition()
     end
@@ -211,16 +217,22 @@ function ToggleSwitch:onTapSelect(arg, gev)
         self.config:onConfigEvents(self.events, self.position)
     end
     --]]
-    self.config:onConfigChoose(self.values, self.name,
-                    self.event, self.args, self.events, self.position, self.delay_repaint)
-    UIManager:setDirty(self.config, function()
-        return "ui", self.dimen
-    end)
+    self.callback(self.position)
+    if self.args[self.position] ~= "⋮" then
+        self.config:onConfigChoose(self.values, self.name,
+            self.event, self.args, self.events, self.position, self.delay_repaint)
+        UIManager:setDirty(self.config, function()
+            return "ui", self.dimen
+        end)
+    end
     return true
 end
 
 function ToggleSwitch:onHoldSelect(arg, gev)
     local position = self:calculatePosition(gev)
+    if self.args[position] == "⋮" then
+        return true
+    end
     if self.name == "font_fine_tune" then
         --- @note Ugly hack for the only widget that uses a dual toggle for fine-tuning (others prefer a buttonprogress)
         self.config:onMakeFineTuneDefault("font_size", _("Font Size"),