Bug 1196499 - Update Loop empty state for no conversations. r=Standard8,ui-review=pau,ui-review=sevaan

This commit is contained in:
Andrei Oprea 2015-09-11 15:47:00 +01:00
parent 8f0edac3ad
commit e195c11752
7 changed files with 18 additions and 24 deletions

View File

@ -251,18 +251,10 @@ html[dir="rtl"] .contact-filter {
width: 100%;
}
.panel-text-medium,
.panel-text-large {
.panel-text-medium{
margin: 3px;
color: #4a4a4a;
}
.panel-text-medium {
font-size: 1.2rem;
}
.panel-text-large {
font-size: 2.2rem;
font-size: 1.3rem;
}
.contact > .details > .username {

View File

@ -292,8 +292,8 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
position: relative;
top: 50%;
transform: translateY(-50%);
padding-top: 75px;
padding-bottom: 10px;
padding-top: 11rem;
padding-bottom: 1rem;
background-image: url("../shared/img/empty_conversations.svg");
}

View File

@ -829,11 +829,11 @@ loop.panel = (function(_, mozL10n) {
React.createElement("div", {className: "rooms"},
React.createElement("div", {className: "room-list-empty"},
React.createElement("div", {className: "no-conversations-message"},
React.createElement("p", {className: "panel-text-large"},
mozL10n.get("no_conversations_message_heading")
React.createElement("p", {className: "panel-text-medium"},
mozL10n.get("no_conversations_message_heading2")
),
React.createElement("p", {className: "panel-text-medium"},
mozL10n.get("no_conversations_start_message")
mozL10n.get("no_conversations_start_message2")
)
)
),

View File

@ -829,11 +829,11 @@ loop.panel = (function(_, mozL10n) {
<div className="rooms">
<div className="room-list-empty">
<div className="no-conversations-message">
<p className="panel-text-large">
{mozL10n.get("no_conversations_message_heading")}
<p className="panel-text-medium">
{mozL10n.get("no_conversations_message_heading2")}
</p>
<p className="panel-text-medium">
{mozL10n.get("no_conversations_start_message")}
{mozL10n.get("no_conversations_start_message2")}
</p>
</div>
</div>

View File

@ -1 +1 @@
<svg width="119" height="70" viewBox="0 0 119 70" xmlns="http://www.w3.org/2000/svg"><g fill="#D8D8D8"><path d="M96.767 5c12.017 0 21.763 8.244 21.763 18.41 0 5.061-2.416 9.647-6.323 12.975.679 2.303 2.022 5.429 4.677 8.481-.454.773-7.931-1.954-13.201-3.994-2.175.613-4.497.949-6.916.949-12.02 0-21.766-8.243-21.766-18.41 0-10.166 9.746-18.41 21.766-18.41z" fill-opacity=".8"/><path d="M21.763 5c-12.017 0-21.763 8.244-21.763 18.41 0 5.061 2.416 9.647 6.323 12.975-.679 2.303-2.022 5.429-4.677 8.481.454.773 7.931-1.954 13.201-3.994 2.175.613 4.497.949 6.916.949 12.02 0 21.766-8.243 21.766-18.41 0-10.166-9.746-18.41-21.766-18.41z" fill-opacity=".8"/><path d="M56.742 4c-18.631 0-33.742 12.782-33.742 28.543 0 7.847 3.747 14.957 9.803 20.117-1.052 3.571-3.135 8.418-7.251 13.149.704 1.199 12.296-3.03 20.467-6.193 3.372.951 6.973 1.471 10.723 1.471 18.637 0 33.746-12.78 33.746-28.544 0-15.761-15.11-28.543-33.746-28.543z" stroke="#FBFBFB" stroke-width="4"/></g></svg>
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><title>Hello_Conversations@1x</title><g fill="none" fill-rule="evenodd"><g fill-opacity=".8" fill="#D8D8D8"><path d="M92.6857529,36.4972478 C94.0074365,36.7092895 95.3714061,36.8202443 96.765995,36.8202443 C99.1850012,36.8202443 101.507433,36.4843962 103.682261,35.8711789 C108.95254,37.9114461 116.428855,40.6388416 116.883051,39.8656193 C114.228301,36.8141527 112.88469,33.6883692 112.206137,31.3849465 C116.112562,28.0573291 118.529038,23.471195 118.529038,18.4099191 C118.529038,8.2443202 108.782585,0 96.765995,0 C91.4188478,0 86.5218392,1.63140695 82.732597,4.33762852 C89.8596493,10.1193334 94.2968293,18.2546551 94.2968293,27.2647358 C94.2968293,30.4757572 93.7334546,33.5755489 92.6857559,36.4972483 Z" transform="translate(5 32)"/><path d="M20.9154969,36.8064637 C18.8009901,36.7376004 16.766387,36.4124345 14.846777,35.8711789 C9.57649798,37.9114461 2.10018319,40.6388416 1.64598695,39.8656193 C4.30073659,36.8141527 5.64434776,33.6883692 6.32290093,31.3849465 C2.41647584,28.0573291 0,23.471195 0,18.4099191 C0,8.2443202 9.74645257,0 21.7630429,0 C25.8798482,0 29.7298309,0.967027199 33.0128711,2.64707103 C24.5779765,8.47249535 19.1912092,17.3376798 19.1912092,27.2647358 C19.1912092,30.5889558 19.7953644,33.7943831 20.9154969,36.8064637 Z" transform="translate(5 32)"/></g><path d="M62,31 C43.77575,31 29,43.92775 29,59.875 C29,68.21575 33.06725,75.710875 39.531125,80.9785 C39.20525,82.084 38.763875,83.2885 38.13275,84.571375 C35.171,90.610375 33.125,92.875 33.125,92.875 C33.125,92.875 40.562375,91.4725 46.898375,88.321 C48.03275,87.755875 48.952625,87.211375 49.785875,86.683375 C53.564375,88.003375 57.681125,88.75 62,88.75 C80.22425,88.75 95,75.82225 95,59.875 C95,43.92775 80.22425,31 62,31 L62,31 Z M72.3125,47.24425 C75.303125,47.24425 77.728625,49.665625 77.728625,52.65625 C77.728625,55.646875 75.303125,58.072375 72.3125,58.072375 C69.321875,58.072375 66.9005,55.646875 66.9005,52.65625 C66.9005,49.665625 69.321875,47.24425 72.3125,47.24425 L72.3125,47.24425 Z M51.6875,47.24425 C54.678125,47.24425 57.103625,49.665625 57.103625,52.65625 C57.103625,55.646875 54.678125,58.072375 51.6875,58.072375 C48.696875,58.072375 46.2755,55.646875 46.2755,52.65625 C46.2755,49.665625 48.696875,47.24425 51.6875,47.24425 L51.6875,47.24425 Z M62,78.64375 C45.231875,78.64375 41.375,64 41.375,64 C41.375,64 50.099375,68.125 62,68.125 C73.715,68.125 82.625,64 82.625,64 C82.625,64 78.768125,78.64375 62,78.64375 L62,78.64375 Z" fill="#00A9DC"/></g></svg>

Before

Width:  |  Height:  |  Size: 969 B

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -848,7 +848,9 @@ describe("loop.panel", function() {
var view = createTestComponent();
sinon.assert.calledWithExactly(document.mozL10n.get,
"no_conversations_message_heading");
"no_conversations_message_heading2");
sinon.assert.calledWithExactly(document.mozL10n.get,
"no_conversations_start_message2");
});
it("should display a loading animation when rooms are pending", function() {

View File

@ -137,12 +137,12 @@ no_contacts_message_heading2=No contacts yet.
## LOCALIZATION NOTE(no_contacts_import_or_add2): Subheading inviting the user
## to add people to his contact list
no_contacts_import_or_add2=Add someone!
## LOCALIZATION NOTE(no_conversations_message_heading): Title shown when user
## LOCALIZATION NOTE(no_conversations_message_heading2): Title shown when user
## has no conversations available.
no_conversations_message_heading=There are no conversations yet
## LOCALIZATION NOTE(no_converastions_start_message): Subheading inviting the
no_conversations_message_heading2=No conversations yet.
## LOCALIZATION NOTE(no_conversations_start_message2): Subheading inviting the
## user to start a new conversation.
no_conversations_start_message=start a new conversation!
no_conversations_start_message2=Start a new one!
## LOCALIZATION NOTE(contacts_no_search_results): Message shown when contacts
## search returned no matching results.
contacts_no_search_results=No matching results.