Improved update photo

app/css/app.css

@@ -1411,6 +1411,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;
@@ -1680,11 +1723,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;
 }

app/js/controllers.js

@@ -833,7 +833,7 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager) {
+  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager) {
 
     $scope.profile = {};
 
@@ -848,30 +848,56 @@ angular.module('myApp.controllers', [])
 
     $scope.notify = {};
     $scope.send = {};
-    $scope.profile.userPhoto = {};
-    $scope.updatingPhoto = false;
 
-    $scope.$watch('profile.userPhoto', onPhotoSelected);
+    $scope.photo = {};
+
+    $scope.$watch('photo.file', onPhotoSelected);
 
     function onPhotoSelected (photo) {
-      if (!photo.hasOwnProperty('name')) {
+      if (!photo || !photo.hasOwnProperty('name')) {
         return;
       }
-      $scope.updatingPhoto = true;
+      $scope.photo.updating = true;
       MtpApiFileManager.uploadFile(photo).then(function (inputFile) {
         MtpApiManager.invokeApi('photos.uploadProfilePhoto', {
           file: inputFile,
           caption: '',
           geo_point: {_: 'inputGeoPointEmpty'},
           crop: {_: 'inputPhotoCropAuto'}
-        }).then(function() {
+        }).then(function (updateResult) {
+          AppUsersManager.saveApiUsers(updateResult.users);
           MtpApiManager.getUserID().then(function (id) {
-            console.log($scope.profile.photo);
+            ApiUpdatesManager.saveUpdate({
+              _: 'updateUserPhoto',
+              user_id: id,
+              date: tsNow(true),
+              photo: AppUsersManager.getUser(id).photo,
+              previous: true
+            });
             $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
-            console.log($scope.profile.photo);
           });
-          $scope.updatingPhoto = false;
+          $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;
       });
     };
 

app/js/directives.js

@@ -479,7 +479,9 @@ angular.module('myApp.directives', ['myApp.filters'])
           return;
         }
 
+        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) {
@@ -751,17 +753,17 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
   })
 
-  .directive('mySettingsForm', function(){
+  .directive('myFileUpload', function(){
+
     return {
       link: link
     };
 
     function link(scope, element, attrs) {
-      var photoSelect = $('input.im_attach_input', element);
-      photoSelect.on('change', function () {
+      element.on('change', function () {
         var self = this;
         scope.$apply(function () {
-          scope.profile.userPhoto = self.files[0];
+          scope.photo.file = self.files[0];
           setTimeout(function () {
             try {
               self.value = '';

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,19 +7,30 @@
 
   <div class="modal-body">
 
-    <form my-settings-form name="profileForm" class="settings_profile_edit_form clearfix">
-      <div class="user_photo_update">
-        <input ng-model="userPhoto" type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
-      </div>
-      <div class="form-group settings_profile_user_photo">
+    <div class="settings_profile_photo_wrap pull-left">
+
+      <div class="settings_profile_photo">
         <img
           class="user_modal_image"
           my-load-thumb
           thumb="profile.photo"
         />
-        <span ng-if="updatingPhoto">Uploading<span my-typing-dots></span></span>
+        <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>
@@ -39,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">