1218391 - [Messages] We should adjust the height of the items in the report view

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::SMS, defect)

Description

[Julien Wajsberg [:julienw]]

Attachment: 2015-10-26-14-50-33.png

In cases where we don't request read or delivery report, or when we have only a phone number (and thus only one line instead of 2), the heights of each item seem to be a too high.

Hey Fang, what do you think ?

I see the spec in bug 1021608 said it should be 8rem; I see in the code that the current min-height should be 9rem, maybe because of a possible contact picture ?
But shouldn't we let the height flow naturally with the existing content ?

Comment 1

[Julien Wajsberg [:julienw]]

Attachment: 2015-10-26-14-55-20.png

See a better example for a case where there is only a phone number.

Comment 2

[Julien Wajsberg [:julienw]]

If I simply remove "min-height: 9rem" (and let the height flow) the contact picture is not well positioned. The spec says it should be vertically cented but instead we used margin-top to position it.

I think we should use flex layout to redo the same design in a more flexible (ah ah) way.

Comment 3

[Fang Shih [:fang]]

Hey Julien, Sorry for the late reply. 
I totally agree with you. When there is no image, it really makes the spacing looks extra big. I hope we can have all the information vertically centered, which included photos, contact name and number, currently the info looks like top align. And as long as we keep the contact information and the divider has the same spacing on top and bottom, I am fine with having a different line height for different information. What do you think? Thanks!

Comment 4

[Julien Wajsberg [:julienw]]

I think we're on the same page here :)

Let's see if a contributor would like to take this !

Comment 5

[Julien Wajsberg [:julienw]]

You can find some information about how to run the SMS application in Firefox Nightly here:

https://github.com/mozilla-b2g/gaia/blob/master/apps/sms/README.md

To be able to run in Firefox Nightly, we use some mocks that simulate the behavior of a phone. I'm explaining this because I noticed an issue in a mock currently, so you can fix it. In [1] we need to have as many items in `deliveryInfo` than we have in `params.receivers`. Moreover we need to have the right number in `receiver` instead of `null`.

[1] https://github.com/mozilla-b2g/gaia/blob/9b5a6aebf4ffb5a66896c7d68327b2a40ef6fb02/apps/sms/desktop-mock/navigator_moz_mobilemessage.js#L1186-L1187


After fixing this bug, to reproduce the bug easily, you can:
1. Run the app in Firefox Nightly
2. Press the "new message" button.
3. Enter different type of recipients: phone numbers, contacts with pictures, contacts without pictures.
4. Add a subject so that the message is a MMS.
5. send the message.
6. Right-click on the sent message.
7. Select "view report"
=> notice the issue.

Note that until you fix the bug mentioned above, the report view will be mostly empty. This view is actually generated using the information in the `deliveryInfo` property. See [2] [3] [4] for the actual code.

[2] https://github.com/mozilla-b2g/gaia/blob/9b5a6aebf4ffb5a66896c7d68327b2a40ef6fb02/apps/sms/views/conversation/js/information.js#L367
[3] https://github.com/mozilla-b2g/gaia/blob/9b5a6aebf4ffb5a66896c7d68327b2a40ef6fb02/apps/sms/views/conversation/js/information.js#L207
[4] https://github.com/mozilla-b2g/gaia/blob/9b5a6aebf4ffb5a66896c7d68327b2a40ef6fb02/apps/sms/views/conversation/js/information.js#L514

That means you can control the various informations by changing the code in the mock [1]. For example you can add delivery and read report information (see [5] for the code that generates this). This will be useful to test your code in various cases.

[5] https://github.com/mozilla-b2g/gaia/blob/9b5a6aebf4ffb5a66896c7d68327b2a40ef6fb02/apps/sms/views/conversation/js/information.js#L117


I think we need to change how the contact list is layed out. Especially we need to use flexbox. This is not _really_ easy because some of the style is actually shared with other places (especially the suggestion list -- the list that is displayed while you type a recipient in the "new message" panel).

I think the CSS that handles the report view is mostly [6] (maybe with the shared lists.css) but you better use the devtools to find out the real truth ;)

[6] https://github.com/mozilla-b2g/gaia/blob/9b5a6aebf4ffb5a66896c7d68327b2a40ef6fb02/apps/sms/views/conversation/style/report_view.css

See [7] [8] [9] for some information about flexbox.

[7] https://dev.opera.com/articles/flexbox-basics/
[8] https://bocoup.com/weblog/dive-into-flexbox
[9] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Please come on IRC or ask NeedInfo here if you have any question.

Comment 6

[Julien Wajsberg [:julienw]]

Mass closing of Gaia::SMS bugs. End of an era :(

Comment 7

[Julien Wajsberg [:julienw]]

Mass closing of Gaia::SMS bugs. End of an era :(