1242706 - Make sharing affordances in desktop invitation view clearer and modal

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P2)

Description

[Dan Mosedale (:dmosedale, :dmose)]

The URL field of this bug contains an initial mock.  Acceptance criteria need to be nailed down.

Comment 1

[Pau Masiá [:Pau]]

s xRelated to the implementation of this enhancement of the conversation window, this design corresponds to the case where both the sharing panel and the conversation window are living together.

In case we cannot have them working in conjunction and we first have the conversation window enhancements, we will need this design to change a bit:

1- We first show the screen number 2 (sharing options visible upfront).
2- Once the user has clicked in either one of the three options, show the screen number 3.

Conclusion: Screen number one is not needed here.

Thanks!

Comment 2

[Romain Testard [:RT]]

As discussed we need the following changes in the UX:
- Just 1 screen with the 3 sharing options
- modified text (Share the link you copied with a friend so you can start browsing the web together)
- Webcam self view by transparency
- Mute/unmute buttons replaces text chat

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Updated conversation window

Comment 4

[Romain Testard [:RT]]

User story updated with acceptance criteria.
Matej can you please review the proposed string?

Comment 5

[Pau Masiá [:Pau]]

(In reply to Romain Testard [:RT] from comment #2)
> As discussed we need the following changes in the UX:
> - Just 1 screen with the 3 sharing options
> - modified text (Share the link you copied with a friend so you can start
> browsing the web together)
> - Webcam self view by transparency
> - Mute/unmute buttons replaces text chat

Are you sure this one-screen approach is the best? I thought we talked yesterday to keep 1. The screen with the sharing options in the unlikely case the user clicks off the panel and 2. The screen that gives the user feedback saying that the room has been shared with the "view sharing options" in it.

So we have two scenarios here that I represented in the flow I shared with you yesterday and both cases are covered there.

Please take a look at the attachment and let me know your thoughts.

Comment 6

[Pau Masiá [:Pau]]

Attachment: SharePanelFeature.png

Comment 7

[Matej Novak [:matej]]

(In reply to Romain Testard [:RT] from comment #4)
> User story updated with acceptance criteria.
> Matej can you please review the proposed string?

I made a couple of small tweaks. Let me know what you think:

"Invite a friend to join you! Share this link so you can start browsing the Web together. Your link:"

Comment 8

[Romain Testard [:RT]]

Looks good to me!
US now updated with final copy.

Comment 9

[David Critchley (:dcritch)]

Can we get updated mockups updated for the new string. Need to know the formatting for the new layout, since the previous 2 strings (which had different font formats), are now merged into one.

Comment 10

[Pau Masiá [:Pau]]

Why does it have to have 1 single string instead of two? As I understand, the title remains the same and the only thing that changes is the string beneath, which now seems to be shorter.

Comment 11

[Sevaan Franks [:sevaan]]

Yes, it should be two strings.

Comment 12

[GitHub Autolander Bot]

Attachment: [loop] daveccrit:1242706-sharingAfford > mozilla:master

Comment 13

[David Critchley (:dcritch)]

Attachment: Link to Github pull-request: https://github.com/mozilla/loop/pull/163

Comment 14

[Dan Mosedale (:dmosedale, :dmose)]

I believe we need a third string containing the words "Your link:" to label the field...

Comment 15

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8717591 [details] [review]
Link to Github pull-request: https://github.com/mozilla/loop/pull/163

My mistake, I see we've already got that string.  r=dmose

Comment 16

[David Critchley (:dcritch)]

Is there a document that has the the colors, dimensions, etc for mockups here?

Comment 17

[Pau Masiá [:Pau]]

Attachment: SharePanel Spec

Here's the visual spec for this.

Comment 18

[Romain Testard [:RT]]

Pau, this is the conversation window bug (you provided the share panel visual spec).
Can you provide the same for conversation window spec required on this bug?

Comment 19

[Pau Masiá [:Pau]]

Whops, you're right! I'll upload the good file shortly.

Comment 20

[David Critchley (:dcritch)]

what is the margin space above the Heading "Invite a friend..."?
What is the button background color for the Facebook and Email buttons, is there a hover/click state?
What is the total height of the panel, so I can double check to make sure the set height we have is correct.
Is the top border of the input/button combo (Copy Link) supposed to be square or rounded? The first image has them rounded, the new images are squared.

Comment 21

[Sevaan Franks [:sevaan]]

Sorted it out with David over Vidyo.

Comment 22

[David Critchley (:dcritch)]

Attachment: Screen shot of layout reviewed and approved by Sevaan

Shit It! from Sevaan via IRC on attached screenshot

Comment 23

[Mike de Boer [:mikedeboer]]

(In reply to David Critchley (:dcritch) from comment #22)
> Shit It!

Nownow, I don't quite believe that this'd come out of Sevaan's mouth!

Comment 24

[GitHub Autolander Bot]

Attachment: [loop] daveccrit:1242706-ConversationWindowSharingAffordances > mozilla:master

Comment 25

[David Critchley (:dcritch)]

Attachment: Link to Github pull-request: https://github.com/mozilla/loop/pull/174

Comment 26

[Sevaan Franks [:sevaan]]

(In reply to Mike de Boer [:mikedeboer] from comment #23)
> (In reply to David Critchley (:dcritch) from comment #22)
> > **** It!
> 
> Nownow, I don't quite believe that this'd come out of Sevaan's mouth!

lol!

Comment 27

[Mark Banner (:standard8)]

Comment on attachment 8718572 [details] [review]
Link to Github pull-request: https://github.com/mozilla/loop/pull/174

Looks nice. r=Standard8

Comment 28

[David Critchley (:dcritch)]

Second commit for Conversation View changes:
https://github.com/mozilla/loop/commit/14fa4f8c96c14c5a080a92a43d5c3c2a6f031dd9