Quick Save UI

CHANGELOG.md

@@ -1,3 +1,10 @@
+# v1.2.7-beta.5
+
+## 31-01-2019
+
+1. [](#improved)
+   - Save-functionality UI
+
 # v1.2.7-beta.4
 
 ## 31-01-2019

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Presentation
-version: 1.2.7-beta.4
+version: 1.2.7-beta.5
 testing: true
 description: Responsive navigational slideshows with Reveal.js
 icon: arrows-alt

blueprints/presentation.yaml

@@ -52,9 +52,10 @@ form:
                     print_styled_notes:
                       label: PLUGIN_PRESENTATION.ADMIN.LINKS.PRINT_STYLED_NOTES
                       mode: print_styled_notes
-                saved:
+                save:
                   type: presentation_dropdown
                   ordering@: print
+                  label: PLUGIN_PRESENTATION.ADMIN.ADVANCED.SAVE.ASYNC.LABEL
                   prefix: PLUGIN_PRESENTATION.ADMIN.ADVANCED.SAVE.PREFIX
             textsize:
               type: section

js/save.js

@@ -4,6 +4,7 @@
 function saveRawMarkdown() {
   var now = new Date();
   var autoSaveButton = document.querySelector("#presentation-save");
+  var autoSaveButtonContent = autoSaveButton.innerHTML;
   var markdownContent = document.querySelector('textarea[name="data[content]"]')
     .value;
   var lastSaved = document.querySelector("#last-saved");
@@ -14,18 +15,16 @@ function saveRawMarkdown() {
   autoSaveButton.disabled = true;
   axios
     .post(
-      presentationAPIRoute + "?action=save",
-      {
+      presentationAPIRoute + "?action=save", {
         content: Base64.encode(markdownContent),
         route: window.GravAdmin.config.route
-      },
-      {
+      }, {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
         }
       }
     )
-    .then(function(response) {
+    .then(function (response) {
       if (response.status == 200) {
         console.info("Saved at", now, response.status, "OK");
         autoSaveButton.style.background = presentationColors.notice;
@@ -41,16 +40,16 @@ function saveRawMarkdown() {
         });
       }
     })
-    .catch(function(error) {
+    .catch(function (error) {
       console.error(error);
       autoSaveButton.style.background = presentationColors.critical;
       autoSaveButton.innerHTML = '<i class="fa fa-close"></i> Failed';
       autoSaveButton.disabled = false;
     })
-    .then(function() {
-      setTimeout(function() {
+    .then(function () {
+      setTimeout(function () {
         autoSaveButton.style.background = presentationColors.button;
-        autoSaveButton.innerHTML = '<i class="fa fa-check"></i> Save';
+        autoSaveButton.innerHTML = autoSaveButtonContent;
         autoSaveButton.disabled = false;
       }, 500);
     });
@@ -65,18 +64,10 @@ var presentationColors = {
 };
 window.addEventListener(
   "load",
-  function(event) {
-    var saveButton = document.querySelector(
-      '#titlebar [name="task"][value="save"]'
-    );
-    saveButton.parentElement.insertAdjacentHTML(
-      "afterend",
-      '<div class="button-group"><button id="presentation-save" class="button"><i class="fa fa-check"></i> Save</button></div>'
-    );
-    saveButton.parentElement.style.display = "none";
+  function (event) {
     document.querySelector("#presentation-save").addEventListener(
       "click",
-      function(event) {
+      function (event) {
         saveRawMarkdown();
         event.preventDefault();
       },
@@ -95,10 +86,10 @@ window.addEventListener(
       var throttled = false;
       var calls = 0;
 
-      markdownContent.onkeyup = function() {
+      markdownContent.onkeyup = function () {
         if (!throttled) {
           throttled = true;
-          setTimeout(function() {
+          setTimeout(function () {
             throttled = false;
           }, delay);
         }
@@ -108,4 +99,4 @@ window.addEventListener(
     }
   },
   false
-);
+);

languages.yaml

@@ -123,11 +123,11 @@ en:
         SAVE:
           PREFIX: Last Saved
           ASYNC:
-            LABEL: Save Async
-            DESCRIPTION: "Prevent reloading Page when saving."
+            LABEL: Save Content
+            DESCRIPTION: "Enabled Save Content button."
           TYPING:
-            LABEL: Auto-Save Async when typing
-            DESCRIPTION: "Automatically save Page when typing."
+            LABEL: Save Content while typing
+            DESCRIPTION: "Automatically save Content when typing."
         FOOTER:
           LABEL: Inject Twig-footer
           DESCRIPTION: "Render a theme's Twig-template and append it to each section, eg. 'partials/presentation_footer.html.twig'."

templates/forms/fields/presentation_button_bar/presentation_button_bar.html.twig

@@ -4,17 +4,22 @@
     <div class="button-bar" style="margin:0;padding:0;text-align:left;background:0;z-index:2;">
         {%- if field.fields -%}
         {%- for child in field.fields -%}
-            {%- if child.name != 'saved' -%}
+            {%- if child.name != 'save' -%}
             {%-
                 include [
                     "forms/fields/#{child.type}/#{child.type}.html.twig",
                     'forms/fields/text/text.html.twig'
                 ] with { field: child, value: null }
             -%}
             {%- else -%}
-                <div id="last-saved" style="display:none;float:right;margin-right:3em;">
-                    <span>{{ child.prefix|t|e('html_attr') }}</span>&nbsp;
-                    <span id="last-saved-value"></span>
+                <div style="float:right;padding-right:1.5rem;display:flex;align-items:center;justify-content:center;">
+                    <div id="last-saved" style="display:none;margin-right:1em;">
+                        <span>{{ child.prefix|t|e('html_attr') }}</span>&nbsp;
+                        <span id="last-saved-value"></span>
+                    </div>
+                    <div class="button-group">
+                        <button id="presentation-save" class="button"><i class="fa fa-bolt"></i> {{ child.label|t|e('html_attr') }}</button>
+                    </div>
                 </div>
             {%- endif -%}
         {%- endfor -%}