taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Añadir spinner al cambio de imagen del perfil de usuario #342

stable
Xavier Julián 2014-08-12 13:18:29 +02:00
parent 8274c37ab3
commit 5f040b454b
3 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/coffee/modules/user-settings/main.coffee
View File

@ -128,14 +128,16 @@ UserAvatarDirective = ($auth, $model, $rs, $confirm) ->
target = angular.element(event.currentTarget) target = angular.element(event.currentTarget)
promise = $rs.userSettings.changeAvatar($scope.avatarAttachment) promise = $rs.userSettings.changeAvatar($scope.avatarAttachment)
$el.find('.overlay').show();
promise.then (response) -> promise.then (response) ->
user = $model.make_model("users", response.data) user = $model.make_model("users", response.data)
$auth.setUser(user) $auth.setUser(user)
$scope.user = user $scope.user = user
$el.find('.overlay').hide();
$confirm.notify('success') $confirm.notify('success')
promise.then null, (response) -> promise.then null, (response) ->
console.log response console.log response
$el.find('.overlay').hide();
$confirm.notify('error', response.data._error_message) $confirm.notify('error', response.data._error_message)
return {link:link} return {link:link}

5
app/partials/user-profile.jade
View File

@ -18,7 +18,10 @@ block content
div.container div.container
div.avatar-container div.avatar-container
fieldset(tg-user-avatar) 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") input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden")
p The image will be cropped to 80x80 size. p The image will be cropped to 80x80 size.
a.button.button-green.change Change a.button.button-green.change Change

21
app/styles/modules/user-settings/user-profile.scss
View File

@ -8,11 +8,32 @@
.avatar-container { .avatar-container {
@include table-flex-child(1, 0, 0); @include table-flex-child(1, 0, 0);
margin-right: 1rem; margin-right: 1rem;
.image-container {
position: relative;
}
img { img {
border: 2px solid $white; border: 2px solid $white;
border-radius: 8%; border-radius: 8%;
width: 100%; 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 { p {
@extend %xsmall; @extend %xsmall;
margin-bottom: 0; margin-bottom: 0;