Show position on config panel (#3194)

frontend/ui/widget/configdialog.lua

@@ -14,6 +14,7 @@ local HorizontalSpan = require("ui/widget/horizontalspan")
 local IconButton = require("ui/widget/iconbutton")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local LineWidget = require("ui/widget/linewidget")
 local RightContainer = require("ui/widget/container/rightcontainer")
 local TextWidget = require("ui/widget/textwidget")
 local ToggleSwitch = require("ui/widget/toggleswitch")
@@ -405,8 +406,14 @@ function ConfigPanel:init()
     table.insert(self, panel)
 end
 
-local MenuBar = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, }
+local MenuBar = FrameContainer:new{
+    bordersize = 0,
+    padding = 0,
+    background = Blitbuffer.COLOR_WHITE,
+}
 function MenuBar:init()
+    local icon_sep_width = Screen:scaleBySize(2)
+    local line_thickness = Screen:scaleBySize(2)
     local config_options = self.config_dialog.config_options
     local menu_items = {}
     local icons_width = 0
@@ -426,20 +433,68 @@ function MenuBar:init()
         menu_items[c] = menu_icon
     end
 
+    local icon_sep = LineWidget:new{
+        dimen = Geom:new{
+            w = icon_sep_width,
+            h = icons_height,
+        }
+    }
+    local spacing_width = math.ceil((Screen:getWidth() - icons_width) / (#menu_items+1))
     local spacing = HorizontalSpan:new{
-        width = (Screen:getWidth() - icons_width) / (#menu_items+1)
+        width = spacing_width,
+    }
+    local spacing_line = LineWidget:new{
+        dimen = Geom:new{
+            w = spacing_width,
+            h = line_thickness,
+        }
+    }
+    local sep_line = LineWidget:new{
+        dimen = Geom:new{
+            w = icon_sep_width,
+            h = line_thickness,
+        }
     }
-
     local menu_bar = HorizontalGroup:new{}
+    local line_bar = HorizontalGroup:new{}
 
     for c = 1, #menu_items do
         table.insert(menu_bar, spacing)
-        table.insert(menu_bar, menu_items[c])
+        table.insert(line_bar, spacing_line)
+        if c == self.panel_index then
+            table.insert(menu_bar, icon_sep)
+            table.insert(line_bar, sep_line)
+            table.insert(menu_bar, menu_items[c])
+            table.insert(line_bar, LineWidget:new{
+                background = Blitbuffer.COLOR_WHITE,
+                dimen = Geom:new{
+                    w = menu_items[c]:getSize().w,
+                    h = line_thickness,
+                }
+            })
+
+            table.insert(menu_bar, icon_sep)
+            table.insert(line_bar, sep_line)
+        else
+            table.insert(menu_bar, menu_items[c])
+            table.insert(line_bar, LineWidget:new{
+                dimen = Geom:new{
+                    w = menu_items[c]:getSize().w,
+                    h = line_thickness,
+                }
+            })
+        end
     end
     table.insert(menu_bar, spacing)
+    table.insert(line_bar, spacing_line)
 
     self.dimen = Geom:new{ w = Screen:getWidth(), h = icons_height}
-    table.insert(self, menu_bar)
+    local vertical_menu = VerticalGroup:new{
+        line_bar,
+        menu_bar,
+    }
+    table.insert(self, vertical_menu)
+
 end
 
 --[[
@@ -470,9 +525,6 @@ function ConfigDialog:init()
     ------------------------------------------
     -- start to set up widget layout ---------
     ------------------------------------------
-    self.config_menubar = MenuBar:new{
-        config_dialog = self,
-    }
     self:update()
     ------------------------------------------
     -- start to set up input event callback --
@@ -513,6 +565,10 @@ function ConfigDialog:updateConfigPanel(index)
 end
 
 function ConfigDialog:update()
+    self.config_menubar = MenuBar:new{
+        config_dialog = self,
+        panel_index = self.panel_index,
+    }
     self.config_panel = ConfigPanel:new{
         index = self.panel_index,
         config_dialog = self,

frontend/ui/widget/container/framecontainer.lua

@@ -18,17 +18,19 @@ Example:
 
 --]]
 
-local WidgetContainer = require("ui/widget/container/widgetcontainer")
-local Geom = require("ui/geometry")
 local Blitbuffer = require("ffi/blitbuffer")
+local Device = require("device")
+local Geom = require("ui/geometry")
+local WidgetContainer = require("ui/widget/container/widgetcontainer")
+local Screen = Device.screen
 
 local FrameContainer = WidgetContainer:new{
     background = nil,
     color = Blitbuffer.COLOR_BLACK,
     margin = 0,
     radius = 0,
-    bordersize = 2,
-    padding = 5,
+    bordersize = Screen:scaleBySize(2),
+    padding = Screen:scaleBySize(5),
     width = nil,
     height = nil,
     invert = false,