mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-04 15:37:51 +02:00
Code Issues Releases Wiki Activity

Move post previews outside of .Post-body so they don't get clipped

Browse Source
This commit is contained in:
Toby Zerner
2015-09-16 14:43:48 +09:30
parent 390feae647
commit 7ab1eb4f64
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
extensions/mentions/js/forum/src/addPostMentionPreviews.js
View File

@@ -12,6 +12,7 @@ export default function addPostMentionPreviews() {
this.oldPostContentHtml = contentHtml; this.oldPostContentHtml = contentHtml;
const parentPost = this.props.post; const parentPost = this.props.post;
const $parentPost = this.$();
this.$('.UserMention, .PostMention').each(function() { this.$('.UserMention, .PostMention').each(function() {
m.route.call(this, this, false, {}, {attrs: {href: this.getAttribute('href')}}); m.route.call(this, this, false, {}, {attrs: {href: this.getAttribute('href')}});
@@ -25,8 +26,7 @@ export default function addPostMentionPreviews() {
// Wrap the mention link in a wrapper element so that we can insert a // Wrap the mention link in a wrapper element so that we can insert a
// preview popup as its sibling and relatively position it. // preview popup as its sibling and relatively position it.
const $preview = $('<ul class="Dropdown-menu PostMention-preview fade"/>'); const $preview = $('<ul class="Dropdown-menu PostMention-preview fade"/>');
const $wrapper = $('<span class="PostMention-wrapper"/>'); $parentPost.append($preview);
$this.wrap($wrapper).after($preview);
const getPostElement = () => { const getPostElement = () => {
return $(`.PostStream-item[data-id="${id}"]`); return $(`.PostStream-item[data-id="${id}"]`);
@@ -53,7 +53,10 @@ export default function addPostMentionPreviews() {
// Position the preview so that it appears above the mention. // Position the preview so that it appears above the mention.
// (The offsetParent should be .Post-body.) // (The offsetParent should be .Post-body.)
const positionPreview = () => { const positionPreview = () => {
$preview.show().css('top', $this.offset().top - $this.offsetParent().offset().top - $preview.outerHeight(true)); $preview.show()
.css('top', $this.offset().top - $parentPost.offset().top - $preview.outerHeight(true))
.css('left', $this.offsetParent().offset().left - $parentPost.offset().left)
.css('max-width', $this.offsetParent().width());
}; };
const showPost = post => { const showPost = post => {
@@ -90,7 +93,7 @@ export default function addPostMentionPreviews() {
$this.on('touchstart', e => e.preventDefault()); $this.on('touchstart', e => e.preventDefault());
$this.parent().hover( $this.add($preview).hover(
() => { () => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(showPreview, 250); timeout = setTimeout(showPreview, 250);

1
extensions/mentions/less/forum/extension.less
View File

@@ -84,4 +84,5 @@
.PostMention-preview-discussion { .PostMention-preview-discussion {
padding-top: 0 !important; padding-top: 0 !important;
font-weight: bold !important; font-weight: bold !important;
white-space: normal !important;
} }