Add help button in WYSIWYG and markdown syntax

stable
Xavier Julián 2014-11-27 10:57:39 +01:00 committed by Jesús Espino
parent 8af84eaa8b
commit bd77772135
4 changed files with 44 additions and 5 deletions

View File

@ -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>

View File

@ -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" />

View File

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

View File

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