Merge pull request #161 from houqp/new_ui_code

more fixes in new_ui_code

dialog.lua

@@ -289,29 +289,25 @@ function ItemShortCutIcon:init()
 		sc_face = Font:getFace("scfont", 22)
 	end
 
-	self[1] = HorizontalGroup:new{
-		HorizontalSpan:new{ width = 5 },
-		FrameContainer:new{
-			padding = 0,
-			bordersize = self.bordersize,
-			radius = radius,
-			background = background,
+	self[1] = FrameContainer:new{
+		padding = 0,
+		bordersize = self.bordersize,
+		radius = radius,
+		background = background,
+		dimen = {
+			w = self.width,
+			h = self.height,
+		},
+		CenterContainer:new{
 			dimen = {
 				w = self.width,
 				h = self.height,
 			},
-			CenterContainer:new{
-				dimen = {
-					w = self.width,
-					h = self.height,
-				},
-				TextWidget:new{
-					text = self.key,
-					face = sc_face,
-				},
+			TextWidget:new{
+				text = self.key,
+				face = sc_face,
 			},
 		},
-		HorizontalSpan:new{ width = 5 },
 	}
 end
 
@@ -339,15 +335,19 @@ function MenuItem:init()
 	end
 
 	self.detail = self.text
+	-- 15 for HorizontalSpan,
+	self.content_width = self.width - shortcut_icon_w - 15
+
 	w = sizeUtf8Text(0, self.width, self.face, self.text, true).x
-	if w >= self.width - shortcut_icon_w then
+	if w >= self.content_width then
 		indicator = "  >>"
 		indicator_w = sizeUtf8Text(0, self.width, self.face, indicator, true).x
 		self.text = getSubTextByWidth(self.text, self.face,
-			self.width - shortcut_icon_w - indicator_w - 4, true) .. indicator
+			self.content_width - indicator_w, true) .. indicator
 	end
 
 	self[1] = HorizontalGroup:new{
+		HorizontalSpan:new{ width = 5 },
 		ItemShortCutIcon:new{
 			width = shortcut_icon_w,
 			height = shortcut_icon_h,
@@ -355,10 +355,10 @@ function MenuItem:init()
 			radius = shortcut_icon_r,
 			style = self.shortcut_style,
 		},
-		HorizontalSpan:new{ width = 5 },
+		HorizontalSpan:new{ width = 10 },
 		UnderlineContainer:new{
 			dimen = {
-				w = self.width - 5 - shortcut_icon_w,
+				w = self.content_width,
 				h = self.height
 			},
 			HorizontalGroup:new {
@@ -373,12 +373,12 @@ function MenuItem:init()
 end
 
 function MenuItem:onFocus()
-	self[1][3].color = 10
+	self[1][4].color = 10
 	return true
 end
 
 function MenuItem:onUnfocus()
-	self[1][3].color = 0
+	self[1][4].color = 0
 	return true
 end
 
@@ -424,7 +424,7 @@ Menu = FocusManager:new{
 
 function Menu:init()
 	self.items = #self.item_table
-	self.perpage = math.floor(self.height / self.item_height)
+	self.perpage = math.floor(self.height / self.item_height) - 2
 	self.page = 1
 	self.page_num = math.ceil(self.items / self.perpage)
 
@@ -459,7 +459,6 @@ function Menu:init()
 					text = "page "..self.page.."/"..self.page_num,
 					face = self.fface,
 				},
-				VerticalSpan:new{ width = 5 },
 			}, -- VerticalGroup
 		}, -- FrameContainer
 	} -- CenterContainer

widget.lua

@@ -181,7 +181,7 @@ function TextWidget:getSize()
 	--return { w = self._length, h = self._bb:getHeight() }
 	
 	self._length = sizeUtf8Text(0, G_width, self.face, self.text, true).x
-	self._height = self.face.size * 1.3
+	self._height = self.face.size * 1.5
 	return {
 		w = self._length,
 		h = self._height,
@@ -193,7 +193,7 @@ function TextWidget:paintTo(bb, x, y)
 		--self:_render()
 	--end
 	--bb:blitFrom(self._bb, x, y, 0, 0, self._length, self._bb:getHeight())
-	renderUtf8Text(bb, x, y+self._height*0.8, self.face, self.text, true)
+	renderUtf8Text(bb, x, y+self._height*0.7, self.face, self.text, true)
 end
 
 function TextWidget:free()
@@ -367,7 +367,7 @@ end
 
 function HorizontalGroup:paintTo(bb, x, y)
 	local size = self:getSize()
-	
+
 	for i, widget in ipairs(self) do
 		if self.align == "center" then
 			widget:paintTo(bb, x + self._offsets[i].x, y + (size.h - self._offsets[i].y) / 2)
@@ -467,19 +467,22 @@ UnderlineContainer = WidgetContainer:new{
 }
 
 function UnderlineContainer:getSize()
-	local contentSize = self[1]:getSize()
 	if self.dimen then
-		if contentSize.w < self.dimen.w then contentSize.w = self.dimen.w end
-		if contentSize.h < self.dimen.h then contentSize.h = self.dimen.h end
+		return { w = self.dimen.w, h = self.dimen.h }
+	else
+		local contentSize = self[1]:getSize()
+		return { 
+			w = contentSize.w, 
+			h = contentSize.h + self.linesize + self.padding
+		}
 	end
-	return { w = contentSize.w, h = contentSize.h + self.linesize + self.padding }
 end
 
 function UnderlineContainer:paintTo(bb, x, y)
-	local contentSize = self:getSize()
+	local content_size = self:getSize()
 	self[1]:paintTo(bb, x, y)
-	bb:paintRect(x, y + contentSize.h - self.linesize,
-		contentSize.w, self.linesize, self.color)
+	bb:paintRect(x, y + content_size.h - self.linesize,
+		content_size.w, self.linesize, self.color)
 end
 
 

wtest.lua

@@ -1,5 +1,22 @@
 require "ui"
 
+TestGrid = Widget:new{}
+
+function TestGrid:paintTo()
+	v_line = math.floor(G_width / 50)
+	h_line = math.floor(G_height / 50)
+	for i=1,h_line do
+		y_num = i*50
+		renderUtf8Text(fb.bb, 0, y_num+10, Font:getFace("ffont", 12), y_num, true)
+		fb.bb:paintRect(0, y_num, G_width, 1, 10)
+	end
+	for i=1,v_line do
+		x_num = i*50
+		renderUtf8Text(fb.bb, x_num, 10, Font:getFace("ffont", 12), x_num, true)
+		fb.bb:paintRect(x_num, 0, 1, G_height, 10)
+	end
+end
+
 -- we create a widget that paints a background:
 Background = InputContainer:new{
 	is_always_active = true, -- receive events when other dialogs are active
@@ -97,16 +114,25 @@ menu_items = {
 	{text = "item10"},
 	{text = "item11"},
 	{text = "item12"},
+	{text = "item13"},
+	{text = "item14"},
+	{text = "item15"},
+	{text = "item16"},
+	{text = "item17"},
 }
 M = Menu:new{
 	title = "Test Menu",
 	item_table = menu_items,
 	width = 500,
-	height = 400,
+	height = 600,
 }
 
 UIManager:show(Background:new())
+UIManager:show(TestGrid)
 UIManager:show(Clock:new())
 UIManager:show(M)
 UIManager:show(Quiz)
 UIManager:run()
+
+
+