Update MainMenu and replace tabs on buttons (#61)

Co-authored-by: luk3yx <luk3yx@users.noreply.github.com>

builtin/fstk/buttonbar.lua

@@ -16,6 +16,8 @@
 --51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 
 
+local defaulttexturedir = core.formspec_escape(defaulttexturedir)
+
 local function buttonbar_formspec(self)
 
 	if self.hidden then
@@ -50,17 +52,30 @@ local function buttonbar_formspec(self)
 			(self.orientation == "horizontal" and
 			(btn_pos.x + self.btn_size <= self.pos.x + self.size.x)) then
 
-		local borders="true"
+			local button = self.buttons[i]
 
-		if self.buttons[i].image ~= nil then
-			borders="false"
-		end
+			local borders="true"
 
-		formspec = formspec ..
-			string.format("image_button[%f,%f;%f,%f;%s;%s;%s;true;%s]tooltip[%s;%s]",
-					btn_pos.x, btn_pos.y, self.btn_size, self.btn_size,
-					self.buttons[i].image, btn_name, self.buttons[i].caption,
-					borders, btn_name, self.buttons[i].tooltip)
+			if button.image ~= nil then
+				borders="false"
+			end
+
+			if button.cdb then
+				formspec = formspec ..
+					"style[" .. btn_name .. ";bgimg=" .. defaulttexturedir ..
+						"btn_download.png;bgimg_hovered=" .. defaulttexturedir .. "btn_download_hover.png]" ..
+
+					("image_button[%f,%f;%f,%f;;%s;%s;true;%s]tooltip[%s;%s]"):format(
+						btn_pos.x, btn_pos.y, self.btn_size, self.btn_size,
+						btn_name, button.caption,
+						borders, btn_name, button.tooltip)
+			else
+				formspec = formspec ..
+					("image_button[%f,%f;%f,%f;%s;%s;%s;true;%s]tooltip[%s;%s]"):format(
+						btn_pos.x, btn_pos.y, self.btn_size, self.btn_size,
+						button.image, btn_name, button.caption,
+						borders, btn_name, button.tooltip)
+			end
 		else
 			--print("end of displayable buttons: orientation: " .. self.orientation)
 			--print( "button_end: " .. (btn_pos.y + self.btn_size - (self.btn_size * 0.05)))
@@ -83,29 +98,41 @@ local function buttonbar_formspec(self)
 			btn_inc_pos.y = self.pos.y + (self.btn_size * 0.05)
 		else
 			btn_size.x = self.btn_size
-			btn_size.y = 0.5
+			btn_size.y = self.btn_size * 0.5
 			btn_dec_pos.x = self.pos.x + (self.btn_size * 0.1)
 			btn_dec_pos.y = self.pos.y + (self.btn_size * 0.05)
 			btn_inc_pos.x = self.pos.x + (self.btn_size * 0.1)
-			btn_inc_pos.y = self.pos.y + self.size.y - (self.btn_size * 0.4)
+			btn_inc_pos.y = self.size.y - (self.btn_size * 0.75)
 		end
 
-		local text_dec = "<"
-		local text_inc = ">"
-		if self.orientation == "vertical" then
-			text_dec = "^"
-			text_inc = "v"
-		end
+		if self.orientation == "horizontal" then
+			local text_dec = "<"
+			local text_inc = ">"
 
-		formspec = formspec ..
-			string.format("image_button[%f,%f;%f,%f;;btnbar_dec_%s;%s;true;true]",
+			formspec = formspec ..
+				("image_button[%f,%f;%f,%f;;btnbar_dec_%s;%s;true;true]"):format(
 					btn_dec_pos.x, btn_dec_pos.y, btn_size.x, btn_size.y,
 					self.name, text_dec)
 
-		formspec = formspec ..
-			string.format("image_button[%f,%f;%f,%f;;btnbar_inc_%s;%s;true;true]",
+			formspec = formspec ..
+				("image_button[%f,%f;%f,%f;;btnbar_inc_%s;%s;true;true]"):format(
 					btn_inc_pos.x, btn_inc_pos.y, btn_size.x, btn_size.y,
 					self.name, text_inc)
+		else
+			formspec = formspec ..
+				"style[btnbar_dec_" .. self.name .. ";bgimg=" .. defaulttexturedir ..
+					"btn_up.png;bgimg_hovered=" .. defaulttexturedir .. "btn_up_hover.png]" ..
+				("image_button[%f,%f;%f,%f;;btnbar_dec_%s;;true;false]"):format(
+					btn_dec_pos.x, btn_dec_pos.y, btn_size.x, btn_size.y,
+					self.name)
+
+			formspec = formspec ..
+				"style[btnbar_inc_" .. self.name .. ";bgimg=" .. defaulttexturedir ..
+					"btn_down.png;bgimg_hovered=" .. defaulttexturedir .. "btn_down_hover.png]" ..
+				("image_button[%f,%f;%f,%f;;btnbar_inc_%s;;true;false]"):format(
+					btn_inc_pos.x, btn_inc_pos.y, btn_size.x, btn_size.y,
+					self.name)
+		end
 	end
 
 	return formspec
@@ -114,7 +141,7 @@ end
 local function buttonbar_buttonhandler(self, fields)
 
 	if fields["btnbar_inc_" .. self.name] ~= nil and
-		self.startbutton < #self.buttons - 4 then
+		self.startbutton < #self.buttons - 5 then
 
 		self.startbutton = self.startbutton + 1
 		return true
@@ -142,7 +169,7 @@ local buttonbar_metatable = {
 
 	delete = function(self) ui.delete(self) end,
 
-	add_button = function(self, name, caption, image, tooltip)
+	add_button = function(self, name, caption, image, tooltip, cdb)
 			if caption == nil then caption = "" end
 			if image == nil then image = "" end
 			if tooltip == nil then tooltip = "" end
@@ -151,7 +178,8 @@ local buttonbar_metatable = {
 				name = name,
 				caption = caption,
 				image = image,
-				tooltip = tooltip
+				tooltip = tooltip,
+				cdb = cdb
 			}
 			if self.orientation == "horizontal" then
 				if ( (self.btn_size * #self.buttons) + (self.btn_size * 0.05 *2)
@@ -189,7 +217,7 @@ function buttonbar_create(name, cbf_buttonhandler, pos, orientation, size)
 	local self = {}
 	self.name = name
 	self.type = "addon"
-	self.bgcolor = "#7f9dd5"
+	self.bgcolor = "#759ddabf"
 	self.pos = pos
 	self.size = size
 	self.orientation = orientation

builtin/fstk/dialog.lua

@@ -62,12 +62,10 @@ function dialog_create(name, get_formspec, buttonhandler, eventhandler, add_back
 	if add_background then
 		function self.formspec(data)
 			return ([[
-				size[14,5.4,false]
-				container[1,0]
+				size[12,5.4,false]
 				bgcolor[#0000]
-				background9[-0.2,-0.26;12.4,6.15;%s;false;40]
+				background9[0,0;0,0;%s;true;40]
 				%s
-				container_end[]
 			]]):format(bg, get_formspec(data))
 		end
 	else

builtin/fstk/tabview.lua

@@ -78,12 +78,12 @@ local function get_formspec(self)
 					{width=self.width, height=self.height}
 			local defaulttexturedir = core.formspec_escape(defaulttexturedir)
 			formspec = formspec ..
-					string.format("size[%f,%f,%s]",tsize.width + 2,tsize.height,
+					string.format("size[%f,%f,%s]",tsize.width + 2,tsize.height + 1,
 						dump(self.fixed_size)) ..
 					"bgcolor[#0000]" ..
-					"container[1,0]" ..
-					"background9[-0.2,-0.26;" .. tsize.width + 0.4 .. "," ..
-						tsize.height + 0.75 .. ";" .. defaulttexturedir ..
+					"container[1,1]" ..
+					"background9[-0.2,-1.26;" .. tsize.width + 0.4 .. "," ..
+						tsize.height + 1.75 .. ";" .. defaulttexturedir ..
 						"bg_common.png;false;40]" ..
 					"style[settings_tab;content_offset=0]" ..
 					"image_button[12.02,1.3;1,1.55;" ..
@@ -95,7 +95,8 @@ local function get_formspec(self)
 						defaulttexturedir .. "authors_menu_pressed.png]"
 		end
 
-		formspec = formspec .. self:tab_header()
+	--	formspec = formspec .. self:tab_header()
+		formspec = formspec .. self:button_header()
 		formspec = formspec ..
 				self.tablist[self.last_tab_index].get_formspec(
 					self,
@@ -176,7 +177,7 @@ end
 
 
 --------------------------------------------------------------------------------
-local function tab_header(self)
+--[[local function tab_header(self)
 
 	local captions = {}
 	for i = 1, #self.tablist do
@@ -187,6 +188,58 @@ local function tab_header(self)
 	return string.format("tabheader[%f,%f;%s;%s;%i;true;false]",
 			self.header_x, self.header_y, self.name, toadd,
 			math.max(self.last_tab_index, 1))
+end]]
+
+
+--------------------------------------------------------------------------------
+local function button_header(self)
+	local visible_tabs = {}
+	local btn_widths = {}
+	local total_width = 0
+	for i, tab in ipairs(self.tablist) do
+		if not tab.hidden and tab.caption ~= "" then
+			visible_tabs[#visible_tabs + 1] = tab
+
+			local w = utf8.len(core.get_translated_string(tab.caption))
+			btn_widths[#visible_tabs] = w
+			total_width = total_width + w
+		end
+	end
+
+	local toadd = ""
+	local coords_per_char = 12 / total_width
+
+	-- The formspec is 15.4875 "real" coordinates wide
+	-- local x = (12.39 - total_width) / 2 - 0.3
+	local x = -0.1
+	for i = 1, #visible_tabs do
+		local caption = visible_tabs[i].caption
+		local w = btn_widths[i] * coords_per_char
+		local texture = "upper_buttons_middle"
+		if i == 1 then
+			texture = "upper_buttons_left"
+		elseif i == #visible_tabs then
+			texture = "upper_buttons_right"
+		end
+		local btn_name = self.name .. "_" .. i
+		toadd = toadd ..
+			"style[" .. btn_name .. ";padding=-10;bgimg=" .. defaulttexturedir ..
+				texture
+
+		if i == math.abs(self.last_tab_index) then
+			toadd = toadd .. "_selected.png;"
+		else
+			toadd = toadd .. ".png;bgimg_hovered=" .. defaulttexturedir ..
+				texture .. "_hover.png;"
+		end
+
+		toadd = toadd .. "bgimg_middle=20;content_offset=0]" ..
+			"image_button[" .. x .. ",-1.1;" .. w + 0.22 .. ",0.9;;" ..
+				btn_name .. ";" .. caption .. ";true;false]"
+		x = x + w
+	end
+
+	return toadd
 end
 
 --------------------------------------------------------------------------------
@@ -222,6 +275,16 @@ local function handle_tab_buttons(self,fields)
 		return true
 	end
 
+	local name_prefix = self.name .. "_"
+	local name_prefix_len = #name_prefix
+	for field in pairs(fields) do
+		if field:sub(1, name_prefix_len) == name_prefix then
+			local index = tonumber(field:sub(name_prefix_len + 1))
+			switch_to_tab(self, index)
+			return true
+		end
+	end
+
 	return false
 end
 
@@ -285,14 +348,14 @@ local tabview_metatable = {
 			function(self,handler) self.glb_evt_handler = handler end,
 	set_fixed_size =
 			function(self,state) self.fixed_size = state end,
-	tab_header = tab_header,
+--	tab_header = tab_header,
+	button_header = button_header,
 	handle_tab_buttons = handle_tab_buttons
 }
 
 tabview_metatable.__index = tabview_metatable
 
 --------------------------------------------------------------------------------
-tabview_uses_container = true
 function tabview_create(name, size, tabheaderpos)
 	local self = {}
 

builtin/mainmenu/dlg_settings_advanced.lua

@@ -957,7 +957,7 @@ local function create_settings_formspec(tabview, _, tabdata)
 			"tableoptions[background=#00000000;border=false]" ..
 			"field[0.3,0.1;10.2,1;search_string;;" .. core.formspec_escape(search_string) .. "]" ..
 			"field_close_on_enter[search_string;false]" ..
-			"button[10.2,-0.2;2,1;search;" .. fgettext("Search") .. "]" ..
+			"button[10.1,-0.22;2,1;search;" .. fgettext("Search") .. "]" ..
 			"table[0,0.8;12,3.5;list_settings;"
 
 	local current_level = 0

builtin/mainmenu/tab_content.lua

@@ -60,7 +60,9 @@ local function get_formspec(tabview, name, tabdata)
 
 	local retval =
 		"label[0.05,-0.25;".. fgettext("Installed Packages:") .. "]" ..
+		"background9[0,0.23;5.3,4.46;" .. defaulttexturedir .. "worldlist_bg.png" .. ";false;40]" ..
 		"tablecolumns[color;tree;text]" ..
+		"tableoptions[background=#0000;border=false]" ..
 		"table[0,0.25;5.1,4.3;pkglist;" ..
 		pkgmgr.render_packagelist(packages) ..
 		";" .. tabdata.selected_pkg .. "]" ..
@@ -96,7 +98,7 @@ local function get_formspec(tabview, name, tabdata)
 		retval = retval ..
 				"image[5.5,0;3,2;" .. core.formspec_escape(modscreenshot) .. "]" ..
 				"label[8.25,0.6;" .. core.formspec_escape(selected_pkg.name) .. "]" ..
-				"box[5.5,2.2;6.2,2.4;#000]"
+				"box[5.5,2.2;6.2,2.4;#33314B99]"
 
 		if selected_pkg.type == "mod" then
 			if selected_pkg.is_modpack then

builtin/mainmenu/tab_credits.lua

@@ -15,6 +15,9 @@
 --with this program; if not, write to the Free Software Foundation, Inc.,
 --51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 
+local esc = core.formspec_escape
+local defaulttexturedir = esc(defaulttexturedir)
+
 --------------------------------------------------------------------------------
 
 local multicraft_developers = {
@@ -105,7 +108,7 @@ local previous_contributors = {
 local function buildCreditList(source)
 	local ret = {}
 	for i = 1, #source do
-		ret[i] = core.formspec_escape(source[i])
+		ret[i] = esc(source[i])
 	end
 	return table.concat(ret, ",,")
 end
@@ -120,10 +123,16 @@ return {
 			"Copyright (C) 2014-2022 MultiCraft Development Team\n" ..
 			"License: GNU LGPLv3.0+ and CC BY-SA 4.0\n" ..
 			"Created and Powered by Minetest Engine, ver. 5.4.1]" ..
-			"button[9.5,0;2.5,0.5;homepage;Home Page]" ..
-			"button[9.5,0.8;2.5,0.5;privacy;Privacy Policy]" ..
-			"background9[0.1,1.5;11.85,4.15;" ..
-				core.formspec_escape(defaulttexturedir) .. "worldlist_bg.png" .. ";false;40]" ..
+
+			"style[homepage;padding=-10;bgimg=" .. defaulttexturedir ..
+				"select_btn.png;bgimg_middle=20]" ..
+			"image_button[9.5,-0.25;2.5,0.9;;homepage;Home Page;true;false]" ..
+			"style[privacy;padding=-10;bgimg=" .. defaulttexturedir ..
+				"select_btn.png;bgimg_middle=20]" ..
+			"image_button[9.5,0.6;2.5,0.9;;privacy;Privacy Policy;true;false]" ..
+
+			"background9[0.1,1.5;11.85,4.15;" .. defaulttexturedir ..
+				"worldlist_bg.png" .. ";false;40]" ..
 			"tablecolumns[color;text]" ..
 			"tableoptions[background=#0000;highlight=#00000000;border=false]" ..
 			"table[0.1,1.5;11.65,4;list_credits;" ..

builtin/mainmenu/tab_local.lua

@@ -71,7 +71,7 @@ local function singleplayer_refresh_gamebar()
 
 	local btnbar = buttonbar_create("game_button_bar",
 		game_buttonbar_button_handler,
-		{x=-0.35, y=-0.32}, "vertical", {x=1, y=6.14})
+		{x=-0.35, y=-0.32}, "vertical", {x=1, y=7.14})
 
 	for i=1, #pkgmgr.games do
 		if pkgmgr.games[i].id ~= "default" then
@@ -100,8 +100,7 @@ local function singleplayer_refresh_gamebar()
 		end
 	end
 
-	local plus_image = defaulttexturedir .. "plus.png"
-	btnbar:add_button("game_open_cdb", "", plus_image, fgettext("Install games from ContentDB"))
+	btnbar:add_button("game_open_cdb", "", "", fgettext("Install games from ContentDB"), true)
 end
 
 local function get_formspec()
@@ -150,8 +149,9 @@ local function get_formspec()
 
 	if PLATFORM ~= "Android" and PLATFORM ~= "iOS" then
 		retval = retval ..
-			"image_button[9.33,4.84;2.67,0.87;" .. defaulttexturedir ..
-			"select_btn.png;world_configure;".. fgettext("Select Mods") .. ";false;false]"
+			"style[world_configure;padding=-10;bgimg=" .. defaulttexturedir ..
+				"select_btn.png;bgimg_middle=20]" ..
+			"image_button[9.3,4.84;2.7,0.92;;world_configure;" .. fgettext("Select Mods") .. ";true;false]"
 	end
 
 	local enable_server = core.settings:get_bool("enable_server")

builtin/mainmenu/textures.lua

@@ -18,6 +18,8 @@
 
 mm_texture = {}
 
+local small_screen = (PLATFORM == "Android" or PLATFORM == "iOS") and not core.settings:get_bool("device_is_tablet")
+
 --------------------------------------------------------------------------------
 function mm_texture.init()
 	mm_texture.defaulttexturedir = core.get_texturepath() .. DIR_DELIM .. "base" ..
@@ -58,7 +60,9 @@ function mm_texture.reset()
 	core.set_clouds(false)
 
 	mm_texture.set_generic("footer")
-	mm_texture.set_generic("header")
+	if not small_screen then
+		mm_texture.set_generic("header")
+	end
 
 	if not have_bg then
 	--	if core.settings:get_bool("menu_clouds") then
@@ -95,7 +99,9 @@ function mm_texture.update_game(gamedetails)
 	end
 
 	mm_texture.set_game("footer",gamedetails)
-	mm_texture.set_game("header",gamedetails)
+	if not small_screen then
+		mm_texture.set_game("header",gamedetails)
+	end
 
 	mm_texture.gameid = gamedetails.id
 end

src/script/lua_api/l_mainmenu.cpp

@@ -964,6 +964,15 @@ int ModApiMainMenu::l_load_translation(lua_State *L)
 	return 0;
 }
 
+/******************************************************************************/
+int ModApiMainMenu::l_get_translated_string(lua_State * L)
+{
+	std::string string = luaL_checkstring(L, 1);
+	string = wide_to_utf8(translate_string(utf8_to_wide(string), g_client_translations));
+	lua_pushstring(L, string.c_str());
+	return 1;
+}
+
 /******************************************************************************/
 void ModApiMainMenu::Initialize(lua_State *L, int top)
 {
@@ -1011,6 +1020,7 @@ void ModApiMainMenu::Initialize(lua_State *L, int top)
 	API_FCT(open_dir);
 	API_FCT(do_async_callback);
 	API_FCT(load_translation);
+	API_FCT(get_translated_string);
 }
 
 /******************************************************************************/

src/script/lua_api/l_mainmenu.h

@@ -163,6 +163,8 @@ private:
 
 	static int l_sleep_ms(lua_State *L);
 
+	static int l_get_translated_string(lua_State *L);
+
 public:
 
 	/**