From 365efe60379bcabb311e280dee9f89ab4505abf0 Mon Sep 17 00:00:00 2001
From: Haktrum <FulanitoX@gmail.com>
Date: Sun, 23 Feb 2014 19:53:14 -0300
Subject: [PATCH 1/2] Fix to #75 - Added support for updating user photo

---
 app/css/app.css                  | 15 +++++++++++++++
 app/js/controllers.js            | 29 ++++++++++++++++++++++++++++-
 app/js/directives.js             | 21 +++++++++++++++++++++
 app/partials/settings_modal.html | 14 +++++++++++++-
 4 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 48c621b8..8ed381a3 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -2067,4 +2067,19 @@ img.img_fullsize {
   .im_emoji_btn {
     display: none;
   }
+}
+
+.user_photo_update {
+  cursor: pointer;
+  display: block;
+  overflow: hidden;
+  padding: 0;
+
+  margin-top: 5px;
+  margin-left: 20px;
+  width: 120px;
+  height: 120px;
+  left: 0;
+  top: 15px;
+  position: absolute;
 }
\ No newline at end of file
diff --git a/app/js/controllers.js b/app/js/controllers.js
index a3d614c1..661f82c8 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -833,7 +833,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) {
 
     $scope.profile = {};
 
@@ -841,12 +841,39 @@ 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;
     });
 
     $scope.notify = {};
     $scope.send = {};
+    $scope.profile.userPhoto = {};
+    $scope.updatingPhoto = false;
+
+    $scope.$watch('profile.userPhoto', onPhotoSelected);
+
+    function onPhotoSelected (photo) {
+      if (!photo.hasOwnProperty('name')) {
+        return;
+      }
+      $scope.updatingPhoto = true;
+      MtpApiFileManager.uploadFile(photo).then(function (inputFile) {
+        MtpApiManager.invokeApi('photos.uploadProfilePhoto', {
+          file: inputFile,
+          caption: '',
+          geo_point: {_: 'inputGeoPointEmpty'},
+          crop: {_: 'inputPhotoCropAuto'}
+        }).then(function() {
+          MtpApiManager.getUserID().then(function (id) {
+            console.log($scope.profile.photo);
+            $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
+            console.log($scope.profile.photo);
+          });
+          $scope.updatingPhoto = false;
+        });
+      });
+    };
 
     AppConfigManager.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter').then(function (settings) {
       $scope.notify.desktop = !settings[0];
diff --git a/app/js/directives.js b/app/js/directives.js
index 7308be7a..fcec9124 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -749,4 +749,25 @@ angular.module('myApp.directives', ['myApp.filters'])
         }, 100);
       }
     };
+  })
+
+  .directive('mySettingsForm', function(){
+    return {
+      link: link
+    };
+
+    function link(scope, element, attrs) {
+      var photoSelect = $('input.im_attach_input', element);
+      photoSelect.on('change', function () {
+        var self = this;
+        scope.$apply(function () {
+          scope.profile.userPhoto = self.files[0];
+          setTimeout(function () {
+            try {
+              self.value = '';
+            } catch (e) {};
+          }, 1000);
+        });
+      });
+    };
   });
diff --git a/app/partials/settings_modal.html b/app/partials/settings_modal.html
index 435720b6..0bddf812 100644
--- a/app/partials/settings_modal.html
+++ b/app/partials/settings_modal.html
@@ -7,7 +7,19 @@
 
   <div class="modal-body">
 
-    <form name="profileForm" class="settings_profile_edit_form clearfix">
+    <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">
+        <img
+          class="user_modal_image"
+          my-load-thumb
+          thumb="profile.photo"
+        />
+        <span ng-if="updatingPhoto">Uploading<span my-typing-dots></span></span>
+      </div>
+
       <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>

From 2f9ec045ee36d7312fbe88fd2219a874ffcbd9ee Mon Sep 17 00:00:00 2001
From: Igor Zhukov <igor.beatle@gmail.com>
Date: Sun, 2 Mar 2014 14:37:24 +0100
Subject: [PATCH 2/2] Improved update photo

---
 app/css/app.css                  | 53 ++++++++++++++++++++++++++++++++
 app/js/controllers.js            | 46 +++++++++++++++++++++------
 app/js/directives.js             | 12 +++++---
 app/js/util.js                   |  5 +--
 app/partials/settings_modal.html | 24 +++++++++++----
 5 files changed, 117 insertions(+), 23 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 8ed381a3..7b3f5482 100644
--- a/app/css/app.css
+++ b/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;
 }
diff --git a/app/js/controllers.js b/app/js/controllers.js
index 661f82c8..ff921aa0 100644
--- a/app/js/controllers.js
+++ b/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;
       });
     };
 
diff --git a/app/js/directives.js b/app/js/directives.js
index fcec9124..28e962fc 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -479,7 +479,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) {
@@ -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 = '';
diff --git a/app/js/util.js b/app/js/util.js
index d49edbd6..1d438142 100644
--- a/app/js/util.js
+++ b/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) {
diff --git a/app/partials/settings_modal.html b/app/partials/settings_modal.html
index 0bddf812..2b44eff2 100644
--- a/app/partials/settings_modal.html
+++ b/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">