less obtrusive saved indicator, fixes #122

This commit is contained in:
azivner 2018-11-22 20:25:49 +01:00
parent 1db2f0c2c5
commit d82898421e
4 changed files with 21 additions and 6 deletions

View file

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

View file

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

View file

@ -1,4 +1,6 @@
<div id="note-detail-wrapper"> <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> <div id="note-detail-script-area"></div>
<table id="note-detail-promoted-attributes"></table> <table id="note-detail-promoted-attributes"></table>

View file

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