less obtrusive saved indicator, fixes #122

src/public/javascripts/services/note_detail.js

@@ -28,6 +28,7 @@ const $noteDetailWrapper = $("#note-detail-wrapper");
 const $noteIdDisplay = $("#note-id-display");
 const $childrenOverview = $("#children-overview");
 const $scriptArea = $("#note-detail-script-area");
+const $savedIndicator = $("#saved-indicator");
 
 let currentNote = null;
 
@@ -78,6 +79,8 @@ function noteChanged() {
     }
 
     isNoteChanged = true;
+
+    $savedIndicator.fadeOut();
 }
 
 async function reload() {
@@ -120,15 +123,16 @@ async function saveNote() {
         protectedSessionHolder.touchProtectedSession();
     }
 
-    infoService.showMessage("Saved!");
+    $savedIndicator.fadeIn();
 }
 
 async function saveNoteIfChanged() {
-    if (!isNoteChanged) {
-        return;
+    if (isNoteChanged) {
+        await saveNote();
     }
 
-    await saveNote();
+    // make sure indicator is visible in a case there was some race condition.
+    $savedIndicator.fadeIn();
 }
 
 function setNoteBackgroundIfProtected(note) {
@@ -294,7 +298,7 @@ $(document).ready(() => {
 // this sends the request asynchronously and doesn't wait for result
 $(window).on('beforeunload', () => { saveNoteIfChanged(); }); // don't convert to short form, handler doesn't like returned promise
 
-setInterval(saveNoteIfChanged, 5000);
+setInterval(saveNoteIfChanged, 3000);
 
 export default {
     reload,

src/public/stylesheets/style.css

@@ -676,3 +676,12 @@ code {
 div[data-notify="container"] {
     text-align: center;
 }
+
+#saved-indicator {
+    position: absolute;
+    right: 10px;
+    top: 11px;
+    font-size: x-large;
+    color: #777;
+    z-index: 100;
+}

src/views/details/detail.ejs

@@ -1,4 +1,6 @@
 <div id="note-detail-wrapper">
+    <span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
+
     <div id="note-detail-script-area"></div>
 
     <table id="note-detail-promoted-attributes"></table>

src/views/details/relation_map.ejs

@@ -11,7 +11,7 @@
             title="Reset pan & zoom to initial coordinates and magnification"
             id="relation-map-reset-pan-zoom" style="right: 100px;"></button>
 
-    <div class="btn-group floating-button" style="right: 20px;">
+    <div class="btn-group floating-button" style="right: 40px;">
         <button type="button"
                 class="btn icon-button jam jam-search-plus"
                 title="Zoom In"