From ca6d82e668f20d0be167bf44f94a8b8dd8abf77c Mon Sep 17 00:00:00 2001 From: hius07 <62179190+hius07@users.noreply.github.com> Date: Wed, 19 Jan 2022 13:02:13 +0200 Subject: [PATCH] More widgets: insert TitleBar (#8683) SpinWidget, DoubleSpinWidget, DateTimeWidget, RadioButtonWidget got new TitleBar. --- frontend/ui/widget/datetimewidget.lua | 46 +++++------------------ frontend/ui/widget/doublespinwidget.lua | 47 ++++++------------------ frontend/ui/widget/radiobuttonwidget.lua | 45 ++++++----------------- frontend/ui/widget/spinwidget.lua | 46 ++++++----------------- frontend/ui/widget/titlebar.lua | 22 +++++++++++ 5 files changed, 65 insertions(+), 141 deletions(-) diff --git a/frontend/ui/widget/datetimewidget.lua b/frontend/ui/widget/datetimewidget.lua index 497839c0e..55a7e301e 100644 --- a/frontend/ui/widget/datetimewidget.lua +++ b/frontend/ui/widget/datetimewidget.lua @@ -45,14 +45,12 @@ local GestureRange = require("ui/gesturerange") local Font = require("ui/font") local HorizontalGroup = require("ui/widget/horizontalgroup") local InputContainer = require("ui/widget/container/inputcontainer") -local LineWidget = require("ui/widget/linewidget") local NumberPickerWidget = require("ui/widget/numberpickerwidget") local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") -local TextWidget = require("ui/widget/textwidget") +local TitleBar = require("ui/widget/titlebar") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") -local VerticalSpan = require("ui/widget/verticalspan") local WidgetContainer = require("ui/widget/container/widgetcontainer") local _ = require("gettext") local Screen = Device.screen @@ -154,37 +152,15 @@ function DateTimeWidget:layout() table.remove(date_group, 1) end - local date_title = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.title, - bordersize = 0, - TextWidget:new{ - text = self.title_text, - face = self.title_face, - max_width = self.width - 2 * (Size.padding.default + Size.margin.title), - }, + local title_bar = TitleBar:new{ + width = self.width, + align = "left", + with_bottom_line = true, + title = self.title_text, + title_shrink_font_to_fit = true, + info_text = self.info_text, + show_parent = self, } - local date_line = LineWidget:new{ - dimen = Geom:new{ - w = self.width, - h = Size.line.thick, - } - } - local date_info - if self.info_text then - date_info = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.small, - bordersize = 0, - TextBoxWidget:new{ - text = self.info_text, - face = Font:getFace("x_smallinfofont"), - width = math.floor(self.width * 0.9), - } - } - else - date_info = VerticalSpan:new{ width = 0 } - end local buttons = {} if self.default_value then @@ -254,9 +230,7 @@ function DateTimeWidget:layout() background = Blitbuffer.COLOR_WHITE, VerticalGroup:new{ align = "left", - date_title, - date_line, - date_info, + title_bar, CenterContainer:new{ dimen = Geom:new{ w = self.width, diff --git a/frontend/ui/widget/doublespinwidget.lua b/frontend/ui/widget/doublespinwidget.lua index b5f094478..35b60f116 100644 --- a/frontend/ui/widget/doublespinwidget.lua +++ b/frontend/ui/widget/doublespinwidget.lua @@ -8,15 +8,13 @@ local GestureRange = require("ui/gesturerange") local Font = require("ui/font") local HorizontalGroup = require("ui/widget/horizontalgroup") local InputContainer = require("ui/widget/container/inputcontainer") -local LineWidget = require("ui/widget/linewidget") local MovableContainer = require("ui/widget/container/movablecontainer") local NumberPickerWidget = require("ui/widget/numberpickerwidget") local Size = require("ui/size") -local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") +local TitleBar = require("ui/widget/titlebar") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") -local VerticalSpan = require("ui/widget/verticalspan") local WidgetContainer = require("ui/widget/container/widgetcontainer") local _ = require("gettext") local Screen = Device.screen @@ -153,37 +151,16 @@ function DoubleSpinWidget:update(numberpicker_left_value, numberpicker_right_val right_vertical_group } } - local widget_title = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.title, - bordersize = 0, - TextWidget:new{ - text = self.title_text, - face = self.title_face, - max_width = self.width - 2 * (Size.padding.default + Size.margin.title), - }, + + local title_bar = TitleBar:new{ + width = self.width, + align = "left", + with_bottom_line = true, + title = self.title_text, + title_shrink_font_to_fit = true, + info_text = self.info_text, + show_parent = self, } - local widget_line = LineWidget:new{ - dimen = Geom:new{ - w = self.width, - h = Size.line.thick, - } - } - local widget_info - if self.info_text then - widget_info = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.small, - bordersize = 0, - TextBoxWidget:new{ - text = self.info_text, - face = Font:getFace("x_smallinfofont"), - width = math.floor(self.width * 0.9), - } - } - else - widget_info = VerticalSpan:new{ width = 0 } - end local buttons = {} if self.default_values then @@ -259,9 +236,7 @@ function DoubleSpinWidget:update(numberpicker_left_value, numberpicker_right_val background = Blitbuffer.COLOR_WHITE, VerticalGroup:new{ align = "left", - widget_title, - widget_line, - widget_info, + title_bar, CenterContainer:new{ dimen = Geom:new{ w = self.width, diff --git a/frontend/ui/widget/radiobuttonwidget.lua b/frontend/ui/widget/radiobuttonwidget.lua index d5ec3e093..0fa7c8dd1 100644 --- a/frontend/ui/widget/radiobuttonwidget.lua +++ b/frontend/ui/widget/radiobuttonwidget.lua @@ -5,15 +5,12 @@ local Device = require("device") local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") -local Font = require("ui/font") local HorizontalGroup = require("ui/widget/horizontalgroup") local InputContainer = require("ui/widget/container/inputcontainer") -local LineWidget = require("ui/widget/linewidget") local MovableContainer = require("ui/widget/container/movablecontainer") local RadioButtonTable = require("ui/widget/radiobuttontable") local Size = require("ui/size") -local TextBoxWidget = require("ui/widget/textboxwidget") -local TextWidget = require("ui/widget/textwidget") +local TitleBar = require("ui/widget/titlebar") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") local WidgetContainer = require("ui/widget/container/widgetcontainer") @@ -22,7 +19,6 @@ local Screen = Device.screen local RadioButtonWidget = InputContainer:new{ title_text = "", - title_face = Font:getFace("x_smalltfont"), info_text = nil, width = nil, width_factor = nil, @@ -92,22 +88,16 @@ function RadioButtonWidget:update() value_widget, } - local value_title = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.title, - bordersize = 0, - TextWidget:new{ - text = self.title_text, - max_width = self.width - 2 * (Size.padding.default + Size.margin.title), - face = self.title_face, - }, - } - local value_line = LineWidget:new{ - dimen = Geom:new{ - w = self.width, - h = Size.line.thick, - } + local title_bar = TitleBar:new{ + width = self.width, + align = "left", + with_bottom_line = true, + title = self.title_text, + title_shrink_font_to_fit = true, + info_text = self.info_text, + show_parent = self, } + local buttons = { { { @@ -162,21 +152,8 @@ function RadioButtonWidget:update() local vgroup = VerticalGroup:new{ align = "left", - value_title, - value_line, + title_bar, } - if self.info_text then - table.insert(vgroup, FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.small, - bordersize = 0, - TextBoxWidget:new{ - text = self.info_text, - face = Font:getFace("x_smallinfofont"), - width = math.floor(self.width * 0.9), - } - }) - end table.insert(vgroup, CenterContainer:new{ dimen = Geom:new{ w = self.width, diff --git a/frontend/ui/widget/spinwidget.lua b/frontend/ui/widget/spinwidget.lua index cb1a779b7..40420e860 100644 --- a/frontend/ui/widget/spinwidget.lua +++ b/frontend/ui/widget/spinwidget.lua @@ -5,15 +5,12 @@ local Device = require("device") local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") -local Font = require("ui/font") local HorizontalGroup = require("ui/widget/horizontalgroup") local InputContainer = require("ui/widget/container/inputcontainer") -local LineWidget = require("ui/widget/linewidget") local MovableContainer = require("ui/widget/container/movablecontainer") local NumberPickerWidget = require("ui/widget/numberpickerwidget") local Size = require("ui/size") -local TextBoxWidget = require("ui/widget/textboxwidget") -local TextWidget = require("ui/widget/textwidget") +local TitleBar = require("ui/widget/titlebar") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") local WidgetContainer = require("ui/widget/container/widgetcontainer") @@ -23,7 +20,6 @@ local T = require("ffi/util").template local SpinWidget = InputContainer:new{ title_text = "", - title_face = Font:getFace("x_smalltfont"), info_text = nil, width = nil, width_factor = nil, -- number between 0 and 1, factor to the smallest of screen width and height @@ -111,21 +107,14 @@ function SpinWidget:update(numberpicker_value, numberpicker_value_index) value_widget, } - local value_title = FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.title, - bordersize = 0, - TextWidget:new{ - text = self.title_text, - max_width = self.width - 2 * (Size.padding.default + Size.margin.title), - face = self.title_face, - }, - } - local value_line = LineWidget:new{ - dimen = Geom:new{ - w = self.width, - h = Size.line.thick, - } + local title_bar = TitleBar:new{ + width = self.width, + align = "left", + with_bottom_line = true, + title = self.title_text, + title_shrink_font_to_fit = true, + info_text = self.info_text, + show_parent = self, } local buttons = {} @@ -202,7 +191,7 @@ function SpinWidget:update(numberpicker_value, numberpicker_value_index) }) local ok_cancel_buttons = ButtonTable:new{ - width = self.width - 2*Size.padding.default, + width = self.width - 2 * Size.padding.default, buttons = buttons, zero_sep = true, show_parent = self, @@ -210,21 +199,8 @@ function SpinWidget:update(numberpicker_value, numberpicker_value_index) local vgroup = VerticalGroup:new{ align = "left", - value_title, - value_line, + title_bar, } - if self.info_text then - table.insert(vgroup, FrameContainer:new{ - padding = Size.padding.default, - margin = Size.margin.small, - bordersize = 0, - TextBoxWidget:new{ - text = self.info_text, - face = Font:getFace("x_smallinfofont"), - width = math.floor(self.width * 0.9), - } - }) - end table.insert(vgroup, CenterContainer:new{ dimen = Geom:new{ w = self.width, diff --git a/frontend/ui/widget/titlebar.lua b/frontend/ui/widget/titlebar.lua index 5f39f047c..fea4c51dc 100644 --- a/frontend/ui/widget/titlebar.lua +++ b/frontend/ui/widget/titlebar.lua @@ -38,6 +38,10 @@ local TitleBar = OverlapGroup:extend{ subtitle_fullwidth = false, -- true to allow subtitle to extend below the buttons subtitle_multilines = false, -- multilines if overflow + info_text = nil, -- additional text displayed below bottom line + info_text_face = Font:getFace("x_smallinfofont"), + info_text_h_padding = nil, -- default to title_h_padding + title_top_padding = nil, -- computed if none provided title_h_padding = Size.padding.large, -- horizontal padding (this replaces button_padding on the inner/title side) title_subtitle_v_padding = Screen:scaleBySize(3), @@ -317,6 +321,24 @@ function TitleBar:init() return end + if self.info_text then + local h_padding = self.info_text_h_padding or self.title_h_padding + local v_padding = self.with_bottom_line and Size.padding.default or 0 + local filler_and_info_text = VerticalGroup:new{ + VerticalSpan:new{ width = self.titlebar_height + v_padding }, + HorizontalGroup:new{ + HorizontalSpan:new{ width = h_padding }, + TextBoxWidget:new{ + text = self.info_text, + face = self.info_text_face, + width = self.width - 2 * h_padding, + } + } + } + table.insert(self, filler_and_info_text) + self.titlebar_height = filler_and_info_text:getSize().h + self.bottom_v_padding + end + self.dimen = Geom:new{ w = self.width, h = self.titlebar_height, -- buttons can overflow this