From f0122cf457b61faddd83d5c9157b0fdd0d9e7fe0 Mon Sep 17 00:00:00 2001 From: poire-z Date: Thu, 23 Mar 2023 18:37:29 +0100 Subject: [PATCH] Button: handle 'width' as the final outer width All our widgets are considering their provided 'width' as the outer width, except Button which considered it as some 'inner width', to which padding/border/margin were added. Let's have them all consistent. Some other widgets using Button had tweaks to account for that odd behaviour: fix and simplify them. Also fix Button layout when text is left aligned. --- frontend/ui/widget/button.lua | 25 +++++++++++------- frontend/ui/widget/buttonprogresswidget.lua | 29 +++++++++------------ frontend/ui/widget/buttontable.lua | 6 ++--- frontend/ui/widget/configdialog.lua | 4 +-- frontend/ui/widget/numberpickerwidget.lua | 1 - frontend/ui/widget/skimtowidget.lua | 21 +++++++-------- plugins/vocabbuilder.koplugin/main.lua | 5 +--- 7 files changed, 42 insertions(+), 49 deletions(-) diff --git a/frontend/ui/widget/button.lua b/frontend/ui/widget/button.lua index 39351da5b..1a201b3f2 100644 --- a/frontend/ui/widget/button.lua +++ b/frontend/ui/widget/button.lua @@ -8,7 +8,6 @@ A button widget that shows text or an icon and handles callback when tapped. enabled = false, -- defaults to true callback = some_callback_function, width = Screen:scaleBySize(50), - max_width = Screen:scaleBySize(100), bordersize = Screen:scaleBySize(3), margin = 0, padding = Screen:scaleBySize(2), @@ -55,6 +54,8 @@ local Button = InputContainer:extend{ padding = Size.padding.button, padding_h = nil, padding_v = nil, + -- Provide only one of these two: 'width' to get a fixed width, + -- 'max_width' to allow it to be smaller if text or icon is smaller. width = nil, max_width = nil, avoid_text_truncation = true, @@ -82,12 +83,13 @@ function Button:init() self.padding_v = self.padding end - local is_left_aligned = self.align == "left" - local right_margin = is_left_aligned and (2 * Size.padding.large) or 0 + local outer_pad_width = 2*self.padding_h + 2*self.margin + 2*self.bordersize -- unscaled_size_check: ignore if self.text then - local max_width = self.max_width - and self.max_width - 2*self.padding_h - 2*self.margin - 2*self.bordersize - right_margin or nil + local max_width = self.max_width or self.width + if max_width then + max_width = max_width - outer_pad_width + end self.label_widget = TextWidget:new{ text = self.text, max_width = max_width, @@ -146,14 +148,17 @@ function Button:init() } end local widget_size = self.label_widget:getSize() - if self.width == nil then - self.width = widget_size.w + local inner_width + if self.width then + inner_width = self.width - outer_pad_width + else + inner_width = widget_size.w end -- set FrameContainer content - if is_left_aligned then + if self.align == "left" then self.label_container = LeftContainer:new{ dimen = Geom:new{ - w = self.width - 4 * Size.padding.large, + w = inner_width, h = widget_size.h }, self.label_widget, @@ -161,7 +166,7 @@ function Button:init() else self.label_container = CenterContainer:new{ dimen = Geom:new{ - w = self.width, + w = inner_width, h = widget_size.h }, self.label_widget, diff --git a/frontend/ui/widget/buttonprogresswidget.lua b/frontend/ui/widget/buttonprogresswidget.lua index 3b1c7aeb1..b8951c7fa 100644 --- a/frontend/ui/widget/buttonprogresswidget.lua +++ b/frontend/ui/widget/buttonprogresswidget.lua @@ -73,7 +73,7 @@ function ButtonProgressWidget:update() buttons_count = buttons_count + 1 span_count = span_count + 1 end - local button_width_real = (self.width - span_count * self.horizontal_span_width) / buttons_count - 2*button_padding - 2*button_margin - 2*button_bordersize + local button_width_real = (self.width - span_count * self.horizontal_span_width) / buttons_count local button_width = math.floor(button_width_real) local button_width_adjust = button_width_real - button_width local button_width_to_add = 0 @@ -81,16 +81,14 @@ function ButtonProgressWidget:update() -- Minus button on the left if self.fine_tune then button_width_to_add = button_width_to_add + button_width_adjust - local margin = button_margin - local extra_border_size = 0 local button = Button:new{ text = "−", radius = 0, - margin = margin, + margin = button_margin, padding = button_padding, - bordersize = button_bordersize + extra_border_size, + bordersize = button_bordersize, enabled = true, - width = button_width - 2*extra_border_size, + width = button_width, preselect = false, text_font_face = self.font_face, text_font_size = self.font_size, @@ -122,6 +120,7 @@ function ButtonProgressWidget:update() local margin = button_margin if self.thin_grey_style and highlighted then margin = 0 -- moved outside button so it's not inverted + real_button_width = real_button_width - 2*button_margin end local extra_border_size = 0 if not self.thin_grey_style and is_default then @@ -135,7 +134,7 @@ function ButtonProgressWidget:update() padding = button_padding, bordersize = button_bordersize + extra_border_size, enabled = true, - width = real_button_width - 2*extra_border_size, + width = real_button_width, preselect = highlighted, text_font_face = self.font_face, text_font_size = self.font_size, @@ -183,16 +182,14 @@ function ButtonProgressWidget:update() real_button_width = button_width + math.floor(button_width_to_add) button_width_to_add = button_width_to_add - math.floor(button_width_to_add) end - local margin = button_margin - local extra_border_size = 0 local button = Button:new{ text = "＋", radius = 0, - margin = margin, + margin = button_margin, padding = button_padding, - bordersize = button_bordersize + extra_border_size, + bordersize = button_bordersize, enabled = true, - width = real_button_width - 2*extra_border_size, + width = real_button_width, preselect = false, text_font_face = self.font_face, text_font_size = self.font_size, @@ -218,16 +215,14 @@ function ButtonProgressWidget:update() -- One pixel wider to better align the entire widget real_button_width = button_width + math.floor(button_width_to_add) end - local margin = button_margin - local extra_border_size = 0 local button = Button:new{ text = "⋮", radius = 0, - margin = margin, + margin = button_margin, padding = button_padding, - bordersize = button_bordersize + extra_border_size, + bordersize = button_bordersize, enabled = true, - width = real_button_width - 2*extra_border_size, + width = real_button_width, preselect = false, text_font_face = self.font_face, text_font_size = self.font_size, diff --git a/frontend/ui/widget/buttontable.lua b/frontend/ui/widget/buttontable.lua index 7bc9a09cf..90ab57ba7 100644 --- a/frontend/ui/widget/buttontable.lua +++ b/frontend/ui/widget/buttontable.lua @@ -19,8 +19,6 @@ local ButtonTable = FocusManager:extend{ }, }, sep_width = Size.line.medium, - padding = Size.padding.default, - zero_sep = false, } @@ -65,11 +63,11 @@ function ButtonTable:init() allow_hold_when_disabled = btn_entry.allow_hold_when_disabled, vsync = btn_entry.vsync, width = math.ceil((self.width - sizer_space)/column_cnt), - max_width = math.ceil((self.width - sizer_space)/column_cnt - 2*self.sep_width - 2*self.padding), bordersize = 0, margin = 0, padding = Size.padding.buttontable, -- a bit taller than standalone buttons, for easier tap - padding_h = 0, -- allow text to take more of the horizontal space + padding_h = btn_entry.align == "left" and Size.padding.large or 0, + -- allow text to take more of the horizontal space if centered text_font_face = btn_entry.font_face, text_font_size = btn_entry.font_size, text_font_bold = btn_entry.font_bold, diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua index 724ee7427..e01dbbb90 100644 --- a/frontend/ui/widget/configdialog.lua +++ b/frontend/ui/widget/configdialog.lua @@ -288,8 +288,8 @@ function ConfigOption:init() local name_widget_width = math.floor(name_align * Screen:getWidth()) -- We don't remove default_option_hpadding from name_text_max_width -- to give more to text and avoid truncation: as it is right aligned, - -- the text can grow on the left, padding_small is enough. - local name_text_max_width = name_widget_width - 2*padding_small + -- the text can grow on the left. + local name_text_max_width = name_widget_width local face = Font:getFace(name_font_face, name_font_size) local option_name_container = RightContainer:new{ dimen = Geom:new{ w = name_widget_width, h = option_height}, diff --git a/frontend/ui/widget/numberpickerwidget.lua b/frontend/ui/widget/numberpickerwidget.lua index 5cd8388fc..80c67a604 100644 --- a/frontend/ui/widget/numberpickerwidget.lua +++ b/frontend/ui/widget/numberpickerwidget.lua @@ -236,7 +236,6 @@ function NumberPickerWidget:init() text_font_face = self.spinner_face.font, text_font_size = self.spinner_face.orig_size, width = self.width, - max_width = self.width, show_parent = self.show_parent, callback = callback_input, } diff --git a/frontend/ui/widget/skimtowidget.lua b/frontend/ui/widget/skimtowidget.lua index 720918dc9..3c6f6e108 100644 --- a/frontend/ui/widget/skimtowidget.lua +++ b/frontend/ui/widget/skimtowidget.lua @@ -55,7 +55,6 @@ function SkimToWidget:init() local larger_span_units = 3 -- 3 x small span width local nb_span_units = 2 + 2*larger_span_units local button_width = math.floor( (inner_width - nb_span_units * button_span_unit_width) * (1/5)) - local button_inner_width = button_width - 2 * (Size.border.button + Size.padding.button) -- Update inner_width (possibly smaller because of math.floor()) inner_width = button_width * 5 + nb_span_units * button_span_unit_width @@ -79,7 +78,7 @@ function SkimToWidget:init() text = "-1", radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -90,7 +89,7 @@ function SkimToWidget:init() text = "-10", radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -101,7 +100,7 @@ function SkimToWidget:init() text = "+1", radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -112,7 +111,7 @@ function SkimToWidget:init() text = "+10", radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -131,7 +130,7 @@ function SkimToWidget:init() padding = 0, bordersize = 0, enabled = true, - width = button_width, -- no border/padding: use outer button width + width = button_width, show_parent = self, callback = function() self.callback_switch_to_goto() @@ -153,7 +152,7 @@ function SkimToWidget:init() text = chapter_next_text, radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -170,7 +169,7 @@ function SkimToWidget:init() text = chapter_prev_text, radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -187,7 +186,7 @@ function SkimToWidget:init() text = bookmark_next_text, radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -202,7 +201,7 @@ function SkimToWidget:init() text = bookmark_prev_text, radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, vsync = true, callback = function() @@ -219,7 +218,7 @@ function SkimToWidget:init() end, radius = 0, enabled = true, - width = button_inner_width, + width = button_width, show_parent = self, callback = function() self.ui:handleEvent(Event:new("ToggleBookmark")) diff --git a/plugins/vocabbuilder.koplugin/main.lua b/plugins/vocabbuilder.koplugin/main.lua index 2f2810ef9..0d181f306 100644 --- a/plugins/vocabbuilder.koplugin/main.lua +++ b/plugins/vocabbuilder.koplugin/main.lua @@ -532,7 +532,6 @@ function WordInfoDialog:init() self.book_title_button = Button:new{ text = self.book_title .. book_title_triangle, width = width, - max_width = width, text_font_face = "NotoSans-Italic.ttf", text_font_size = 14, text_font_bold = false, @@ -755,7 +754,6 @@ function VocabItemWidget:initItemWidget() self.forgot_button = Button:new{ text = _("Forgot"), width = self.review_button_width, - max_width = self.review_button_width, radius = Size.radius.button, callback = function() self:onForgot() @@ -770,7 +768,6 @@ function VocabItemWidget:initItemWidget() self:onGotIt() end, width = self.review_button_width, - max_width = self.review_button_width, show_parent = self, } right_widget = HorizontalGroup:new{ @@ -1359,7 +1356,7 @@ function VocabularyBuilderWidget:refreshFooter() local sync_size = TextWidget:getFontSizeToFitHeight("cfont", footer_height, Size.padding.buttontable*2) self.footer_sync = Button:new{ text = "⇅", - width = self.footer_left_corner_width - Size.padding.large * 2, + width = self.footer_left_corner_width, text_font_size = sync_size, text_font_bold = false, bordersize = 0,