Added draft save indicator and fixed notification positions

resources/assets/js/controllers.js

@@ -357,8 +357,6 @@ module.exports = function (ngApp, events) {
 
         /**
          * Save a draft update into the system via an AJAX request.
-         * @param title
-         * @param html
          */
         function saveDraft() {
             var data = {
@@ -373,9 +371,17 @@ module.exports = function (ngApp, events) {
                 var updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate();
                 $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm');
                 if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
+                showDraftSaveNotification();
             });
         }
 
+        function showDraftSaveNotification() {
+            $scope.draftUpdated = true;
+            $timeout(() => {
+                $scope.draftUpdated = false;
+            }, 2000)
+        }
+
         $scope.forceDraftSave = function() {
             saveDraft();
         };

resources/assets/sass/_pages.scss

@@ -20,6 +20,16 @@
   }
 }
 
+.draft-notification {
+  pointer-events: none;
+  transform: scale(0);
+  transition: transform ease-in-out 120ms;
+  transform-origin: 50% 50%;
+  &.visible {
+    transform: scale(1);
+  }
+}
+
 .page-style.editor {
   padding: 0 !important;
 }

resources/assets/sass/styles.scss

@@ -72,7 +72,7 @@ body.dragging, body.dragging * {
   border-radius: 3px;
   box-shadow: $bs-med;
   z-index: 999999;
-  display: table;
+  display: block;
   cursor: pointer;
   max-width: 480px;
   i, span {

resources/views/pages/form.blade.php

@@ -13,8 +13,9 @@
                 </div>
                 <div class="col-sm-4 faded text-center">
 
-                    <div dropdown class="dropdown-container">
+                    <div dropdown class="dropdown-container draft-display">
                         <a dropdown-toggle class="text-primary text-button"><span class="faded-text" ng-bind="draftText"></span>&nbsp; <i class="zmdi zmdi-more-vert"></i></a>
+                        <i class="zmdi zmdi-check-circle text-pos draft-notification" ng-class="{visible: draftUpdated}"></i>
                         <ul>
                             <li>
                                 <a ng-click="forceDraftSave()" class="text-pos"><i class="zmdi zmdi-save"></i>Save Draft</a>