diff --git a/app/coffee/modules/user-settings/main.coffee b/app/coffee/modules/user-settings/main.coffee index e367587b..5f4c4a24 100644 --- a/app/coffee/modules/user-settings/main.coffee +++ b/app/coffee/modules/user-settings/main.coffee @@ -128,14 +128,16 @@ UserAvatarDirective = ($auth, $model, $rs, $confirm) -> target = angular.element(event.currentTarget) promise = $rs.userSettings.changeAvatar($scope.avatarAttachment) - + $el.find('.overlay').show(); promise.then (response) -> user = $model.make_model("users", response.data) $auth.setUser(user) $scope.user = user + $el.find('.overlay').hide(); $confirm.notify('success') promise.then null, (response) -> console.log response + $el.find('.overlay').hide(); $confirm.notify('error', response.data._error_message) return {link:link} diff --git a/app/partials/user-profile.jade b/app/partials/user-profile.jade index 4f328b9f..4e6614de 100644 --- a/app/partials/user-profile.jade +++ b/app/partials/user-profile.jade @@ -18,7 +18,10 @@ block content div.container div.avatar-container fieldset(tg-user-avatar) - img.avatar(ng-src="{{user.big_photo}}" alt="avatar") + .image-container + img.avatar(ng-src="{{user.big_photo}}" alt="avatar") + div.overlay + span.icon.icon-spinner input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden") p The image will be cropped to 80x80 size. a.button.button-green.change Change diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss index c471f910..a675cef2 100644 --- a/app/styles/modules/user-settings/user-profile.scss +++ b/app/styles/modules/user-settings/user-profile.scss @@ -8,11 +8,32 @@ .avatar-container { @include table-flex-child(1, 0, 0); margin-right: 1rem; + .image-container { + position: relative; + } img { border: 2px solid $white; border-radius: 8%; width: 100%; } + .overlay { + background: rgba($white, .9); + bottom: 0; + left: 0; + display: none; + position: absolute; + right: 0; + top: 0; + } + .icon-spinner { + @extend %xlarge; + //@include transform(translate(50%, 50%)); + @include animation(spin infinite .8s linear); + color: $gray-light; + left: 40%; + position: absolute; + top: 40%; + } p { @extend %xsmall; margin-bottom: 0;