Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Action bar for the product (+ light redesign) #5749

Merged
merged 3 commits into from
Oct 27, 2024

Conversation

g123k
Copy link
Collaborator

@g123k g123k commented Oct 27, 2024

Hi everyone!

This PR changes multiple things on the product page.

First, regarding code, new_product_page.dart is in a dedicated folder called pages/product/product_page. This is because there is now a new_product_footer.dart in this directory.

Regarding the UI, there are many changes:

  • All actions are moved to the footer (Add a price / Edit / Compare / Add to a list / Share):
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 14 15 26
  • The Compare button is visible even if the product is incomplete, but it will explain why
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 14 15 09
  • The SnackBar is a bit redesigned with rounded corners + colors:
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 13 54 15
  • Sections of the product page are better highlighted (for Health / Environment)
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 14 15 26
  • Product name/brands/quantity is on 3 lines, no more weird space (will be ready to display the price in the future)
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 14 23 33
  • Multiple widgets for the footer, reducing the unnecessary rebuilds from the giant Product page
  • Fun fact: for the "Add a price" button, the icon supports many currencies (Euro, Dollars, Rupees…)
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 14 29 07
    Simulator Screenshot - iPhone 16 Pro Max - 2024-10-27 at 14 29 23

The "Add to a list" feature is still as before (with dialogs). It will be redesigned in an upcoming PR.

Part of #5739

@g123k g123k self-assigned this Oct 27, 2024
@github-actions github-actions bot added 🥫 Product page Product addition The easier it is to add a product and get Nutri-Score, Eco-Score, the happier the users. summary card router labels Oct 27, 2024
@codecov-commenter
Copy link

codecov-commenter commented Oct 27, 2024

Codecov Report

Attention: Patch coverage is 6.21622% with 347 lines in your changes missing coverage. Please review.

Project coverage is 7.06%. Comparing base (4d9c7fc) to head (7ce49cb).
Report is 400 commits behind head on develop.

Files with missing lines Patch % Lines
...pages/product/product_page/new_product_footer.dart 4.04% 166 Missing ⚠️
...b/pages/product/product_page/new_product_page.dart 0.00% 111 Missing ⚠️
...pp/lib/cards/product_cards/product_title_card.dart 0.00% 21 Missing ⚠️
...nowledge_panels/knowledge_panel_product_cards.dart 0.00% 18 Missing ⚠️
packages/smooth_app/lib/resources/app_icons.dart 50.00% 10 Missing ⚠️
.../lib/knowledge_panel/knowledge_panels_builder.dart 0.00% 7 Missing ⚠️
...pp/lib/pages/product/common/product_refresher.dart 0.00% 6 Missing ⚠️
...pp/lib/pages/product/product_questions_widget.dart 0.00% 3 Missing ⚠️
...h_app/lib/generic_lib/widgets/smooth_snackbar.dart 0.00% 2 Missing ⚠️
...ackages/smooth_app/lib/helpers/strings_helper.dart 0.00% 2 Missing ⚠️
... and 1 more
Additional details and impacted files
@@            Coverage Diff             @@
##           develop   #5749      +/-   ##
==========================================
- Coverage     9.54%   7.06%   -2.49%     
==========================================
  Files          325     409      +84     
  Lines        16411   21935    +5524     
==========================================
- Hits          1567    1549      -18     
- Misses       14844   20386    +5542     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Member

@teolemon teolemon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would have perhaps used something more scalable for the currency icons, since they are well supported in fonts, but we can refactor at a later point 👍

@g123k
Copy link
Collaborator Author

g123k commented Oct 27, 2024

I would have perhaps used something more scalable for the currency icons, since they are well supported in fonts, but we can refactor at a later point 👍

There is a reason for that:

  • The font of the currency is different from OpenSans… which means storing a new font
  • Each symbol has its own size/padding
  • And an icon… is in a font 🤯

I know this is not perfect, but the other solutions are as bad as this one.

@teolemon teolemon merged commit b07b942 into openfoodfacts:develop Oct 27, 2024
6 checks passed
@g123k g123k deleted the product_page_action_bar branch November 7, 2024 05:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Product addition The easier it is to add a product and get Nutri-Score, Eco-Score, the happier the users. 🥫 Product page router summary card
Development

Successfully merging this pull request may close these issues.

3 participants