Skip to content
Closed
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions templates/repo/issue/view_content/comments.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -485,15 +485,15 @@
</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"}}
{{else}}
{{$.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"}}
Expand All @@ -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>
Expand All @@ -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}}
Expand Down
24 changes: 12 additions & 12 deletions web_src/js/features/repo-issue.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}
Expand All @@ -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) {
Expand Down
73 changes: 73 additions & 0 deletions web_src/js/jquery.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,76 @@
import $ from 'jquery';

window.$ = window.jQuery = $;

function getComputedStyleProperty(el, prop) {
const cs = el ? window.getComputedStyle(el) : null;
return cs ? cs[prop] : null;
}

const defaultDisplayMap = {};
function getDefaultDisplay(el) {
let display = defaultDisplayMap[el.nodeName];
if (display) return display;

const temp = el.ownerDocument.body.appendChild(el.ownerDocument.createElement(el.nodeName));
display = getComputedStyleProperty(el, 'display');
temp.parentNode.removeChild(temp);

display = display === 'none' ? 'block' : display;
defaultDisplayMap[el.nodeName] = display;
return display;
}

function showHide(elements, show) {
for (const el of elements) {
if (!el || !el.classList) continue;
if (show) {
// at the moment, there are various hiding-methods in Gitea
// in the future, after they are all refactored by "gt-hidden" class, we can remove all others
el.removeAttribute('hidden');
el.classList.remove('hide', 'gt-hidden');
if (el.style.display === 'none') el.style.removeProperty('display');

if (getComputedStyleProperty(el, 'display') === 'none') {
// after removing all "hidden" related classes/attributes, if the element is still hidden,
// maybe it already has another class with "display: none", so we need to set the "display: xxx" to its style
el.style.display = getDefaultDisplay(el);
}
} else {
el.classList.add('gt-hidden');
}
}
return elements;
}

function warnDeprecated(_fn) {
if (!window.config?.runModeIsProd) {
// TODO: not sure whether it is really necessary to deprecated these methods now
// It seems better to introduce Gitea's own helper methods to replace jQuery, instead of adding/removing the class again and again
// console.warn(`jQuery.${fn}() is deprecated`);
}
}

window.jQuery.fn.extend({
show () {
warnDeprecated('show');
return showHide(this, true);
},
hide () {
warnDeprecated('hide');
return showHide(this, false);
},
toggle (state) {
warnDeprecated('toggle');
if (typeof state === 'boolean') {
return showHide(this, state);
}
return this.each(function () {
if (getComputedStyleProperty(this, 'display') === 'none') {
$(this).show();
} else {
$(this).hide();
}
});
}
});
9 changes: 1 addition & 8 deletions web_src/less/_base.less
Original file line number Diff line number Diff line change
Expand Up @@ -1803,16 +1803,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;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The most hacky part has been removed.

}

.center:not(.popup) {
Expand Down
1 change: 0 additions & 1 deletion web_src/less/_review.less
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
.show-outdated,
.hide-outdated {
&:extend(.unselectable);
display: block !important;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another hacky part, it is also removed.


&:hover {
text-decoration: underline;
Expand Down
4 changes: 3 additions & 1 deletion web_src/less/helpers.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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; }