From e2a4cf5ccb1d70d4b600774a6636ce6f2cfb4937 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Tue, 28 Jul 2015 13:34:42 +0930 Subject: [PATCH] Add preview button to composer --- js/forum/src/components/Composer.js | 1 + js/forum/src/components/DiscussionPage.js | 2 -- js/forum/src/components/EditPostComposer.js | 8 ++++++++ js/forum/src/components/IndexPage.js | 1 - js/forum/src/components/PostStream.js | 15 +++++++++++++-- js/forum/src/components/ReplyComposer.js | 9 +++++++++ js/forum/src/components/TextEditor.js | 10 ++++++++++ less/forum/Composer.less | 6 +++++- less/lib/Alert.less | 2 +- 9 files changed, 47 insertions(+), 7 deletions(-) diff --git a/js/forum/src/components/Composer.js b/js/forum/src/components/Composer.js index 7dbe170c3..f95af254e 100644 --- a/js/forum/src/components/Composer.js +++ b/js/forum/src/components/Composer.js @@ -73,6 +73,7 @@ class Composer extends Component { const showIfMinimized = () => { if (this.position === Composer.PositionEnum.MINIMIZED) this.show(); + m.redraw.strategy('none'); }; return ( diff --git a/js/forum/src/components/DiscussionPage.js b/js/forum/src/components/DiscussionPage.js index 5f889fd6c..467abb319 100644 --- a/js/forum/src/components/DiscussionPage.js +++ b/js/forum/src/components/DiscussionPage.js @@ -123,8 +123,6 @@ export default class DiscussionPage extends mixin(Component, evented) { config(isInitialized, context) { if (isInitialized) return; - // context.retain = true; - $('#app').addClass('App--discussion'); context.onunload = () => $('#app').removeClass('App--discussion'); } diff --git a/js/forum/src/components/EditPostComposer.js b/js/forum/src/components/EditPostComposer.js index 7859c808c..3e6b66099 100644 --- a/js/forum/src/components/EditPostComposer.js +++ b/js/forum/src/components/EditPostComposer.js @@ -12,6 +12,14 @@ import icon from 'flarum/helpers/icon'; * - `post` */ export default class EditPostComposer extends ComposerBody { + constructor(...args) { + super(...args); + + this.editor.props.preview = () => { + m.route(app.route.post(this.props.post)); + }; + } + static initProps(props) { super.initProps(props); diff --git a/js/forum/src/components/IndexPage.js b/js/forum/src/components/IndexPage.js index 1d29f9d32..5f9eeef2e 100644 --- a/js/forum/src/components/IndexPage.js +++ b/js/forum/src/components/IndexPage.js @@ -51,7 +51,6 @@ export default class IndexPage extends Component { // Save the scroll position so we can restore it when we return to the // discussion list. app.cache.scrollTop = $(window).scrollTop(); - app.composer.minimize(); } view() { diff --git a/js/forum/src/components/PostStream.js b/js/forum/src/components/PostStream.js index e2b9e70d1..05b287b94 100644 --- a/js/forum/src/components/PostStream.js +++ b/js/forum/src/components/PostStream.js @@ -44,11 +44,22 @@ class PostStream extends mixin(Component, evented) { /** * Load and scroll to a post with a certain number. * - * @param {Integer} number + * @param {Integer|String} number The post number to go to. If 'reply', go to + * the last post and scroll the reply preview into view. * @param {Boolean} noAnimation * @return {Promise} */ goToNumber(number, noAnimation) { + // If we want to go to the reply preview, then we will go to the end of the + // discussion and scroll to the very bottom of the page. + if (number === 'reply') { + return this.goToLast().then(() => { + $('html,body').stop(true).animate({ + scrollTop: $(document).height() - $(window).height() + }, 'fast'); + }); + } + this.paused = true; const promise = this.loadNearNumber(number); @@ -475,7 +486,7 @@ class PostStream extends mixin(Component, evented) { * @return {Integer} */ getMarginTop() { - return this.$() && $('.global-header').outerHeight() + parseInt(this.$().css('margin-top'), 10); + return this.$() && $('#header').outerHeight() + parseInt(this.$().css('margin-top'), 10); } /** diff --git a/js/forum/src/components/ReplyComposer.js b/js/forum/src/components/ReplyComposer.js index 8cacdafd3..0d3d69be2 100644 --- a/js/forum/src/components/ReplyComposer.js +++ b/js/forum/src/components/ReplyComposer.js @@ -13,6 +13,14 @@ import icon from 'flarum/helpers/icon'; * - `discussion` */ export default class ReplyComposer extends ComposerBody { + constructor(...args) { + super(...args); + + this.editor.props.preview = () => { + m.route(app.route.discussion(this.props.discussion, 'reply')); + }; + } + static initProps(props) { super.initProps(props); @@ -92,6 +100,7 @@ export default class ReplyComposer extends ComposerBody { // transition to their new post when clicked. let alert; const viewButton = Button.component({ + className: 'Button Button--link', children: app.trans('core.view'), onclick: () => { m.route(app.route.post(post)); diff --git a/js/forum/src/components/TextEditor.js b/js/forum/src/components/TextEditor.js index 93aa57014..3d0518abc 100644 --- a/js/forum/src/components/TextEditor.js +++ b/js/forum/src/components/TextEditor.js @@ -75,6 +75,16 @@ export default class TextEditor extends Component { }) ); + if (this.props.preview) { + items.add('preview', + Button.component({ + icon: 'eye', + className: 'Button Button--icon', + onclick: this.props.preview + }) + ); + } + return items; } diff --git a/less/forum/Composer.less b/less/forum/Composer.less index 585474585..177b97f5c 100644 --- a/less/forum/Composer.less +++ b/less/forum/Composer.less @@ -318,9 +318,13 @@ @media @tablet-up { .TextEditor-controls { margin: 0 -20px 0 -110px; - padding: 15px 20px; + padding: 10px 20px; border-top: 1px solid @control-bg; + li { + margin-right: 5px; + } + .fullScreen & { margin: 0; border-top: 0; diff --git a/less/lib/Alert.less b/less/lib/Alert.less index 3c94a95bb..c03b90745 100755 --- a/less/lib/Alert.less +++ b/less/lib/Alert.less @@ -4,7 +4,7 @@ background: @alert-bg; line-height: 1.5; - &, a, a:hover { + &, a, a:hover, button, button:hover { color: @alert-color; } }