diff --git a/apps/communications/ftu/css/style.css b/apps/communications/ftu/css/style.css index eaa74362dd48..2c512db7164e 100644 --- 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 index 6eaa08513fb7..a49fdee3fe99 100644 --- a/apps/communications/ftu/index.html +++ b/apps/communications/ftu/index.html @@ -229,9 +229,9 @@

    -
  • +
  • To import insert a SIM card

  • @@ -241,10 +241,21 @@

    Other accounts

    -
      -
    • +
        +
      • + + +
      • + +
    diff --git a/apps/communications/ftu/js/facebook.js b/apps/communications/ftu/js/facebook.js index 511ec83e38bb..735089d9721d 100644 --- 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 index f95fc0d8e889..c757c20b58a6 100644 --- 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 index 54c4801f0411..0e55a85f167d 100644 --- 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 index 95f469a06ccf..01af6f3d2251 100644 --- 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