From e4e3178e9440ab351a722d939f0af2637de2df9f Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 20 Jan 2016 14:33:08 -0500 Subject: Changed the post textbox resizing code to be more reliable and not rely on magic numbers --- web/react/components/textbox.jsx | 52 ++++++++++++++++++--------------- web/sass-files/sass/partials/_post.scss | 2 +- 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index b29f304ab..1e9c7de74 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -81,36 +81,42 @@ export default class Textbox extends React.Component { } resize() { - const e = this.refs.message.getTextbox(); - const w = ReactDOM.findDOMNode(this.refs.wrapper); + const textbox = this.refs.message.getTextbox(); + const $textbox = $(textbox); + const $wrapper = $(ReactDOM.findDOMNode(this.refs.wrapper)); - const prevHeight = $(e).height(); + const padding = parseInt($textbox.css('padding-bottom'), 10) + parseInt($textbox.css('padding-top'), 10); + const borders = parseInt($textbox.css('border-bottom-width'), 10) + parseInt($textbox.css('border-top-width'), 10); + const maxHeight = parseInt($textbox.css('max-height'), 10) - borders; - const lht = parseInt($(e).css('lineHeight'), 10); - const lines = e.scrollHeight / lht; - let mod = 15; + const prevHeight = $textbox.height(); - if (lines < 2.5 || this.props.messageText === '') { - mod = 30; - } + // set the height to auto and remove the scrollbar so we can get the actual size of the contents + $textbox.css('height', 'auto').css('overflow-y', 'hidden'); + + let height = textbox.scrollHeight - padding; - if (e.scrollHeight - mod < 167) { - $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod); - $(w).css({height: 'auto'}).height(e.scrollHeight + 2); - $(w).closest('.post-body__cell').removeClass('scroll'); - if (this.state.preview) { - $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'auto'}).height(e.scrollHeight - mod); - } + if (height + padding > maxHeight) { + height = maxHeight - padding; + + // turn scrollbar on and move over attachment icon to compensate for that + $textbox.css('overflow-y', 'scroll'); + $wrapper.closest('.post-body__cell').addClass('scroll'); } else { - $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod); - $(w).css({height: 'auto'}).height(163); - $(w).closest('.post-body__cell').addClass('scroll'); - if (this.state.preview) { - $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'scroll'}).height(163); - } + $wrapper.closest('.post-body__cell').removeClass('scroll'); + } + + // set the textarea to be the proper height + $textbox.height(height); + + // set the wrapper height to match the height of the textbox including padding and borders + $wrapper.height(height + padding + borders); + + if (this.state.preview) { + $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders); } - if (prevHeight !== $(e).height() && this.props.onHeightChange) { + if (height !== prevHeight && this.props.onHeightChange) { this.props.onHeightChange(); } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 7b7c2d73a..438e9d7f6 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -11,6 +11,7 @@ resize: none; line-height:20px; min-height:36px; + overflow-x: hidden; &:focus { border-color: #ccc; box-shadow: none; @@ -335,7 +336,6 @@ body.ios { padding-top: 8px; padding-right: 28px; max-height: 162px !important; - overflow: auto; line-height: 1.5; } .textarea-div { -- cgit v1.2.3-1-g7c22 From d8149fb26982eab00f632d8bfc98f6a9cceebca6 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 20 Jan 2016 14:49:37 -0500 Subject: Removed some vestigial code from the post textbox --- web/react/components/textbox.jsx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 1e9c7de74..62c0d5218 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -22,8 +22,6 @@ export default class Textbox extends React.Component { this.handleKeyPress = this.handleKeyPress.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); this.resize = this.resize.bind(this); - this.handleFocus = this.handleFocus.bind(this); - this.handleBlur = this.handleBlur.bind(this); this.showPreview = this.showPreview.bind(this); this.state = { @@ -121,20 +119,6 @@ export default class Textbox extends React.Component { } } - handleFocus() { - const elm = this.refs.message.getTextbox(); - if (elm.title === elm.value) { - elm.value = ''; - } - } - - handleBlur() { - const elm = this.refs.message.getTextbox(); - if (elm.value === '') { - elm.value = elm.title; - } - } - showPreview(e) { e.preventDefault(); e.target.blur(); @@ -184,9 +168,6 @@ export default class Textbox extends React.Component { onUserInput={this.props.onUserInput} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} - onFocus={this.handleFocus} - onBlur={this.handleBlur} - onPaste={this.handlePaste} style={{visibility: this.state.preview ? 'hidden' : 'visible'}} listComponent={SuggestionList} providers={this.suggestionProviders} -- cgit v1.2.3-1-g7c22 From e4cea41cbf678f553ffffd9c9fdb86e3d35bc0ca Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 20 Jan 2016 14:57:34 -0500 Subject: Added a small margin where the PostsView will be considered to be at the bottom even if it's not exactly at the bottom --- web/react/components/posts_view.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 7d8c7e265..856403af5 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -57,7 +57,10 @@ export default class PostsView extends React.Component { this.setState({displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')}); } isAtBottom() { - return ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight); + // consider the view to be at the bottom if it's within this many pixels of the bottom + const atBottomMargin = 10; + + return this.refs.postlist.clientHeight + this.refs.postlist.scrollTop >= this.refs.postlist.scrollHeight - atBottomMargin; } handleScroll() { // HACK FOR RHS -- REMOVE WHEN RHS DIES -- cgit v1.2.3-1-g7c22