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

Darkmode #61

Merged
merged 25 commits into from
Jan 7, 2021
Merged

Darkmode #61

merged 25 commits into from
Jan 7, 2021

Conversation

M123-dev
Copy link
Member

@M123-dev M123-dev commented Jan 1, 2021

Like in Issue #22 requested here is a working darkmode, which can be switched on / off on the profile page. The setting is saved via shared prefs.
The darkmode works with the help of provider and does not need a rebuild. A large part of the widgets now support the darkmode function.
The logic is located in the themes folder and there is still only the standard theme in which the variations are specified.

The most important thing that is still missing is the text and the scanbutton and its shadow in the navbar, there I could not follow the code to manipulate the colors.

I am not a graphic designer and this is only the basic principle, everyone is welcome to override my color settings and equip the rest of the widgets with the dark mode.

@M123-dev M123-dev changed the title Darkmode #22 Darkmode Issue #22 Jan 1, 2021
@M123-dev M123-dev changed the title Darkmode Issue #22 [Open for design help] Darkmode Jan 1, 2021
Copy link
Contributor

@monsieurtanuki monsieurtanuki left a comment

Choose a reason for hiding this comment

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

It's cool to have a dark mode, thanks!
Some refactoring needed, though.
Don't hesitate to comment if you don't agree.

@PrimaelQuemerais
Copy link
Member

@M123-dev maybe check if you pulled the lasted version from the Master branch, I changed the smooth_alert_dialog.dart filename to match the naming convention, and also corrected the SmoothAlertDialog class (as @monsieurtanuki noted the context attribute is no longer need).

I haven't pull it yet to try but thanks for the PR I will check it out 🙂

@PrimaelQuemerais
Copy link
Member

I find the result quite stunning, well done @M123-dev
Of course it still needs some polishing and as you said some texts don't change to white but it's a great start!

I'm posting some pictures for those you want to see the result without having to build it :

Screenshots

Screenshot_20210101_194713_org openfoodfacts app
Screenshot_20210101_194722_org openfoodfacts app
Screenshot_20210101_194726_org openfoodfacts app
Screenshot_20210101_194730_org openfoodfacts app
Screenshot_20210101_194734_org openfoodfacts app
Screenshot_20210101_194748_org openfoodfacts app
Screenshot_20210101_194908_org openfoodfacts app

@PrimaelQuemerais PrimaelQuemerais linked an issue Jan 1, 2021 that may be closed by this pull request
2 tasks
@M123-dev
Copy link
Member Author

M123-dev commented Jan 1, 2021

@PrimaelQuemerais Thank you for the kind words, my branch is up to date with the master, I don't know why the file has renamed itself again.

@PrimaelQuemerais
Copy link
Member

@M123-dev that is weird because it doesn't match the file (filename and code) in the Master branch cf: smooth_alert_dialog.dart

@M123-dev
Copy link
Member Author

M123-dev commented Jan 1, 2021

@monsieurtanuki No problem, I'm also not completely satisfied with the final product myself. Especially the limitations of ThemeData on the standard material design make it a little hard, I'll have a look on it tomorrow if I can find a way around this. Thanks for the improvement suggestions.

@M123-dev
Copy link
Member Author

M123-dev commented Jan 1, 2021

@PrimaelQuemerais yeah I have seen it. It should be fixed now😁

@M123-dev M123-dev marked this pull request as draft January 3, 2021 12:12
@M123-dev M123-dev marked this pull request as ready for review January 4, 2021 17:09
@M123-dev
Copy link
Member Author

M123-dev commented Jan 4, 2021

Today I revised the PR again. Now all formatting errors should be gone and the navigation bar is now fully supported too. The widgets in the camera function are still normal, in my opinion they are only of little relevance, since most of the screen is covered with the camera image anyways. Of course this should still be added, but this would make more sense after the rebuild of the scanpage #62. (and when scanning works again)

When you get on the profile page, there is an error, setState () or markNeedsBuild () called during build. This goes away if you comment out the content of the onChanged, I've tried all I can think of but I could not find out why this is. I am open to tips.
Except for the error, the PR would be done from my side,

@monsieurtanuki
Copy link
Contributor

@M123-dev I noticed that the SmoothToogle has an unexpected behavior: it calls onChanged the first time. The value hasn't actually "changed", it was just initialized, but onChanged is called all the same.

My temporary suggestions, just to locate the issue:

  • replace
    themeChange.darkTheme = newValue
    with
    if(themeChange.darkTheme != newValue) {themeChange.darkTheme = newValue;}
  • replace SmoothToggle with something like CheckBoxListTile

Tell me if it worked.

@M123-dev
Copy link
Member Author

M123-dev commented Jan 4, 2021

@monsieurtanuki That is also what I suspected, however, each change has destroyed any properties of the toggle for me. The first works great, thanks for the tip

@@ -84,9 +91,10 @@ class _SmoothNavigationBarClassicState extends State<SmoothNavigationBarClassic>
.textTheme
.bodyText1
.copyWith(
Copy link
Contributor

Choose a reason for hiding this comment

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

I assume that bodyText2 would be much better than bodyText1.copyWith(...).

I'm not an expert on themes, but I think the point is to have homogenous colors and text sizes.
Of course for the moment it's a work in progress for all of us, but it would make sense to say: "OK guys, now we use themes, here are the available colors and text sizes, and that's it, no improvisation for each new widget."

What do you think of that?

Copy link
Member Author

Choose a reason for hiding this comment

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

When designing the themes, I built in bodyText2 as something like onPrimary, which should be used as the opposite of bodyText1 in terms of colors. (Such as the icon on the scan button)
bodyText2 currently has no use at all, that means we can use it for all kinds of purposes.
however, I think it is easier to use copyWith in this case, because it isn't a recurring text.

But yes, I agree with you we have to bring better structures into development. Such a kind of contribution guide that lists how to access the translations and how to add something to them, how to access the style elements and code guidelines.
Also, I think we need a better way of project planning, currently there are two roadmaps (README, Google Docs). Also, a big part of the documentation seems outdated.

@PrimaelQuemerais is currently working on a new one, when this is finished I'll look at it and attach a documentation of the data I have brought in and from what I is important.

But since this app is still in its early stage, we probably still have a bit time before we have to think about it seriously.

Copy link
Member Author

Choose a reason for hiding this comment

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

The other suggestions you made are now in PR.

@M123-dev M123-dev changed the title [Open for design help] Darkmode Darkmode Jan 4, 2021
Future<void> main() async {
await Sentry.init(
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess this Sentry part should be part of a separate PR related to #9. This PR is about dark mode.

Copy link
Member Author

Choose a reason for hiding this comment

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

I just thought that for the small change it is unnecessary to open a new pr

Copy link
Contributor

Choose a reason for hiding this comment

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

I understand, but that's a source of confusion between issues, and there's no obvious sign that you fully tested the Sentry part. Perhaps other contributors that know things about Sentry and nothing about dark mode would like to make suggestions about Sentry, but it will be hidden "in the dark" ;)
That definitely makes sense to create a specific PR for Sentry, and you even already have a specific issue for that (#9).

@M123-dev
Copy link
Member Author

M123-dev commented Jan 5, 2021

From my side the pr would be ready now, does anyone still have concerns

@monsieurtanuki
Copy link
Contributor

@M123-dev I'll review this PR within a couple of days.
My assumption is that there will be parts I may disagree with, parts that will need refactoring, but all this will be resolved in a second step. First: an app with dark mode, cool!

After this PR is merged, we'll talk about how we should use providers, shared preferences and themes in this project.

Copy link
Contributor

@monsieurtanuki monsieurtanuki left a comment

Choose a reason for hiding this comment

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

@M123-dev As I said, there are things that I would have coded differently, and there are topics we should address in general, like the target use of providers, shared preferences and themes.
But there's nothing I read that would prevent me from approving this PR now.

@M123-dev M123-dev merged commit 0ddc4f7 into openfoodfacts:master Jan 7, 2021
@M123-dev
Copy link
Member Author

M123-dev commented Jan 7, 2021

@monsieurtanuki Thanks again for the feedback and yes as I said, if there are fixed guidelines, I will restructure the code again.

@M123-dev M123-dev deleted the darkmode branch January 7, 2021 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement dark mode
3 participants