Added draft save indicator and fixed notification positions

diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index 9067f6ca42995e187b792c54e6ccbedb50ddaf49..28a45e59193737786e6fe12c83a600876c7902d2 100644 (file)
--- a/resources/assets/js/controllers.js
+++ b/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();
         };

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 03faef3443fe01bb004011a426435fff250e5075..3cc41df077fbcad9f60295f94d1dcaa3cd004629 100644 (file)
--- a/resources/assets/sass/_pages.scss
+++ b/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;
 }

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index a6c364018584b050d11d91b702d88dbed123f054..21043258877c92564b912505f475dd8cfc74edaf 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/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 {

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 366316b339cf2d472922907dc3a6d93eb553b3c5..5aee9c596f2ef1bd8b0e58b1187f000b426d51e6 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/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>