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

Use Material 3 as base theme #5676

Merged
merged 70 commits into from
Aug 30, 2023
Merged

Use Material 3 as base theme #5676

merged 70 commits into from
Aug 30, 2023

Conversation

seadowg
Copy link
Member

@seadowg seadowg commented Jul 14, 2023

Closes #5607
Closes #5567
Blocked by #5675

As well as the referenced issues, this removes the ability to download blank forms from Google Drive. This was done to avoid having to rework styles on the Google Drive screens that were not useful anymore as you're no longer able to fill out new forms in the next release.

What has been done to verify that this works as intended?

Existing tests and verified manually.

Why is this the best possible solution? Were any other approaches considered?

Not a lot to discuss here! I've been back and forth with @alyblenkin on how we implement Material 3 and we're feeling like we're a good place for now.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

I think a general check over the app would be good here. It definitely be good to hear about parts of the app that don't look right to anyone.

As I mentioned above, there have been some changes to Google Drive projects (you're no longer able to download forms) so that should be checked as well. The best way to do that is to ask @lognaturel to put a signed build together so that it's possible to use an old release to create the project and then upgrade.

Before submitting this PR, please make sure you have:

  • run ./gradlew checkAll and confirmed all checks still pass OR confirm CircleCI build passes and run ./gradlew connectedDebugAndroidTest locally.
  • verified that any code or assets from external sources are properly credited in comments and/or in the about file.
  • verified that any new UI elements use theme colors. UI Components Style guidelines

@seadowg seadowg changed the title Switch to Material 3 theme Use Material 3 as base theme Jul 14, 2023
@seadowg seadowg force-pushed the material-3 branch 2 times, most recently from 96497f8 to 1040973 Compare July 14, 2023 13:47
@seadowg
Copy link
Member Author

seadowg commented Jul 14, 2023

@alyblenkin this is probably in a good place to get some feedback. The buttons are pretty inconsistent, but that's something I think we should leave for #5567. It's good to check the Material 3 spec while looking through as some things surprised me (like how dialogs are now "primary" rather than surface coloured). There's probably a few things we want to adapt based on changes like that.

@alyblenkin
Copy link
Collaborator

@seadowg - sorry for the slow response on this! Yes, I'm seeing a lot of seeing surprises and inconsistencies! Some of the buttons didn't change and the dialogs have a light blue background. I might have done something weird - let me know if you want to chat Monday morning :)

Screenshot_20230715-003929_ODK Collect

Screenshot_20230715-003938_ODK Collect

@seadowg
Copy link
Member Author

seadowg commented Jul 17, 2023

let me know if you want to chat Monday morning :)

Let's do it. Will send you an invite.

@seadowg
Copy link
Member Author

seadowg commented Jul 25, 2023

@alyblenkin ok I think this is good for another check through!

@alyblenkin
Copy link
Collaborator

@seadowg, all the changes we spoke about last week look so much better!

I did notice one small thing...it looks like the menu buttons are slightly darker. I colour-dropped it in Figma, and it seems to have a purple tint (#F1F0F5), but it's likely off because it's a screenshot but still darker.
Menu slightly darker

@seadowg
Copy link
Member Author

seadowg commented Jul 26, 2023

I did notice one small thing...it looks like the menu buttons are slightly darker. I colour-dropped it in Figma, and it seems to have a purple tint (#F1F0F5), but it's likely off because it's a screenshot but still darker.

Good spot! I think mixed some colors up while moving them around. Have you also had a chance to review the dark theme? It feels like the changes are bigger there in terms of how the colors are applied.

@alyblenkin
Copy link
Collaborator

Yes, I forgot to say that the dark mode looks pretty great for the most part! I think the biggest issue I came across was the delete button being difficult to see, but I wasn't sure if that would be addressed in this issue or in #5567.

Screenshot_20230726-153322_ODK Collect

And I doubt we can change this, but it isn't super clear that this is a dialog. If we could make the background lighter, so the dialog pushes to the foreground that would be great.

Screenshot_20230726-153412_ODK Collect

@seadowg
Copy link
Member Author

seadowg commented Jul 27, 2023

I came across was the delete button being difficult to see

I've made it a default Material 3 "Outlined Button" rather customising it to use our error color.

And I doubt we can change this, but it isn't super clear that this is a dialog. If we could make the background lighter, so the dialog pushes to the foreground that would be great.

Ah good point. I've made it so that we use the default primary tinted dialogs in dark (but still surface colors in light). This looks the best to me.

@alyblenkin
Copy link
Collaborator

alyblenkin commented Jul 27, 2023

The delete button and dialog look great!

I'm not sure if those changes impacted the main menu, but it's a little light 😄
Screenshot_20230727-164902_ODK Collect

@seadowg
Copy link
Member Author

seadowg commented Jul 28, 2023

I'm not sure if those changes impacted the main menu, but it's a little light 😄

Are you seeing that consistently? If so, what Android version are you on? It can't reproduce that. Sometimes things like this happen immediately after switching from Light to Dark (or the other way around). The way all that's implemented under the hood in Android is surprisingly hacky.

@alyblenkin
Copy link
Collaborator

Oh yes, playing around with the settings made it go away!

@seadowg
Copy link
Member Author

seadowg commented Jul 28, 2023

There's a lot of annoying inconsistencies now with the buttons across the app, so I think I'll keep this PR open and do #5567 as part of it as well so we don't have to test/merge it in a confusing state.

@seadowg
Copy link
Member Author

seadowg commented Aug 1, 2023

@alyblenkin this is ready for another look with hopefully unified buttons!

One thing to note is that I've kept a "bar" behind all the bottom buttons (Go to start/Go to end, Back/Next etc) which differs from your mockups where a lot of these buttons float over the content. The reason for this is that otherwise, well need to do some work to add dynamic margins to the content so that enumerators are always to scroll to the bottom without having the buttons cover the very last chunk. This is all very possible (and you'll have seen things like this in loads of apps), I just wanted to focus on the button styles themselves for this, and we can come back for that "icing on the (dairy free) cake" another time.

@alyblenkin alyblenkin marked this pull request as ready for review August 1, 2023 15:19
@alyblenkin
Copy link
Collaborator

I did not mean to mark this pull request as ready, but I can't undo it!

@seadowg seadowg marked this pull request as draft August 1, 2023 15:22
@seadowg
Copy link
Member Author

seadowg commented Aug 1, 2023

Fixed!

@alyblenkin
Copy link
Collaborator

Hello! I think it's easier to view the comments in figma. Let me know if you want to hop on a call to discuss

@seadowg
Copy link
Member Author

seadowg commented Aug 2, 2023

@alyblenkin that's all the button styles updated with the increased (12dp) vertical margins.

@alyblenkin
Copy link
Collaborator

The buttons are looking great
giphy

One small thing, it looks like these buttons were super-sized

@seadowg
Copy link
Member Author

seadowg commented Aug 3, 2023

One small thing, it looks like these buttons were super-sized

Looks like our dynamic text sizing for widget buttons doesn't play well with that new padding. I'm going to make it so widget buttons use the normal button text size was their default (but still let the user bump it up or down).

@seadowg
Copy link
Member Author

seadowg commented Aug 3, 2023

Fixed!

@seadowg
Copy link
Member Author

seadowg commented Aug 7, 2023

@lognaturel the only controversial change here is 2646e4a. There I remove the ability to access "Get Blank Form" from Google Drive projects. My thinking is that this is ok because we are removing the ability to start blank forms anyway (in #5402).

At the moment, clicking "Get Blank Form" does nothing. I'm thinking we should either hide the button, or pop up a dialog to explain what's going on (like in #5675). What do you think?

@seadowg
Copy link
Member Author

seadowg commented Aug 8, 2023

At the moment, clicking "Get Blank Form" does nothing. I'm thinking we should either hide the button, or pop up a dialog to explain what's going on (like in #5675). What do you think?

We discussed on a call and decided to go with the latter.

@seadowg seadowg merged commit 7c8192a into getodk:master Aug 30, 2023
@seadowg seadowg deleted the material-3 branch August 30, 2023 13:01
@grzesiek2010 grzesiek2010 mentioned this pull request Oct 20, 2023
5 tasks
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.

Switch to Material 3 theme Unifying buttons
5 participants