[NoSquash] Redesign ContentDB dialog

[rubenwardy]

A redesign of the ContentDB dialog to show more information and make better use of space.

Part of #6733

Depends on #14507

Screenshots

To do

This PR is Ready for Review

• Add reviews (or hide tab for now)
• Fix package grid on smaller screens (should probably reduce number of items per page?)
• Add website, issue tracker, repo, and donate urls somewhere
• Make featured status more clear
• Wrap short desc tooltips (not an issue with this PR)
• Add icon for installed, remove unused icons
• Add Resize event to update formspec when the window changes size (leave for later)
• Put title and author on separate lines, to reduce risk of clipping
• Wider pagination buttons, hard to tap on android
• ContentDB backend: one-line formatting for information
• ContentDB backend: improve link contrast
• Fix downloading icon not showing in package list
• Better featured icon future PR
• Fix link buttons overlapping "Back" on smaller screens
• Better package tile icon contrast
• Respect Android safe zone?

Known Issues

Known issues that I'm not planning on fixing in this PR (unless there's a simple fix):

• hypertext kerning is broken: Inconsistent kerning behavior in hypertext[] formspec elements with identical strings #11727
• hypertext doesn't support spaces in attributes. This means that hypertext images will be broken on install paths that contain a space. Fixed by Allow quoting hypertext attribute values #14550

How to test

• View lots of packages and use every feature:
  • Installing
  • Updating
  • Removing
  • Autoinstall
  • Search, filter, pagination

[rubenwardy]

simplescreenrecorder-2024-04-01_19.32.41.mp4

[grorp]

I'm giving some feedback on the UI since that's an easy thing to do :)

• It's very cool.

• As always, I still have things to complain about:

  • The "currently downloading" icon is only shown in the package dialog, not in the package list.

  • The package dialog has a different size while loading than after loading (not very grave).

  • Regarding the package information tab:

    current - you have to scroll to see all the information
    

    a proposal - you can see all the information at once
    

    local hypertext = info.info_hypertext.head .. info.info_hypertext.body:gsub("\n<b>", ": <b>"):gsub("\n\n", "<style size=8>\n\n</style>")

  • The icons are hard to see on some screenshots - a solution could be giving them a transparent black background or a drop shadow.
    

  • On Android, the package list uses the available space poorly and many package titles are cut off (screenshot taken from emulator).
    

  • On Android, the package dialog uses the available space poorly and it's virtually impossible to read the long description (screenshot taken from emulator).
    

[rubenwardy]

The "currently downloading" icon is only shown in the package dialog, not in the package list.

Sounds like a bug, as there is code for this: https://github.com/minetest/minetest/pull/14510/files#diff-64584e870acd6076965d3fd26c9a538de7ecc5c1bc8fa7003a013006c7dc1fa8R363

On Android, the package list uses the available space poorly and many package titles are cut off (screenshot taken from emulator).

I'll have to reduce the num_per_page on Android to 5-10 because of this. Currently, it attempts to fit 15 tiles on the page as big as it can

[rubenwardy]

With latest commit, Android screenshots. Need a better way to show links on the package dialog

[grorp]

This unfortunately isn't much better on my real device. There's still a lot of free space and titles are still cut off. Also, hardcoding a different number of items per page based on OS feels like a bad approach to me. This could use enable_touch instead.

Maybe it would make more sense to have a minimum tile size and then determine the number of tiles per page based on that? Something like CSS grid grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

(I couldn't test the package dialog changes because the long description isn't shown anymore.)

[rubenwardy]

This could use enable_touch instead.

The number of items per page can't change at runtime, so it would need to use the value of enabled_touch when opening the dialog.

This unfortunately isn't much better on my real device.

I plan on moving the title and author names onto separate lines, this would avoid the clipping issues

Maybe it would make more sense to have a minimum tile size and then determine the number of tiles per page based on that? Something like CSS grid grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

The problem with changing the number of items based on window size is that the player could resize their window and lose their position. So num_per_page needs to be fixed at runtime - at best you could use the window size when opening the dialog

(I couldn't test the package dialog changes because the long description isn't shown anymore.)

Fixed

rubenwardy marked this pull request as draft

Feedback is welcome, but there's a lot in the to do list and #14507 needs to be reviewed and merged first

[rubenwardy]

I can't reproduce the <action><img> bug any more, so applied your patch

[rubenwardy]

Such as great improvement ! Unfortunately, I got this error just after clicking on a mod. I tried with several, so it's not only the mod fault ; and the content of the error seems to be mainmenu-related

Rebase error, fixed

The "currently downloading" icon is only shown in the package dialog, not in the package list.

Fixed, the animated_image was missing an argument

Would it be possible to add a dropdown beside from the Install button to choose the version we're installing ?

It's possible but not something I want to do in this PR

The + XX / XX / - XX is ok for ContentDB, but maybe Minetest could display + and - icons and display it in a column ?

It's more complicated to do this without the text overlapping or scrolling, I'd rather leave it as is - can be improved in future PRs

Maybe the used by could be added at the end of the page, following the layout of ContentDB ? Or in a special tab

This is something for a future PR imo

Related, featuring By the same author ?

Something for a future PR

It is necessary to know the exact µs of the addition ? Not, but it is written.

I assume you mean the download size? It's shown with the nearest significant unit, I think it's relevant.

[rubenwardy]

You've change the aspect ratio of the thumbnails here.

I haven't, they're still 3:2.

Please may you provide the max_formspec_size so I can reproduce your exact set up

[grorp]

Thanks for fixing and applying my patch!

Please may you provide the max_formspec_size so I can reproduce your exact set up

Here you go (fresh installation, all settings at their default values):

{
	touch_controls = false,
	real_gui_scaling = 3,
	real_hud_scaling = 2.5500001907349,
	size = {
		y = 1080,
		x = 2412
	},
	max_formspec_size = {
		y = 10,
		x = 22.333333969116
	}
}

[rubenwardy]

Ok, so the reason why it chooses to do 5 columns is because 4 columns is too tall for the available space:

Fitting, row_cells=4, required_height=7.19, avail_height=7.15

What I can do is add 0.05 - 0.1 to the available height to allow it to go slightly into the margin

I added a red box[] to show the available space. The two green boxes are the same size and show the 0.375 padding above and below the available space. See how the tile goes into the 0.375 when there are 4 columns

[grorp]

Found another thing:

[grorp]

Ok, yeah, that's very close. Your proposed solution sounds good to me. In the end, going a little bit into the margin is probably better than wasting a lot of space. Thanks for investigating.

[rubenwardy]

Ok, added the 0.1 and also hid the queued icon background

[rubenwardy]

The grid/flex code can always been improved in future PRs, especially if we get a new GUI API with a flex component!

[grorp]

How did you determine the values for "Respect Android safe zone"? Why is there so much left margin in the package list, but no left margin in the package dialog?

[rubenwardy]

How did you determine the values for "Respect Android safe zone"? Why is there so much left margin in the package list, but no left margin in the package dialog?

It's a magic value based on my phone screen. Perhaps you could call the Android APIs to determine how much space, but maybe just having a margin of two all around on Android would make sense. And yes, the package view should do a similar thing

[rubenwardy]

Based on suggestions by Zughy. To do: make check green and add author name to tooltip

[grorp]

Since there was a complaint about the dialog being too dense/crowded, I experimented a bit. I think the version with a bit more space looks better, but this probably depends on screen size. And then there's also Android, where the current version is probably better.

this PR (92d89bc)

some more space (grorp@658d77e)