Adding spinners and UX interactions in detail save

app/coffee/modules/common/components.coffee

@@ -439,7 +439,9 @@ EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading) ->
         </div>
         <div class="edit-subject">
             <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>
     """
 
@@ -520,7 +522,9 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
             <textarea placeholder="Write a description of your user story"
                       ng-model="item.description"
                       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>
     """ # TODO: i18n
     noDescriptionMegEditMode = """
@@ -578,7 +582,7 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
 
             if isEditable()
                 $el.find('.view-description .edit').show()
-                $el.find('.view-description p').addClass('editable')
+                $el.find('.view-description .us-content').addClass('editable')
                 $scope.noDescriptionMsg = noDescriptionMegEditMode
             else
                 $scope.noDescriptionMsg = noDescriptionMegReadMode

app/styles/layout/elements.scss

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

app/styles/layout/us-detail.scss

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

app/styles/main.scss

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