ContentDB redesign: Redesign package list dialog

LICENSE.txt

@@ -57,12 +57,10 @@ srifqi:
   textures/base/pack/minimap_btn.png
 
 Zughy:
-  textures/base/pack/cdb_add.png
   textures/base/pack/cdb_downloading.png
   textures/base/pack/cdb_queued.png
   textures/base/pack/cdb_update.png
   textures/base/pack/cdb_update_cropped.png
-  textures/base/pack/cdb_viewonline.png
   textures/base/pack/settings_btn.png
   textures/base/pack/settings_info.png
   textures/base/pack/settings_reset.png
@@ -79,7 +77,6 @@ kilbith:
   textures/base/pack/progress_bar_bg.png
 
 SmallJoker:
-  textures/base/pack/cdb_clear.png
   textures/base/pack/server_favorite_delete.png (based on server_favorite.png)
 
 DS:

builtin/mainmenu/content/dlg_contentdb.lua

@@ -26,23 +26,17 @@ end
 -- Filter
 local search_string = ""
 local cur_page = 1
-local num_per_page = 5
+local filter_type
-local filter_type = 1
-local filter_types_titles = {
-	fgettext("All packages"),
-	fgettext("Games"),
-	fgettext("Mods"),
-	fgettext("Texture packs"),
-}
 
 -- Automatic package installation
 local auto_install_spec = nil
 
-local filter_types_type = {
+
-	nil,
+local filter_type_names = {
-	"game",
+	{ "type_all", nil },
-	"mod",
+	{ "type_game", "game" },
-	"txp",
+	{ "type_mod", "mod" },
+	{ "type_txp", "txp" },
 }
 
 
@@ -154,7 +148,7 @@ end
 local function sort_and_filter_pkgs()
 	contentdb.update_paths()
 	contentdb.sort_packages()
-	contentdb.filter_packages(search_string, filter_types_type[filter_type])
+	contentdb.filter_packages(search_string, filter_type)
 
 	local auto_install_pkg = resolve_auto_install_spec()
 	if auto_install_pkg then
@@ -185,72 +179,130 @@ local function load()
 end
 
 
-local function get_info_formspec(text)
+local function get_info_formspec(size, safezone_left, text)
-	local H = 9.5
 	return table.concat({
 		"formspec_version[6]",
-		"size[15.75,9.5]",
+		"size[", size.x, ",", size.y, "]",
-		core.settings:get_bool("enable_touch") and "padding[0.01,0.01]" or "position[0.5,0.55]",
+		"padding[-0.01,-0.01]",
 
-		"label[4,4.35;", text, "]",
+		"label[", safezone_left + 3.625, ",4.35;", text, "]",
-		"container[0,", H - 0.8 - 0.375, "]",
+		"container[0,", size.y - 0.8 - 0.375, "]",
-		"button[0.375,0;5,0.8;back;", fgettext("Back to Main Menu"), "]",
+		"button[", safezone_left, ",0;4,0.8;back;", fgettext("Back"), "]",
 		"container_end[]",
 	})
 end
 
 
+-- Determines how to fit `num_per_page` into `size` space
+local function fit_cells(num_per_page, size)
+	local cell_spacing = 0.25
+	local desired_size = 4.5
+	local row_cells = math.min(5, math.floor(size.x / desired_size))
+	local cell_w, cell_h
+	-- Fit cells into the available height
+	while true do
+		cell_w = (size.x - (row_cells-1)*cell_spacing) / row_cells
+		cell_h = cell_w * 2 / 3
+
+		local required_height = math.ceil(num_per_page / row_cells) * (cell_h + cell_spacing) - cell_spacing
+		-- Add 0.1 to be more lenient
+		if required_height <= size.y + 0.1 then
+			break
+		end
+
+		row_cells = row_cells + 1
+	end
+
+	return cell_spacing, row_cells, cell_w, cell_h
+end
+
+
 local function get_formspec(dlgdata)
+	local safezone_left = PLATFORM == "Android" and 1 or 0.375
+	local window = core.get_window_info()
+	local size = { x = window.max_formspec_size.x, y = window.max_formspec_size.y }
+
 	if contentdb.loading then
-		return get_info_formspec(fgettext("Loading..."))
+		return get_info_formspec(size, safezone_left, fgettext("Loading..."))
 	end
 	if contentdb.load_error then
-		return get_info_formspec(fgettext("No packages could be retrieved"))
+		return get_info_formspec(size, safezone_left, fgettext("No packages could be retrieved"))
 	end
 	assert(contentdb.load_ok)
 
 	contentdb.update_paths()
 
+	local num_per_page = dlgdata.num_per_page
 	dlgdata.pagemax = math.max(math.ceil(#contentdb.packages / num_per_page), 1)
 	if cur_page > dlgdata.pagemax then
 		cur_page = 1
 	end
 
-	local W = 15.75
+	local W = size.x - safezone_left
-	local H = 9.5
+	local H = size.y
+
+	local category_x = 0
+	local number_category_buttons = 4
+	local max_button_w = (W - 0.375 - 0.25 - 7) / number_category_buttons
+	local category_button_w = math.min(max_button_w, 3)
+	local function make_category_button(name, label, selected)
+		category_x = category_x + 1
+		local color = selected and mt_color_green or ""
+		return ("style[%s;bgcolor=%s]button[%f,0;%f,0.8;%s;%s]"):format(name, color,
+				(category_x - 1) * category_button_w, category_button_w, name, label)
+	end
+
+
+	local selected_type = filter_type
+
+	local search_box_width = W - 0.375 - 0.25 - 2*0.8
+			- number_category_buttons * category_button_w
 	local formspec = {
-		"formspec_version[6]",
+		"formspec_version[7]",
-		"size[15.75,9.5]",
+		"size[", size.x, ",", size.y, "]",
-		core.settings:get_bool("enable_touch") and "padding[0.01,0.01]" or "position[0.5,0.55]",
+		"padding[-0.01,-0.01]",
 
-		"style[status,downloading,queued;border=false]",
+		"container[", safezone_left, ",0]",
 
-		"container[0.375,0.375]",
+		-- Top-left: categories
-		"field[0,0;7.225,0.8;search_string;;", core.formspec_escape(search_string), "]",
+		"container[0,0.375]",
+		make_category_button("type_all", fgettext("All"), selected_type == nil),
+		make_category_button("type_game", fgettext("Games"), selected_type == "game"),
+		make_category_button("type_mod", fgettext("Mods"), selected_type == "mod"),
+		make_category_button("type_txp", fgettext("Texture Packs"), selected_type == "txp"),
+		"container_end[]",
+
+		-- Top-right: Search
+		"container[", W - 0.375 - search_box_width - 0.8*2, ",0.375]",
+		"field[0,0;", search_box_width, ",0.8;search_string;;", core.formspec_escape(search_string), "]",
 		"field_enter_after_edit[search_string;true]",
-		"image_button[7.3,0;0.8,0.8;", core.formspec_escape(defaulttexturedir .. "search.png"), ";search;]",
+		"image_button[", search_box_width, ",0;0.8,0.8;",
-		"image_button[8.125,0;0.8,0.8;", core.formspec_escape(defaulttexturedir .. "clear.png"), ";clear;]",
+			core.formspec_escape(defaulttexturedir .. "search.png"), ";search;]",
-		"dropdown[9.175,0;2.7875,0.8;type;", table.concat(filter_types_titles, ","), ";", filter_type, "]",
+		"image_button[", search_box_width + 0.8, ",0;0.8,0.8;",
+			core.formspec_escape(defaulttexturedir .. "clear.png"), ";clear;]",
 		"container_end[]",
 
-		-- Page nav buttons
+		-- Bottom strip start
 		"container[0,", H - 0.8 - 0.375, "]",
-		"button[0.375,0;5,0.8;back;", fgettext("Back to Main Menu"), "]",
+		"button[0,0;4,0.8;back;", fgettext("Back to Main Menu"), "]",
 
-		"container[", W - 0.375 - 0.8*4 - 2,  ",0]",
+		-- Bottom-center: Page nav buttons
-		"image_button[0,0;0.8,0.8;", core.formspec_escape(defaulttexturedir), "start_icon.png;pstart;]",
+		"container[", (W - 1*4 - 2) / 2,  ",0]",
-		"image_button[0.8,0;0.8,0.8;", core.formspec_escape(defaulttexturedir), "prev_icon.png;pback;]",
+		"image_button[0,0;1,0.8;", core.formspec_escape(defaulttexturedir), "start_icon.png;pstart;]",
+		"image_button[1,0;1,0.8;", core.formspec_escape(defaulttexturedir), "prev_icon.png;pback;]",
 		"style[pagenum;border=false]",
-		"button[1.6,0;2,0.8;pagenum;", tonumber(cur_page), " / ", tonumber(dlgdata.pagemax), "]",
+		"button[2,0;2,0.8;pagenum;", tonumber(cur_page), " / ", tonumber(dlgdata.pagemax), "]",
-		"image_button[3.6,0;0.8,0.8;", core.formspec_escape(defaulttexturedir), "next_icon.png;pnext;]",
+		"image_button[4,0;1,0.8;", core.formspec_escape(defaulttexturedir), "next_icon.png;pnext;]",
-		"image_button[4.4,0;0.8,0.8;", core.formspec_escape(defaulttexturedir), "end_icon.png;pend;]",
+		"image_button[5,0;1,0.8;", core.formspec_escape(defaulttexturedir), "end_icon.png;pend;]",
-		"container_end[]",
+		"container_end[]", -- page nav end
 
-		"container_end[]",
+		-- Bottom-right: updating
+		"container[", W - 0.375 - 3,  ",0]",
+		"style[status,downloading,queued;border=false]",
 	}
 
 	if contentdb.number_downloading > 0 then
-		formspec[#formspec + 1] = "button[12.5875,0.375;2.7875,0.8;downloading;"
+		formspec[#formspec + 1] = "button[0,0;3,0.8;downloading;"
 		if #contentdb.download_queue > 0 then
 			formspec[#formspec + 1] = fgettext("$1 downloading,\n$2 queued",
 					contentdb.number_downloading, #contentdb.download_queue)
@@ -269,16 +321,19 @@ local function get_formspec(dlgdata)
 		end
 
 		if num_avail_updates == 0 then
-			formspec[#formspec + 1] = "button[12.5875,0.375;2.7875,0.8;status;"
+			formspec[#formspec + 1] = "button[0,0;3,0.8;status;"
 			formspec[#formspec + 1] = fgettext("No updates")
 			formspec[#formspec + 1] = "]"
 		else
-			formspec[#formspec + 1] = "button[12.5875,0.375;2.7875,0.8;update_all;"
+			formspec[#formspec + 1] = "button[0,0;3,0.8;update_all;"
 			formspec[#formspec + 1] = fgettext("Update All [$1]", num_avail_updates)
 			formspec[#formspec + 1] = "]"
 		end
 	end
 
+	formspec[#formspec + 1] = "container_end[]" -- updating end
+	formspec[#formspec + 1] = "container_end[]" -- bottom strip end
+
 	if #contentdb.packages == 0 then
 		formspec[#formspec + 1] = "label[4,4.75;"
 		formspec[#formspec + 1] = fgettext("No results")
@@ -290,46 +345,80 @@ local function get_formspec(dlgdata)
 	formspec[#formspec + 1] = "tooltip[downloading;" .. fgettext("Downloading...") .. tooltip_colors
 	formspec[#formspec + 1] = "tooltip[queued;" .. fgettext("Queued") .. tooltip_colors
 
+	formspec[#formspec + 1] = "container[0,1.425]"
+
+	local cell_spacing, row_cells, cell_w, cell_h = fit_cells(num_per_page, {
+		x = W - 0.375,
+		y = H - 1.425 - 0.25 - 0.8 - 0.375
+	})
+
 	local start_idx = (cur_page - 1) * num_per_page + 1
 	for i=start_idx, math.min(#contentdb.packages, start_idx+num_per_page-1) do
 		local package = contentdb.packages[i]
-		local container_y = (i - start_idx) * 1.375 + (2*0.375 + 0.8)
-		formspec[#formspec + 1] = "container[0.375,"
-		formspec[#formspec + 1] = container_y
-		formspec[#formspec + 1] = "]"
 
-		-- image
+		table.insert_all(formspec, {
-		formspec[#formspec + 1] = "image[0,0;1.5,1;"
+			"container[",
-		formspec[#formspec + 1] = core.formspec_escape(get_screenshot(package, package.thumbnail))
+			(cell_w + cell_spacing) * ((i - start_idx) % row_cells),
-		formspec[#formspec + 1] = "]"
+			",",
+			(cell_h + cell_spacing) * math.floor((i - start_idx) / row_cells),
+			"]",
 
-		-- title
+			-- image,
-		formspec[#formspec + 1] = "label[1.875,0.1;"
+			"image_button[0,0;", cell_w, ",", cell_h, ";",
-		formspec[#formspec + 1] = core.formspec_escape(
+				core.formspec_escape(get_screenshot(package, package.thumbnail, 2)),
-				core.colorize(mt_color_green, package.title) ..
+			";view_", i, ";;;false]",
-				core.colorize("#BFBFBF", " by " .. package.author))
-		formspec[#formspec + 1] = "]"
 
-		-- button
+			--"style[title_", i, ";border=false]",
-		formspec[#formspec + 1] = "button["
+			-- The 0.01 here fixes a single line of image pixels appearing below the box
-		formspec[#formspec + 1] = W-0.375*2-2
+			"box[0,", cell_h - 0.8 + 0.01, ";", cell_w, ",0.8;#0009]",
-		formspec[#formspec + 1] = ",0.1;2,0.7;view_"
-		formspec[#formspec + 1] = i
-		formspec[#formspec + 1] = ";"
-		formspec[#formspec + 1] = fgettext("View")
-		formspec[#formspec + 1] = "]"
 
-		-- description
+			"style_type[button;border=false;textcolor=", mt_color_green, "]",
-		local description_width = W - 2.625 - 2 * 0.7 - 2 * 0.15
+			"button[0.25,", cell_h - 0.8, ";", cell_w - 0.5, ",0.5;title_", i ,";",
-		formspec[#formspec + 1] = "textarea[1.855,0.3;"
+				core.formspec_escape(core.colorize(mt_color_green, package.title)), "]",
-		formspec[#formspec + 1] = tostring(description_width)
+			"style_type[button;font_size=*0.9;textcolor=#fff9]",
-		formspec[#formspec + 1] = ",0.8;;;"
+			"button[0.25,", cell_h - 0.3, ";",  cell_w - 0.5, ",0.3;author_", i, ";",
-		formspec[#formspec + 1] = core.formspec_escape(package.short_description)
+				core.formspec_escape(core.colorize("#fff9", package.author)), "]",
-		formspec[#formspec + 1] = "]"
+			"style_type[button;font_size=;border=;textcolor=]",
+		})
 
-		formspec[#formspec + 1] = "container_end[]"
+		if package.featured then
+			table.insert_all(formspec, {
+				"tooltip[0,0;0.8,0.8;", fgettext("Featured"), "]",
+				"image[0.2,0.2;0.4,0.4;", defaulttexturedir, "server_favorite.png]",
+			})
+		end
+
+		if package.downloading then
+			table.insert_all(formspec, {
+				"animated_image[", cell_w - 0.8, ",0;0.8,0.8;downloading;", defaulttexturedir, "cdb_downloading.png;3;400;;]",
+			})
+		elseif package.queued then
+			table.insert_all(formspec, {
+				"image[", cell_w - 0.8, ",0;0.8,0.8;", defaulttexturedir, "cdb_queued.png]",
+			})
+		elseif package.path then
+			if package.installed_release < package.release then
+				table.insert_all(formspec, {
+					"image[", cell_w - 0.8, ",0;0.8,0.8;", defaulttexturedir, "cdb_update.png]",
+				})
+			else
+				table.insert_all(formspec, {
+					"image[", cell_w - 0.6, ",0.2;0.4,0.4;", defaulttexturedir, "checkbox_64.png]",
+				})
+			end
+		end
+
+		local tooltip = package.short_description
+
+		table.insert_all(formspec, {
+			"tooltip[0,0;", cell_w, ",", cell_h, ";", core.formspec_escape(tooltip), "]",
+			"container_end[]",
+		})
 	end
 
+	formspec[#formspec + 1] = "container_end[]"
+	formspec[#formspec + 1] = "container_end[]"
+
 	return table.concat(formspec)
 end
 
@@ -338,14 +427,14 @@ local function handle_submit(this, fields)
 	if fields.search or fields.key_enter_field == "search_string" then
 		search_string = fields.search_string:trim()
 		cur_page = 1
-		contentdb.filter_packages(search_string, filter_types_type[filter_type])
+		contentdb.filter_packages(search_string, filter_type)
 		return true
 	end
 
 	if fields.clear then
 		search_string = ""
 		cur_page = 1
-		contentdb.filter_packages("", filter_types_type[filter_type])
+		contentdb.filter_packages("", filter_type)
 		return true
 	end
 
@@ -381,12 +470,11 @@ local function handle_submit(this, fields)
 		return true
 	end
 
-	if fields.type then
+	for _, pair in ipairs(filter_type_names) do
-		local new_type = table.indexof(filter_types_titles, fields.type)
+		if fields[pair[1]] then
-		if new_type ~= filter_type then
+			filter_type = pair[2]
-			filter_type = new_type
 			cur_page = 1
-			contentdb.filter_packages(search_string, filter_types_type[filter_type])
+			contentdb.filter_packages(search_string, filter_type)
 			return true
 		end
 	end
@@ -409,7 +497,7 @@ local function handle_submit(this, fields)
 		local package = contentdb.packages[i]
 		assert(package)
 
-		if fields["view_" .. i] then
+		if fields["view_" .. i] or fields["title_" .. i] or fields["author_" .. i] then
 			local dlg = create_package_dialog(package)
 			dlg:set_parent(this)
 			this:hide()
@@ -447,17 +535,7 @@ end
 function create_contentdb_dlg(type, install_spec)
 	search_string = ""
 	cur_page = 1
-	if type then
+	filter_type = type
-		-- table.indexof does not work on tables that contain `nil`
-		for i, v in pairs(filter_types_type) do
-			if v == type then
-				filter_type = i
-				break
-			end
-		end
-	else
-		filter_type = 1
-	end
 
 	-- Keep the old auto_install_spec if the caller doesn't specify one.
 	if install_spec then
@@ -466,8 +544,10 @@ function create_contentdb_dlg(type, install_spec)
 
 	load()
 
-	return dialog_create("contentdb",
+	local dlg = dialog_create("contentdb",
 			get_formspec,
 			handle_submit,
 			handle_events)
+	dlg.data.num_per_page = core.settings:get_bool("enable_touch") and 8 or 15
+	return dlg
 end