Handling empty contacts/phonebook

Closes #409

app/css/app.css

@@ -2899,6 +2899,18 @@ a:hover .icon-twitter {
   padding: 0 17px 0 0;
   outline: none ! important;
 }
+.contacts_modal_contacts_empty {
+  visibility: hidden;
+  text-align: center;
+  color: #999;
+  font-size: 16px;
+  line-height: 18px;
+  padding: 1px 50px;
+  margin: 0;
+}
+.contacts_modal_contacts_empty.vertical-aligned {
+  visibility: visible;
+}
 
 
 .contacts_modal_members_list .contacts_modal_contact_wrap {

app/js/controllers.js

@@ -2057,6 +2057,7 @@ angular.module('myApp.controllers', [])
           }
           $scope.contacts.push(contact);
         });
+        $scope.contactsEmpty = query ? false : !$scope.contacts.length;
         $scope.$broadcast('contacts_change');
       });
     };
@@ -2313,6 +2314,10 @@ angular.module('myApp.controllers', [])
       $scope.toggleSelection(true);
       phonebookReady = true;
       updateList();
+    }, function (error) {
+      ErrorService.show({
+        error: {code: 403, type: 'PHONEBOOK_GET_CONTACTS_FAILED', originalError: error}
+      });
     });
 
     function updateList () {
@@ -2324,6 +2329,7 @@ angular.module('myApp.controllers', [])
         results = SearchIndexManager.search($scope.search.query, searchIndex);
 
         $scope.contacts = [];
+        delete $scope.contactsEmpty;
         for (var i = 0; i < $scope.phonebook.length; i++) {
           if (!filtered || results[i]) {
             $scope.contacts.push($scope.phonebook[i]);
@@ -2331,6 +2337,7 @@ angular.module('myApp.controllers', [])
         }
       } else {
         $scope.contacts = $scope.phonebook;
+        $scope.contactsEmpty = !$scope.contacts.length;
       }
 
       $scope.slice.limit = 20;

app/partials/contacts_modal.html

@@ -35,9 +35,13 @@
     <div my-contacts-list class="contacts_modal_col">
 
       <div class="contacts_wrap nano" my-infinite-scroller>
-        <div class="contacts_scrollable_wrap nano-content">
+        <div class="contacts_scrollable_wrap nano-content" ng-switch="contactsEmpty">
 
-          <ul class="contacts_modal_members_list nav nav-pills nav-stacked">
+          <div ng-switch-when="true" class="contacts_modal_contacts_empty" my-vertical-position="0.2" padding="true">
+            Your contacts list is empty. You can <a href="" ng-click="importContact()">add new contact</a> by phone number.
+          </div>
+
+          <ul ng-switch-default class="contacts_modal_members_list nav nav-pills nav-stacked">
 
             <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
               <a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)">

app/partials/error_modal.html

@@ -56,7 +56,9 @@
       <span ng-switch-when="USERS_NOT_USING_TELEGRAM">
         Sorry, there are no <strong>Telegram</strong> accounts with the phone numbers you provided.
       </span>
-
+      <span ng-switch-when="PHONEBOOK_GET_CONTACTS_FAILED">
+        Telegram need access to phonebook to import contacts.
+      </span>
 
       <div ng-switch-default ng-switch="error.code">
         <span ng-switch-when="400">One of the params is missing or invalid.</span>

app/partials/mobile/phonebook_modal.html

@@ -40,9 +40,13 @@
     <div my-contacts-list class="contacts_modal_col">
 
       <div class="contacts_wrap nano" my-infinite-scroller>
-        <div class="contacts_scrollable_wrap nano-content">
+        <div class="contacts_scrollable_wrap nano-content" ng-switch="contactsEmpty">
 
-          <ul class="contacts_modal_members_list nav nav-pills nav-stacked">
+          <div ng-switch-when="true" class="contacts_modal_contacts_empty" my-vertical-position="0.2" padding="true">
+            Your phonebook is empty.
+          </div>
+
+          <ul ng-switch-default class="contacts_modal_members_list nav nav-pills nav-stacked">
 
             <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | limitTo: slice.limit track by contact.id" ng-class="{active: selectedContacts[contact.id]}">
               <a class="contacts_modal_contact" ng-click="contactSelect(contact.id)">