Issue/21137 Align both buttons to the left

Agoni-0 commented 1 month ago

Fixes #

Descrpition:

The related issue is https://github.com/wordpress-mobile/WordPress-Android/issues/21137#issue-2479746837. This issuse is about the cluttered interface cased by button THE VERSION FROM ANOTHER DEVICE being divided into two lines.

It can be seen that button THE VERSION FROM THIS APP is aligned to the right, while button THE VERSION FROM ANOTHER DEVICE is centered. And the author of this issue suggests that Align both buttons to the left to maximize the available space and ensure that each button occupies a single line. So I just follow his suggestion and solve this issue.

After reading the code, I found out it was the problem of MaterialAlertDialogBuilder. It uses the default style, which aligns the positive, negative and cancel button to the right and the text of them to the center. It works nice while buttons are in the same line. If they need more than one line, they will cause a cluttered interface.

So, I just create a style to solve this issue.

Problems:

When using Jurassic.Ninja test site to test the codes, I'm unable to reproduce a post with You've made unsaved changes to this poststatus, which can lead to a page shown in the picture above.

However, I can do this using an account. Here are my steps:

Open WordPress instead of Jetpack to publish a post.
Open Jetpack to change the same post without update.
Open WordPress , and the post will have You've made unsaved changes to this poststatus.

If there are any problems, please tell me.

Solution:

I found that I can make a Version conflict post, which can lead to a page the same as the post mentioned above. Here are my steps.

Open WordPress Pre-Alpha and publish a post. Change the post without update.
Open Jetpack, change the same post and update.
Open WordPress Pre-Alpha, and the post will have Version conflict.
So, I test my codes with this kind of post.

To Test:

1.When a button is divided into two lines , the interface meets the requirements.

4.When two buttons are in the same line, the interface retains the original style.

5.When in dark mode

Regression Notes

Potential unintended areas of impact

The style of MaterialAlertDialogBuilder depends on parent activity or fragment when not asigned to a specific style. However, to solve the issue, I have to change the style of three buttons. I set their parent style to Widget.MaterialComponents.Button.TextButton and changed two properties android:layout_gravity and android:gravity. This may have an impact under different parent styles of activity or fragment.
What I did to test those areas of impact (or what existing automated tests I relied on)

I search all the codes which use this dialog. And all of them works well.
What automated tests I added (or what prevented me from doing so)

None.

PR Submission Checklist:

[x] I have completed the Regression Notes.
[x] I have considered adding accessibility improvements for my changes.
[x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing Checklist (strike-out the not-applying and unnecessary ones):

[ ] WordPress.com sites and self-hosted Jetpack sites.
[ ] Portrait and landscape orientations.
[ ] Light and dark modes.
[ ] Fonts: Larger, smaller and bold text.
[ ] High contrast.
[ ] Talkback.
[ ] Languages with large words or with letters/accents not frequently used in English.
[ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
[ ] Large and small screen sizes. (Tablet and smaller phones)
[ ] Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

nbradbury commented 1 month ago

@Agoni-0 Thanks, this is a nice solution! But while we're fixing this I wonder we should simplify the wording? We could move the line "Choose a version to load" to appear above the two buttons, and change the button wording to just "From this app" and "From another device".

Agoni-0 commented 1 month ago

@Agoni-0 Thanks, this is a nice solution! But while we're fixing this I wonder we should simplify the wording? We could move the line "Choose a version to load" to appear above the two buttons, and change the button wording to just "From this app" and "From another device".

It's a good advice. But I think this change is necessary. Perhaps a short sentence in English can become very long when translated into other languages. Should I simplify the words?

nbradbury commented 1 month ago

Should I simplify the words?

I think we should, yes. But I'm not suggesting dropping your style - we should keep that, because as you point out, the wording could be longer in languages other than English.

Agoni-0 commented 1 month ago

I think we should, yes.

So the next step I need to do is to change the button wording to just "From this app" and "From another device", including in other languages?

nbradbury commented 1 month ago

So the next step I need to do is to change the button wording to just "From this app" and "From another device", including in other languages?

Sorry, I should've clarified that! You can just change the English wording and our translation tools with take care of other languages before the next version is released.

Agoni-0 commented 1 month ago

Sorry, I should've clarified that! You can just change the English wording and our translation tools with take care of other languages before the next version is released.

Sorry, I'm not familiar with the app's translation tools. Do you mean to modify all strings.xml files like strings.xml (az) ?

nbradbury commented 1 month ago