1 files changed, 34 insertions, 6 deletions

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 47168fc..829e6cd 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -116,9 +116,10 @@ function markPageAsRead() {
 
 // Handle entry status changes from the list view and entry view.
 function handleEntryStatus(element) {
+    let toasting = !element;
     let currentEntry = findEntry(element);
     if (currentEntry) {
-        toggleEntryStatus(currentEntry);
+        toggleEntryStatus(currentEntry, toasting);
         if (isListView() && currentEntry.classList.contains('current-item')) {
             goToNextListItem();
         }
@@ -126,7 +127,7 @@ function handleEntryStatus(element) {
 }
 
 // Change the entry status to the opposite value.
-function toggleEntryStatus(element) {
+function toggleEntryStatus(element, toasting) {
     let entryID = parseInt(element.dataset.id, 10);
     let link = element.querySelector("a[data-toggle-status]");
 
@@ -138,9 +139,15 @@ function toggleEntryStatus(element) {
     if (currentStatus === "read") {
         link.innerHTML = link.dataset.labelRead;
         link.dataset.value = "unread";
+        if (toasting) {
+            toast(link.dataset.toastUnread);
+        }
     } else {
         link.innerHTML = link.dataset.labelUnread;
         link.dataset.value = "read";
+        if (toasting) {
+            toast(link.dataset.toastRead);
+        }
     }
 
     if (element.classList.contains("item-status-" + currentStatus)) {
@@ -177,14 +184,15 @@ function updateEntriesStatus(entryIDs, status, callback) {
 
 // Handle save entry from list view and entry view.
 function handleSaveEntry(element) {
+    let toasting = !element;
     let currentEntry = findEntry(element);
     if (currentEntry) {
-        saveEntry(currentEntry.querySelector("a[data-save-entry]"));
+        saveEntry(currentEntry.querySelector("a[data-save-entry]"), toasting);
     }
 }
 
 // Send the Ajax request to save an entry.
-function saveEntry(element) {
+function saveEntry(element, toasting) {
     if (!element) {
         return;
     }
@@ -199,20 +207,24 @@ function saveEntry(element) {
     request.withCallback(() => {
         element.innerHTML = element.dataset.labelDone;
         element.dataset.completed = true;
+        if (toasting) {
+            toast(element.dataset.toastDone);
+        }
     });
     request.execute();
 }
 
 // Handle bookmark from the list view and entry view.
 function handleBookmark(element) {
+    let toasting = !element;
     let currentEntry = findEntry(element);
     if (currentEntry) {
-        toggleBookmark(currentEntry);
+        toggleBookmark(currentEntry, toasting);
     }
 }
 
 // Send the Ajax request and change the icon when bookmarking an entry.
-function toggleBookmark(parentElement) {
+function toggleBookmark(parentElement, toasting) {
     let element = parentElement.querySelector("a[data-toggle-bookmark]");
     if (!element) {
         return;
@@ -225,9 +237,15 @@ function toggleBookmark(parentElement) {
         if (element.dataset.value === "star") {
             element.innerHTML = element.dataset.labelStar;
             element.dataset.value = "unstar";
+            if (toasting) {
+                toast(element.dataset.toastUnstar);
+            }
         } else {
             element.innerHTML = element.dataset.labelUnstar;
             element.dataset.value = "star";
+            if (toasting) {
+                toast(element.dataset.toastStar);
+            }
         }
     });
     request.execute();
@@ -493,3 +511,13 @@ function handleConfirmationMessage(linkElement, callback) {
 
     containerElement.appendChild(questionElement);
 }
+
+function toast(msg) {
+    if (!msg) return;
+    document.querySelector('.toast-wrap .toast-msg').innerHTML = msg;
+    let toastWrapper = document.querySelector('.toast-wrap');
+    toastWrapper.classList.remove('toastAnimate');
+    setTimeout(function () {
+        toastWrapper.classList.add('toastAnimate');
+    }, 100);
+}