From 9f4f5fa451f53951663d7b0a97929a894d07240f Mon Sep 17 00:00:00 2001 From: chrox Date: Wed, 28 May 2014 20:05:38 +0800 Subject: [PATCH] auto adaptation for much smaller screen --- frontend/ui/widget/configdialog.lua | 26 ++++++++++------- frontend/ui/widget/infomessage.lua | 3 +- frontend/ui/widget/linewidget.lua | 1 + frontend/ui/widget/touchmenu.lua | 45 +++++++++++++++++++---------- 4 files changed, 48 insertions(+), 27 deletions(-) diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua index ef6501dd8..9c835f4e6 100644 --- a/frontend/ui/widget/configdialog.lua +++ b/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() diff --git a/frontend/ui/widget/infomessage.lua b/frontend/ui/widget/infomessage.lua index 5f61d962d..b81ca68c0 100644 --- a/frontend/ui/widget/infomessage.lua +++ b/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, } } } diff --git a/frontend/ui/widget/linewidget.lua b/frontend/ui/widget/linewidget.lua index c5f3395a8..e40c8b2f5 100644 --- a/frontend/ui/widget/linewidget.lua +++ b/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, diff --git a/frontend/ui/widget/touchmenu.lua b/frontend/ui/widget/touchmenu.lua index cb6de71cd..ebcf6b5cc 100644 --- a/frontend/ui/widget/touchmenu.lua +++ b/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 }, }