[UX] Add fine tune in line spacing (#5375)

See https://github.com/koreader/koreader/issues/5312#issuecomment-528506421

Progress widget has a new extra button ⋮ that triggers SpinWidget.

frontend/ui/data/creoptions.lua

@@ -248,6 +248,13 @@ Note that your selected font size is not affected by this setting.]]),
                 },
                 default_pos = 7,
                 default_value = DCREREADER_CONFIG_LINE_SPACE_PERCENT_MEDIUM,
+                more_options = true,
+                more_options_param = {
+                  value_min = 70,
+                  value_max = 130,
+                  value_step = 1,
+                  value_hold_step = 5,
+                },
                 event = "SetLineSpace",
                 args = {
                     DCREREADER_CONFIG_LINE_SPACE_PERCENT_X_TINY,

frontend/ui/widget/buttonprogresswidget.lua

@@ -22,6 +22,7 @@ local ButtonProgressWidget = InputContainer:new{
     default_position = nil,
     thin_grey_style = false, -- default to black
     fine_tune = false, -- no -/+ buttons on the extremities by default
+    more_options = false, -- no "⋮" button
 }
 
 function ButtonProgressWidget:init()
@@ -50,6 +51,9 @@ function ButtonProgressWidget:update()
     if self.fine_tune then
        buttons_count = buttons_count + 2
     end
+    if self.more_options then
+        buttons_count = buttons_count + 1
+    end
     local button_width = math.floor(self.width / buttons_count) - 2*button_padding - 2*button_margin - 2*button_bordersize
 
     -- Minus button on the left
@@ -169,6 +173,35 @@ function ButtonProgressWidget:update()
         end
         table.insert(self.buttonprogress_content, button)
     end
+    -- More option button on the right
+    if self.more_options then
+        local margin = button_margin * 6
+        local extra_border_size = 0
+        local button = Button:new{
+            text = "⋮",
+            radius = 0,
+            margin = margin,
+            padding = button_padding,
+            bordersize = button_bordersize + extra_border_size,
+            enabled = true,
+            width = button_width - 2*extra_border_size,
+            preselect = false,
+            text_font_face = self.font_face,
+            text_font_size = self.font_size,
+            callback = function()
+                self.callback("⋮")
+                self:update()
+            end,
+            no_focus = true,
+            hold_callback = function()
+                self.hold_callback("⋮")
+            end,
+        }
+        if self.thin_grey_style then
+            button.frame.color = Blitbuffer.COLOR_DARK_GRAY
+        end
+        table.insert(self.buttonprogress_content, button)
+    end
 
     UIManager:setDirty(self.show_parrent, function()
         return "ui", self.dimen

frontend/ui/widget/configdialog.lua

@@ -554,6 +554,9 @@ function ConfigOption:init()
                         if arg == "-" or arg == "+" then
                             self.config:onConfigFineTuneChoose(self.options[c].values, self.options[c].name,
                                 self.options[c].event, self.options[c].args, self.options[c].events, arg, self.options[c].delay_repaint)
+                        elseif 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)
                         else
                             self.config:onConfigChoose(self.options[c].values, self.options[c].name,
                                 self.options[c].event, self.options[c].args, self.options[c].events, arg, self.options[c].delay_repaint)
@@ -574,6 +577,8 @@ function ConfigOption:init()
                     show_parrent = self.config,
                     enabled = enabled,
                     fine_tune = self.options[c].fine_tune,
+                    more_options = self.options[c].more_options,
+                    more_options_param = self.options[c].more_options_param,
                 }
                 switch:setPosition(current_item, default_item)
                 table.insert(option_items_group, switch)
@@ -1023,6 +1028,91 @@ function ConfigDialog:onConfigFineTuneChoose(values, name, event, args, events,
     end)
 end
 
+-- Tweaked variant used with the more options variant of buttonprogress and fine tune with numpicker
+-- events are not supported
+function ConfigDialog:onConfigMoreChoose(values, name, event, args, name_text, delay_repaint, more_options_param)
+    if not more_options_param then
+        more_options_param = {}
+    end
+    UIManager:tickAfterNext(function()
+        -- Repainting may be delayed depending on options
+        local refresh_dialog_func = function()
+            self.skip_paint = nil
+            if self.config_options.needs_redraw_on_change then
+                -- Some Kopt document event handlers just save their setting,
+                -- and need a full repaint for kopt to load these settings,
+                -- notice the change, and redraw the document
+                UIManager:setDirty("all", "partial")
+            else
+                -- CreDocument event handlers do their own refresh:
+                -- we can just redraw our frame
+                UIManager:setDirty(self, function()
+                    return "ui", self.dialog_frame.dimen
+                end)
+            end
+        end
+        local refresh_callback = nil
+        if type(delay_repaint) == "number" then -- timeout
+            UIManager:scheduleIn(delay_repaint, refresh_dialog_func)
+            self.skip_paint = true
+        elseif delay_repaint then -- anything but nil or false: provide a callback
+            -- This needs the config option to have an "event" key
+            -- The event handler is responsible for calling this callback when
+            -- it considers it appropriate
+            refresh_callback = refresh_dialog_func
+            self.skip_paint = true
+        end
+        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
+            value_hold_step = values[2] - values[1]
+        end
+        if values and event then
+            local SpinWidget = require("ui/widget/spinwidget")
+            local curr_items = self.configurable[name]
+            local items = SpinWidget:new{
+                width = Screen:getWidth() * 0.6,
+                value = curr_items,
+                value_min = more_options_param.value_min or values[1],
+                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],
+                ok_text = _("Apply"),
+                extra_text = _("Set default"),
+                extra_callback = function(spin)
+                    UIManager:show(ConfirmBox:new{
+                        text = T(_("Set default %1 to %2?"), (name_text or ""), spin.value),
+                        ok_text = T(_("Set default")),
+                        ok_callback = function()
+                            name = self.config_options.prefix.."_"..name
+                            G_reader_settings:saveSetting(name, spin.value)
+                            self:update()
+                            UIManager:setDirty(self, function()
+                                return "ui", self.dialog_frame.dimen
+                            end)
+                        end,
+                    })
+
+                end,
+                title_text =  name_text or _("Set value"),
+                callback = function(spin)
+                    self:onConfigChoice(name, spin.value)
+                    if event then
+                        args = args or {}
+                        self:onConfigEvent(event, spin.value, refresh_callback)
+                        self:update()
+                    end
+                end
+            }
+            UIManager:show(items)
+        end
+        if not delay_repaint then -- immediate refresh
+            refresh_dialog_func()
+        end
+    end)
+end
+
 function ConfigDialog:onMakeDefault(name, name_text, values, labels, position)
     local display_value = labels[position]
     if name == "font_fine_tune" then

frontend/ui/widget/spinwidget.lua

@@ -33,6 +33,9 @@ local SpinWidget = InputContainer:new{
     value_hold_step = 4,
     ok_text = _("OK"),
     cancel_text = _("Cancel"),
+    -- extra button on bottom
+    extra_text = nil,
+    extra_callback = nil,
     -- set this to see extra default button
     default_value = nil,
     default_text = _("Use default"),
@@ -141,6 +144,20 @@ function SpinWidget:update()
             },
         })
     end
+        if self.extra_text then
+            table.insert(buttons,{
+                {
+                    text = self.extra_text,
+                    callback = function()
+                        if self.extra_callback then
+                            self.value = value_widget:getValue()
+                            self.extra_callback(self)
+                        end
+                        self:onClose()
+                    end,
+                },
+            })
+    end
 
     local ok_cancel_buttons = ButtonTable:new{
         width = self.width - 2*Size.padding.default,