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 @@