From bd777721351b11728148af3f9fc4ce17811c63f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 27 Nov 2014 10:57:39 +0100
Subject: [PATCH] Add help button in WYSIWYG and markdown syntax

---
 app/coffee/modules/common/components.coffee |  4 ++++
 app/coffee/modules/wiki/main.coffee         |  7 +++++--
 app/styles/layout/us-detail.scss            | 18 ++++++++++++++++++
 app/styles/layout/wiki.scss                 | 20 +++++++++++++++++---
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/app/coffee/modules/common/components.coffee b/app/coffee/modules/common/components.coffee
index f6a57961..6a7057fe 100644
--- a/app/coffee/modules/common/components.coffee
+++ b/app/coffee/modules/common/components.coffee
@@ -564,6 +564,10 @@ EditableDescriptionDirective = ($window, $document, $rootscope, $repo, $confirm,
             <textarea placeholder="Empty space is so boring... go on be descriptive... A rose by any other name would smell as sweet..."
                       ng-model="item.description"
                       tg-markitup="tg-markitup"></textarea>
+            <a class="help-markdown" href="https://taiga.io/support/taiga-markdown-syntax/" target="_blank" title="Mardown syntax help">
+                <span class="icon icon-help"></span>
+                <span>Markdown syntax help</span>
+            </a>
             <span class="save-container">
                 <a class="save icon icon-floppy" href="" title="Save" />
             </span>
diff --git a/app/coffee/modules/wiki/main.coffee b/app/coffee/modules/wiki/main.coffee
index 0163e25a..4bac5f28 100644
--- a/app/coffee/modules/wiki/main.coffee
+++ b/app/coffee/modules/wiki/main.coffee
@@ -215,14 +215,17 @@ EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $
                                 $analytics) ->
     template = """
         <div class="view-wiki-content">
-            <section class="wysiwyg"
-                     tg-bind-html="wiki.html"></section>
+            <section class="wysiwyg" tg-bind-html="wiki.html"></section>
             <span class="edit icon icon-edit" title="Edit"></span>
         </div>
         <div class="edit-wiki-content" style="display: none;">
             <textarea placeholder="Write your wiki page here"
                       ng-model="wiki.content"
                       tg-markitup="tg-markitup"></textarea>
+            <a class="help-markdown" href="https://taiga.io/support/taiga-markdown-syntax/" target="_blank" title="Mardown syntax help">
+                <span class="icon icon-help"></span>
+                <span>Markdown syntax help</span>
+            </a>
             <span class="action-container">
                 <a class="save icon icon-floppy" href="" title="Save" />
                 <a class="cancel icon icon-delete" href="" title="Cancel" />
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
index dd2c489e..a91afda9 100644
--- a/app/styles/layout/us-detail.scss
+++ b/app/styles/layout/us-detail.scss
@@ -217,6 +217,24 @@
             right: 2.5rem;
             top: .4rem;
         }
+        .help-markdown {
+            @extend %small;
+            color: $gray-light;
+            &:hover {
+                span {
+                    @include transition(color .2s linear);
+                    color: $grayer;
+                }
+                .icon {
+                    @include transition(color .2s linear);
+                    color: $fresh-taiga;
+                }
+            }
+            .icon {
+                color: $gray-light;
+                margin-right: .2rem;
+            }
+        }
     }
 }
 
diff --git a/app/styles/layout/wiki.scss b/app/styles/layout/wiki.scss
index 4c0eae1e..03215f2b 100644
--- a/app/styles/layout/wiki.scss
+++ b/app/styles/layout/wiki.scss
@@ -1,5 +1,6 @@
 .wiki {
-    .remove {
+    .remove,
+    .help-markdown {
         @extend %small;
         color: $gray-light;
         &:hover {
@@ -9,12 +10,25 @@
             }
             .icon {
                 @include transition(color .2s linear);
-                color: $red;
             }
         }
         .icon {
             color: $gray-light;
-            margin-right: .3rem;
+            margin-right: .2rem;
+        }
+    }
+    .remove {
+        &:hover {
+            .icon {
+                color: $red;
+            }
+        }
+    }
+    .help-markdown {
+        &:hover {
+            .icon {
+                color: $fresh-taiga;
+            }
         }
     }
 }