Eco-Score labels input - Githubissues

teolemon commented 3 years ago

Who for

Users
What
[ ] Design document
It's faster to ask users to tick all the labels present, so that we can be sure we have all the labels (as opposed to detecting them over time, or praying they inputed all the labels)

Why

Labels are taken into account as bonus and maluses for Eco-Score computation, so it's important there's an easy way to collect them.

Semi-blocked on

[ ] Server: Allow to mention the completeness of a field

Mockup

[ ] A tag picker (that works for labels) by @gspencergoog has been merged. It needs to be made accessible on the product page, for further testing and refinements.
[ ]

Part of

518

monsieurtanuki commented 3 years ago

Anybody able to provide a list of SVG URLs?

teolemon commented 3 years ago

Yes, I added them in the design document @monsieurtanuki

teolemon commented 3 years ago

@monsieurtanuki I've added the missing logo to Product Opener. I have added what the URL will be once it's deployed.

monsieurtanuki commented 3 years ago

@teolemon I've run a simple test on label SVGs, displaying all of them on a blue background: Simulator Screen Shot - iPhone 8 Plus - 2021-08-30 at 13 03 23

When I've run the test there was no SVG available in 2 cases:

https://world.openfoodfacts.org/images/lang/fr/labels/bio-coherence.90x90.png => PNG but not SVG
Nature & Progres: missing

That's OK with the following SVGs:

There are some transparency/white issues with the following SVGs - a solution could be to display the labels systematically on a white background, which is unfortunately not recommended on "dark mode":

https://world.openfoodfacts.org/images/lang/en/labels/ab-agriculture-biologique.74x90.svg => on top it's a white AB on green background, ok, but below the text is green on a transparent background (instead of white)
https://world.openfoodfacts.org/images/lang/en/labels/sustainable-seafood-msc.126x90.svg => the text and the logo are transparent, and not white
https://world.openfoodfacts.org/images/lang/en/labels/rainforest-alliance.90x90.svg => the background of the logo is transparent, and not white
https://world.openfoodfacts.org/images/lang/en/labels/roundtable-on-sustainable-palm-oil.90x90.svg => the background of the logo is transparent, and not white
https://world.openfoodfacts.org/images/lang/en/labels/fsc.90x90.svg => transparent background

"Black shape" error for 2 SVGs:

I managed to understand the reason of the "black shapes": flutter_svg does not seem to support the CSS syntax <style type="text/css">.st0{fill:#FFFFFF;}</style><path class="st0" ...>

When you replace it with <path fill="#ffffff" ...> that works: Simulator Screen Shot - iPhone 8 Plus - 2021-08-30 at 13 34 25

Additional warning on https://world.openfoodfacts.org/images/lang/en/labels/roundtable-on-sustainable-palm-oil.90x90.svg

flutter: Warning: Flutter SVG only supports the following formats for width and height on the SVG root: width="100%" width="100px" width="100" (where the number will be treated as pixels). The supplied value (98.778mm) will be discarded and treated as if it had not been specified. flutter: Warning: Flutter SVG only supports the following formats for width and height on the SVG root: width="100%" width="100px" width="100" (where the number will be treated as pixels). The supplied value (100.05mm) will be discarded and treated as if it had not been specified.

darrenaustin commented 3 years ago

@teolemon, If no one else has started on this, I wouldn't mind taking a stab at it.

monsieurtanuki commented 3 years ago

@darrenaustin So far I've only played with the SVG files on a blue background - cf. my previous comment. Go ahead!

monsieurtanuki commented 2 years ago

I think it doesn't make sense anymore with the autocomplete text. Feel free to reopen if relevant.

openfoodfacts / smooth-app

Eco-Score labels input #524

Who for

What

Why

Semi-blocked on

Mockup

Part of

518