diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua index 7b512a821..1f7b9d4b4 100644 --- a/frontend/ui/widget/configdialog.lua +++ b/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, diff --git a/frontend/ui/widget/container/framecontainer.lua b/frontend/ui/widget/container/framecontainer.lua index 0a024429c..40abb235a 100644 --- a/frontend/ui/widget/container/framecontainer.lua +++ b/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,