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

cord · Oct 5, 2015 · ac156ad · ac156ad
1 parent ad974da
commit ac156ad
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/themes/grav/css-compiled/template.css b/themes/grav/css-compiled/template.css
diff --git a/themes/grav/css-compiled/template.css.map b/themes/grav/css-compiled/template.css.map
diff --git a/themes/grav/js/mdeditor.js b/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);
                 }
             }
         });

diff --git a/themes/grav/scss/template/_editor.scss b/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;