Hide the toolbar on mouseout

dmfrancisco · Jun 24, 2011 · 30adb71 · 30adb71
1 parent ad0c95e
commit 30adb71
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -30,44 +30,46 @@
 
 <body>
 
-  <div id="toolbar">
-    <div class="logo"></div>
-    <span class="code">Write</span>
-    <div id="switch"></div>
-    <span class="preview">Preview</span>
-
-    <div id="language-menu" class="menu right">
-      <div>
-        <a href="#" class="opener">Language</a>
-        <ul class="popup">
-          <li><a class="language" id="language-plain" href="#">Plain text</a></li>
-          <li><a class="language" id="language-textile" href="#">Textile</a></li>
-          <li><a class="language" id="language-markdown" href="#">Markdown</a></li>
-          <li><span>Latex</span></li>
-        </ul>
-        <div class="clear"></div>
+  <div id="toolbar-area">
+    <div id="toolbar">
+      <div class="logo"></div>
+      <span class="code">Write</span>
+      <div id="switch"></div>
+      <span class="preview">Preview</span>
+
+      <div id="language-menu" class="menu right">
+        <div>
+          <a href="#" class="opener">Language</a>
+          <ul class="popup">
+            <li><a class="language" id="language-plain" href="#">Plain text</a></li>
+            <li><a class="language" id="language-textile" href="#">Textile</a></li>
+            <li><a class="language" id="language-markdown" href="#">Markdown</a></li>
+            <li><span>Latex</span></li>
+          </ul>
+          <div class="clear"></div>
+        </div>
       </div>
-    </div>
 
-    <span class="import-button">
-      <a href="#" class="return-button return-button-left" id="import-button" title="Import a text file from your system">Import</a>
-    </span>
-
-    <div id="export-menu" class="menu right">
-      <div>
-        <a href="#" class="opener opener-right">Export</a>
-        <ul class="popup">
-          <li><a class="export" id="export-text" href="#">Text file</a></li>
-          <li><a class="export" id="export-pdf"  href="#">PDF file</a></li>
-          <li><a class="export" id="export-html" href="#">HTML file</a></li>
-        </ul>
-        <div class="clear"></div>
+      <span class="import-button">
+        <a href="#" class="return-button return-button-left" id="import-button" title="Import a text file from your system">Import</a>
+      </span>
+
+      <div id="export-menu" class="menu right">
+        <div>
+          <a href="#" class="opener opener-right">Export</a>
+          <ul class="popup">
+            <li><a class="export" id="export-text" href="#">Text file</a></li>
+            <li><a class="export" id="export-pdf"  href="#">PDF file</a></li>
+            <li><a class="export" id="export-html" href="#">HTML file</a></li>
+          </ul>
+          <div class="clear"></div>
+        </div>
       </div>
-    </div>
 
-    <span class="print-button">
-      <a href="#" class="return-button" id="print-button">Print</a>
-    </span>
+      <span class="print-button">
+        <a href="#" class="return-button" id="print-button">Print</a>
+      </span>
+    </div>
   </div>
 
   <div id="editor">

diff --git a/javascripts/default.js b/javascripts/default.js
@@ -34,14 +34,26 @@ $(document).ready(function()
   $('#import-button').bind('mouseleave', function (e) {
      $(this).tipsy("hide");
   });
+
+  // Hide all opened menus when clicking anywhere
   $(document).click( function(e) {
-     // Hide all opened menus
      var allMenus = $('.opener');
      allMenus.each(function() {
        hideWindow($(this));
      });
   });
 
+  // Show & hide toolbar
+  $('#toolbar-area').mouseover(function() {
+     $('#toolbar').slideDown('fast');
+  });
+  $('#toolbar').mouseleave(function() {
+     if (!$('#preview').is(":visible"))
+        setTimeout(function() { $('#toolbar').slideUp('fast'); }, 1500);
+  });
+  $('#preview').click(function() {
+     setTimeout(function() { $('#toolbar').slideUp('fast'); }, 500);
+  });
 
   var converter = new Showdown.converter();
 
@@ -94,7 +106,7 @@ $(document).ready(function()
       $('.editor').hide();
       $('#preview').show();
       render(editor.getCode());
-      $('#preview').css('top', '35px');
+      $('#preview').css('top', '0px');
       $('#preview').focus();
     },
     function() {

diff --git a/stylesheets/default.css b/stylesheets/default.css
@@ -1,15 +1,19 @@
 html, body {
   overflow: hidden;
 }
-#toolbar {
+#toolbar-area, #toolbar {
   position:absolute;
   top:0px;
   left:0px;
   right:0px;
+  min-width: 705px;
+  z-index: 1000;
+  height: 40px;
+}
+#toolbar {
   padding: 5px;
   padding-left: 15px;
   height: 24px;
-  min-width: 705px;
   background-color: rgba(255, 255, 255, 0.4);
   background-image: url('../images/toolbar-bgd.png');
   -webkit-box-shadow:
@@ -37,7 +41,7 @@ html, body {
 #toolbar .code, #toolbar .preview {
   position: absolute;
   left: 95px;
-  top: 9px;
+  padding-top: 4px;
   text-transform: uppercase;
   color: #333;
   font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;

diff --git a/stylesheets/preview.css b/stylesheets/preview.css
@@ -1,5 +1,5 @@
 #desk {
-  margin: 50px auto 50px auto;
+  margin: 0px auto 50px auto;
   max-width: 1000px;
 }
 #paper {