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

* 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 <[email protected]>

Author: CirnoT

web_src/js/index.js

@@ -1238,16 +1238,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;
+}
+
 .repository .diff-file-box .code-diff .add-comment-left,
 .repository .diff-file-box .code-diff .add-comment-right,
 .repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
@@ -40,11 +44,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;
   padding-left: 0;