Merge pull request #1076 from oohira/issue/1055-make-link-anchor-clickable

refs #1055 Make a header link anchor icon clickable

src/main/scala/gitbucket/core/view/Markdown.scala

@@ -68,7 +68,7 @@ object Markdown {
 
       if(enableAnchor){
         out.append(" class=\"markdown-head\">")
-        out.append("<a class=\"markdown-anchor-link\" href=\"#" + id + "\"></a>")
+        out.append("<a class=\"markdown-anchor-link\" href=\"#" + id + "\"><span class=\"octicon octicon-link\"></span></a>")
         out.append("<a class=\"markdown-anchor\" name=\"" + id + "\"></a>")
       } else {
         out.append(">")

src/main/webapp/assets/common/css/gitbucket.css

@@ -2043,39 +2043,16 @@ div.markdown-body table colgroup + tbody tr:first-child td:last-child {
 }
 
 a.markdown-anchor-link {
-  position: absolute;
-  left: -18px;
-  display: none;
+  margin-left: -16px;
+  margin-right: 2px;
+  line-height: 1;
   color: #999;
-  /* From octicon style */
-  font: normal normal normal 16px/1 octicons;
-  text-decoration: none;
-  text-rendering: auto;
-}
-a.markdown-anchor-link:before { content: '\f05c'} /*  */
-
-h1 a.markdown-anchor-link {
-  top: 24px;
+  cursor: pointer;
 }
 
-h2 a.markdown-anchor-link {
-  top: 20px;
-}
-
-h3 a.markdown-anchor-link {
-  top: 12px;
-}
-
-h4 a.markdown-anchor-link {
-  top: 8px;
-}
-
-h5 a.markdown-anchor-link {
-  top: 6px;
-}
-
-h6 a.markdown-anchor-link {
-  top: 6px;
+a.markdown-anchor-link span.octicon {
+  visibility: hidden;
+  vertical-align: middle;
 }
 
 /****************************************************************************/

src/main/webapp/assets/common/js/gitbucket.js

@@ -19,14 +19,11 @@ $(function(){
   });
 
   // anchor icon for markdown
-  $('.markdown-head').mouseenter(function(e){
-    $(e.target).children('a.markdown-anchor-link').show();
+  $('.markdown-head').on('mouseenter', function(e){
+    $(this).find('span.octicon').css('visibility', 'visible');
   });
-  $('.markdown-head').mouseleave(function(e){
-    $(e.target).children('a.markdown-anchor-link').hide();
-  });
-  $('a.markdown-anchor-link').mouseleave(function(e){
-    $(e.target).hide();
+  $('.markdown-head').on('mouseleave', function(e){
+    $(this).find('span.octicon').css('visibility', 'hidden');
   });
 
   // syntax highlighting by google-code-prettify