Update Hello Panel Empty States

VERIFIED FIXED in Firefox 43

Status

P1
normal
Rank:
19
VERIFIED FIXED
3 years ago
3 years ago

People

(Reporter: sevaan, Assigned: andreio)

Tracking

unspecified
mozilla43
Points:
3
Dependency tree / graph

Firefox Tracking Flags

(firefox43 verified)

Details

(Whiteboard: [visual refresh])

Attachments

(5 attachments, 5 obsolete attachments)

(Reporter)

Description

3 years ago
Created attachment 8650171 [details]
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.
(Reporter)

Comment 1

3 years ago
Mike, mind attaching the assets for this panel? Thanks!
Flags: needinfo?(mmaslaney)

Comment 2

3 years ago
I updated the strings for the no contacts in bug 1195677.
Rank: 19
Priority: -- → P1
Whiteboard: [visual refresh]
(Reporter)

Comment 3

3 years ago
Created attachment 8652308 [details]
Panel Assets

Panel assets by :mmaslaney attached.
Flags: needinfo?(mmaslaney)
(Reporter)

Comment 4

3 years ago
Created attachment 8652497 [details]
Hello Assets (Updated)

Assets updated. Slight modification to Contacts asset.
Attachment #8652308 - Attachment is obsolete: true
(Reporter)

Comment 5

3 years ago
Mmaslaney, would you be able to provide SVG assets instead of PNG?
Flags: needinfo?(mmaslaney)
(Assignee)

Updated

3 years ago
Assignee: nobody → andrei.br92
Created attachment 8654979 [details]
Hello_Assets_v3.zip
Flags: needinfo?(mmaslaney)
(Assignee)

Comment 7

3 years ago
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.
Flags: needinfo?(mmaslaney)
Created attachment 8655096 [details]
Hello_Assets_v4.zip
Attachment #8652497 - Attachment is obsolete: true
Attachment #8654979 - Attachment is obsolete: true
Flags: needinfo?(mmaslaney)
(Assignee)

Comment 9

3 years ago
Created attachment 8655655 [details] [diff] [review]
Update Loop empty state for no conversations
Attachment #8655655 - Flags: review?(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?
Attachment #8655655 - Flags: review?(standard8)
(Assignee)

Comment 11

3 years ago
Created attachment 8656221 [details] [diff] [review]
Update Loop empty state for no conversations
Attachment #8655655 - Attachment is obsolete: true
Attachment #8656221 - Flags: review?(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?
Attachment #8656221 - Flags: review?(standard8) → review+

Comment 13

3 years ago
sorry to bug ya - but has this had UI review?  will take over and land - just want to know state :)
Flags: needinfo?(andrei.br92)
Created attachment 8659853 [details] [diff] [review]
Update Loop empty state for no conversations.

Updated for review comment + bitrot
Attachment #8656221 - Attachment is obsolete: true
Attachment #8659853 - Flags: review+
Created attachment 8659866 [details]
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.
Flags: needinfo?(andrei.br92)
Attachment #8659866 - Flags: ui-review?(sfranks)
Attachment #8659866 - Flags: ui-review?(b.pmm)
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!
Attachment #8659866 - Flags: ui-review?(b.pmm) → ui-review+
(Reporter)

Comment 17

3 years ago
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.
Attachment #8659866 - Flags: ui-review?(sfranks) → ui-review+
(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...
Iteration: --- → 43.3 - Sep 21
Points: --- → 3
https://hg.mozilla.org/mozilla-central/rev/c1a90db05a54
Status: NEW → RESOLVED
Last Resolved: 3 years ago
status-firefox43: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla43
Flags: qe-verify+
QA Contact: bogdan.maris
Created attachment 8671353 [details]
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).
Flags: needinfo?(sfranks)
(Reporter)

Comment 22

3 years ago
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.
Flags: needinfo?(sfranks)
(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.
Status: RESOLVED → VERIFIED
status-firefox43: fixed → verified
Flags: qe-verify+
Depends on: 1226607
You need to log in before you can comment on or make changes to this bug.