First step to refactor the `.hide` to `.gt-hidden` (#22916)

A separate PR from #22884 （without touching the jQuery methods)

5 files changed, 20 insertions, 26 deletions

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 0074f3f431..8cef673a7e 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -485,7 +485,7 @@
 										</div>
 										<div>
 											{{if or $invalid $resolved}}
-												<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated gt-df gt-ac">
+												<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}gt-hidden {{end}}ui compact right labeled button show-outdated gt-df gt-ac">
 													{{svg "octicon-unfold" 16 "gt-mr-3"}}
 													{{if $resolved}}
 														{{$.locale.Tr "repo.issues.review.show_resolved"}}
@@ -493,7 +493,7 @@
 														{{$.locale.Tr "repo.issues.review.show_outdated"}}
 													{{end}}
 												</button>
-												<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated gt-df gt-ac">
+												<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}gt-hidden {{end}}ui compact right labeled button hide-outdated gt-df gt-ac">
 													{{svg "octicon-fold" 16 "gt-mr-3"}}
 													{{if $resolved}}
 														{{$.locale.Tr "repo.issues.review.hide_resolved"}}
@@ -507,7 +507,7 @@
 									{{$diff := (CommentMustAsDiff (index $comms 0))}}
 									{{if $diff}}
 										{{$file := (index $diff.Files 0)}}
-										<div id="code-preview-{{(index $comms 0).ID}}" class="ui table segment{{if $resolved}} hide{{end}}">
+										<div id="code-preview-{{(index $comms 0).ID}}" class="ui table segment{{if $resolved}} gt-hidden{{end}}">
 											<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}">
 												<div class="file-body file-code code-view code-diff code-diff-unified unicode-escaped">
 													<table>
@@ -519,7 +519,7 @@
 											</div>
 										</div>
 									{{end}}
-									<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}}">
+									<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} gt-hidden{{end}}">
 										<div class="ui comments gt-mb-0">
 											{{range $comms}}
 												{{$createdSubStr:= TimeSinceUnix .CreatedUnix $.locale}}
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index f562584c11..135e3384ad 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -425,10 +425,10 @@ export function initRepoPullRequestReview() {
       const groupID = commentDiv.closest('div[id^="code-comments-"]').attr('id');
       if (groupID && groupID.startsWith('code-comments-')) {
         const id = groupID.slice(14);
-        $(`#show-outdated-${id}`).addClass('hide');
-        $(`#code-comments-${id}`).removeClass('hide');
-        $(`#code-preview-${id}`).removeClass('hide');
-        $(`#hide-outdated-${id}`).removeClass('hide');
+        $(`#show-outdated-${id}`).addClass('gt-hidden');
+        $(`#code-comments-${id}`).removeClass('gt-hidden');
+        $(`#code-preview-${id}`).removeClass('gt-hidden');
+        $(`#hide-outdated-${id}`).removeClass('gt-hidden');
         commentDiv[0].scrollIntoView();
       }
     }
@@ -437,19 +437,19 @@ export function initRepoPullRequestReview() {
   $(document).on('click', '.show-outdated', function (e) {
     e.preventDefault();
     const id = $(this).data('comment');
-    $(this).addClass('hide');
-    $(`#code-comments-${id}`).removeClass('hide');
-    $(`#code-preview-${id}`).removeClass('hide');
-    $(`#hide-outdated-${id}`).removeClass('hide');
+    $(this).addClass('gt-hidden');
+    $(`#code-comments-${id}`).removeClass('gt-hidden');
+    $(`#code-preview-${id}`).removeClass('gt-hidden');
+    $(`#hide-outdated-${id}`).removeClass('gt-hidden');
   });
 
   $(document).on('click', '.hide-outdated', function (e) {
     e.preventDefault();
     const id = $(this).data('comment');
-    $(this).addClass('hide');
-    $(`#code-comments-${id}`).addClass('hide');
-    $(`#code-preview-${id}`).addClass('hide');
-    $(`#show-outdated-${id}`).removeClass('hide');
+    $(this).addClass('gt-hidden');
+    $(`#code-comments-${id}`).addClass('gt-hidden');
+    $(`#code-preview-${id}`).addClass('gt-hidden');
+    $(`#show-outdated-${id}`).removeClass('gt-hidden');
   });
 
   $(document).on('click', 'button.comment-form-reply', async function (e) {
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index c0d7654a8d..4b65ae6812 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1807,16 +1807,9 @@ footer {
   }
 }
 
+// TODO: refactor to use ".gt-hidden" instead (a simple search&replace should do the trick)
 .hide {
   display: none;
-
-  &.show-outdated {
-    display: none !important;
-  }
-
-  &.hide-outdated {
-    display: none !important;
-  }
 }
 
 .center:not(.popup) {
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index f0aa67b5c8..d436bc2490 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -57,7 +57,6 @@
 .show-outdated,
 .hide-outdated {
   &:extend(.unselectable);
-  display: block !important;
 
   &:hover {
     text-decoration: underline;
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 74c34007e9..2b09780fb8 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -22,7 +22,6 @@
 /* below class names match Tailwind CSS */
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
-.gt-hidden { display: none !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;
@@ -181,3 +180,6 @@
   .gt-w-100-small { width: 100% !important; }
   .gt-js-small { justify-content: flex-start !important; }
 }
+
+// gt-hidden must be placed after all other "display: xxx !important" classes to win the hidden chance
+.gt-hidden { display: none !important; }