Closed
Bug 875690
Opened 12 years ago
Closed 12 years ago
[MMS] [UX] Thread view. Wrong alignment of elements
Categories
(Firefox OS Graveyard :: Gaia::SMS, defect)
Tracking
(blocking-b2g:leo+, b2g18 verified)
People
(Reporter: vicky, Assigned: greg)
References
Details
Attachments
(5 files)
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
: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!
Someone has made some changes to this since the screenshot so I'm attaching a new one.
Attachment #755573 -
Flags: review?(gnarf37)
Attachment #755573 -
Flags: review?(felash)
Attachment #755573 -
Flags: review?(fbsc)
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•12 years ago
|
||
Comment 7•12 years ago
|
||
Comment 8•12 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•12 years ago
|
||
Requesting leo+ - This is a UX issue for new features in 1.1
blocking-b2g: --- → leo?
Updated•12 years ago
|
blocking-b2g: leo? → leo+
Comment 10•12 years ago
|
||
Hi Victoria, can you confirm if the patch is ok?
Thanks a lot!
Flags: needinfo?(vpg)
Updated•12 years ago
|
status-b2g18:
--- → affected
Reporter | ||
Comment 11•12 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•12 years ago
|
||
Reporter | ||
Comment 13•12 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•12 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 15•12 years ago
|
||
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•12 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•12 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 18•12 years ago
|
||
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+
Comment 19•12 years ago
|
||
Hi Greg,
Is there any update here? Could I help u here?
Assignee | ||
Comment 20•12 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•12 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•12 years ago
|
||
:vpg@tid.es Correct, I think the current version is perfect!
Comment 23•12 years ago
|
||
Comment on attachment 755573 [details] [diff] [review]
Pull Request
r=me seems everyone is agreed
Attachment #755573 -
Flags: review+
Comment 24•12 years ago
|
||
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Comment 25•12 years ago
|
||
Uplifted 7c21892f8bc7c348a24bef5256ee745f78f5300c to:
v1-train: 9f0326e4cae2a1c76a06ccc27c01fa47b1808048
Updated•12 years ago
|
Flags: in-moztrap-
Comment 26•11 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
You need to log in
before you can comment on or make changes to this bug.
Description
•