Fix 'add code comment' button being invisible all the time (#13389) (#13402)

* Fix 'add code comment' button being invisible all the time

* Fix off-center icon

* Remove old JS hover hack

* Show on full-line hover

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

(cherry picked from commit 7f7e7f3ca4)

web_src/js/index.js

@@ -1236,16 +1236,6 @@ function initPullRequestReview() {
       $(this).closest('.menu').toggle('visible');
     });
 
-  $('.code-view .lines-code,.code-view .lines-num')
-    .on('mouseenter', function () {
-      const parent = $(this).closest('td');
-      $(this).closest('tr').addClass(
-        parent.hasClass('lines-num-old') || parent.hasClass('lines-code-old') ? 'focus-lines-old' : 'focus-lines-new'
-      );
-    })
-    .on('mouseleave', function () {
-      $(this).closest('tr').removeClass('focus-lines-new focus-lines-old');
-    });
   $('.add-code-comment').on('click', function (e) {
     if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745
     e.preventDefault();

web_src/less/_review.less

@@ -1,7 +1,7 @@
 .ui.button.add-code-comment {
   font-size: 14px;
   height: 16px;
-  line-height: 16px !important;
+  line-height: 12px !important;
   padding: 0;
   position: relative;
   width: 16px;
@@ -17,6 +17,10 @@
   }
 }
 
+.diff-file-box .lines-code:hover .ui.button.add-code-comment {
+  opacity: 1;
+}
+
 .add-comment-left.add-comment-right .ui.attached.header {
   border: 1px solid #d4d4d5;
   margin-top: .5em;
@@ -32,11 +36,6 @@
   }
 }
 
-.focus-lines-new .ui.button.add-code-comment.add-code-comment-right,
-.focus-lines-old .ui.button.add-code-comment.add-code-comment-left {
-  opacity: 1;
-}
-
 .comment-code-cloud {
   padding: 4px;
   position: relative;