1196499 - Update Hello Panel Empty States

Status: VERIFIED FIXED

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

Description

[Sevaan Franks [:sevaan]]

Attachment: Panel Mockups

We recently update the no search results state on the contacts panel in Bug 1196350. There have been some slight design tweaks made which can be applied to the other empty states in the Hello conversations and contacts panel.

Contacts Panel

Strings: "No contacts yet. Add someone!" "No matching results!"

Conversations Panel

String: "No conversations yet. Start a new one!"

Mmaslaney's mockups attached.

Comment 1

[Sevaan Franks [:sevaan]]

Mike, mind attaching the assets for this panel? Thanks!

Comment 2

[Ed Lee :Mardak]

I updated the strings for the no contacts in bug 1195677.

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Panel Assets

Panel assets by :mmaslaney attached.

Comment 4

[Sevaan Franks [:sevaan]]

Attachment: Hello Assets (Updated)

Assets updated. Slight modification to Contacts asset.

Comment 5

[Sevaan Franks [:sevaan]]

Mmaslaney, would you be able to provide SVG assets instead of PNG?

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Hello_Assets_v3.zip

Comment 7

[Andrei Oprea [:andreio]]

Hello conversations icon has a gray face instead of the blue. The icon is also not an SVG path it is an image and will not scale when you zoom in.

Comment 8

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Hello_Assets_v4.zip

Comment 9

[Andrei Oprea [:andreio]]

Attachment: Update Loop empty state for no conversations

Comment 10

[Mark Banner (:standard8)]

Comment on attachment 8655655 [details] [diff] [review]
Update Loop empty state for no conversations

Review of attachment 8655655 [details] [diff] [review]:
-----------------------------------------------------------------

Does there need to be l10n updates with this? I think Sevaan is implying in comment 0 that there might be, but I don't know when that was relative to other conversations.

::: browser/components/loop/content/js/panel.jsx
@@ +812,5 @@
>      _renderNoRoomsView: function() {
>        return (
>          <div className="room-list">
>            <div className="room-list-empty">
> +            <p className="panel-text-medium">

Could we drop the panel-text-large css now as well?

Comment 11

[Andrei Oprea [:andreio]]

Attachment: Update Loop empty state for no conversations

Comment 12

[Mark Banner (:standard8)]

Comment on attachment 8656221 [details] [diff] [review]
Update Loop empty state for no conversations

Review of attachment 8656221 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good. r=Standard8

::: browser/locales/en-US/chrome/browser/loop/loop.properties
@@ +141,3 @@
>  ## has no conversations available.
> +no_conversations_message_heading2=No conversations yet.
> +## LOCALIZATION NOTE(no_converastions_start_message2): Subheading inviting the

nit: please can you fix the typo in "converastions" whilst you're here?

Comment 13

[:shell escalante]

sorry to bug ya - but has this had UI review?  will take over and land - just want to know state :)

Comment 14

[Mark Banner (:standard8)]

Attachment: Update Loop empty state for no conversations.

Updated for review comment + bitrot

Comment 15

[Mark Banner (:standard8)]

Attachment: Screen shot for ux review

Here's the screen shot for ui-review, since we don't know if it was reviewed or not.

The review here is just for the no conversations section in the middle & its placement.

Comment 16

[Pau Masiá [:Pau]]

Comment on attachment 8659866 [details]
Screen shot for ux review

I'm not aware of every Mmaslaney's changes to the visuals but, it looks good.
Thanks Mark!

Comment 17

[Sevaan Franks [:sevaan]]

Comment on attachment 8659866 [details]
Screen shot for ux review

As I understood it from Vicky, the hard line above the Start a Conversation Button/Let's Talk About area should only be visible if scrolling is on as an indicator that content is going under an edge. Otherwise the line is soft.

Comment 18

[Mark Banner (:standard8)]

(In reply to Sevaan Franks [:sevaan] from comment #17)
> Comment on attachment 8659866 [details]
> Screen shot for ux review
> 
> As I understood it from Vicky, the hard line above the Start a Conversation
> Button/Let's Talk About area should only be visible if scrolling is on as an
> indicator that content is going under an edge. Otherwise the line is soft.

Yep, that's a different bug...

Comment 19

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/c1a90db05a54

Comment 20

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/c1a90db05a54

Comment 21

[Bogdan Maris, Desktop Test Engineering]

Attachment: Font empty conversation.png

I have a question here: Shouldn`t the string from empty conversations ('No conversations yet. Start a new one!') look like the string from empty contacts (size and font)? 
The mockups say that it should: https://www.dropbox.com/sh/giei20j7trqhevz/AACIHEkQXtGbc_U-XZ4Jm8zia?dl=0&preview=PanelUI_ConversationAndContacts.png

Also, I saw that the strings from conversations empty panel look a bit odd on Windows 7 (only), attaching a screenshot for that. (look at 'conversation' and 'Start' strings)

Other than that, the empty panels look as in mockups in latest Developer Edition 43.0a2 across platforms (Windows 7 64-bit, Windows 10 64-bit, Mac OS X 10.10.5 and Ubuntu 14.04 32-bit).

Comment 22

[Sevaan Franks [:sevaan]]

Hey Bogdan, you are partially right.

The style of the Empty Conversations list should apply to all the other panels, rather than vice versa. There is a bug somewhere I can't seem to find for that purpose. 

And yes, the text looks odd in that screenshot and that should be looked at.

Comment 23

[Bogdan Maris, Desktop Test Engineering]

(In reply to Sevaan Franks [:sevaan] from comment #22)
> Hey Bogdan, you are partially right.
> 
> The style of the Empty Conversations list should apply to all the other
> panels, rather than vice versa. There is a bug somewhere I can't seem to
> find for that purpose. 
> 
> And yes, the text looks odd in that screenshot and that should be looked at.

Thanks for your feedback!
I went ahead and logged bugs based on your reply. I will close this bug as verified fixed though.