951676 - [Meta][Messages][Refresh] Update layout of list of threads.

Status: VERIFIED FIXED

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

Description

[Victoria Gerchinhoren [:vicky]]

Update layout to match new proposal for visual refresh.
Specs to follow.

Comment 1

[Joe Cheng [:jcheng] (please needinfo)]

This is marked as MVP#1. 
Do we have more details on this?

Comment 2

[jachen]

Victoria should be providing these soon.

Comment 3

[Victoria Gerchinhoren [:vicky]]

Attaching the visual mockups for messaging inbox, needing info from Pau Masià who will provide the specs file.

Comment 4

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual Mockup: SMS_MMS Inbox

Comment 5

[Pau Masiá [:Pau]]

Attaching the visual specs for Messaging Inbox.

Comment 6

[Pau Masiá [:Pau]]

Attachment: Visual Spec: Messaging Inbox

Comment 7

[Steve Chung [:steveck]]

Thread list view also need the mockup for edit mode.

Comment 8

[Noemí Freire (:noemi)]

Comment on attachment 8362504 [details]
Visual Mockup: SMS_MMS Inbox

marking the VD refresh material attached as obsolete since a new reduced scope for v1.4 is going to be proposed within the Messaging meta bug 950175

Comment 9

[Victoria Gerchinhoren [:vicky]]

New visual mockups for reduced scope refresh:

https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8370022

Comment 10

[Julien Wajsberg [:julienw]]

Arnau, Joan, I'd like that Oleg has a look here about how to do the contact pictures in a circle in a efficient way, do you already have ideas on how to do this?

Comment 11

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Could you please check:
https://bugzilla.mozilla.org/show_bug.cgi?id=991006
That's the bug for the refresh in lists BB.
I did a test using border-radius, and performance does not decrease in cold launch time in contacts app with workload light script.
I did not test fps.
It would be great if you could work with this branch, as we would like to land this ASAP :)
Thanks!

Comment 12

[Julien Wajsberg [:julienw]]

Arnau, you mean trying to use the branch's work in the Messages app ?

Oleg, maybe you can work on this?

Comment 13

[Oleg Zasypkin [:azasypkin]]

(In reply to Julien Wajsberg [:julienw] from comment #12)
> Arnau, you mean trying to use the branch's work in the Messages app ?
> 
> Oleg, maybe you can work on this?

Sure, I'll work on this.

Comment 14

[Oleg Zasypkin [:azasypkin]]

The way that is used to make rounded images from the patch for bug 991006 will work for us too once it's landed. 

Arnau, is this patch still in WIP stage? I've noticed that headers inside list and list item bottom borders don't correspond to visual spec: [1], [2].

[1] https://bug950765.bugzilla.mozilla.org/attachment.cgi?id=8394805
[2] https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790

Comment 15

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Yes, is WIP. I'll check that with Vicky. Thanks for noticing it.

Could we use this bug to add a class for empty images?
As now we have a border for the picture and the image is loaded as a background, empty images are also getting the border.

Comment 16

[Oleg Zasypkin [:azasypkin]]

(In reply to Arnau March  [:arnau] from comment #15)
> Yes, is WIP. I'll check that with Vicky. Thanks for noticing it.
> 
> Could we use this bug to add a class for empty images?
> As now we have a border for the picture and the image is loaded as a
> background, empty images are also getting the border.

I guess we'll have some sort of 'no-image' placeholder instead of empty image like here [1]. In this case I think border would be fine, but I'm not sure whether [1] is the spec that we can trust. Can you point me to the right place where I can look at more or less final design spec for Visual Refresh?

Comment 17

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

(In reply to Oleg Zasypkin [:azasypkin] from comment #16)
> (In reply to Arnau March  [:arnau] from comment #15)
> Can you point me to the
> right place where I can look at more or less final design spec for Visual
> Refresh?

Oleg, here is the VD for Messages lists:
https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790
It would be good to have a "no-image" class to remove the border.
Could you work on that?
I guess this is the only thing we need in this bug.

Comment 18

[Oleg Zasypkin [:azasypkin]]

(In reply to Arnau March  [:arnau] from comment #17)
> (In reply to Oleg Zasypkin [:azasypkin] from comment #16)
> > (In reply to Arnau March  [:arnau] from comment #15)
> > Can you point me to the
> > right place where I can look at more or less final design spec for Visual
> > Refresh?
> 
> Oleg, here is the VD for Messages lists:
> https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790
> It would be good to have a "no-image" class to remove the border.
> Could you work on that?
> I guess this is the only thing we need in this bug.

Sorry, just noticed that I didn't attach spec reference ([1]) to my previous message. As per [1] I see that we have 4 different states:

1. When we have one recipient (with contact image) associated with the message [1], [2]. We have styles for this in your patch;
2. When we have one recipient (without contact image) associated with the message [2];
3. When we don't have any recipient associated with the message [1] (gray background + question mark);
4. When we have more than one recipient associated with the message [1] (gray background + number of recipients).

Do we have styles for cases #3 and #4 already? 

Sure I can help with no-image styles. I'd like just to confirm as approach for case #2 are somewhat different from #1, #3 and #4: do we really want to left empty space here or it should be similar to what we have for case #3, but with something other than question mark? I mean some placeholder like here near the 'Eric Schmidt' contact name [3]? 

Thanks!

[1] https://mozilla.app.box.com/s/pov1z0nx7whtwrzmd0dz/1/1828237473/16061562207/1
[2] https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790
[3] https://developer.android.com/design/media/swipe_views.png

Comment 19

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

I guess we should leave that for next week when Vicky is back from PTO :(
I also have some concerns for lists BB.

Comment 20

[Oleg Zasypkin [:azasypkin]]

(In reply to Arnau March  [:arnau] from comment #19)
> I guess we should leave that for next week when Vicky is back from PTO :(
> I also have some concerns for lists BB.

Ok, let's raise it once again next week.

Victoria, can you please share your thoughts on comment 18? Once you're back from PTO :)

Comment 21

[Julien Wajsberg [:julienw]]

I think we can still move forward.

see [1] for the visual mockup, we clearly see that there is an empty space in case 2.

For cases 3 and 4 we can still provide some classes and dataset and then we'll see how we can use them when Victoria provides us the final spec for this.

So let's move forward here :)

[1] https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790

Comment 22

[Victoria Gerchinhoren [:vicky]]

(In reply to Oleg Zasypkin [:azasypkin] from comment #18)
> (In reply to Arnau March  [:arnau] from comment #17)
> > (In reply to Oleg Zasypkin [:azasypkin] from comment #16)
> > > (In reply to Arnau March  [:arnau] from comment #15)
> > > Can you point me to the
> > > right place where I can look at more or less final design spec for Visual
> > > Refresh?
> > 
> > Oleg, here is the VD for Messages lists:
> > https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790
> > It would be good to have a "no-image" class to remove the border.
> > Could you work on that?
> > I guess this is the only thing we need in this bug.
> 
> Sorry, just noticed that I didn't attach spec reference ([1]) to my previous
> message. As per [1] I see that we have 4 different states:
> 
> 1. When we have one recipient (with contact image) associated with the
> message [1], [2]. We have styles for this in your patch;
> 2. When we have one recipient (without contact image) associated with the
> message [2];
> 3. When we don't have any recipient associated with the message [1] (gray
> background + question mark);
> 4. When we have more than one recipient associated with the message [1]
> (gray background + number of recipients).
> 
> Do we have styles for cases #3 and #4 already? 
> 
> Sure I can help with no-image styles. I'd like just to confirm as approach
> for case #2 are somewhat different from #1, #3 and #4: do we really want to
> left empty space here or it should be similar to what we have for case #3,
> but with something other than question mark? I mean some placeholder like
> here near the 'Eric Schmidt' contact name [3]? 
> 
> Thanks!
> 
> [1]
> https://mozilla.app.box.com/s/pov1z0nx7whtwrzmd0dz/1/1828237473/16061562207/1
> [2] https://bug950175.bugzilla.mozilla.org/attachment.cgi?id=8394790
> [3] https://developer.android.com/design/media/swipe_views.png

Oleg, this grey images were placeholders ment to be replaced by a custom designed image made by our new illustrator in the team, Sabrina. But I haven't seen any progress in that area, so NI to Stephany as she should know the state of this. If not, please, do not use any generic image and leave the space empty as we have been doing so far. THanks!

Comment 23

[Patryk Adamczyk [:patryk] UX]

Oleg please refer to comment 22. We do have new generic images on the way however they will likely be for v.2.1+

Comment 24

[Stephany Wilkes]

Patryk has responded with the information requested of me.

Comment 25

[Julien Wajsberg [:julienw]]

All dependencies bug are fixed.

Comment 26

[Noemí Freire (:noemi)]

Attachment: 2014-04-30-master.png

Hi,

It is not clear to me how it should look like in 2.0 (mainly) in case of #3 (no recipient), #4 (more than one recipient) scenarios.
Please see the screenshot attached showing the current behavior in today's (4/30) master build:
Device: Hamachi
Gecko: 13b2542
Gaia: 08ea844
BuildId: 20140430075058
Platform version: 32.0a1

1. When we have one recipient (with contact image) associated with the message -> The contact image is shown (OK)
2. When we have one recipient (without contact image) associated with the message -> no image is shown (OK)
3. When we don't have any recipient associated with the message -> no image is shown (OK?)
4. When we have more than one recipient associated with the message -> the image associated to one of the contacts is shown (KO?)

ni to visual design team to clarify 2.0 scenario and open follow up bugs if needed. Thanks!

Comment 27

[Victoria Gerchinhoren [:vicky]]

(In reply to Noemí Freire (:noemi) from comment #26)

> 3. When we don't have any recipient associated with the message -> no image
> is shown (OK?)
OK
> 4. When we have more than one recipient associated with the message -> the
> image associated to one of the contacts is shown (KO?)

A circle with the number of recipients of that message will be shown. Will provide specs for this next week.
Thanks.

Comment 28

[Noemí Freire (:noemi)]

(In reply to Victoria Gerchinhoren [:vicky] from comment #27)
> (In reply to Noemí Freire (:noemi) from comment #26)
> > 4. When we have more than one recipient associated with the message -> the
> > image associated to one of the contacts is shown (KO?)
> 
> A circle with the number of recipients of that message will be shown. Will
> provide specs for this next week.
> Thanks.

A follow up has been created to track scenario #4, please refer to Bug 1003843.

Comment 29

[Loli (:lolimartinezcr)]

Tested and working
1.5
Hamachi
Gecko: d6d67dao
Gaia: 9078b76

Comment 30

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

https://moztrap.mozilla.org/manage/case/8071/
https://moztrap.mozilla.org/manage/case/7973/