Merge pull request #7757 from jmcanterafonseca/final_fix_fb_ftu

Bug 832898 - Implement FB Import as per the latest UX specifications
mozilla-b2g · Jan 25, 2013 · bdbafdb · bdbafdb
2 parents cbff8d4 + 8e9fd48
commit bdbafdb
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 69 deletions.
diff --git a/apps/communications/ftu/css/style.css b/apps/communications/ftu/css/style.css
@@ -512,17 +512,26 @@ html, body {
   Import
 */
 
-#import_contacts li#sim_import {
-  padding: 0;
-  height: auto;
+#import_contacts li {
+  padding: 0 3.5rem;
+}
+
+#import_contacts li.importOption {
+  padding: 0 !important;
+  height: auto !important;
+  border-bottom: none;
+}
+
+#import_contacts #fb_import, #import_contacts #fb_after_import2 {
+  margin-top: 1rem;
 }
 
 /* Needed due to the .icon class which is overriding this property */
-#import_contacts #sim-import-button:active {
+#import_contacts button:active {
   background-color: #008aaa !important;
 }
 
-#no-sim {
+#no-sim, #no-network, #fb_after_import2 p {
  	color: #5B5B5B;
  	font-size: 1.5rem;
  	line-height: 2rem;
@@ -531,52 +540,14 @@ html, body {
  	white-space: normal;
 }
 
-#import_contacts li {
-  padding: 0 3.5rem;
-}
-#wifi li {
-  padding: 0 1.5rem;
-}
-
-#import_contacts li#fb_import:after,
-#wifi li:after {
-  content: "";
-  transition: opacity 0.2s ease;
-  background: #b1f1ff;
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 0;
-}
-
-#import_contacts li#fb_import:active:after,
-#wifi li:active:after {
-  opacity: 0.6;
-}
-
-#import_contacts li.disabled {
-  pointer-events: none;
-}
-
-#import_contacts li.disabled p {
-  pointer-events: none;
-}
-
-#import_contacts li#fb_import.disabled:after {
-  content: "";
-  background-color: #e6e6e6;
-  opacity: 0.7;
-}
 
 #import_contacts ul:first-child li:last-child {
   margin-bottom: 0;
 }
 
-#fb_import {
-  background: url('images/import_fb.png') center left no-repeat;
+/* Extending icon types*/
+#import_contacts [data-type="list"] li button.icon-fb:before {
+  background-image: url('images/import_fb.png');
 }
 
 /* Extending icon types*/
@@ -599,6 +570,11 @@ html, body {
   margin-top: 1.6rem;
 }
 
+
+#fb_after_import1 {
+  background: url('images/import_fb.png') center left no-repeat;
+}
+
 #statusMsg.ftu {
   bottom: 6.5rem;
   z-index: 0;
@@ -610,6 +586,28 @@ html, body {
   opacity: 1;
 }
 
+
+#wifi li {
+  padding: 0 1.5rem;
+}
+
+#wifi li:after {
+  content: "";
+  transition: opacity 0.2s ease;
+  background: #b1f1ff;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+#wifi li:active:after {
+  opacity: 0.6;
+}
+
 /*
   About your rights
 */

diff --git a/apps/communications/ftu/index.html b/apps/communications/ftu/index.html
@@ -229,9 +229,9 @@ <h2 id="time-zone-title">
       <section role="region" id="import_contacts">
         <article data-type="list">
           <ul>
-            <li id="sim_import">
+            <li id="sim_import" class="importOption">
               <button id="sim-import-button" class="icon icon-sim" data-l10n-id="importSim2">
-                  Import from SIM
+                  SIM card
               </button>
               <p id="no-sim" data-l10n-id="noSimMsg">To import insert a SIM card</p>
             </li>
@@ -241,10 +241,21 @@ <h2 id="time-zone-title">
           <h2 data-l10n-id="otherAccount">Other accounts</h2>
         </header>
         <article data-type="list">
-          <ul>
-            <li id="fb_import" class="disabled">
+          <ul id="fb_container">
+            <li id="fb_import" class="importOption">
+              <button id="fb-import-button" class="icon icon-fb" data-l10n-id="importFb2">
+                  Facebook
+              </button>
+              <p id="no-network" class="hidden" data-l10n-id="noConnection">
+                To import Facebook friends connect to Wi-Fi or data network
+              </p>
+            </li>
+            <li id="fb_after_import1" class="hidden">
               <p data-l10n-id="importFb2">Facebook</p>
-              <p id="fb_import_feedback" data-l10n-id="notImportedYet">Not imported yet</p>
+              <p id="fb_import_feedback"></p>
+            </li>
+            <li class="importOption hidden" id="fb_after_import2">
+              <p data-l10n-id="afterFbImport"></p>
             </li>
           </ul>
         </article>

diff --git a/apps/communications/ftu/js/facebook.js b/apps/communications/ftu/js/facebook.js
@@ -20,14 +20,36 @@ var FacebookIntegration = {
     return this.fbImport = document.getElementById('fb_import');
   },
 
+  get fbImportButton() {
+    delete this.fbImportButton;
+    return this.fbImportButton = document.getElementById('fb-import-button');
+  },
+
+  get noNetworkMsg() {
+    delete this.noNetworkMsg;
+    return this.noNetworkMsg = document.getElementById('no-network');
+  },
+
   get fbImportFeedback() {
     delete this.fbImportFeedback;
     return this.fbImportFeedback = document.getElementById(
       'fb_import_feedback');
   },
 
+  get fbAfterImport1() {
+    delete this.fbAfterImport1;
+    return this.fbAfterImport1 = document.getElementById(
+      'fb_after_import1');
+  },
+
+  get fbAfterImport2() {
+    delete this.fbAfterImport2;
+    return this.fbAfterImport2 = document.getElementById(
+      'fb_after_import2');
+  },
+
   init: function fb_init() {
-    this.fbImport.addEventListener('click', this);
+    this.fbImportButton.addEventListener('click', this);
     document.addEventListener('fb_imported', this);
   },
 
@@ -37,11 +59,33 @@ var FacebookIntegration = {
         FbLauncher.start();
         break;
       case 'fb_imported':
+        this.toggleToImportedState();
         this.updateContactsNumber();
         break;
     }
   },
 
+  checkFbImport: function fb_check(nextState) {
+    var fbOption = this.fbImportButton;
+    var noNetMsg = this.noNetworkMsg;
+
+    if(nextState === 'disabled') {
+      fbOption.setAttribute('disabled','disabled');
+      noNetMsg.classList.remove('hidden');
+    }
+    else if(nextState === 'enabled') {
+      fbOption.removeAttribute('disabled');
+      noNetMsg.classList.add('hidden');
+    }
+  },
+
+  toggleToImportedState: function fb_tg_imported() {
+    this.fbImport.classList.add('hidden');
+    this.fbAfterImport1.classList.remove('hidden');
+    this.fbAfterImport2.classList.remove('hidden');
+    this.fbImport.parentNode.classList.remove('importOption');
+  },
+
   updateContactsNumber: function fb_ucn() {
     this.fbImportFeedback.textContent = _('fb-checking');
 

diff --git a/apps/communications/ftu/js/navigation.js b/apps/communications/ftu/js/navigation.js
@@ -183,22 +183,23 @@ var Navigation = {
       case '#import_contacts':
         UIManager.progressBar.className = 'step-state step-5';
         UIManager.mainTitle.innerHTML = _('importContacts3');
-        var fbOption = document.getElementById('fb_import');
         // Enabling or disabling SIM import depending on card status
         SimManager.checkSIMButton();
 
         // If we have 3G or Wifi activate FB import
+        var fbState;
         if (!WifiManager.api) {
           // Desktop
-          fbOption.classList.remove('disabled');
+          FacebookIntegration.checkFbImport('enabled');
           return;
         }
         if (WifiManager.api.connection.status === 'connected' ||
             DataMobile.isDataAvailable) {
-          fbOption.classList.remove('disabled');
+          fbState = 'enabled';
         } else {
-          fbOption.classList.add('disabled');
+          fbState = 'disabled';
         }
+        FacebookIntegration.checkFbImport(fbState);
         break;
       case '#welcome_browser':
         UIManager.progressBar.className = 'step-state step-6';
@@ -221,7 +222,7 @@ var Navigation = {
 
   skipStep: function n_skipStep() {
     this.currentStep = this.currentStep + (this.currentStep - this.previousStep);
-    if (this.currentStep < 1){
+    if (this.currentStep < 1) {
       this.previousStep = this.currentStep = 1;
     }
     if (this.currentStep > numSteps) {
@@ -242,11 +243,12 @@ var Navigation = {
     window.location.hash = steps[self.currentStep].hash;
     // SIM card management
     if (steps[this.currentStep].requireSIM) {
-      SimManager.handleCardState(function (response) {
+      SimManager.oncardstatechange = function card_state_change(response) {
         if (!response) {
           self.skipStep();
         }
-      });
+      };
+      SimManager.handleCardState();
     }
   }
 };
diff --git a/apps/communications/ftu/js/sim_manager.js b/apps/communications/ftu/js/sim_manager.js
@@ -58,9 +58,7 @@ var SimManager = {
   *   'networkLocked',
   *   'ready'.
   */
-  handleCardState: function sm_handleCardState(callback) {
-    if (callback)
-      this.accessCallback = callback;
+  handleCardState: function sm_handleCardState() {
     switch (this.mobConn.cardState) {
       case 'pinRequired':
         this.showPinScreen();
@@ -69,29 +67,27 @@ var SimManager = {
         this.showPukScreen();
         break;
       case 'ready':
-        if (this.accessCallback) {
-          this.accessCallback(true);
+        if (typeof this.oncardstatechange === 'function') {
+          this.oncardstatechange(true);
         }
         break;
     }
-
     SimManager.checkSIMButton();
   },
 
   checkSIMButton: function sm_checkSIMButton() {
     var simOption = UIManager.simImportButton;
     // If there is an unlocked SIM we activate import from SIM
-    if (!this.alreadyImported && SimManager.available()) {
+    if (!SimManager.alreadyImported && SimManager.available()) {
       simOption.removeAttribute('disabled');
       UIManager.noSim.classList.add('hidden');
     } else {
       simOption.setAttribute('disabled', 'disabled');
-      if (!this.alreadyImported) {
+      if (!SimManager.alreadyImported) {
         UIManager.noSim.classList.remove('hidden');
       }
     }
   },
-  accessCallback: null,
 
   showPinScreen: function sm_showScreen() {
     UIManager.activationScreen.classList.remove('show');
@@ -118,7 +114,9 @@ var SimManager = {
 
   skip: function sm_skip() {
     this.hideScreen();
-    this.accessCallback(false);
+    if (typeof this.oncardstatechange === 'function') {
+        this.oncardstatechange(false);
+    }
   },
 
   unlock: function sm_unlock() {

diff --git a/apps/communications/ftu/locales/ftu.en-US.properties b/apps/communications/ftu/locales/ftu.en-US.properties
@@ -108,6 +108,7 @@ fb-checking     = … checking
 notImportedYet  = Not imported yet
 otherAccount    = Other accounts
 mobile = Mobile
+afterFbImport   = You can import and edit Facebook friends anytime in Contacts settings
 
 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 # About your rights