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:
		
							parent
							
								
									6c90f5e4c0
								
							
						
					
					
						commit
						2e97a77e12
					
				|  | @ -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}} | ||||
|  |  | |||
|  | @ -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) { | ||||
|  |  | |||
|  | @ -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) { | ||||
|  |  | |||
|  | @ -57,7 +57,6 @@ | |||
| .show-outdated, | ||||
| .hide-outdated { | ||||
|   &:extend(.unselectable); | ||||
|   display: block !important; | ||||
| 
 | ||||
|   &:hover { | ||||
|     text-decoration: underline; | ||||
|  |  | |||
|  | @ -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; } | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue