auto adaptation for much smaller screen

frontend/ui/widget/configdialog.lua

@@ -56,17 +56,13 @@ end
 
 function MenuBarItem:invert(invert)
     self[1].invert = invert
-    UIManager.update_region_func = function()
-        DEBUG("update icon region", self[1].dimen)
-        return self[1].dimen
-    end
-    UIManager:setDirty(self.config, "full")
+    UIManager:setDirty(self.config)
 end
 
 local OptionTextItem = InputContainer:new{}
 function OptionTextItem:init()
     local text_widget = self[1]
-    
+
     self[1] = UnderlineContainer:new{
         text_widget,
         padding = self.padding,
@@ -155,8 +151,9 @@ function ConfigOption:init()
             local item_font_face = self.options[c].item_font_face and self.options[c].item_font_face or "cfont"
             local item_font_size = self.options[c].item_font_size and self.options[c].item_font_size or default_item_font_size
             local option_height = Screen:scaleByDPI(self.options[c].height and self.options[c].height or default_option_height)
+            local item_spacing_with = self.options[c].spacing and self.options[c].spacing or default_items_spacing
             local items_spacing = HorizontalSpan:new{
-                width = Screen:scaleByDPI(self.options[c].spacing and self.options[c].spacing or default_items_spacing)
+                width = Screen:scaleByDPI(item_spacing_with)
             }
             local horizontal_group = HorizontalGroup:new{}
             if self.options[c].name_text then
@@ -173,7 +170,10 @@ function ConfigOption:init()
 
             if self.options[c].widget == "ProgressWidget" then
                 local widget_container = CenterContainer:new{
-                    dimen = Geom:new{w = Screen:getWidth()*self.options[c].widget_align_center, h = option_height}
+                    dimen = Geom:new{
+                        w = Screen:getWidth()*self.options[c].widget_align_center,
+                        h = option_height
+                    }
                 }
                 local widget = ProgressWidget:new{
                     width = self.options[c].width,
@@ -217,7 +217,7 @@ function ConfigOption:init()
                     else
                         min_diff = value_diff(val, self.options[c].values[1])
                     end
-                        
+
                     local diff = nil
                     for index, val_ in pairs(self.options[c].values) do
                         local diff = nil
@@ -293,6 +293,12 @@ function ConfigOption:init()
                         padding = -2,
                         color = d == current_item and 15 or 0,
                     }
+                    local icons_count = #self.options[c].item_icons
+                    local min_item_spacing = (Screen:getWidth() * item_align -
+                            option_item:getSize().w * icons_count) / icons_count
+                    local items_spacing = HorizontalSpan:new{
+                        width = math.min(min_item_spacing, Screen:scaleByDPI(item_spacing_with))
+                    }
                     option_items[d] = option_item
                     option_item.items = option_items
                     option_item.name = self.options[c].name
@@ -441,7 +447,7 @@ function ConfigDialog:init()
 end
 
 function ConfigDialog:updateConfigPanel(index)
-    
+
 end
 
 function ConfigDialog:update()

frontend/ui/widget/infomessage.lua

@@ -58,7 +58,8 @@ function InfoMessage:init()
                 HorizontalSpan:new{ width = 10 },
                 TextBoxWidget:new{
                     text = self.text,
-                    face = self.face
+                    face = self.face,
+                    width = Screen:getWidth()*2/3,
                 }
             }
         }

frontend/ui/widget/linewidget.lua

@@ -9,6 +9,7 @@ local LineWidget = Widget:new{
 }
 
 function LineWidget:paintTo(bb, x, y)
+    if self.style == "none" then return end
     if self.style == "dashed" then
         for i = 0, self.dimen.w - 20, 20 do
             bb:paintRect(x + i, y,

frontend/ui/widget/touchmenu.lua

@@ -102,21 +102,16 @@ function TouchMenuBar:init()
 
     self.bar_icon_group = HorizontalGroup:new{}
 
-    local icon_sep = LineWidget:new{
-        dimen = Geom:new{
-            w = Screen:scaleByDPI(2),
-            h = self.height,
-        }
-    }
-
-    local icon_span = HorizontalSpan:new{ width = Screen:scaleByDPI(20) }
-
+    local icon_sep_width = Screen:scaleByDPI(2)
+    local icons_sep_width = icon_sep_width * (#self.icons + 1)
     -- build up image widget for menu icon bar
     self.icon_widgets = {}
+    -- hold icon seperators
+    self.icon_seps = {}
     -- the start_seg for first icon_widget should be 0
     -- we asign negative here to offset it in the loop
-    start_seg = -icon_sep:getSize().w
-    end_seg = start_seg
+    local start_seg = -icon_sep_width
+    local end_seg = start_seg
     for k, v in ipairs(self.icons) do
         local ib = IconButton:new{
             show_parent = self.show_parent,
@@ -124,14 +119,18 @@ function TouchMenuBar:init()
             callback = nil,
         }
 
+        -- we assume all icons are of the same width
+        local content_width = ib:getSize().w * #self.icons + icons_sep_width
+        local spacing_width = (Screen:getWidth()-content_width)/(#self.icons*2)
+        local spacing = HorizontalSpan:new{
+            width = math.min(spacing_width, Screen:scaleByDPI(20))
+        }
         table.insert(self.icon_widgets, HorizontalGroup:new{
-            icon_span,
-            ib,
-            icon_span,
+            spacing, ib, spacing,
         })
 
         -- we have to use local variable here for closure callback
-        local _start_seg = end_seg + icon_sep:getSize().w
+        local _start_seg = end_seg + icon_sep_width
         local _end_seg = _start_seg + self.icon_widgets[k]:getSize().w
 
         if k == 1 then
@@ -148,12 +147,26 @@ function TouchMenuBar:init()
             }
         end
 
+        local icon_sep = LineWidget:new{
+            style = k == 1 and "solid" or "none",
+            dimen = Geom:new{
+                w = Screen:scaleByDPI(2),
+                h = self.height,
+            }
+        }
+        table.insert(self.icon_seps, icon_sep)
+
+        -- callback to set visual style
         ib.callback = function()
             self.bar_sep.empty_segments = {
                 {
                     s = _start_seg, e = _end_seg
                 }
             }
+            for i, sep in ipairs(self.icon_seps) do
+                local current_icon = i == k - 1 or i == k
+                self.icon_seps[i].style = current_icon and "solid" or "none"
+            end
             self.menu:switchMenuTab(k)
         end
 
@@ -171,7 +184,7 @@ function TouchMenuBar:init()
             align = "left",
             -- bar icons
             self.bar_icon_group,
-            -- separate line
+            -- horizontal separate line
             self.bar_sep
         },
     }