Merge branch 'pr/84'

Conflicts:
	app/css/app.css

app/css/app.css

@@ -293,6 +293,10 @@ fieldset[disabled] .btn-tg.active {
   opacity: 1;
 }
 
+.text-invisible {
+  visibility: hidden;
+}
+
 .modal-header {
   padding: 12px 0 4px 3px;
   border-bottom: 2px solid #E1E1E1;
@@ -1438,6 +1442,49 @@ img.img_fullsize {
 .user_modal_wrap .modal-body {
   padding: 23px 25px 30px;
 }
+.settings_profile_photo_wrap {
+  width: 120px;
+  margin-right: 22px;
+}
+.settings_profile_photo {
+  position: relative;
+  overflow: hidden;
+}
+.settings_profile_photo_change_wrap {
+  background: rgba(0,0,0,0.6);
+  padding: 2px 5px;
+  position: absolute;
+  opacity: 0;
+  bottom: -30px;
+
+  -webkit-transition: all ease-in-out 0.2s;
+  transition: all ease-in-out 0.2s;
+  width: 120px;
+}
+.settings_profile_photo:hover .settings_profile_photo_change_wrap {
+  bottom: 0;
+  opacity: 1;
+}
+
+.settings_profile_photo_update_link,
+.settings_profile_photo_delete_link,
+.settings_profile_photo_loading {
+  display: block;
+  color: rgba(255,255,255,0.8);
+  text-align: center;
+  padding: 2px 0;
+}
+.settings_profile_photo_update_link:hover,
+.settings_profile_photo_delete_link:hover {
+  color: #FFF;
+  text-decoration: none;
+}
+.settings_profile_photo_update_link {
+  position: relative;
+  overflow: hidden;
+}
+
+
 .user_modal_image_wrap {
   width: 120px;
   margin-right: 22px;
@@ -1711,11 +1758,21 @@ img.img_fullsize {
 .settings_profile_edit_form {
   margin-bottom: 15px;
 }
+.settings_profile_image_wrap {
+  float: left;
+  width: 120px;
+  margin-right: 22px;
+}
 .settings_profile_first_name,
 .settings_profile_last_name {
   width: 180px;
+  margin-bottom: 10px;
   float: left;
 }
+.settings_profile_first_name label,
+.settings_profile_last_name label {
+  margin-bottom: 3px;
+}
 .settings_profile_first_name {
   margin-right: 22px;
 }
@@ -2173,7 +2230,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
 }
 
 
-
 /* Dialogs modal */
 .peer_select_window .modal-dialog {
   max-width: 506px;
@@ -2181,7 +2237,3 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
 .peer_select_modal_wrap .modal-body {
   padding: 10px 10px 15px;
 }
-
-.text-invisible {
-  visibility: hidden;
-}

app/js/controllers.js

@@ -944,7 +944,7 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager) {
+  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager) {
 
     $scope.profile = {};
 
@@ -952,6 +952,7 @@ angular.module('myApp.controllers', [])
       var user = AppUsersManager.getUser(id);
       $scope.profile.first_name = user.first_name;
       $scope.profile.last_name = user.last_name;
+      $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
 
       $scope.phone = user.phone;
     });
@@ -959,6 +960,58 @@ angular.module('myApp.controllers', [])
     $scope.notify = {};
     $scope.send = {};
 
+    $scope.photo = {};
+
+    $scope.$watch('photo.file', onPhotoSelected);
+
+    function onPhotoSelected (photo) {
+      if (!photo || !photo.hasOwnProperty('name')) {
+        return;
+      }
+      $scope.photo.updating = true;
+      MtpApiFileManager.uploadFile(photo).then(function (inputFile) {
+        MtpApiManager.invokeApi('photos.uploadProfilePhoto', {
+          file: inputFile,
+          caption: '',
+          geo_point: {_: 'inputGeoPointEmpty'},
+          crop: {_: 'inputPhotoCropAuto'}
+        }).then(function (updateResult) {
+          AppUsersManager.saveApiUsers(updateResult.users);
+          MtpApiManager.getUserID().then(function (id) {
+            ApiUpdatesManager.saveUpdate({
+              _: 'updateUserPhoto',
+              user_id: id,
+              date: tsNow(true),
+              photo: AppUsersManager.getUser(id).photo,
+              previous: true
+            });
+            $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
+          });
+          $scope.photo.updating = false;
+        });
+      });
+    };
+
+    $scope.deletePhoto = function () {
+      $scope.photo.updating = true;
+      MtpApiManager.invokeApi('photos.updateProfilePhoto', {
+        id: {_: 'inputPhotoEmpty'},
+        crop: {_: 'inputPhotoCropAuto'}
+      }).then(function (updateResult) {
+        MtpApiManager.getUserID().then(function (id) {
+          ApiUpdatesManager.saveUpdate({
+            _: 'updateUserPhoto',
+            user_id: id,
+            date: tsNow(true),
+            photo: updateResult,
+            previous: true
+          });
+          $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
+        });
+        $scope.photo.updating = false;
+      });
+    };
+
     AppConfigManager.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter').then(function (settings) {
       $scope.notify.desktop = !settings[0];
       $scope.notify.sound = !settings[1];

app/js/directives.js

@@ -520,7 +520,9 @@ angular.module('myApp.directives', ['myApp.filters'])
           return;
         }
 
-        element.attr('src', scope.thumb.placeholder || 'img/blank.gif');
+        if (!element.attr('src')) {
+          element.attr('src', scope.thumb.placeholder || 'img/blank.gif');
+        }
 
         MtpApiFileManager.downloadSmallFile(scope.thumb.location, scope.thumb.size).then(function (url) {
           if (counterSaved == counter) {
@@ -794,4 +796,25 @@ angular.module('myApp.directives', ['myApp.filters'])
         }, 100);
       }
     };
+  })
+
+  .directive('myFileUpload', function(){
+
+    return {
+      link: link
+    };
+
+    function link(scope, element, attrs) {
+      element.on('change', function () {
+        var self = this;
+        scope.$apply(function () {
+          scope.photo.file = self.files[0];
+          setTimeout(function () {
+            try {
+              self.value = '';
+            } catch (e) {};
+          }, 1000);
+        });
+      });
+    };
   });

app/js/util.js

@@ -54,8 +54,9 @@ function onContentLoaded (cb) {
   setTimeout(cb, 0);
 };
 
-function tsNow () {
-  return +new Date();
+function tsNow (seconds) {
+  var t = +new Date();
+  return seconds ? Math.floor(t / 1000) : t;
 }
 
 function safeReplaceObject (wasObject, newObject) {

app/partials/settings_modal.html

@@ -7,7 +7,30 @@
 
   <div class="modal-body">
 
-    <form name="profileForm" class="settings_profile_edit_form clearfix">
+    <div class="settings_profile_photo_wrap pull-left">
+
+      <div class="settings_profile_photo">
+        <img
+          class="user_modal_image"
+          my-load-thumb
+          thumb="profile.photo"
+        />
+        <div class="settings_profile_photo_change_wrap">
+          <div ng-if="photo.updating" class="settings_profile_photo_loading">Updating<span my-typing-dots></span></div>
+          <div ng-if="!photo.updating">
+            <div class="settings_profile_photo_update_link">
+              <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
+              Update photo
+            </div>
+            <a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <form my-settings-form name="profileForm" class="settings_profile_edit_form clearfix">
+
       <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
         <label class="control-label" for="first_name">
           <span ng-if="error.field == 'first_name'">Invalid First Name</span>
@@ -27,6 +50,7 @@
       <div class="settings_profile_save">
         <button class="btn btn-link settings_profile_save_btn" ng-click="save(profileForm)" ng-disabled="profileForm.$invalid || (!profileForm.last_name.$dirty &amp;&amp; !profileForm.first_name.$dirty)">Save</button>
       </div>
+
     </form>
 
     <form class="settings_send_choose_form">