Merge pull request #179 from taigaio/us/97/markdown-help

Add help button in WYSIWYG and markdown syntax in taiga-web

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>

app/coffee/modules/common/history.coffee

@@ -233,6 +233,10 @@ HistoryDirective = ($log, $loading) ->
                     ng-model="<%- ngmodel %>.comment" tg-markitup="tg-markitup">
                 </textarea>
                 <% if (mode !== "edit") { %>
+                <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>
                 <a href="" title="Comment" class="button button-green save-comment">Comment</a>
                 <% } %>
             </div>

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"
+            <section class="wysiwyg" tg-bind-html="wiki.html"></section>
-                     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" />

app/styles/layout/us-detail.scss

@@ -177,7 +177,6 @@
     textarea {
         background: $white;
         height: 10rem;
-        margin-bottom: 2rem;
     }
     .save-container {
         position: absolute;
@@ -217,6 +216,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;
+            }
+        }
     }
 }
 

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;
+            }
         }
     }
 }

app/styles/modules/common/history.scss

@@ -73,6 +73,10 @@
             @include transition(height .3s ease-in);
             height: 6rem;
         }
+        .help-markdown {
+            @include transition(opacity .3s linear);
+            opacity: 1;
+        }
         .preview-icon {
             opacity: 1;
             position: absolute;
@@ -85,6 +89,25 @@
         height: 5rem;
         min-height: 41px;
     }
+    .help-markdown {
+        @extend %small;
+        color: $gray-light;
+        opacity: 0;
+        &: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;
+        }
+    }
     .save-comment {
         color: $white;
         float: right;