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/app.css

@@ -246,10 +246,6 @@ li button.activity > b em {
   pointer-events: none;
 }
 
-[data-type="list"] li aside.pack-end {
-  margin: 0 2rem 0 0;
-}
-
 /* Selection tag extended from shared/style/buttons.css */
 .view-select-tag .selection-list li button {
   background-color: #fff;

apps/communications/contacts/style/contacts.css

@@ -407,39 +407,44 @@ gaia-header [data-icon] {
   justify-content: space-between;
 }
 #view-settings [data-type="list"] li#settingsOrder aside {
+  top: 0.5rem;
   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;
   pointer-events: none;
   position: absolute;
-  top: 0;
+  top: 1rem;
   right: 0;
 }
 
@@ -682,7 +687,8 @@ gaia-header [data-icon] {
   margin-top: 1rem;
 }
 
-#sources > li {
+#sources > li,
+#contactsManagement > li {
   border-bottom: none;
   height: auto;
 }

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}} 位朋友