Skip to content

Conversation

Afroz-Shaikh
Copy link
Contributor

@Afroz-Shaikh Afroz-Shaikh commented Jan 15, 2025

What

Turned the Open Prices privacy warning into a bottom sheet for improved user experience and better alignment with the UI design standards.
Replaced the current modal/dialog with a Flutter showModalBottomSheet.
Screenshot

pr_open_food

Fixes bug(s)

Fixes: #6183

@Afroz-Shaikh Afroz-Shaikh changed the title Feat: Convert Privacy warning to bottom sheet feat: Convert Privacy warning to bottom sheet Jan 15, 2025
@teolemon
Copy link
Member

We're using the following layout @Afroz-Shaikh #5755
cc @g123k

@g123k
Copy link
Collaborator

g123k commented Jan 15, 2025

You have the method showSmoothModalSheet + the SmoothModalSheet for the content.
Also, don't forget a SafeArea, otherwise your button with be under the status bar

@Afroz-Shaikh
Copy link
Contributor Author

Will implement the same using showSmoothModalSheet and SmoothModalSheet
thanks a lot @g123k & @teolemon

@Afroz-Shaikh
Copy link
Contributor Author

Afroz-Shaikh commented Jan 15, 2025

Does this align with the project's guidelines, @teolemon? I've used showSmoothModalSheet along with SmoothActionButtonBar with +ve action —let me know if this implementation is appropriate

I’ll update the code once confirmed.
cc: @g123k
image

@g123k
Copy link
Collaborator

g123k commented Jan 16, 2025

Far better, could you add two buttons:
Refuse/Accept?

@Afroz-Shaikh
Copy link
Contributor Author

Far better, could you add two buttons: Refuse/Accept?

Removed the top-right close icon to avoid confusion. Let me know if this works or if any design changes are needed—couldn't find related references in Figma.
cc: @g123k

image

@g123k
Copy link
Collaborator

g123k commented Jan 16, 2025

It's OK (in terms of UX).
I will create a mockup with slight changes, but don't worry, I will explain how to implement it.

@g123k
Copy link
Collaborator

g123k commented Jan 16, 2025

Here is the UI:
Prices - Privacy warning

You can find more info on Sketch.

For the red modal sheet + 2 buttons, you have an example in MayExitPageHelper.

For the text in bold, you can create multiple translations (in app_en.arb).
You can use this syntax **in bold** and in your code replace the Text widget with TextWithBoldParts.

Finally, for the two chips, the Widget with the arrow is called Arrow.right() and the grey color is greyLight in SmoothColorsThemeExtension

@Afroz-Shaikh
Copy link
Contributor Author

Thank you, @g123k. I’ll make the changes and update the PR accordingly.

Copy link
Collaborator

@g123k g123k left a comment

Choose a reason for hiding this comment

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

This OK for me, please just bring back the old format from the translation file

@Afroz-Shaikh Afroz-Shaikh requested a review from g123k January 18, 2025 23:16
@Afroz-Shaikh Afroz-Shaikh requested a review from g123k January 19, 2025 14:04
@g123k
Copy link
Collaborator

g123k commented Jan 19, 2025

It's OK, but one final issue: your branch has conflicts

@Afroz-Shaikh
Copy link
Contributor Author

It's OK, but one final issue: your branch has conflicts

Oh my bad, can you check now

@codecov-commenter
Copy link

Codecov Report

Attention: Patch coverage is 0% with 34 lines in your changes missing coverage. Please review.

Project coverage is 6.10%. Comparing base (4d9c7fc) to head (379080c).
Report is 688 commits behind head on develop.

Files with missing lines Patch % Lines
...h_app/lib/pages/prices/product_price_add_page.dart 0.00% 34 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           develop   #6213      +/-   ##
==========================================
- Coverage     9.54%   6.10%   -3.45%     
==========================================
  Files          325     462     +137     
  Lines        16411   27124   +10713     
==========================================
+ Hits          1567    1656      +89     
- Misses       14844   25468   +10624     

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

@g123k
Copy link
Collaborator

g123k commented Jan 19, 2025

Thanks a lot for your first contribution @Afroz-Shaikh

@teolemon teolemon merged commit dfdda4e into openfoodfacts:develop Jan 20, 2025
6 checks passed
@teolemon
Copy link
Member

Well done @Afroz-Shaikh 🍾

@raphael0202
Copy link
Collaborator

raphael0202 commented May 26, 2025

@Afroz-Shaikh I have received a report from a user who said the buttons are not visible on the screen. Attached is a screenshot and the app logs.
Screenshot_20250316-110129

app_logs.log

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

Turn the Open Prices privacy warning into a bottom sheet
5 participants