When switching between portion/100g, the table should change immediately

[teolemon]

What

• The dropdown experience is not very intuitive
• When switching the quantity between portion/100g, the table should change immediately, not when I release my thumb

Video

screen-20220322-185845.mp4

Part of

• 📖 Knowledge panels (Tracker) #499

[g123k]

On Android, we have a switch for this toggle, but we don't have enough space here.
A dialog would be perfect here, I guess. Any suggestion otherwise?

[monsieurtanuki]

Radio buttons on a column?

[stephanegigandet]

Maybe we can think more about the actual use of this.
Some users want to see data per 100g, because they are used to it, they can quickly see the % of sugars etc.
Others are more interested in the per serving, (also because they are used to it), because they count calories etc.

But it's very likely that this is a global user preference, it does not change on a product per product basis.

So maybe we could think of it like that: a user preference. And to make it visible, we could display a switch or something just
above the table.

The switch has the advantage of making that choice understandable and visible. With the dropdown, I first have to click on that "100g" to understand that I can change it to per serving.

The dialog idea is also interesting because we could use it to extra features (e.g. computing values for any quantity, which could appeal to some users)

[monsieurtanuki]

In order to go a bit further on @stephanegigandet's path, that could mean

• displaying the current choice ("100g", "60g serving") and then the "edit" icon (to make it clear that it's editable) (even like an ElevatedButton?)
• when clicking on that serving button, open a dialog with at least two app-level choices ("100g" or "serving")
• how could we put in the same dialog a specific user-defined serving size for this product? (which would be a "nice to have")

Suggestion for the dialog:

Preference on app level:
100g serving size

Custom serving size for that specific product:
[ 30]g

[teolemon]

• This one is also important for United States users, who are used to see by portion vs 100g. Support for US units #2518

[monsieurtanuki]

The problem is that we don't have enough space for 4 columns (3 columns is the apparent limit):

1. nutrient name
2. value per 100g
3. value per serving
4. comparison

I guess we could easily add a switch (serving / comparison) on top of the table.

The display would then either be:

1. nutrient name
2. value per 100g
3. value per serving

or

1. nutrient name
2. value per 100g
3. comparison

[M123-dev]

We now have a gramm picker