[MMS] [UX] Thread view. Wrong alignment of elements

VERIFIED FIXED

Status

Firefox OS
Gaia::SMS
VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: vicky, Assigned: greg)

Tracking

unspecified
x86
Mac OS X
Bug Flags:
in-moztrap -

Firefox Tracking Flags

(blocking-b2g:leo+, b2g18 verified)

Details

Attachments

(5 attachments)

(Reporter)

Description

5 years ago
Elements inside the bubble need to be adjusted alignment wise.
Please take a look at this spec for more detail:

https://bug870950.bugzilla.mozilla.org/attachment.cgi?id=753321
(Reporter)

Updated

5 years ago
Blocks: 872514
(Assignee)

Comment 1

5 years ago
:vpg@tid.es Can you please clarify what "left justified but right aligned" means? Justified is a type of alignment. I think I have an idea of what is desired, so I'll start working on it as I understand it!
(Assignee)

Updated

5 years ago
Assignee: nobody → greg
(Assignee)

Comment 2

5 years ago
Someone has made some changes to this since the screenshot so I'm attaching a new one.
(Assignee)

Comment 3

5 years ago
Created attachment 755570 [details]
Current screen shot
(Assignee)

Comment 4

5 years ago
Created attachment 755573 [details] [diff] [review]
Pull Request
Attachment #755573 - Flags: review?(gnarf37)
Attachment #755573 - Flags: review?(felash)
Attachment #755573 - Flags: review?(fbsc)
(Assignee)

Comment 5

5 years ago
Assuming the current screen shot looks good, the only change that I had to make is the font size. Pull request reflects this.

Comment 6

5 years ago
Created attachment 755588 [details]
Screenshot with patch - short text

Comment 7

5 years ago
Created attachment 755589 [details]
Screenshot with patch - long text

Comment 8

5 years ago
Comment on attachment 755573 [details] [diff] [review]
Pull Request

Looks good to me, since this is to align with victoria's spec, I'd like her to confirm this meets her spec.  Check the screenshots attached.
Attachment #755573 - Flags: review?(gnarf37) → review+

Comment 9

5 years ago
Requesting leo+ - This is a UX issue for new features in 1.1
blocking-b2g: --- → leo?
blocking-b2g: leo? → leo+
Hi Victoria, can you confirm if the patch is ok? 
Thanks a lot!
Flags: needinfo?(vpg)
status-b2g18: --- → affected
(Reporter)

Comment 11

5 years ago
This looks wrong: https://bug875690.bugzilla.mozilla.org/attachment.cgi?id=755589 
1. The text in the white bubble should be aligned to the right margin
2. The Margin in the white bubble is wrong, the photo and text should line up with the end of the orange bubble. 
See attachment with visual notes.
Flags: needinfo?(vpg)
(Reporter)

Comment 12

5 years ago
Created attachment 755832 [details]
shows the missplacement of elements
(Reporter)

Comment 13

5 years ago
(In reply to greg from comment #1)
> :vpg@tid.es Can you please clarify what "left justified but right aligned"
> means? Justified is a type of alignment. I think I have an idea of what is
> desired, so I'll start working on it as I understand it!

It means that the text is justified left as a regular norm of reading but the overall text box sticks to the right margin as the image does.
So, if you have a short text the text box being attached to the right margin will make the bubble shorter from the left.
I hope I am making myself clear...
(Reporter)

Comment 14

5 years ago
Make sure margins are 4 rem from screen border in the right hand side of the white bubble and 4 rem in the left hand side of the orange bubble.

You can find the measurements here: https://www.dropbox.com/s/25mz65qfqk631iz/SMS.MMS_measurements.png
Comment on attachment 755573 [details] [diff] [review]
Pull Request

as far as I understand, this needs some work and I won't be there anymore to review, so I'm removing myself here.
Attachment #755573 - Flags: review?(felash)
(Assignee)

Comment 16

5 years ago
"1. The text in the white bubble should be aligned to the right margin"

:jugglinmike and I just spent a good amount of time trying to describe this issue in words, but it's a very esoteric and subtle issue. If you want to get on Skype to further clarify the issue that might make it easier. Having said that, we'll try to explain it in text here.

I understand what you're saying. However, this is not possible with CSS. In order for text wrapping to take place, the container has to grow to its maximum width. Once the container is at this width, each line will begin at the leftmost position of the container (thanks to the text-alignment). This will leave space on the right where the word that wrapped onto the next line could not fit. This prevents the right side of the text from aligning with the image below it as you described.

"2. The Margin in the white bubble is wrong, the photo and text should line up with the end of the orange bubble."

That helps me understand this issue, I will fix this problem.
Flags: needinfo?(vpg)
(Assignee)

Comment 17

5 years ago
Another note: the alignment of the white and orange bubbles will only occur when the orange bubble is at its maximum size (when there is enough content for the text to wrap). But I have set it up so they are perfectly aligned in that case, so hopefully that does the trick!
Comment on attachment 755573 [details] [diff] [review]
Pull Request

please ask for new review flags when pull is updated
Attachment #755573 - Flags: review?(fbsc)
Attachment #755573 - Flags: review+
Hi Greg,
Is there any update here? Could I help u here?
(Assignee)

Comment 20

5 years ago
:borjasalguero all that is needed is a response from :vpg@tid.es. I believe this is a case where we can't make it look exactly like the design mock but it is as close as is realistic and not "broken" per se.
(Reporter)

Comment 21

5 years ago
(In reply to greg from comment #16)
> "1. The text in the white bubble should be aligned to the right margin"
> 
> :jugglinmike and I just spent a good amount of time trying to describe this
> issue in words, but it's a very esoteric and subtle issue. If you want to
> get on Skype to further clarify the issue that might make it easier. Having
> said that, we'll try to explain it in text here.
> 
> I understand what you're saying. However, this is not possible with CSS. In
> order for text wrapping to take place, the container has to grow to its
> maximum width. Once the container is at this width, each line will begin at
> the leftmost position of the container (thanks to the text-alignment). This
> will leave space on the right where the word that wrapped onto the next line
> could not fit. This prevents the right side of the text from aligning with
> the image below it as you described.
> 
> "2. The Margin in the white bubble is wrong, the photo and text should line
> up with the end of the orange bubble."
> 
> That helps me understand this issue, I will fix this problem.

Hi Greg,
I understand that a text box is generated and grows until reaching the maximum width, stays in that size and when text is wrapped a blank space is generated there. I think you cannot do anything more about it, right?
Flags: needinfo?(vpg)
(Assignee)

Comment 22

5 years ago
:vpg@tid.es Correct, I think the current version is perfect!
Comment on attachment 755573 [details] [diff] [review]
Pull Request

r=me seems everyone is agreed
Attachment #755573 - Flags: review+
master: https://github.com/mozilla-b2g/gaia/commit/7c21892f8bc7c348a24bef5256ee745f78f5300c
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Uplifted 7c21892f8bc7c348a24bef5256ee745f78f5300c to:
v1-train: 9f0326e4cae2a1c76a06ccc27c01fa47b1808048
status-b2g18: affected → fixed

Updated

5 years ago
Flags: in-moztrap-

Comment 26

5 years ago
This issue does not repro anymore. The user is able to see the text aligned as per the attachment in Comment 11.

Verified on 
Leo Build ID: 20130807071207
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/11bb1b0eefff
Gaia: 60ca81600a080dae33058b0692ecaa213556c926
Platform Version: 18.1
Status: RESOLVED → VERIFIED
status-b2g18: fixed → verified
You need to log in before you can comment on or make changes to this bug.