Fine tuning editor buttons disappearing with fade, and show 'Preview'

themes/grav/css-compiled/template.css

@@ -2082,6 +2082,11 @@ body.remodal_active .remodal {
   background: #fbfbfb;
   border-bottom-right-radius: 4px; }
 
+.grav-mdeditor-navbar p {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 20px; }
+
 #admin-main .grav-mdeditor-preview {
   font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
   #admin-main .grav-mdeditor-preview h1, #admin-main .grav-mdeditor-preview h2, #admin-main .grav-mdeditor-preview h3, #admin-main .grav-mdeditor-preview h4, #admin-main .grav-mdeditor-preview h5, #admin-main .grav-mdeditor-preview h6 {

themes/grav/js/mdeditor.js

@@ -79,6 +79,7 @@
                         '<li><a data-mdeditor-button="fullscreen"><i class="fa fa-fw fa-expand"></i></a></li>',
                     '</ul>',
                 '</div>',
+                '<p class="grav-mdeditor-preview-text" style="display: none;">Preview</p>',
             '</div>',
             '<div class="grav-mdeditor-content">',
                 '<div class="grav-mdeditor-code"></div>',
@@ -172,9 +173,15 @@
                 $this.editor.refresh();
 
                 if ($this.activetab == 'preview') {
-                    $('.grav-mdeditor-toolbar').hide();
+                    $('.grav-mdeditor-toolbar').fadeOut();
+                    setTimeout(function() {
+                        $('.grav-mdeditor-preview-text').fadeIn();
+                    }, 500);
                 } else {
-                    $('.grav-mdeditor-toolbar').show();
+                    $('.grav-mdeditor-preview-text').fadeOut();
+                    setTimeout(function() {
+                        $('.grav-mdeditor-toolbar').fadeIn();
+                    }, 500);
                 }
             }
         });

themes/grav/scss/template/_editor.scss

@@ -113,6 +113,14 @@
     border-bottom-right-radius: $form-border-radius;
 }
 
+.grav-mdeditor-navbar {
+    p {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 20px;
+    }
+}
+
 #admin-main {
     .grav-mdeditor-preview {
         font-family: $font-family-default;