[Messages] Make the thread/message edit mode to match the style used by other applications

RESOLVED FIXED

Status

defect
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: gsvelto, Assigned: rishav_, Mentored)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(6 attachments, 10 obsolete attachments)

39.02 KB, image/png
Details
103.41 KB, image/png
Details
63.57 KB, image/png
Details
11.93 KB, application/zip
Details
46 bytes, text/x-github-pull-request
julienw
: review+
julienw
: feedback+
Details | Review
92.99 KB, application/gzip
Details
+++ This bug was initially created as a clone of Bug #829820 +++

The edit mode used for threads and messages is currently different than what's offered by other gaia apps (e.g. the e-mail app). To pave the way for future functionality (such as mark-as-read) we should modify it to be more consistent with the rest of Gaia.

Attachment 8417921 [details] provides the new design.

Some of the work in this bug started in bug 829820 so see the discussion there for some background on the design decisions.
Hi all
Here are the screen shots after implementing the changes in edit mode for thread list
Thanks
Hi all
Here are the screen shots after implementing the changes in edit mode for thread list
Thanks
Sorry 
Changes in Comment#2 : screen shots after implementing the changes in edit mode for message list for each thread
Hi 

After implementing the changes in Edit mode for messages list (Sent and Received) of each thread

These are all the screen shots after implementing the changes:

Here is the Patch
https://github.com/kumarrishav/gaia/compare/sms-interaction

Thanks
Hi
I attached the PR (upto, what is there in screen shots, previously uploaded).Unit test might not run.Icons are not used till now.
Thanks
Attachment #8434477 - Attachment is obsolete: true
Latest Patch
Hi Gabriele

I ran the unit test and got 6 errors.Then i modified the related files.So Now unit test running successully without any error.Please have a look and suggest the necessary changes.
PR: https://github.com/kumarrishav/gaia/commit/f1ea24c5a6ae3275931cd97fa25f86256e989660

Thanks
Attachment #8434571 - Flags: review?(gsvelto)
Flags: needinfo?(gsvelto)
Hi Omega, as we've moved the work here I wanted to ask you just a couple of final clarifications to sum up all the discussion in bug 829820. I'm assuming that the scope of this bug is to implement your proposal in attachment 8417921 [details] but without the mark-as-read part which will be tackled in bug 829820.

- For the delete command shall we re-use the icon used by the e-mail app? This seems the quickest and more consistent way to do it. We'd use the e-mail mark-as-read/unread app too later on.

- For the select all / deselect all button, do we already have some icons ready? If not to whom should we request them?
Flags: needinfo?(gsvelto) → needinfo?(ofeng)
Comment on attachment 8434571 [details] [diff] [review]
Patch : Unit test modification

The changes you've done only make the unit-tests pass but fail to check the new functionality. Since the select/deselect buttons are now unified you have to check two things for every previous situation:

- that the button is enabled / disabled depending on the situation

- that the button is set to select all / deselect all dependoning on the situation, i.e. you have to check that the button is set up to do what it's supposed to do
Attachment #8434571 - Flags: review?(gsvelto) → review-
Hi all
Purpose of this bug is to "Make the thread/message edit mode to match the style used by other applications ".So as per Omega Perposal and many changes/suggestion are coming so i would like define exact scope of this bug)

1. Select-all/Deselct-all button at top right corner (header) in thread-edit mode. 
2. Delete button at bottom in thread-edit mode.
3. Addition of blue dot(for unread messages) in thread-edit mode.
4. change in postion of checkbox and blue dot (similar to email app or omega proposal) in thread-edit mode.
5. change in color of checkbox (from red to blue:similar to email app or omega proposal) in thread-edit mode.
6. Necessary changes/addition in menu option or header.
7. Similar changes (1,2,5,6) for message-edit mode.

Refer to attached screen shots or Omega proposal (>Select items) https://bug829820.bugzilla.mozilla.org/attachment.cgi?id=8417921

I want to know your suggestions/comments if i missed anything or should add anything.

I like to know your suggestions on following too so that i can proceed with my work further.
Also For icons for select all/deselect all and delete , i want suggestions from UX people, Visual input people and all there and i would like to report/file separate bug for 'replacing text with icons: select/deselect all and delete'.  Also i think icons are not available for select all/deselect all.  

Thanks
(In reply to Gabriele Svelto [:gsvelto] from comment #9)
> Hi Omega, as we've moved the work here I wanted to ask you just a couple of
> final clarifications to sum up all the discussion in bug 829820. I'm
> assuming that the scope of this bug is to implement your proposal in
> attachment 8417921 [details] but without the mark-as-read part which will be
> tackled in bug 829820.
> 
> - For the delete command shall we re-use the icon used by the e-mail app?
> This seems the quickest and more consistent way to do it. We'd use the
> e-mail mark-as-read/unread app too later on.
> 
> - For the select all / deselect all button, do we already have some icons
> ready? If not to whom should we request them?

I think we should reuse Email's icons, but still ni? Vicky for her comments.

For the select all/deselect all, I prefer using text.
Flags: needinfo?(vpg)
Flags: needinfo?(ofeng)
Flags: needinfo?(jelee)
Agree with Omega!
Flags: needinfo?(jelee)
(In reply to kumar rishav from comment #11)
> Hi all
> Purpose of this bug is to "Make the thread/message edit mode to match the
> style used by other applications ".So as per Omega Perposal and many
> changes/suggestion are coming so i would like define exact scope of this bug)
> 
> 1. Select-all/Deselct-all button at top right corner (header) in thread-edit
> mode. 
> 2. Delete button at bottom in thread-edit mode.
> 3. Addition of blue dot(for unread messages) in thread-edit mode.
> 4. change in postion of checkbox and blue dot (similar to email app or omega
> proposal) in thread-edit mode.
> 5. change in color of checkbox (from red to blue:similar to email app or
> omega proposal) in thread-edit mode.
> 6. Necessary changes/addition in menu option or header.
> 7. Similar changes (1,2,5,6) for message-edit mode.
> 
> Refer to attached screen shots or Omega proposal (>Select items)
> https://bug829820.bugzilla.mozilla.org/attachment.cgi?id=8417921
> 
> I want to know your suggestions/comments if i missed anything or should add
> anything.
> 
> I like to know your suggestions on following too so that i can proceed with
> my work further.
> Also For icons for select all/deselect all and delete , i want suggestions
> from UX people, Visual input people and all there and i would like to
> report/file separate bug for 'replacing text with icons: select/deselect all
> and delete'.  Also i think icons are not available for select all/deselect
> all.  
> 
> Thanks

Hi Kumar.

Bare in mind that what Omega has provided is an interaction specs document and in any case this represent a real layout. You should wait for the VISUAL DESIGN SPEC to come before implementing the final layout and ask for UI review before landing any patch. 

Please follow the usual way of working to avoid visual buggy screens. 

Are you copying email behaviour exactly as it is implemented?

Thanks
Flags: needinfo?(vpg) → needinfo?(rishav006)
(In reply to kumar rishav from comment #1)
> Created attachment 8434169 [details]
> Screen shots : After implementing the changes in Edit mode for Thread list
> 
> Hi all
> Here are the screen shots after implementing the changes in edit mode for
> thread list
> Thanks

Kumar,
This implementation is not correct. PLease ask for visual specs on this kind of changes and UI review to myself before submiting the patch. We cannot afford creating buggy layouts at this point.

Thanks
Attachment #8434169 - Attachment is obsolete: true
Attachment #8434172 - Attachment is obsolete: true
Attachment #8434182 - Attachment is obsolete: true
Flags: needinfo?(rishav006)
Hi vicky
Sorry, i could not attached the latest changes.
Now i have attached two.Please have a look and give your view on this as your review is very important on this.
I am working as per omega proposal and refering the email app where there is similarity between these two.
Flags: needinfo?(vpg)
Hi vicky
Sure , i will ask for UX and Visual Design review before landing the patch.But i want to get clear that am i on right track? ...as there is lots of changes going to implement as per omega proposal, so i am asking for comments from UX and visual people from time to time when i feel any doubt.It will be disappointing for me if i will get to know at end after doing this much ,that patch won't land.So I am asking for your reviews.It will be great if you give valuable comments on this @vicky.
Thanks
Kumar, that's exactly the right process. Thank you! Vicky, let me know if you need more support from VxD on these reviews.
Hi Wilkes
I didn't get exactly your above comment.It would be great if you have a look on attachment and give your view and where i am going wrong.Also as in above comments vicky told its buggy layout, so i want to know the errors so that i can recitify those.

(In reply to Victoria Gerchinhoren [:vicky] from comment #15)
> 
> Kumar,
> This implementation is not correct. PLease ask for visual specs on this kind
> of changes and UI review to myself before submiting the patch. We cannot
> afford creating buggy layouts at this point.
> 
> Thanks

Thanks
Flags: needinfo?(swilkes)
(In reply to kumar rishav from comment #17)
> Created attachment 8440697 [details]
> Screen shots : After implementing the changes in Edit mode for messages list
> of each thread
> 
> Hi vicky
> Sorry, i could not attached the latest changes.
> Now i have attached two.Please have a look and give your view on this as
> your review is very important on this.
> I am working as per omega proposal and refering the email app where there is
> similarity between these two.

Hi Kumar, can you list the changes you did respect to the previus version? I see the check boxes are blue instead of red, but when the only thing you can do there is delete, from my POV, red is the correct color. Also, if the check boxes are not red, why isn't the button red? You're deleting stuff, user should be adviced of this kind of actions. 

I understand the use of light blue for check boxes when you have other options like "mark as unread" or "move to folder" but we did agree back in the day, that deleting action should be red and that is not inconsistent with the rest of the system, it's just color coding.

For me this is a regression. 

And I don't see interaction specs indicating this particular scenario. So pinging Omega to clarify.

Also, note that this provided documents are not designs, this are just interaction specs that do not ilustrate the definitive design (which in this case it works as the elements are the building blocks ones).
Flags: needinfo?(vpg) → needinfo?(ofeng)
Hi Vicky
What i did and going to do , is all according to omega proposal as i saw everyone were agree with his proposal.
Omega designed the proposal keeping all the changes in mind.Also, as now there will be mark as read/unread option, so is it still necessary to keep check box red ? Buttons are not red because now dialogue box is gonna replace with toast and delete button text with icons.

Following are changes i have did so far with respect to previous version :

1. Select-all/Deselct-all button at top right corner (header) in thread-edit mode. 
2. Delete button at bottom in thread-edit mode.
3. Addition of blue dot(for unread messages) in thread-edit mode.
4. change in position (little bit shift) of checkbox and blue dot (similar to email app or omega proposal) in thread-edit mode.
5. change in color of checkbox (from red to blue:similar to email app or omega proposal) in thread-edit mode.
6. Necessary changes/addition in menu option or header.
7. Similar changes (1,2,5,6) for message-edit mode.

Things still left to modify in sms app (as per omega proposal) :
1.Use of delete icons instead for Delete text.
2.Addition of mark as read/unread icons (https://bugzilla.mozilla.org/show_bug.cgi?id=829820)
3.Replace the confirmation dialogue box with toast (for 5 sec ).
4.Undo action for delete and mark as read/unread (discussion going on this)

Thanks
Flags: needinfo?(vpg)
Hi Kumar: I apologize for any confusion, but there are two designers involved here. Omega did the interaction design (IxD) specs and Vicky does the visual design (VxD) specs. This is why they both have input on this bug. 

Omega and Vicky, I am unflagging myself as you are both sufficient here, and I hope we can true up the IxD and VxD specs in short order.
Flags: needinfo?(swilkes)
Hello Kumar, please refer to attachment 8441862 [details] p.7 for the flow of deleting messages from message thread. Note that the color of checkbox is not be specified, as Vicky pointed out, the document is just an interaction spec which do not illustrate the definitive design. Thanks!
Flags: needinfo?(ofeng)
Hi jenny
What should/can I do for definitive design so that I can work further on this and patch can land.
Thanks
(In reply to kumar rishav from comment #22)
> Hi Vicky
> What i did and going to do , is all according to omega proposal as i saw
> everyone were agree with his proposal.
> Omega designed the proposal keeping all the changes in mind.Also, as now
> there will be mark as read/unread option, so is it still necessary to keep
> check box red ? Buttons are not red because now dialogue box is gonna
> replace with toast and delete button text with icons.
> 
> Following are changes i have did so far with respect to previous version :
> 
> 1. Select-all/Deselct-all button at top right corner (header) in thread-edit
> mode. 
> 2. Delete button at bottom in thread-edit mode.
> 3. Addition of blue dot(for unread messages) in thread-edit mode.
> 4. change in position (little bit shift) of checkbox and blue dot (similar
> to email app or omega proposal) in thread-edit mode.
> 5. change in color of checkbox (from red to blue:similar to email app or
> omega proposal) in thread-edit mode.
> 6. Necessary changes/addition in menu option or header.
> 7. Similar changes (1,2,5,6) for message-edit mode.
> 
> Things still left to modify in sms app (as per omega proposal) :
> 1.Use of delete icons instead for Delete text.
> 2.Addition of mark as read/unread icons
> (https://bugzilla.mozilla.org/show_bug.cgi?id=829820)
> 3.Replace the confirmation dialogue box with toast (for 5 sec ).
> 4.Undo action for delete and mark as read/unread (discussion going on this)
> 
> Thanks

Kumar,
I didn't get back to you yet because IA and VD will have a meeting to sync uo around this tomorrow and reach a conclusion so we don't have different inputs here. Sorry for the confusion but this is something that first needs to be sorted out from UX (visual is also UX BTW) perspective first. If there are instances where you need no visuals are the patterns are repeated I'll let you know, and also if there are places where visuals will be provided. 

On the other hand, I suppose you're aware of Building Blocks right? Because reusing this patterns in more than 1 app, would mean including this pattern in BBs so 2 things that look the same are actually the same and can be also spread along the system if needed.

I am NI Arnau, who's the BB owner to align with you on how to do this best.

More tomorrow.

Thanks.
Flags: needinfo?(arnau)
Kumar,

We have reached a conclusion and visual design is being produced. You'll have visuals with sizing and color specs for tomorrow morning (europe time). 

Some considerations:
1. Check boxes will be blue in general but in the messages thread, where the only action possible is deleting. This is both due to the kind of action the user is doing and also for legibility issues as the light blue is not readable over the light green bubble, both colors are too similar. So for this version of the thread at list we should keep them red.

2. The toast will be red colored only in the case of communicating deletion. This is an exception of the general rule for toasts, but it worth given the kind of dangerous action the user is doing. This kind of system messages are not always read by users and we want to make sure the user notices it making it visually louder.

3. The mark as read/unread icons are just placeholders and new icons with the chat bubble instead of envelopes will be provided for you to use.

Please follow the specs that will be provided and sync with Arnau in regard of translating this kind of behavior to building blocks.

THanks!
Please see bug 829820 for the latest UX spec. I modified something by the conclusion in the discussion.
Notice that this is a UX spec, so please also see visual details in the visual spec that Vicky will provide soon then. Thanks!
Hey guys,
As discussed yesterday with Vicky, Omega and Carrie, looks like edit mode component is going to change a bit from the current one, mainly because of the introduction of a toolbar instead of the current buttons we have at the bottom.

So my suggestion here would be:
1- Solve this patch using large rounded buttons at the bottom.
2- Create a follow up to replace buttons with a toolbar (this time using web components instead of BB, not to break other apps: call log, contacts... ).
3- After the this follow up, if everybody is happy with the final result we should add the toolbar to all other apps using edit mode BB.
Flags: needinfo?(arnau)
Flags: needinfo?(vpg)
Attachment #8443408 - Attachment description: Spec_SMS_Thread_Editmode.png → Visual Spec SMS_Thread_Editmode
Kumar,
PLease find attached the visual specs to adjust implementation.
Note that the "mark as read and unread" icons are just placeholders and new icons are to come. They should represent the messaging app and not be confused with the ones in email app.

If you have any question please NI me. And prior submiting the patch ask for UI review with screenshots of each case.

Thanks!
SMS Inbox toolbar "mark as read/unread" icons in all sizes.
Blocks: 1037650
Mentor: gsvelto
Hi Gabriele
I have submitted the patch for this bug.Have a look on this patch.Also i added the screen shots too after implementing it.
Thanks
Attachment #8434492 - Attachment is obsolete: true
Attachment #8434571 - Attachment is obsolete: true
Attachment #8440695 - Attachment is obsolete: true
Attachment #8440697 - Attachment is obsolete: true
Attachment #8456135 - Flags: feedback?(gsvelto)
Screen shots
Hi Gabriele
Now have a look on patch.Now i have included your feedback (comments on github).
Thanks
Comment on attachment 8456135 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

Patch for review
Attachment #8456135 - Flags: review?(gsvelto)
Comment on attachment 8456135 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

Sorry for the delay Kumar but I needed the time to check all the UI bits accurately by taking snapshots and I couldn't find enough time until now.

So, the code is in good shape for me and I don't think it needs further changes though we might want to add a couple of comments here and there to clear up what we're trying to do.

The UI part however needs some additional work, there's a few things that are not properly aligned yet and we have to tackle them. I've compared your patch with the screenshots that were attached and noticed the following discrepancies:

- the checkbox should have 1.5rem of space to its left in inbox edit-mode and 1.0rem of space in thread edit-mode but it has 0.9rem instead in both modes

- the unread dot in the inbox is not centered into its area, it should sit at 1.5rem from the left border and instead it's at 2.0rem

- in inbox edit-mode the message headers should be at 5.5rem from the left, they're at 5.0rem instead

Try fixing this issues and ask for feedback again, we're almost there.
Attachment #8456135 - Flags: review?(gsvelto)
Attachment #8456135 - Flags: feedback?(gsvelto)
Attachment #8456135 - Flags: feedback-
Hi
Here is the patch.I have included the feedback in this latest patch.
Thanks
Attachment #8456135 - Attachment is obsolete: true
Attachment #8456142 - Attachment is obsolete: true
Attachment #8463388 - Flags: review?(gsvelto)
Comment on attachment 8463388 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

This is mostly good for me with the following issues addressed:

- Add a comment describing the functionality of toggleCheckedAll()

- Make sure that the bottom bar holding the delete button is 5.5rem tall, currently it's 7rem

Also while the CSS changes provide the desired effect I'm not 100% positive they're the best way to achieve it which brings to the second part of your work here: besides my review please ask for review to another one of the SMS peers as we have agreed. Once you have both my and his review you'll be OK to land this.
Attachment #8463388 - Flags: review?(gsvelto) → review+
Comment on attachment 8463388 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

Hi Gabriele
I have added comments to toggleCheckedAll() to describe functionality (for both files : thread_ui.js & thread_list_ui.js).

Regarding the delete button height (5.5rem): This thing i already added to patch for next bug as in that bug we are implementing Icons for delete and unread/read.So currently height will be 7rem in this patch.

Thanks
Attachment #8463388 - Flags: review+ → review?(felash)
Comment on attachment 8463388 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

This is quite a good job !

I found a regression: in the Inbox (thread list), the message text needs to be "ellipsed" (using "text-overflow: ellipsis") when it's longer than the available space, but now we don't see the ellipsis anymore.

Otherwise it looks good. I haven't looked very deep in the code yet, but the changes look quite well contained so it should be ok.

I'll try to give a deeper look during the weekend so I'm keeping the r? request for now.
Attachment #8463388 - Flags: feedback+
Hi Juliew

Are you talking about this(regression issue) https://bug1020306.bugzilla.mozilla.org/attachment.cgi?id=8443409 ?
Actually text-overflow: ellipsis is still there for longer names/text. But as per new spec the gap between blue dot and starting of name is now 1.5rem (which was not before) so it got shifted by 0.5 rem.So i ellipsis space got reduced. I think you are talking about this. Right?

Thanks
No, I mean the ellipsis when the "edit mode" is enabled. Sorry, it wasn't clear that I talked about this mode, in my comment 43.

Thanks Kumar!
Hi Julienw
I got your point.That issue is now fixed.
I need some clarifications.
Currently the sender's image icon which is present in thread list mode, is not visible in thread edit mode due to incorrect transition.The icons should be present in edit mode also.Should i file separate bug for this or include in this.
Was this intentionally (i mean.. sender's images) removed from edit mode in previous version of release version.
I think this icon should be implemented in all versions of firefox OS.
  
Also in Vicky's visual specs, icons is present in both mode i.e Thread list and Thread list edit.

Thanks
Flags: needinfo?(gsvelto)
Flags: needinfo?(felash)
I'm quite sure it was made on purpose. Moreover, I think the paddings were carefully choosen so that (checkbox + small icon) == (contact picture width). As a result we could use a nice and efficient "transform" transition.

A second reason was that the contact pictures are cluttering the view that is already quite full.

NI Jenny and Fang on this. To be clear, the question is: should the contact pictures be present in the edit mode window for Inbox (aka Thread List) panel?
Flags: needinfo?(jelee)
Flags: needinfo?(fshih)
Flags: needinfo?(felash)
Hi julienw
Anyway i have included this in my patch for now (local repo).I will update the patch (remote) accordingly after getting clearance from Jenny and Fang.
Also ellipsis issue is also fixed.I will update it soon in patch after getting reply from Jenny and fang on contact picture thing. 

Thanks
Hi
I created a patch to include contact images in thread list edit mode.
I have attached the screen shots so that we can see how it looks after adding images.
Implementation of this patch depends on fang and jeeny decision.
Thanks
Comment on attachment 8463388 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

Removing the r? request until Jenny's answer.
Attachment #8463388 - Flags: review?(felash)
(In reply to Julien Wajsberg [:julienw] from comment #50)
> Comment on attachment 8463388 [details] [review]
> Bug 1020306 - Make the thread/message edit mode to match the style used by
> other applications
> 
> Removing the r? request until Jenny's answer.

Hi there, the image should be present in select mode for inbox, as a result, text (contact/message preview) might be shortened.  Thanks!
Flags: needinfo?(jelee)
Flags: needinfo?(fshih)
Jenny or Fang, can you please describe what the animation should be when switching to/from select mode? In the past, we used the following animations:

* top header and bottom "button menu" were sliding down/up
* checkboxes were animating from the left to the right
* text was translating to the right

Now that we need to still display the pictures while retaining the ellipsis, I think it's not possible to do all these animations efficiently. (and actually, not all animations were visible on a real device...)

How about removing the transitions for checkboxes and text?
Flags: needinfo?(jelee)
I think something like how email select mode could work here (go to eamil inbox, tap on the select item button on bottom right and see how things move. From what I see, basically the timestamp stays where it is and sender/mail title/preview along with unread indicator move from left to right a bit, text displayed is shortened, checkbox simply appears). So in message, profile picture stays, contact/message preview move from left to right while text is shortened (with ellipsis), and checkbox simply appears. what do you think :) ?
Flags: needinfo?(jelee)
> contact/message preview move from left to right while text is shortened (with ellipsis),

Problem is that we can't do this animation efficiently :(
Hi,
 
@jenny
> message, profile picture stays, contact/message preview move from left to
> right while text is shortened (with ellipsis), and checkbox simply appears.

In my patch after including contact image, same thing is happening what jenny suggested.I also attached the screnshots above after including contact images.

@julienw 
(In reply to Julien Wajsberg [:julienw] from comment #54) 
> Problem is that we can't do this animation efficiently :(
Hey julienw , can you explain how animation won't be efficient? If we compare with current mode, only thing is needed to change the position of contact images, and also in existing situation, animation/transition is there but it's not visible. Currently contact image is still there but it is out of screen so it's not visible in edit mode. 

Thanks
Flags: needinfo?(jelee)
Flags: needinfo?(felash)
(In reply to kumar rishav from comment #55)
> Hi,
>  
> @jenny
> > message, profile picture stays, contact/message preview move from left to
> > right while text is shortened (with ellipsis), and checkbox simply appears.
> 
> In my patch after including contact image, same thing is happening what
> jenny suggested.I also attached the screnshots above after including contact
> images.
> 
> @julienw 
> (In reply to Julien Wajsberg [:julienw] from comment #54) 
> > Problem is that we can't do this animation efficiently :(
> Hey julienw , can you explain how animation won't be efficient? If we
> compare with current mode, only thing is needed to change the position of
> contact images, and also in existing situation, animation/transition is
> there but it's not visible. Currently contact image is still there but it is
> out of screen so it's not visible in edit mode. 

Yep that's on purpose.

On the phone, the only way to efficiently animate is to animate using "transform" or "opacity". All other animations are not efficient and need several reflows and as a result are not smooth and take more CPU and battery.
Flags: needinfo?(felash)
Oh..
Thanks for info julienw. I wasn't aware that the CSS flows/transitions or animations effect CPU and battery to that extent. :)
Hi Kumar, I don't see the contact picture in select mode, please ni me when it's working properly, thanks!
Flags: needinfo?(jelee)
(In reply to Julien Wajsberg [:julienw] from comment #54)
> > contact/message preview move from left to right while text is shortened (with ellipsis),
> 
> Problem is that we can't do this animation efficiently :(

Hmm if this can't be resolved, we can consider doing other transition. But I'd prefer to align with how email works right now ;)
We can at least try.

Kumar, do you mind if we move the picture/animation things to a separate bug and stick to the current behavior in master here? The goal is to be able to land your patch here and do some experimentations in a separate bug.
Hi jenny

Contact picture is there in select mode after implementing my patch. Check the screenshots in the zipped file i uploaded earlier.  --> third image (https://bugzilla.mozilla.org/attachment.cgi?id=8470851)

Thanks
Flags: needinfo?(jelee)
Attachment #8463388 - Flags: review?(felash)
Hi all

I have filed new bug for implementing contact images in thread list edit mode and experimenting with transition/animation.
Please move to Bug 1053119 (https://bugzilla.mozilla.org/show_bug.cgi?id=1053119) for all discussions.

Thanks
I'll follow up in the new bug, tks!
Flags: needinfo?(jelee)
Comment on attachment 8463388 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

Sorry for the delay, some remaining nits and then we're good.

We'll also need to redo the CSS to make it animatable efficiently on the device. I'd appreciate if you can think of it while working on the bug 1053119. I'll comment there to explain better what's needed.
Attachment #8463388 - Flags: review?(felash)
Comment on attachment 8463388 [details] [review]
Bug 1020306 - Make the thread/message edit mode to match the style used by other applications

r=me
thanks !
Attachment #8463388 - Flags: review+
master: 1ff9755c563a08c0f8061719fb8738e6ebd2b1b5
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Hi all

As this bug is fixed now, we are moving the discussion to other bug.
Please follow Bug 1053119  for discussion related to adding contact images in thread edit mode and modification in existing animation/transition and also trying to implement edit panel using opacity and transform.

Thanks
Flags: needinfo?(gsvelto)
Hi Julienw

Please uplift these to v2.0 as well.

Thanks!
Flags: needinfo?(felash)
(In reply to ankit93040 from comment #68)
> Hi Julienw
> 
> Please uplift these to v2.0 as well.

Definitely not on our side. These are too risky-not necessarychanges to uplift to v2.0 now.
Flags: needinfo?(felash)
No longer blocks: 829820
Blocks: 829820
Summary: Make the thread/message edit mode to match the style used by other applications → [Messages] Make the thread/message edit mode to match the style used by other applications
You need to log in before you can comment on or make changes to this bug.