From 77ec8e32e93fdfe4fe9119937ba632408d4fa594 Mon Sep 17 00:00:00 2001 From: poire-z Date: Tue, 15 Jan 2019 20:39:33 +0100 Subject: [PATCH] ConfigDialog: tweak widths computation Small fixes to widths computation for a more balanced layout. Decreased min width of names (on the left) from 33% to 25%, to allow more room for toggles on the right. (May make things a little bit too stretched out with english, but should help with other languages that use longer words to name things than english.) Also ignore disabled option names in the names width calculation (noticable on the PDF right most config menu, where toggles were uneededly too small) --- frontend/ui/widget/buttonprogresswidget.lua | 3 +- frontend/ui/widget/configdialog.lua | 120 ++++++++++++++------ 2 files changed, 87 insertions(+), 36 deletions(-) diff --git a/frontend/ui/widget/buttonprogresswidget.lua b/frontend/ui/widget/buttonprogresswidget.lua index 34494b5b4..7a59b8eaf 100644 --- a/frontend/ui/widget/buttonprogresswidget.lua +++ b/frontend/ui/widget/buttonprogresswidget.lua @@ -13,6 +13,7 @@ local Screen = Device.screen local ButtonProgressWidget = InputContainer:new{ width = Screen:scaleBySize(216), height = Size.item.height_default, + padding = Size.padding.small, font_face = "cfont", font_size = 16, enabled = true, @@ -26,7 +27,7 @@ function ButtonProgressWidget:init() color = Blitbuffer.COLOR_GREY, radius = Size.radius.window, bordersize = 0, - padding = Size.padding.small, + padding = self.padding, dim = not self.enabled, } diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua index a12380c51..0a469373a 100644 --- a/frontend/ui/widget/configdialog.lua +++ b/frontend/ui/widget/configdialog.lua @@ -33,6 +33,7 @@ local Screen = Device.screen local T = require("ffi/util").template local OptionTextItem = InputContainer:new{} + function OptionTextItem:init() local text_widget = self[1] @@ -102,6 +103,7 @@ function OptionTextItem:onHoldSelect() end local OptionIconItem = InputContainer:new{} + function OptionIconItem:init() self.underline_container = UnderlineContainer:new{ self.icon, @@ -170,39 +172,56 @@ function OptionIconItem:onHoldSelect() end local ConfigOption = CenterContainer:new{} + function ConfigOption:init() -- make default styles local default_name_font_size = 20 - local default_item_font_size = 16 - local default_items_spacing = 40 - local default_option_height = 50 - local default_option_padding = Size.padding.large + local default_item_font_size = 16 -- font size for letters, toggles and buttonprogress + local default_items_spacing = 40 -- spacing between letters (font sizes) and icons + local default_option_height = 50 -- height of each line + -- The next ones are already scaleBySize()'d: + local default_option_vpadding = Size.padding.large -- vertical padding at top and bottom + local default_option_hpadding = Size.padding.fullscreen + -- horizontal padding at left and right, and between name and option items + local padding_small = Size.padding.small -- internal padding for options names (left) + local padding_button = Size.padding.button -- padding for underline below letters and icons + + -- @TODO restore setting when there are more advanced settings + --local show_advanced = G_reader_settings:readSetting("show_advanced") or false + local show_advanced = true + + -- Get the width needed by the longest option name shown on the left 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 text = self.options[c].name_text - local face = Font:getFace(name_font_face, name_font_size) - if text ~= nil then - txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x + -- Ignore names of options that won't be shown + local show_default = not self.options[c].advanced or show_advanced + if self.options[c].show ~= false and show_default then + 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 text = self.options[c].name_text + local face = Font:getFace(name_font_face, name_font_size) + local txt_width = 0 + if text ~= nil then + txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x + end + max_option_name_width = math.max(max_option_name_width, txt_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) + -- Have option names take min 25% and max 50% of screen width + -- They will carry the left default_option_hpadding, but the in-between + -- one (and the right one) will be carried by the option items. + -- (Both these variables are between 0 and 1 and represent a % of screen width) + local default_name_align_right = (max_option_name_width + default_option_hpadding + 2*padding_small) / Screen:getWidth() + default_name_align_right = math.max(default_name_align_right, 0.25) 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 local vertical_group = VerticalGroup:new{} table.insert(vertical_group, VerticalSpan:new{ - width = default_option_padding, + width = default_option_vpadding, }) - -- @TODO restore setting when there are more advanced settings - --local show_advanced = G_reader_settings:readSetting("show_advanced") or false - local show_advanced = true + for c = 1, #self.options do local show_default = not self.options[c].advanced or show_advanced if self.options[c].show ~= false and show_default then @@ -227,16 +246,21 @@ function ConfigOption:init() enabled = self.options[c].enabled_func(self.config.configurable) end local horizontal_group = HorizontalGroup:new{} + + -- Deal with the name on the left if self.options[c].name_text then + -- the horizontal padding on the left will be ensured by the RightContainer + local name_widget_width = math.floor(name_align * Screen:getWidth()) + local name_text_max_width = name_widget_width - default_option_hpadding - 2*padding_small 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) + if width_name_text > name_text_max_width then + text = RenderText:truncateTextByWidth(text, face, name_text_max_width) end local option_name_container = RightContainer:new{ - dimen = Geom:new{ w = Screen:getWidth()*name_align, h = option_height}, + dimen = Geom:new{ w = name_widget_width, h = option_height}, } local option_name = Button:new{ text = text, @@ -258,8 +282,16 @@ function ConfigOption:init() table.insert(horizontal_group, option_name_container) end + -- Deal with the option widget on the right + -- The horizontal padding between name and this option widget, and + -- the one on the right, are ensured by this CenterContainer + local option_widget_outer_width = math.floor(item_align * Screen:getWidth()) + local option_widget_width = option_widget_outer_width - 2*default_option_hpadding local option_items_container = CenterContainer:new{ - dimen = Geom:new{w = Screen:getWidth()*item_align, h = option_height} + dimen = Geom:new{ + w = option_widget_outer_width, + h = option_height + } } local option_items_group = HorizontalGroup:new{} local option_items_fixed = false @@ -268,7 +300,8 @@ function ConfigOption:init() option_items_group.align = "bottom" option_items_fixed = true end - -- make current index according to configurable table + + -- Find out currently selected item local current_item = nil local function value_diff(val1, val2, name) if type(val1) ~= type(val2) then @@ -320,6 +353,10 @@ function ConfigOption:init() end end end + + -- Deal with the various kind of config widgets + + -- Plain letters (ex: font sizes) if self.options[c].item_text then local items_count = #self.options[c].item_text local items_width = 0 @@ -334,13 +371,13 @@ function ConfigOption:init() } items_width = items_width + item:getSize().w end - local max_item_spacing = (Screen:getWidth() * item_align - items_width) / items_count + local max_item_spacing = (option_widget_width - 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 horizontal_half_padding = width / 2 - local max_item_text_width = (Screen:getWidth() * item_align - items_count * width) / items_count + local max_item_text_width = (option_widget_width - items_count * width) / items_count for d = 1, #self.options[c].item_text do local option_item if option_items_fixed then @@ -390,6 +427,7 @@ function ConfigOption:init() end end + -- Icons (ex: columns, text align, with PDF) if self.options[c].item_icons then local items_count = #self.options[c].item_icons local first_item = OptionIconItem:new{ @@ -397,7 +435,7 @@ function ConfigOption:init() file = self.options[c].item_icons[1] } } - local max_item_spacing = (Screen:getWidth() * item_align - + local max_item_spacing = (option_widget_width - first_item:getSize().w * items_count) / items_count local horizontal_half_padding = math.min(max_item_spacing, item_spacing_width) / 2 for d = 1, #self.options[c].item_icons do @@ -425,9 +463,11 @@ function ConfigOption:init() end end + -- Toggles (ex: mostly everything else) if self.options[c].toggle then - local max_toggle_width = Screen:getWidth() * item_align * 0.85 - local toggle_width = Screen:scaleBySize(self.options[c].width or max_toggle_width) + local max_toggle_width = option_widget_width + local toggle_width = self.options[c].width and Screen:scaleBySize(self.options[c].width) + or max_toggle_width local row_count = self.options[c].row_count or 1 local toggle_height = Screen:scaleBySize(self.options[c].height or 30 * row_count) @@ -453,12 +493,15 @@ function ConfigOption:init() table.insert(option_items_group, switch) end + -- Progress bar (ex: contrast) if self.options[c].buttonprogress then - local max_buttonprogress_width = Screen:getWidth() * item_align * 0.85 - local buttonprogress_width = Screen:scaleBySize(self.options[c].width or max_buttonprogress_width) + local max_buttonprogress_width = option_widget_width + local buttonprogress_width = self.options[c].width and Screen:scaleBySize(self.options[c].width) + or max_buttonprogress_width local switch = ButtonProgressWidget:new{ width = math.min(max_buttonprogress_width, buttonprogress_width), height = option_height, + padding = 0, font_face = item_font_face, font_size = item_font_size, num_buttons = #self.options[c].values, @@ -481,14 +524,17 @@ function ConfigOption:init() switch:setPosition(position) table.insert(option_items_group, switch) end + + -- Add it to our CenterContainer table.insert(option_items_container, option_items_group) --add line of item to the second last place in the focusmanager so the menubar stay at the bottom table.insert(self.config.layout, #self.config.layout,self:_itemGroupToLayoutLine(option_items_group)) table.insert(horizontal_group, option_items_container) table.insert(vertical_group, horizontal_group) - end -- if - end -- for - table.insert(vertical_group, VerticalSpan:new{ width = default_option_padding }) + end -- if self.options[c].show ~= false + end -- for c = 1, #self.options + + table.insert(vertical_group, VerticalSpan:new{ width = default_option_vpadding }) self[1] = vertical_group self.dimen = vertical_group:getSize() end @@ -510,7 +556,11 @@ function ConfigOption:_itemGroupToLayoutLine(option_items_group) return layout_line end -local ConfigPanel = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, bordersize = 0, } +local ConfigPanel = FrameContainer:new{ + background = Blitbuffer.COLOR_WHITE, + bordersize = 0, +} + function ConfigPanel:init() local config_options = self.config_dialog.config_options local default_option = config_options.default_options and config_options.default_options