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

A separate PR from #22884 (without touching the jQuery methods)
This commit is contained in:
wxiaoguang 2023-02-16 20:07:21 +08:00 committed by GitHub
parent 6c90f5e4c0
commit 2e97a77e12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 26 deletions

View file

@ -485,7 +485,7 @@
</div> </div>
<div> <div>
{{if or $invalid $resolved}} {{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"}} {{svg "octicon-unfold" 16 "gt-mr-3"}}
{{if $resolved}} {{if $resolved}}
{{$.locale.Tr "repo.issues.review.show_resolved"}} {{$.locale.Tr "repo.issues.review.show_resolved"}}
@ -493,7 +493,7 @@
{{$.locale.Tr "repo.issues.review.show_outdated"}} {{$.locale.Tr "repo.issues.review.show_outdated"}}
{{end}} {{end}}
</button> </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"}} {{svg "octicon-fold" 16 "gt-mr-3"}}
{{if $resolved}} {{if $resolved}}
{{$.locale.Tr "repo.issues.review.hide_resolved"}} {{$.locale.Tr "repo.issues.review.hide_resolved"}}
@ -507,7 +507,7 @@
{{$diff := (CommentMustAsDiff (index $comms 0))}} {{$diff := (CommentMustAsDiff (index $comms 0))}}
{{if $diff}} {{if $diff}}
{{$file := (index $diff.Files 0)}} {{$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="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"> <div class="file-body file-code code-view code-diff code-diff-unified unicode-escaped">
<table> <table>
@ -519,7 +519,7 @@
</div> </div>
</div> </div>
{{end}} {{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"> <div class="ui comments gt-mb-0">
{{range $comms}} {{range $comms}}
{{$createdSubStr:= TimeSinceUnix .CreatedUnix $.locale}} {{$createdSubStr:= TimeSinceUnix .CreatedUnix $.locale}}

View file

@ -425,10 +425,10 @@ export function initRepoPullRequestReview() {
const groupID = commentDiv.closest('div[id^="code-comments-"]').attr('id'); const groupID = commentDiv.closest('div[id^="code-comments-"]').attr('id');
if (groupID && groupID.startsWith('code-comments-')) { if (groupID && groupID.startsWith('code-comments-')) {
const id = groupID.slice(14); const id = groupID.slice(14);
$(`#show-outdated-${id}`).addClass('hide'); $(`#show-outdated-${id}`).addClass('gt-hidden');
$(`#code-comments-${id}`).removeClass('hide'); $(`#code-comments-${id}`).removeClass('gt-hidden');
$(`#code-preview-${id}`).removeClass('hide'); $(`#code-preview-${id}`).removeClass('gt-hidden');
$(`#hide-outdated-${id}`).removeClass('hide'); $(`#hide-outdated-${id}`).removeClass('gt-hidden');
commentDiv[0].scrollIntoView(); commentDiv[0].scrollIntoView();
} }
} }
@ -437,19 +437,19 @@ export function initRepoPullRequestReview() {
$(document).on('click', '.show-outdated', function (e) { $(document).on('click', '.show-outdated', function (e) {
e.preventDefault(); e.preventDefault();
const id = $(this).data('comment'); const id = $(this).data('comment');
$(this).addClass('hide'); $(this).addClass('gt-hidden');
$(`#code-comments-${id}`).removeClass('hide'); $(`#code-comments-${id}`).removeClass('gt-hidden');
$(`#code-preview-${id}`).removeClass('hide'); $(`#code-preview-${id}`).removeClass('gt-hidden');
$(`#hide-outdated-${id}`).removeClass('hide'); $(`#hide-outdated-${id}`).removeClass('gt-hidden');
}); });
$(document).on('click', '.hide-outdated', function (e) { $(document).on('click', '.hide-outdated', function (e) {
e.preventDefault(); e.preventDefault();
const id = $(this).data('comment'); const id = $(this).data('comment');
$(this).addClass('hide'); $(this).addClass('gt-hidden');
$(`#code-comments-${id}`).addClass('hide'); $(`#code-comments-${id}`).addClass('gt-hidden');
$(`#code-preview-${id}`).addClass('hide'); $(`#code-preview-${id}`).addClass('gt-hidden');
$(`#show-outdated-${id}`).removeClass('hide'); $(`#show-outdated-${id}`).removeClass('gt-hidden');
}); });
$(document).on('click', 'button.comment-form-reply', async function (e) { $(document).on('click', 'button.comment-form-reply', async function (e) {

View file

@ -1807,16 +1807,9 @@ footer {
} }
} }
// TODO: refactor to use ".gt-hidden" instead (a simple search&replace should do the trick)
.hide { .hide {
display: none; display: none;
&.show-outdated {
display: none !important;
}
&.hide-outdated {
display: none !important;
}
} }
.center:not(.popup) { .center:not(.popup) {

View file

@ -57,7 +57,6 @@
.show-outdated, .show-outdated,
.hide-outdated { .hide-outdated {
&:extend(.unselectable); &:extend(.unselectable);
display: block !important;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

View file

@ -22,7 +22,6 @@
/* below class names match Tailwind CSS */ /* below class names match Tailwind CSS */
.gt-pointer-events-none { pointer-events: none !important; } .gt-pointer-events-none { pointer-events: none !important; }
.gt-relative { position: relative !important; } .gt-relative { position: relative !important; }
.gt-hidden { display: none !important; }
.gt-mono { .gt-mono {
font-family: var(--fonts-monospace) !important; font-family: var(--fonts-monospace) !important;
@ -181,3 +180,6 @@
.gt-w-100-small { width: 100% !important; } .gt-w-100-small { width: 100% !important; }
.gt-js-small { justify-content: flex-start !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; }