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

[CirnoT]

As title; need to set opacity to non-zero value if we want it shown.

[codecov-io]

Codecov Report

Merging #13389 into master will decrease coverage by 0.03%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #13389      +/-   ##
==========================================
- Coverage   42.14%   42.11%   -0.04%     
==========================================
  Files         691      691              
  Lines       75966    75966              
==========================================
- Hits        32019    31994      -25     
- Misses      38703    38724      +21     
- Partials     5244     5248       +4     

Impacted Files	Coverage Δ
modules/indexer/stats/db.go	52.17% <0.00%> (-8.70%)	⬇️
modules/charset/charset.go	68.53% <0.00%> (-4.50%)	⬇️
services/pull/temp_repo.go	26.59% <0.00%> (-3.20%)	⬇️
services/pull/check.go	48.90% <0.00%> (-2.92%)	⬇️
services/pull/patch.go	53.97% <0.00%> (-1.71%)	⬇️
modules/queue/workerpool.go	58.77% <0.00%> (-1.23%)	⬇️
models/gpg_key.go	53.33% <0.00%> (-0.58%)	⬇️
models/error.go	35.22% <0.00%> (-0.51%)	⬇️
services/pull/pull.go	40.78% <0.00%> (-0.50%)	⬇️
modules/queue/unique_queue_disk_channel.go	55.38% <0.00%> (+1.53%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 543697e...8587cf3. Read the comment docs.

[silverwind]

Wonder when that broke. We may need to backport to 1.13.

Also, icon seems a bit off-center:

Edit: this seems to fix it (thought that should be converted to SVG later):

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index ea5c8394f..975b1ed4a 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -1,8 +1,8 @@
 .ui.button.add-code-comment {
   font-size: 14px;
   height: 16px;
-  line-height: 16px !important;
+  line-height: 12px !important;
   padding: 0;
   position: relative;
   width: 16px;
   z-index: 5;

[silverwind]

It looks like these rules are meant to show that button:

gitea/web_src/less/_review.less

Lines 43 to 46 in 8176ba6

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

Those focus classes are only added by JS:

gitea/web_src/js/index.js

Lines 1241 to 1250 in 8176ba6

	$('.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');
	});

I think the reason why they don't trigger is the parent classes .code-view .lines-code,.code-view .lines-num are absent, probably since quite a long time.

I think it's inappropriate that this is done in JS, this should be a pure CSS hover effect, ideally with minimal dependency on the surrounding DOM to not break so easily.

For reference, initial commit that added this is 6e64f9d

[silverwind]

Redacting review for now as this is not the right fix.

[CirnoT]

Made it work on full-line hover like GitHub and removed remnants of JS solution.

[silverwind]

Needs 1.13 backport.

[techknowlogick]

🚀

[techknowlogick]

@CirnoT please send backport :)