[Nav Drawer] Move user profile and sign out link into popup #2397

[NudurupatiSurya]

• Modified code to show a signout popup when the user clicks on the profile photo in the NavDrawer. [issue: https://github.com/google/ground-android/issues/2397]
• This time extracted user details using AuthenticationManager

Updated Demo:

https://github.com/google/ground-android/assets/53263580/dbc5ebcd-2669-44ca-82fb-023a253a460b

[gino-m]

Looks good! Please resolve conflicts and mark as "ready for review" once ready!

[shobhitagarwal1612]

Thanks for working on this @NudurupatiSurya. Excited to get this merged too! 🎉 🎉 🎉

After comparing your screen recording with the mocks, I can see that there are a couple of more UI changes needed:

1. We need to show the app logo and name in the header and only show the profile photo at the right
2. Styling of this new dialog is not the same as the original signout confirmation dialog. So, could you please create a new compose dialog instead of reusing the existing one?
3. As per the mocks, the dialog appears to be anchored to the profile photo. Can you please check if that is feasible?

[gino-m]

Running tests now, I'll paste in results so you can include in your next iteration.

/gcbrun

[NudurupatiSurya]

After comparing your screen recording with the mocks, I can see that there are a couple of more UI changes needed:

1. We need to show the app logo and name in the header and only show the profile photo at the right
2. Styling of this new dialog is not the same as the original signout confirmation dialog. So, could you please create a new compose dialog instead of reusing the existing one?
3. As per the mocks, the dialog appears to be anchored to the profile photo. Can you please check if that is feasible?

Hello @shobhitagarwal1612,

As you suggested, I have updated the navigation header to display the app logo and name, with the profile photo positioned on the right.

This is how it looks now:

However, I'm unsure about the style of the text for "Ground" and the spacing between the profile photo and the edge of the header. Could you please provide details if available?

I am also working on anchoring the user dialog to the navigation header and will convert the PR to ready for review once this is completed. Also, please let me know if you find anything that is missing.

Thank you, Surya

CC: @gino-m

[gino-m]

Thanks you, @NudurupatiSurya!

However, I'm unsure about the style of the text for "Ground" and the spacing between the profile photo and the edge of the header. Could you please provide details if available?

@rawbzz, could you please advise?

[rawbzz]

@NudurupatiSurya Ground title should be Google san, regular, 18 pts. and the distance between the avatar and the edge should be 24 px. ty!

[NudurupatiSurya]

@NudurupatiSurya Ground title should be Google san, regular, 18 pts. and the distance between the avatar and the edge should be 24 px. ty!

Thank you, @rawbzz! Could also you please clarify how much the dialog is anchored towards the navigation bar header? See this attached screenshot for reference.

Also, I noticed the distance between the avatar and the edge was specified in pixels (px). For better consistency across various devices and screen densities, it would be ideal to use density-independent pixels (DP) in Android. Let me know your thoughts. For now, I have made the distance 24px.

CC: @gino-m

[NudurupatiSurya]

Hello @gino-m,

Thank you for your feedback! I've updated the font size from pt to sp and changed marginEnd from px to dp as suggested.

Sorry for the delay in my response, I was tied up with finals week at my college.

I've moved the PR from draft to ready for review. Please have a look and let me know if further adjustments are needed.

Looking forward to potentially merging my first PR 😊

Best regards, Surya

CC: @shobhitagarwal1612

[shobhitagarwal1612]

Can you please update the screen recording in the PR description as well?

[NudurupatiSurya]

Can you please update the screen recording in the PR description as well?

Updated the description

[shobhitagarwal1612]

/gcbrun

[shobhitagarwal1612]

Also pasting the output of GCB here:

* What went wrong:
Execution failed for task ':workspace:ground:ktfmtCheckMain'.
> [ktfmt] Found 3 files that are not properly formatted:
  src/main/java/com/google/android/ground/ui/home/SignOutConfirmationDialog.kt
  src/main/java/com/google/android/ground/ui/home/HomeScreenFragment.kt
  src/main/java/com/google/android/ground/ui/home/UserDetailsDialog.kt

You can fix this locally by running the gradle command ktfmtFormat

[NudurupatiSurya]

Hello @shobhitagarwal1612,

Thank you for the feedback. I have made the changes you suggested and updated the screen recording in the description. Please review and let me know if any further modifications are needed.

Regards, Surya

CC: @gino-m

[shobhitagarwal1612]

/gcbrun

[shobhitagarwal1612]

The remote build is still failing. Can you please run checkCode locally and fix whatever is failing?

[NudurupatiSurya]

The remote build is still failing. Can you please run checkCode locally and fix whatever is failing?

I ran checkCode locally and found an unused resource file and some styles. I have removed these, and the build is now successful for checkCode. Do let me know if any further changes are needed. 😊

[shobhitagarwal1612]

/gcbrun

[shobhitagarwal1612]

@gino-m PTAL

[gino-m]

/gcbrun

[NudurupatiSurya]

@NudurupatiSurya Nicely done! 🏅

Thank You @gino-m!