Add comment highlight when target from url (#9047)
* Add comment highlight css * Add js to remove highlight on click outside * Improve refresh page on click outside * Use location.hash property to remove target * Handle click ONLY clicked outside of 'targetted comment' (not other comment) * Remove unnecessary checks and simply code * Combine hash and setState to remove target path
This commit is contained in:
parent
62bcb2b7f1
commit
802aa6d5f3
5 changed files with 32 additions and 2 deletions
|
@ -593,6 +593,7 @@ i.icon.centerlock{top:1.5em}
|
|||
.repository.view.issue .comment-list .comment .content>.bottom.segment .ui.image{max-height:100%;width:auto;margin:0;vertical-align:middle}
|
||||
.repository.view.issue .comment-list .comment .content>.bottom.segment span.ui.image{font-size:128px;color:#000}
|
||||
.repository.view.issue .comment-list .comment .content>.bottom.segment span.ui.image:hover{color:#000}
|
||||
.repository.view.issue .comment-list .comment:target>.content{box-shadow:0 0 10px #8c8c8c}
|
||||
.repository.view.issue .comment-list .comment .ui.form .field:first-child{clear:none}
|
||||
.repository.view.issue .comment-list .comment .ui.form .tab.segment{border:0;padding:10px 0 0}
|
||||
.repository.view.issue .comment-list .comment .ui.form textarea{height:200px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -586,6 +586,28 @@ function initInstall() {
|
|||
});
|
||||
}
|
||||
|
||||
function initIssueComments() {
|
||||
if ($('.repository.view.issue .comments').length === 0) return;
|
||||
|
||||
$(document).click((event) => {
|
||||
const urlTarget = $(':target');
|
||||
if (urlTarget.length === 0) return;
|
||||
|
||||
const urlTargetId = urlTarget.attr('id');
|
||||
if (!urlTargetId) return;
|
||||
if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;
|
||||
|
||||
const $target = $(event.target);
|
||||
|
||||
if ($target.closest(`#${urlTargetId}`).length === 0) {
|
||||
const scrollPosition = $(window).scrollTop();
|
||||
window.location.hash = '';
|
||||
$(window).scrollTop(scrollPosition);
|
||||
window.history.pushState(null, null, ' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initRepository() {
|
||||
if ($('.repository').length === 0) {
|
||||
return;
|
||||
|
@ -733,6 +755,9 @@ function initRepository() {
|
|||
return false;
|
||||
});
|
||||
|
||||
// Issue Comments
|
||||
initIssueComments();
|
||||
|
||||
// Issue/PR Context Menus
|
||||
$('.context-dropdown').dropdown({
|
||||
action: 'hide'
|
||||
|
|
|
@ -844,6 +844,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:target > .content {
|
||||
box-shadow: 0 0 10px #8c8c8c;
|
||||
}
|
||||
|
||||
.ui.form {
|
||||
.field:first-child {
|
||||
clear: none;
|
||||
|
|
Reference in a new issue