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

Adding spinners and UX interactions in detail save

stable
Xavier Julián 2014-10-23 18:45:24 +02:00 committed by David Barragán Merino
parent 03dbcbb4c8
commit 5952ab306b
4 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/coffee/modules/common/components.coffee
View File

@ -439,7 +439,9 @@ EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading) ->
</div> </div>
<div class="edit-subject"> <div class="edit-subject">
<input type="text" ng-model="item.subject" data-required="true" data-maxlength="500"/> <input type="text" ng-model="item.subject" data-required="true" data-maxlength="500"/>
<a class="save icon icon-floppy" href="" title="Save" /> <span class="save-container">
<a class="save icon icon-floppy" href="" title="Save" />
</span>
</div> </div>
""" """
@ -520,7 +522,9 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
<textarea placeholder="Write a description of your user story" <textarea placeholder="Write a description of your user story"
ng-model="item.description" ng-model="item.description"
tg-markitup="tg-markitup"></textarea> tg-markitup="tg-markitup"></textarea>
<a class="save icon icon-floppy" href="" title="Save" /> <span class="save-container">
<a class="save icon icon-floppy" href="" title="Save" />
</span>
</div> </div>
""" # TODO: i18n """ # TODO: i18n
noDescriptionMegEditMode = """ noDescriptionMegEditMode = """
@ -578,7 +582,7 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
if isEditable() if isEditable()
$el.find('.view-description .edit').show() $el.find('.view-description .edit').show()
$el.find('.view-description p').addClass('editable') $el.find('.view-description .us-content').addClass('editable')
$scope.noDescriptionMsg = noDescriptionMegEditMode $scope.noDescriptionMsg = noDescriptionMegEditMode
else else
$scope.noDescriptionMsg = noDescriptionMegReadMode $scope.noDescriptionMsg = noDescriptionMegReadMode

4
app/styles/layout/elements.scss
View File

@ -39,6 +39,10 @@ sup {
vertical-align: middle; vertical-align: middle;
} }
.icon-spinner {
@include animation (spin 1s linear infinite);
}
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }

20
app/styles/layout/us-detail.scss
View File

@ -81,7 +81,8 @@
width: 100%; width: 100%;
} }
.icon-edit, .icon-edit,
.icon-floppy { .icon-floppy,
.icon-spinner {
@extend %large; @extend %large;
color: $gray-light; color: $gray-light;
margin-left: .5rem; margin-left: .5rem;
@ -178,23 +179,20 @@
height: 10rem; height: 10rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
a.save { .save-container {
color: $blackish;
opacity: .6;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .6rem; top: .2rem;
.save {
color: $blackish;
opacity: .6;
top: 0;
}
&:hover { &:hover {
@include transition(opacity .2s linear); @include transition(opacity .2s linear);
opacity: .3; opacity: .3;
} }
} }
.save-container {
&.loading span {
@include animation (loading .5s linear);
@include animation (spin 1s linear infinite);
}
}
.edit { .edit {
color: $grayer; color: $grayer;

2
app/styles/main.scss
View File

@ -18,11 +18,11 @@ $prefix-for-spec: true;
@import 'dependencies/helpers'; @import 'dependencies/helpers';
@import 'dependencies/colors'; @import 'dependencies/colors';
@import 'dependencies/typography'; @import 'dependencies/typography';
@import 'dependencies/animation';
@import 'dependencies/elements'; @import 'dependencies/elements';
@import 'dependencies/mixins'; @import 'dependencies/mixins';
@import 'dependencies/responsive'; @import 'dependencies/responsive';
@import 'dependencies/forms'; @import 'dependencies/forms';
@import 'dependencies/animation';
//################################################# //#################################################
// components // components