diff --git a/framework/core/js/forum/src/components/discussion-composer.js b/framework/core/js/forum/src/components/discussion-composer.js index 99a9ad0ea..eb987b48f 100644 --- a/framework/core/js/forum/src/components/discussion-composer.js +++ b/framework/core/js/forum/src/components/discussion-composer.js @@ -10,7 +10,7 @@ import ActionButton from 'flarum/components/action-button'; */ export default class DiscussionComposer extends ComposerBody { constructor(props) { - props.placeholder = props.placeholder || 'Write a post...'; + props.placeholder = props.placeholder || 'Write a Post...'; props.submitLabel = props.submitLabel || 'Post Discussion'; props.confirmExit = props.confirmExit || 'You have not posted your discussion. Do you wish to discard it?'; props.titlePlaceholder = props.titlePlaceholder || 'Discussion Title'; diff --git a/framework/core/js/forum/src/components/post-stream.js b/framework/core/js/forum/src/components/post-stream.js index 378e9873d..2f48354ab 100644 --- a/framework/core/js/forum/src/components/post-stream.js +++ b/framework/core/js/forum/src/components/post-stream.js @@ -4,6 +4,7 @@ import PostLoading from 'flarum/components/post-loading'; import anchorScroll from 'flarum/utils/anchor-scroll'; import mixin from 'flarum/utils/mixin'; import evented from 'flarum/utils/evented'; +import ReplyPlaceholder from 'flarum/components/reply-placeholder'; class PostStream extends mixin(Component, evented) { constructor(props) { @@ -170,7 +171,15 @@ class PostStream extends mixin(Component, evented) { } return m('div.item', attributes, content); - }) + }), + + // If we're viewing the end of the discussion, the user can reply, and + // is not already doing so, then show a 'write a reply' placeholder. + this.visibleEnd === this.count() && + (!app.session.user() || this.discussion.canReply()) && + !app.composingReplyTo(this.discussion) + ? m('div.item', ReplyPlaceholder.component({discussion: this.discussion})) + : '' ); } @@ -376,7 +385,9 @@ class PostStream extends mixin(Component, evented) { } if (top + height < scrollTop + viewportHeight) { - endNumber = $item.data('number'); + if ($item.data('number')) { + endNumber = $item.data('number'); + } } else { return false; } diff --git a/framework/core/js/forum/src/components/reply-composer.js b/framework/core/js/forum/src/components/reply-composer.js index 4e19ad502..3fdde161f 100644 --- a/framework/core/js/forum/src/components/reply-composer.js +++ b/framework/core/js/forum/src/components/reply-composer.js @@ -6,7 +6,7 @@ import Composer from 'flarum/components/composer'; export default class ReplyComposer extends ComposerBody { constructor(props) { - props.placeholder = props.placeholder || 'Write your reply...'; + props.placeholder = props.placeholder || 'Write a Reply...'; props.submitLabel = props.submitLabel || 'Post Reply'; props.confirmExit = props.confirmExit || 'You have not posted your reply. Do you wish to discard it?'; diff --git a/framework/core/js/forum/src/components/reply-placeholder.js b/framework/core/js/forum/src/components/reply-placeholder.js new file mode 100644 index 000000000..5b569a7ac --- /dev/null +++ b/framework/core/js/forum/src/components/reply-placeholder.js @@ -0,0 +1,10 @@ +import Component from 'flarum/component'; +import avatar from 'flarum/helpers/avatar'; + +export default class ReplyPlaceholder extends Component { + view() { + return m('article.post.reply-post', {onclick: () => this.props.discussion.replyAction(true)}, [ + m('header.post-header', avatar(app.session.user()), 'Write a Reply...'), + ]); + } +} diff --git a/framework/core/less/forum/discussion.less b/framework/core/less/forum/discussion.less index 4df1959df..f1b744abd 100644 --- a/framework/core/less/forum/discussion.less +++ b/framework/core/less/forum/discussion.less @@ -459,6 +459,23 @@ font-size: 22px; } } +.reply-post { + font-size: 15px; + cursor: text; + overflow: hidden; + margin: -15px; + padding: 15px 15px 15px 90px + 15px; + + & .avatar { + opacity: 0.25; + } + + &:hover { + border: 1px dashed @fl-body-secondary-color; + border-radius: 64px; + margin: -16px; + } +} // ------------------------------------ // Scrubber