Bug 1196499 - Update Loop empty state for no conversations. r=Standard8,ui-review=pau,ui-review=sevaan
authorAndrei Oprea <andrei.br92@gmail.com>
Fri, 11 Sep 2015 15:47:00 +0100
changeset 294736 c1a90db05a54452f615de6a62d5a61337e86d545
parent 294735 ea0f3fa6453fc3c1555fd1b6dd8427834ca279f6
child 294737 bc2d12101a250b5f82d991e5c70d36709387354b
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersStandard8
bugs1196499
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1196499 - Update Loop empty state for no conversations. r=Standard8,ui-review=pau,ui-review=sevaan
browser/components/loop/content/css/contacts.css
browser/components/loop/content/css/panel.css
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/shared/img/empty_conversations.svg
browser/components/loop/test/desktop-local/panel_test.js
browser/locales/en-US/chrome/browser/loop/loop.properties
--- a/browser/components/loop/content/css/contacts.css
+++ b/browser/components/loop/content/css/contacts.css
@@ -246,28 +246,20 @@ html[dir="rtl"] .contact-filter {
   background-image: url("../shared/img/avatars.svg#green-avatar");
   background-color: #56B397;
 }
 
 .contact > .avatar > img {
   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 {
   font-size: 1.3rem;
   line-height: 20px;
   color: #000;
 }
 
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -287,18 +287,18 @@ html[dir="rtl"] .tab-view li:nth-child(2
 
 
 .no-conversations-message {
   /* example of vertical aligning a container in an element
     see: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
   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");
 }
 
 .panel-text-medium,
 .panel-text-large {
   margin: 3px 0;
 }
 
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -824,21 +824,21 @@ loop.panel = (function(_, mozL10n) {
       );
     },
 
     _renderNoRoomsView: function() {
       return (
         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")
               )
             )
           ), 
           this._renderNewRoomButton()
         )
       );
     },
 
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -824,21 +824,21 @@ loop.panel = (function(_, mozL10n) {
       );
     },
 
     _renderNoRoomsView: function() {
       return (
         <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>
           {this._renderNewRoomButton()}
         </div>
       );
     },
 
--- a/browser/components/loop/content/shared/img/empty_conversations.svg
+++ b/browser/components/loop/content/shared/img/empty_conversations.svg
@@ -1,1 +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>
\ No newline at end of file
+<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>
\ No newline at end of file
--- a/browser/components/loop/test/desktop-local/panel_test.js
+++ b/browser/components/loop/test/desktop-local/panel_test.js
@@ -843,17 +843,19 @@ describe("loop.panel", function() {
 
       expect(node.querySelectorAll(".room-list-empty").length).to.eql(1);
     });
 
     it("should call mozL10n.get for room empty strings", 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() {
       var view = createTestComponent();
       roomStore.setStoreState({pendingInitialRetrieval: true});
 
       expect(view.getDOMNode().querySelectorAll(".room-list-loading").length).to.eql(1);
     });
--- a/browser/locales/en-US/chrome/browser/loop/loop.properties
+++ b/browser/locales/en-US/chrome/browser/loop/loop.properties
@@ -132,22 +132,22 @@ import_contacts_success_message={{total}
 ## importing_contacts_button once contacts have been imported once.
 sync_contacts_button=Sync Contacts
 ## LOCALIZATION NOTE(no_contacts_message_heading2): Title shown when user has no
 ## contacts in his address book
 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.
 
 ## LOCALIZATION NOTE(import_failed_description simple): Displayed when an import of
 ## contacts fails. This is displayed in the error field.
 import_failed_description_simple=Sorry, contact import failed
 import_failed_description_some=Some contacts could not be imported