Bug 1078174 - [Contact] Improve UI on contact settings

apps/communications/contacts/js/views/settings.js

@@ -551,29 +551,10 @@ contacts.Settings = (function() {
     // If the total is not available then an empty string is showed
     var theTotal = total || '';
 
-    var totalsMsgContent = _('facebook-import-msg', {
+    navigator.mozL10n.setAttributes(fbTotalsMsg, 'facebook-import-msg2', {
       'imported': imported,
       'total': theTotal
     });
-
-    // This is to support the case of a long literal, particularly
-    // when 0 or 1 friends are imported
-    var msgPart1 = totalsMsgContent;
-    var msgPart2 = null;
-    if (imported <= 1) {
-      var position = totalsMsgContent.indexOf('(');
-      if (position != -1) {
-        msgPart1 = totalsMsgContent.substring(0, position - 1);
-        msgPart2 = totalsMsgContent.substring(position);
-      }
-    }
-    fbTotalsMsg.innerHTML = '';
-    fbTotalsMsg.appendChild(document.createTextNode(msgPart1));
-    if (msgPart2) {
-      var span = document.createElement('span');
-      span.textContent = msgPart2;
-      fbTotalsMsg.appendChild(span);
-    }
   };
 
   var onFbImport = function onFbImportClick(evt) {

apps/communications/contacts/style/contacts.css

@@ -195,7 +195,7 @@ section[role="region"] > gaia-header .icon.icon-edit-contact {
 
 #contact-form div.with-overflow button[type="reset"] {
   width: 5rem;     /* The affordance is increased by 1 rem */
-  right: calc(-0.5rem + -0.3rem); 
+  right: calc(-0.5rem + -0.3rem);
 }
 
 #contact-form div.with-overflow input {
@@ -436,39 +436,46 @@ gaia-header [data-icon] {
   justify-content: space-between;
 }
 #view-settings [data-type="list"] li#settingsOrder aside {
+  top: 0.5rem;
+  margin: 0;
   pointer-events: none;
-  align-self: flex-end;
+  align-self: center;
 }
 
 /* Cutom FB item */
 #view-settings [data-type="list"] .fb-item {
-  height: auto;
   border-bottom: none;
   display: flex;
   flex-direction: column;
 }
 
 #view-settings [data-type="list"] .fb-item p {
-  padding-left: 4.3rem;
+  padding-left: 4.2rem;
+  font-size: 1.4rem;
 }
 
 #view-settings [data-type="list"] .fb-item p span {
   display: block;
   padding-bottom: 0.4rem;
 }
 
+#view-settings [data-type="list"] .fb-item {
+  background: url(/contacts/style/images/f_logo.png) no-repeat 0 calc(50% + 0.5rem) / 3rem;
+}
+
 #view-settings [data-type="list"] .fb-item p:first-of-type {
-  background: url(/contacts/style/images/f_logo.png) no-repeat 0.5rem calc(50% + 0.5rem) / 3rem;
   height: 3rem;
+  font-size: 1.9rem;
   line-height: 3rem;
 }
 
 #view-settings [data-type="list"] .fb-item aside {
   width: 6.5rem;
-  height: 6rem;
+  height: 5rem;
+  margin: 0;
   pointer-events: none;
   position: absolute;
-  top: 0;
+  top: 1rem;
   right: 0;
 }
 
@@ -711,7 +718,8 @@ gaia-header [data-icon] {
   margin-top: 1rem;
 }
 
-#sources > li {
+#sources > li,
+#contactsManagement > li {
   border-bottom: none;
   height: auto;
 }

apps/communications/contacts/test/unit/views/settings_test.js

@@ -570,15 +570,14 @@ suite('Contacts settings >', function() {
       var fbTotalsMsg = document.querySelector('#fb-totals');
 
       var observer = new MutationObserver(function() {
-        if (fbTotalsMsg.innerHTML !== '') {
-          observer.disconnect();
-          done(function() {
-            assert.isTrue(fbTotalsMsg.innerHTML.indexOf('50') !== -1);
-          });
-        }
+        observer.disconnect();
+        done(function() {
+          assert.isTrue(fbTotalsMsg.getAttribute('data-l10n-args').
+                        indexOf('50') !== -1);
+        });
       });
 
-      observer.observe(fbTotalsMsg, {childList: true});
+      observer.observe(fbTotalsMsg, {attributes: true});
 
       MockImportStatusData.put(CACHE_FRIENDS_KEY, 50).then(function() {
         MockImportStatusData.put(STORAGE_KEY, {access_token: '1'})

shared/locales/import_contacts/import_contacts.ar.properties

@@ -33,10 +33,5 @@ genericProgress                 = {{current}}/{{total}}
 
 # Facebook import
 facebook                          = فيسبوك
-facebook-import-msg               = {[ plural(imported) ]}
-facebook-import-msg[zero]         = لم يتم استيراد أي صديق من ({{total}})
-facebook-import-msg[one]          = تم استيراد صديق واحد (من {{total}})
-facebook-import-msg[two]          = تم استيراد {{imported}}/{{total}} أصدقاء
-facebook-import-msg[few]          = تم استيراد {{imported}}/{{total}} أصدقاء
-facebook-import-msg[many]         = تم استيراد {{imported}}/{{total}} أصدقاء
-facebook-import-msg[other]        = تم استيراد {{imported}}/{{total}} أصدقاء
+facebook-import-msg2              = تم استيراد {{imported}}/{{total}} أ
+

shared/locales/import_contacts/import_contacts.en-US.properties

@@ -35,13 +35,7 @@ genericProgress                 = {{current}}/{{total}}
 
 # Facebook import
 facebook                          = Facebook
-facebook-import-msg               = {[ plural(imported) ]}
-facebook-import-msg[zero]         = No friends imported (out of {{total}})
-facebook-import-msg[one]          = One friend imported (out of {{total}})
-facebook-import-msg[two]          = {{imported}}/{{total}} friends imported
-facebook-import-msg[few]          = {{imported}}/{{total}} friends imported
-facebook-import-msg[many]         = {{imported}}/{{total}} friends imported
-facebook-import-msg[other]        = {{imported}}/{{total}} friends imported
+facebook-import-msg2              = {{imported}}/{{total}} friends imported
 
 contactsMerged           = {[ plural(numDups) ]}
 contactsMerged[zero]     = No duplicated contacts merged

shared/locales/import_contacts/import_contacts.fr.properties

@@ -34,10 +34,4 @@ genericProgress                 = {{current}}/{{total}}
 
 # Facebook import
 facebook                          = Facebook
-facebook-import-msg               = {[ plural(imported) ]}
-facebook-import-msg[zero]         = Aucun ami importé (sur {{total}})
-facebook-import-msg[one]          = Un ami importé (sur {{total}})
-facebook-import-msg[two]          = {{imported}}/{{total}} amis importés
-facebook-import-msg[few]          = {{imported}}/{{total}} amis importés
-facebook-import-msg[many]         = {{imported}}/{{total}} amis importés
-facebook-import-msg[other]        = {{imported}}/{{total}} amis importés
+facebook-import-msg2              = {{imported}}/{{total}} amis importés

shared/locales/import_contacts/import_contacts.zh-TW.properties

@@ -34,10 +34,4 @@ genericProgress                 = {{current}}/{{total}}
 
 # Facebook import
 facebook                          = Facebook
-facebook-import-msg               = {[ plural(imported) ]}
-facebook-import-msg[zero]         = 未匯入朋友（共 {{total}} 位）
-facebook-import-msg[one]          = 已匯入 1 位朋友（共 {{total}} 位）
-facebook-import-msg[two]          = 已匯入 {{imported}}/{{total}} 位朋友
-facebook-import-msg[few]          = 已匯入 {{imported}}/{{total}} 位朋友
-facebook-import-msg[many]         = 已匯入 {{imported}}/{{total}} 位朋友
-facebook-import-msg[other]        = 已匯入 {{imported}}/{{total}} 位朋友
+facebook-import-msg2              = 已匯入 {{imported}}/{{total}} 位朋友