mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-25 18:51:40 +02:00
Code Issues Releases Wiki Activity

Move replies preview dropdown out of Post-footer (#55)

Browse Source
This commit is contained in:
Sami Mazouz
2021-05-12 20:42:33 +01:00
committed by GitHub
parent 8ed08b63cd
commit 3e596aaadf
1 changed files with 65 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
extensions/mentions/js/src/forum/addMentionedByList.js
View File

@@ -11,27 +11,25 @@ import icon from 'flarum/helpers/icon';
export default function addMentionedByList() { export default function addMentionedByList() {
Post.prototype.mentionedBy = Model.hasMany('mentionedBy'); Post.prototype.mentionedBy = Model.hasMany('mentionedBy');
extend(CommentPost.prototype, 'footerItems', function(items) { function hidePreview() {
this.$('.Post-mentionedBy-preview')
.removeClass('in')
.one('transitionend', function() { $(this).hide(); });
}
extend(CommentPost.prototype, 'oncreate', function() {
let timeout;
const post = this.attrs.post; const post = this.attrs.post;
const replies = post.mentionedBy(); const replies = post.mentionedBy();
if (replies && replies.length) { if (replies && replies.length) {
const hidePreview = () => {
this.$('.Post-mentionedBy-preview')
.removeClass('in')
.one('transitionend', function() { $(this).hide(); });
};
const oncreate = function(vnode) {
const $this = $(vnode.dom);
let timeout;
const $preview = $('<ul class="Dropdown-menu Post-mentionedBy-preview fade"/>'); const $preview = $('<ul class="Dropdown-menu Post-mentionedBy-preview fade"/>');
$this.append($preview); this.$().append($preview);
$this.children().hover(function() { const $parentPost = this.$();
clearTimeout(timeout); const $this = this.$('.Post-mentionedBy');
timeout = setTimeout(function() {
const showPreview = () => {
if (!$preview.hasClass('in') && $preview.is(':visible')) return; if (!$preview.hasClass('in') && $preview.is(':visible')) return;
// When the user hovers their mouse over the list of people who have // When the user hovers their mouse over the list of people who have
@@ -41,28 +39,46 @@ export default function addMentionedByList() {
<li data-number={reply.number()}> <li data-number={reply.number()}>
{PostPreview.component({ {PostPreview.component({
post: reply, post: reply,
onclick: hidePreview onclick: hidePreview.bind(this)
})} })}
</li> </li>
))); )));
$preview.show();
$preview.show()
.css('top', $this.offset().top - $parentPost.offset().top + $this.outerHeight(true))
.css('left', $this.offsetParent().offset().left - $parentPost.offset().left)
.css('max-width', $parentPost.width());
setTimeout(() => $preview.off('transitionend').addClass('in')); setTimeout(() => $preview.off('transitionend').addClass('in'));
}, 500); }
}, function() {
$this.add($preview).hover(
() => {
clearTimeout(timeout);
timeout = setTimeout(showPreview, 250);
},
() => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(hidePreview, 250); timeout = setTimeout(hidePreview, 250);
}); }
);
// Whenever the user hovers their mouse over a particular name in the // Whenever the user hovers their mouse over a particular name in the
// list of repliers, highlight the corresponding post in the preview // list of repliers, highlight the corresponding post in the preview
// popup. // popup.
$this.find('.Post-mentionedBy-summary a').hover(function() { this.$().find('.Post-mentionedBy-summary a').hover(function() {
$preview.find('[data-number="' + $(this).data('number') + '"]').addClass('active'); $preview.find('[data-number="' + $(this).data('number') + '"]').addClass('active');
}, function() { }, function() {
$preview.find('[data-number]').removeClass('active'); $preview.find('[data-number]').removeClass('active');
}); });
}; }
});
extend(CommentPost.prototype, 'footerItems', function(items) {
const post = this.attrs.post;
const replies = post.mentionedBy();
if (replies && replies.length) {
const users = []; const users = [];
const repliers = replies const repliers = replies
.sort(reply => reply.user() === app.session.user ? -1 : 0) .sort(reply => reply.user() === app.session.user ? -1 : 0)
@@ -86,7 +102,7 @@ export default function addMentionedByList() {
return ( return (
<Link href={app.route.post(reply)} <Link href={app.route.post(reply)}
onclick={hidePreview} onclick={hidePreview.bind(this)}
data-number={reply.number()}> data-number={reply.number()}>
{app.session.user === user ? app.translator.trans('flarum-mentions.forum.post.you_text') : username(user)} {app.session.user === user ? app.translator.trans('flarum-mentions.forum.post.you_text') : username(user)}
</Link> </Link>
@@ -105,7 +121,7 @@ export default function addMentionedByList() {
} }
items.add('replies', items.add('replies',
<div className="Post-mentionedBy" oncreate={oncreate}> <div className="Post-mentionedBy">
<span className="Post-mentionedBy-summary"> <span className="Post-mentionedBy-summary">
{icon('fas fa-reply')} {icon('fas fa-reply')}
{app.translator.transChoice('flarum-mentions.forum.post.mentioned_by' + (repliers[0].user() === app.session.user ? '_self' : '') + '_text', names.length, { {app.translator.transChoice('flarum-mentions.forum.post.mentioned_by' + (repliers[0].user() === app.session.user ? '_self' : '') + '_text', names.length, {