1037650 - Introducing the Toast with in SMS app for Delete and Mark as Read/Unread and remove the existing Confirmation box

Status: RESOLVED DUPLICATE of bug 1121863

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

Description

[kumar rishav (:rishav_)]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140608211622

Steps to reproduce:

As per Omega proposal ( Bug 829820 )
In SMS app, Current confirmation box will get replaced by Toast with undo action for Delete and Mark as Read/Unread .
Omega proposal (Bug 829820) : https://bugzilla.mozilla.org/attachment.cgi?id=8443189
Toast Design and spec (Bug 1020306) : https://bug1020306.bugzilla.mozilla.org/attachment.cgi?id=8443409

Comment 1

[Gabriele Svelto [:gsvelto]]

Confirming and CC'ing the SMS peers.

Comment 2

[Julien Wajsberg [:julienw]]

Thanks for the bug ! I'm removing the dependencies as I feel they're wrong.

Comment 3

[kumar rishav (:rishav_)]

Changing the title of bug. Undo action will be done in other bug:   BUg 1121863.

Comment 4

[kumar rishav (:rishav_)]

Hey Fang
What should we do for toast design, use building blocks (used in: message saved as draft) or use victoria gave https://bug1020306.bugzilla.mozilla.org/attachment.cgi?id=8443408 .

As per my suggestion, victoria design looks better, also we should need to update draft message toast if we chose victoria design, so that we have uniform design for toast.

Another reason for choosing victoria design is : the height and width, also it's easy to click the undo icon if it is in between (i mean..toast in between not at bottom)

Thanks

Comment 5

[kumar rishav (:rishav_)]

Attachment: WIP-Patch

Hi Julienw
Here is the WIP patch.
Few things i want to clear about the patch.
1. patch may have linting issue and for now there is no unit test. I will look into these, once code flow get positive feedback
2.Css for toast: for now i used victoria one, later i will change after final decision.
3 I would suggest to remove waitingscreen in delete, as it's giving flickering effect which looks weird.
4.i used promise only in bulk deletion of thread not for single thread.

Looking forward for your suggestion :)

Comment 6

[Julien Wajsberg [:julienw]]

Comment on attachment 8554869 [details] [review]
WIP-Patch

Gave feedback on github.

I think the "delete" and "mark as read" cases are quite difficult because they involve operations we can't really undo and so we need to delay the real action, but still display an UI that simulates this action.

Therefore I suggest we start smaller: introduce a UndoManager object that would work for the "save draft" and/or "draft discarded" operation. "Draft discarding" is also destructive, but it's an action that is a lot easier than the deletion. So I think it will be easier to think with this action than with the delete action.

This could be done in another bug of course. Then we can come back here on this more complex use case.

Thanks !

Comment 7

[Julien Wajsberg [:julienw]]

(In reply to kumar rishav (:rishav_) from comment #5)

> 3 I would suggest to remove waitingscreen in delete, as it's giving
> flickering effect which looks weird.

I think we can definitely remove the waitingscreen especially because we won't do the real delete at that moment because we'll delay this delete.

What I can suggest instead is having a different toast.

1. user presses the "delete" button
2. we exit "edit" mode
3. we display a toast: "Pending delete operation in x seconds | ⤺"
4. the "x" seconds decreases until...
5. Change text to "deleting... | rotating ⥁" and apply the deletion
6. Hiding the toast when the action finishes.

I've mixed feelings about this idea; sometimes it's better if the user does not know what happens behind. On the other hand when deleting a lot of threads it can take time and make the phone slow.

However when we profiled in the past, we saw that the rotating arrow itself is taking some CPU. So maybe by simply not putting it, the deleration operaton will be faster :) People don't usually delete a lot of messages IMO.

Another thought: during the deletion operation, we first gather the message ids, and only then we delete them all. Maybe we can gather the message ids silently while the toast is displayed, and this would make the delete operation a lot faster, and we wouldn't need this toast.

So... I think we should experiment with this last thought and feel if the phone feels sluggish. If the phone feels sluggish then I think we need to give feedback to the user, otherwise we can just make the user feels everything "just works".

Removing the NI for Fang for now. I think we need to investigate all of this and maybe we'll need new UX. (and maybe not :) ).

Feel free to ask if anything is not really clear.

Comment 8

[kumar rishav (:rishav_)]

Hey Fang
I would to you know your visual/ui/ux input for this bug (WIP).
you can have a look on the demo video: https://www.youtube.com/watch?v=xCUW1FkQnHM
Thanks

Comment 9

[Fang Shih [:fang]]

(In reply to kumar rishav (:rishav_) from comment #8)
> Hey Fang
> I would to you know your visual/ui/ux input for this bug (WIP).
> you can have a look on the demo video:
> https://www.youtube.com/watch?v=xCUW1FkQnHM
> Thanks

Hi Kumar,
Thanks for the video demo. I think the main visual issue here is the in app toast. We may need it to follow the same design from building block. Because we are not the only app that have this type of toast, we also use in Email app and Clock app. We need them to be consistent for the entire system. And for the UX flow, we may need help from UX designer to take a look at this. Feel free to let me know if you need anything from me. Thanks!

Comment 10

[kumar rishav (:rishav_)]

Hi Fang,
I think, i followed the same design from building blocks. In fact i copied the design exactly, what we are using while saving a message (i.e for draft). Can you tell me more, how it's different from existing design?
It will be nice if you can provide visual design for this.

Comment 11

[Julien Wajsberg [:julienw]]

I think the 'Undo' action button probably needs another visual design. Fang, do you know any place where we have such undo action in the system?

Comment 12

[Fang Shih [:fang]]

Hi Kumar,

Sorry for the unclear comment. I think is like Julien said. For the undo action, we need to sync up with our Email app using icon as well. I updated the visual spec for the in app toast of our email app for your reference ( Page 1 and 3 ). It has undo button come with it as well. It will also show the current height of the toast. Let me know if you need any other assets. Thanks!

Comment 13

[Fang Shih [:fang]]

Attachment: Undo Email.zip

Here are the spec and assets.

Comment 14

[kumar rishav (:rishav_)]

Hi Fang
Sorry to say, but this undo asset/spec doesn't give feel of undo. Also, i think the undo which email is using is this one: https://github.com/mozilla-b2g/gaia/blob/master/apps/email/style/images/icons/undo%402.25x.png (which seems better in term of visual design as well as position of undo icon in taste). What you say julien ?
Thanks

Comment 15

[Fang Shih [:fang]]

Hey Kumar,

Yes, please use the same one as email one. We should all using the same icon! I forgot I worked on that new version of undo design directly with James long time ago. So I grabbed the outdated version by accident. Sorry about that. But my point is just using the same one as current Email app! So they can look like one system:) Thanks!

Comment 16

[kumar rishav (:rishav_)]

Ok, so as i have assets now, it will be nice if you can give spec for this :)
Thanks

Comment 17

[Fang Shih [:fang]]

Attachment: Toast_spec.jpg

Attached the spec, Thanks!

Comment 18

[kumar rishav (:rishav_)]

[New feature]
Postponed till V2.5 release.

Comment 19

[kumar rishav (:rishav_)]

Will be fixed as part of Bug 1121863
Further discussion and patch in Bug 1121863

Thanks