950175 - (sms-visual-refresh) [meta] Messaging Visual Refresh

Status: RESOLVED FIXED

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

Description

[Patryk Adamczyk [:patryk] UX]

Meta bug for visual design refresh of the messaging app

Comment 1

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. invalid recipient

Comment 2

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. empty

Comment 3

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. 1 recipient

Comment 4

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. 4 recipients

Comment 5

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. recipient hit state

Comment 6

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. Long message

Comment 7

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages Inbox

Comment 8

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages thread idle mode

Comment 9

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages thread Edit mode

Comment 10

[Rick Waldron [:rwaldron]]

(In reply to Victoria Gerchinhoren from comment #5)
> Created attachment 8369954 [details]
> VDR Mockup: Compose. recipient hit state

Generally, "hit state" refers to the state when a mouse click or finger tap occurs, but there is already a "hit state" for all recipients: they flip into "editable" mode.

Comment 11

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages Inbox edit mode

Comment 12

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages thread Edit mode

Comment 13

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages thread idle mode

Comment 14

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual refresh Spec for Messaging

This documents points out the changes to be made in order to visually refresh the app for V1.4 in a reduced scope version.

Comment 15

[Victoria Gerchinhoren [:vicky]]

(In reply to Rick Waldron [:rwaldron] from comment #10)
> (In reply to Victoria Gerchinhoren from comment #5)
> > Created attachment 8369954 [details]
> > VDR Mockup: Compose. recipient hit state
> 
> Generally, "hit state" refers to the state when a mouse click or finger tap
> occurs, but there is already a "hit state" for all recipients: they flip
> into "editable" mode.

The moment between still mode and the editable mode is this hitstate as we need to provide feedback to the user when tapping.

Comment 16

[Stephany Wilkes]

Flagging Wilfred so he is aware of this work.

Comment 17

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual refresh Spec for Messaging

Comment 18

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. invalid recipient

Comment 19

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. invalid recipient

Comment 20

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. empty

Comment 21

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. 1 recipient

Comment 22

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. 4 recipients

Comment 23

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. recipient hit state

Comment 24

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. Long message

Comment 25

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages Inbox

Comment 26

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages thread idle mode

Comment 27

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. invalid recipient

Comment 28

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. empty

Comment 29

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. 1 recipient

Comment 30

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. 4 recipients

Comment 31

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. recipient hit state

Comment 32

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Compose. Long message

Comment 33

[Victoria Gerchinhoren [:vicky]]

Attachment: VDR Mockup: Messages Inbox

Comment 34

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual refresh Spec for Messaging

Comment 35

[Victoria Gerchinhoren [:vicky]]

I have just updated all the documentation to reflect the color change in the Comms Headers. This green color happens only for the Comms Apps and it is part of a larger intention of theming the different apps of the system grouping them by type (Media, Productivity, Comms and Settings).

This change will happen at a Building Block level, so it does not mean any extra effort from the Comms team. (https://bugzilla.mozilla.org/show_bug.cgi?id=985995)

Thanks.

Comment 36

[Julien Wajsberg [:julienw]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #35)

> This change will happen at a Building Block level, so it does not mean any
> extra effort from the Comms team.
> (https://bugzilla.mozilla.org/show_bug.cgi?id=985995)
> 
> Thanks.

If I'm not wrong we'll still need to add something in our markup so that the correct CSS applies.

Thanks Victoria for the various mockups!

Comment 37

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

> 
> If I'm not wrong we'll still need to add something in our markup so that the
> correct CSS applies.
> 

Yes, we will add class="skin-comms" to all comms apps (if possible in the body of each HTML), and will use that class in all BB that needs to be customized.
Same way we are doing right now in headers BB with skin-organic and skin-dark.

Comment 38

[Victoria Gerchinhoren [:vicky]]

Attachment: New files place holders for Messaging thread.

Comment 39

[Victoria Gerchinhoren [:vicky]]

Attachment: Refreshed thumbnails for file placeholders

Comment 40

[Victoria Gerchinhoren [:vicky]]

Attachment: Mockup of how the thread should look like with the new placeholders

Comment 41

[Pau Masiá [:Pau]]

Attachment: Asset. SVG play overlay

Play to place overlaying the video frame thumbnail.

Comment 42

[Pau Masiá [:Pau]]

Attachment: Mockup of how the thread should look like with the new placeholders. Video frame

Comment 43

[Victoria Gerchinhoren [:vicky]]

Attachment: Refreshed thumbnails for file placeholders

Comment 44

[Victoria Gerchinhoren [:vicky]]

Updated the placeholders .zip including the hitstates.

Comment 45

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual refresh Spec for Messaging (2)

Changed a note, the time stamp color in the green bubbles inside the messages thread.

Comment 46

[Joan Leon [:joan]]

Attachment: Path in github

Comment 47

[Joan Leon [:joan]]

Comment on attachment 8403467 [details] [review]
Path in github

This patch it's for composer

Comment 48

[Julien Wajsberg [:julienw]]

Joan, can you please file a separate bug for this patch?

Comment 49

[Joan Leon [:joan]]

Attachment: VR_Message_Composer.zip

Screenshots of Composer

Comment 50

[Joan Leon [:joan]]

Comment on attachment 8403467 [details] [review]
Path in github

Move to bug 963018

Comment 51

[Joan Leon [:joan]]

Comment on attachment 8403469 [details]
VR_Message_Composer.zip

Move to bug 963018

Comment 53

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual SPEC: Thread_colors

New bubble's color spec

Comment 54

[Victoria Gerchinhoren [:vicky]]

As per discussed in bug 985995, please update the bubbles backgrpund and text color to get a better contrast and legibility.

Thanks!

Comment 55

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

Reset the blocking-b2g flag to backlog.
For COMMS team's committed feature, it blocks the meta bug comms_2.0.

Comment 56

[Julien Wajsberg [:julienw]]

Hey Victoria, 

I've checked the new bubble's color spec, and it looks good regarding accessibility ! Thanks !

Comment 57

[Pau Masiá [:Pau]]

Attachment: VDR Mockup: Compose. Contacts Suggestions

Contacts Suggestions visual mockup.

Comment 58

[Julien Wajsberg [:julienw]]

Victoria, one question about the composer view:
where should be the "To:" label when there are several lines of recipients and the user slides down the recipient panel? Should the "To:" label slide down along the last recipient line, or should it stay at the same place, or you don't mind?

Comment 59

[Victoria Gerchinhoren [:vicky]]

(In reply to Julien Wajsberg [:julienw] from comment #58)
> Victoria, one question about the composer view:
> where should be the "To:" label when there are several lines of recipients
> and the user slides down the recipient panel? Should the "To:" label slide
> down along the last recipient line, or should it stay at the same place, or
> you don't mind?

Hi Julien,
This was already asked by Joan, I think the best is that slides down with the last recipients, so it lines up with the "+" button and the area where further recipients are added.

Thanks!

Comment 60

[Eric Chang [:ericcc] [:echang]]

Functional Regression test cases
http://mzl.la/1jWCccD

Comment 61

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual SPEC: carrier and date subheaders

Comment 63

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

Clear feature-b2g flag for this is meta bug which may include bigger set rather than must-have feature works.

Comment 64

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

handled under various SMS tests