diff options
author | Corey Hulen <corey@hulen.com> | 2016-01-21 09:02:10 -0600 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-01-21 09:02:10 -0600 |
commit | 9aa23c1994af1f96f9a9bfaabfc3b4eee1790372 (patch) | |
tree | 9302f2e56bc5b0a75b77c951fe2c271541dc4a1b /web | |
parent | c7faefbedcf540e938ab79e498ca86fabc967c5b (diff) | |
parent | e4cea41cbf678f553ffffd9c9fdb86e3d35bc0ca (diff) | |
download | chat-9aa23c1994af1f96f9a9bfaabfc3b4eee1790372.tar.gz chat-9aa23c1994af1f96f9a9bfaabfc3b4eee1790372.tar.bz2 chat-9aa23c1994af1f96f9a9bfaabfc3b4eee1790372.zip |
Merge pull request #1933 from hmhealey/plt1661
PLT-1661/PLT-1745 Scrolling fixes
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/posts_view.jsx | 5 | ||||
-rw-r--r-- | web/react/components/textbox.jsx | 67 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 2 |
3 files changed, 32 insertions, 42 deletions
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 diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index b29f304ab..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 = { @@ -81,51 +79,43 @@ 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 (height + padding > maxHeight) { + height = maxHeight - 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); - } + // 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'); } - if (prevHeight !== $(e).height() && this.props.onHeightChange) { - this.props.onHeightChange(); - } - } + // 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); - handleFocus() { - const elm = this.refs.message.getTextbox(); - if (elm.title === elm.value) { - elm.value = ''; + if (this.state.preview) { + $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders); } - } - handleBlur() { - const elm = this.refs.message.getTextbox(); - if (elm.value === '') { - elm.value = elm.title; + if (height !== prevHeight && this.props.onHeightChange) { + this.props.onHeightChange(); } } @@ -178,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} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index c5cd10b20..34ff7e5a9 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; @@ -336,7 +337,6 @@ body.ios { padding-top: 8px; padding-right: 28px; max-height: 162px !important; - overflow: auto; line-height: 1.5; } .textarea-div { |