From 78ccefa54f3f2e7cac468ead6e19ec5b1daadbcd Mon Sep 17 00:00:00 2001
From: Waseem Daher <wdaher@humbughq.com>
Date: Fri, 2 Nov 2012 17:29:13 -0400
Subject: [PATCH] An initial version of in-app Markdown help.

(imported from commit 14d374acee44e1beeed6cfcd57a0400f22080f27)
---
 templates/zephyr/index.html         |  7 ++++
 templates/zephyr/markdown_help.html | 65 +++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 templates/zephyr/markdown_help.html

diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html
index 2ce1ad485b..777c23ee15 100644
--- a/templates/zephyr/index.html
+++ b/templates/zephyr/index.html
@@ -116,6 +116,12 @@ var people_list = [
                     <span class="hidden-phone"> Keyboard shortcuts</span>
                   </a>
                 </li>
+                <li title="Formatting help">
+                  <a href="#markdown-help" role="button" data-toggle="modal">
+                    <i class="icon-font"></i>
+                    <span class="hidden-phone"> Formatting help</span>
+                  </a>
+                </li>
                 <li title="Feedback">
                   <a href="#feedback" onclick="compose.start('personal', { 'huddle_recipient': 'feedback@humbughq.com' });">
                     <i class="icon-comment"></i>
@@ -190,5 +196,6 @@ var people_list = [
         </div><!--/tab-content-->
     </div><!--/row-->
     {% include "zephyr/keyboard_shortcuts.html" %}
+    {% include "zephyr/markdown_help.html" %}
 
 {% endblock %}
diff --git a/templates/zephyr/markdown_help.html b/templates/zephyr/markdown_help.html
new file mode 100644
index 0000000000..d93d979b66
--- /dev/null
+++ b/templates/zephyr/markdown_help.html
@@ -0,0 +1,65 @@
+<div class="modal hide fade" id="markdown-help" tabindex="-1" role="dialog"
+     aria-labelledby="markdown-help-label" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <h3 id="markdown-help-label">Commonly used Markdown</h3>
+  </div>
+  <div class="modal-body">
+    <div id="markdown-instructions">
+      <table class="table table-striped table-condensed table-rounded table-bordered">
+        <tr>
+          <th>You type</th>
+          <th>You get</th>
+        </tr>
+
+        <tr>
+          <td>*italic*</td>
+          <td><i>italic</i></td>
+        </tr>
+        <tr>
+          <td>**bold**</td>
+          <td><b>bold</b></td>
+        </tr>
+        <tr>
+          <td>[Bah!](http://humbughq.com)</td>
+          <td><a href="http://humbughq.com">Bah!</a></td>
+        </tr>
+        <tr>
+          <td>* a<br/>
+            * b<br/>
+            * c<br/>
+          </td>
+          <td>
+            <ul>
+              <li>a</li>
+              <li>b</li>
+              <li>c</li>
+          </td>
+        </tr>
+        <tr>
+          <td>&gt; Quoted</td>
+          <td><blockquote>Quoted</blockquote></td>
+        </tr>
+        <tr>
+          <td>Some inline `code`</td>
+          <td>Some inline <code>code</code></td>
+        </tr>
+        <tr>
+          <td>~~~~<br />
+            print "Humbug"<br/>
+            print "Bah"<br/>
+            ~~~~<br/>
+          </td>
+          <td><pre>print "Humbug"
+print "Bah"</pre></td>
+        </tr>
+        <tr>
+          <td colspan="2">(Indenting each line four spaces also creates a code block.)</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
+  </div>
+</div>