Fix "saving" div, set display: none it when it isn't active

[#95683166]

So it doesn't overlap and doesn't block any other elements (e.g. buttons).

Author: pjanik

app/assets/javascripts/image_question_drawing_tool.js.coffee

@@ -78,6 +78,8 @@ class ImageQuestionDrawingTool
       proxy: DRAWING_TOOL_PROXY
     })
 
+    @save_indicator = SaveIndicator.instance()
+
     # See: https://www.pivotaltracker.com/story/show/77973722
     @drawing_tool.setStrokeColor('#e66665') if @is_snapshot_question()
 
@@ -123,11 +125,11 @@ class ImageQuestionDrawingTool
         @$displayed_answer.html(data.answer_html)
         @update_display()
         @hide_dialog()
-        @show_saved()
+        @save_indicator.showSaved()
         @set_dialog_buttons_enabled(true)
         stopWaiting()
       ).on('ajax:error', (e, xhr, status, error) =>
-        @save_failed()
+        @save_indicator.showSaveFailed()
         @set_dialog_buttons_enabled(true)
         stopWaiting()
       )
@@ -136,7 +138,7 @@ class ImageQuestionDrawingTool
     $('#modal-dialog').html "<div class='dialog-error'>#{message}</div>"
     $('#modal-dialog').dialog(title: "Network error", modal: true, dialogClass:"network-error")
     stopWaiting()
-    @save_failed()
+    @save_indicator.showSaveFailed()
     @set_dialog_buttons_enabled(true)
 
   take_interactive_snapshot: ->
@@ -212,22 +214,8 @@ class ImageQuestionDrawingTool
       @drawing_tool.resetHistory()
     )
 
-  show_saved: ->
-    @saveTimer = setTimeout ->
-      $("#save").html("Saved.")
-      # Fade out.
-      $("#save").animate({"opacity": "0"}, "slow")
-    , 1000
-
-  save_failed: ->
-    $("#save").html("Save failed!")
-
-  show_saving: ->
-    $("#save").html("Saving...")
-    $("#save").animate({"opacity": "1.0"}, "fast")
-
   start_saving: ->
-    @show_saving()
+    @save_indicator.showSaving()
     @set_dialog_buttons_enabled(false)
     startWaiting t('PLEASE_WAIT_SAVING_DRAWING')
     # Clear selection so it's not visible on the screenshot.

app/assets/javascripts/save-indicator.coffee

@@ -11,33 +11,34 @@ class SaveIndicator
     @$elem      = $(id)
     @clear()  # start hidden.
 
-  clear: () ->
+  clear: ->
+    @$elem.removeClass('msg-visible')
     @$elem.removeClass('error')
-    @$elem.css('opacity',0)
+    @$elem.css('opacity', 0)
 
   showSaveFailed: (message="Save failed!") ->
-    @$elem.removeClass("pending")
+    @$elem.addClass('msg-visible')
     @$elem.addClass("error")
     @$elem.html(message)
 
   showUnauthorized: (message="Unauthorized!") ->
-    @$elem.removeClass("pending")
-    @$elem.addClass("error")
+    @$elem.addClass('msg-visible')
+    @$elem.addClass('error')
     @$elem.html(message)
 
   showSaved: (message="Saved.") ->
     # Wait a ½ second before actually displaying:
     @saveTimer = setTimeout =>
-      @$elem.removeClass("error")
-      @$elem.removeClass("pending")
+      @$elem.addClass('msg-visible')
+      @$elem.removeClass('error')
       @$elem.html(message)
-      @$elem.animate({'opacity': '0'}, 'slow') # Fade out.
+      @$elem.animate({'opacity': '0'}, {duration: 'slow', complete: => @clear()}) # Fade out.
     , 500
 
   showSaving: ->
-    @$elem.removeClass("error")
-    @$elem.addClass("pending")
-    @$elem.html("Saving...")
+    @$elem.addClass('msg-visible')
+    @$elem.removeClass('error')
+    @$elem.html('Saving...')
     @$elem.css({'opacity': '0.5'})
     @$elem.animate({'opacity': '1.0'}, 'fast')
 

app/assets/stylesheets/save-on-change.scss

@@ -14,6 +14,7 @@
   right: 20px;
   background-color: rgba( lighten($med-blue, 20%), 0.9 );
   border: 1px solid lighten($med-blue, 17%);
+  display: none;
   @include border-radius(3px);
   @include trans;
   &.error {
@@ -24,6 +25,9 @@
   &.saved {
     // background-color: #EEE;
   }
+  &.msg-visible {
+    display: block;
+  }
 }//save
 .question.did_try_to_navigate {
   .missing_required {