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:
jaqra 2019-11-25 14:50:46 +03:00 committed by zeripath
parent 62bcb2b7f1
commit 802aa6d5f3
5 changed files with 32 additions and 2 deletions

View file

@ -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 .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{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 .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 .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 .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} .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

View file

@ -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() { function initRepository() {
if ($('.repository').length === 0) { if ($('.repository').length === 0) {
return; return;
@ -733,6 +755,9 @@ function initRepository() {
return false; return false;
}); });
// Issue Comments
initIssueComments();
// Issue/PR Context Menus // Issue/PR Context Menus
$('.context-dropdown').dropdown({ $('.context-dropdown').dropdown({
action: 'hide' action: 'hide'

View file

@ -844,6 +844,10 @@
} }
} }
&:target > .content {
box-shadow: 0 0 10px #8c8c8c;
}
.ui.form { .ui.form {
.field:first-child { .field:first-child {
clear: none; clear: none;