More widgets: insert TitleBar (#8683)

SpinWidget, DoubleSpinWidget, DateTimeWidget, RadioButtonWidget got new TitleBar.

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,

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,

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,

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,

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