Merge pull request #1933 from hmhealey/plt1661

PLT-1661/PLT-1745 Scrolling fixes

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

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,54 +79,46 @@ export default class Textbox extends React.Component {
     }
 
     resize() {
-        const e = this.refs.message.getTextbox();
+        const textbox = this.refs.message.getTextbox();
-        const w = ReactDOM.findDOMNode(this.refs.wrapper);
+        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 prevHeight = $textbox.height();
-        const lines = e.scrollHeight / lht;
-        let mod = 15;
 
-        if (lines < 2.5 || this.props.messageText === '') {
+        // set the height to auto and remove the scrollbar so we can get the actual size of the contents
-            mod = 30;
+        $textbox.css('height', 'auto').css('overflow-y', 'hidden');
-        }
 
-        if (e.scrollHeight - mod < 167) {
+        let height = textbox.scrollHeight - padding;
-            $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod);
+
-            $(w).css({height: 'auto'}).height(e.scrollHeight + 2);
+        if (height + padding > maxHeight) {
-            $(w).closest('.post-body__cell').removeClass('scroll');
+            height = maxHeight - padding;
-            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);
+            $wrapper.closest('.post-body__cell').removeClass('scroll');
-            $(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);
-            }
         }
 
-        if (prevHeight !== $(e).height() && 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);
+
+        if (this.state.preview) {
+            $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders);
+        }
+
+        if (height !== prevHeight && this.props.onHeightChange) {
             this.props.onHeightChange();
         }
     }
 
-    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();
@@ -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}

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 {