diff --git a/app/css/app.css b/app/css/app.css index d61e2d77..79767cc9 100644 --- a/app/css/app.css +++ b/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,15 +2230,10 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status { } - /* Dialogs modal */ .peer_select_window .modal-dialog { max-width: 506px; } .peer_select_modal_wrap .modal-body { padding: 10px 10px 15px; -} - -.text-invisible { - visibility: hidden; } \ No newline at end of file diff --git a/app/js/controllers.js b/app/js/controllers.js index c7ca2d4d..d383099c 100644 --- a/app/js/controllers.js +++ b/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]; diff --git a/app/js/directives.js b/app/js/directives.js index 27053a78..1ff5c352 100644 --- a/app/js/directives.js +++ b/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); + }); + }); + }; }); 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 435720b6..2b44eff2 100644 --- a/app/partials/settings_modal.html +++ b/app/partials/settings_modal.html @@ -7,7 +7,30 @@