diff options
-rw-r--r-- | web/react/components/mention_list.jsx | 29 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 5 | ||||
-rw-r--r-- | web/react/components/sidebar_right.jsx | 6 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_mentions.scss | 9 |
4 files changed, 23 insertions, 26 deletions
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index ba2c53612..103ff29bb 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -9,7 +9,12 @@ var Mention = require('./mention.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; +var MAX_HEIGHT_LIST = 292; +var MAX_ITEMS_IN_LIST = 25; +var ITEM_HEIGHT = 36; + module.exports = React.createClass({ + displayName: "MentionList", componentDidMount: function() { PostStore.addMentionDataChangeListener(this._onChange); @@ -72,7 +77,7 @@ module.exports = React.createClass({ }, render: function() { var mentionText = this.state.mentionText; - if (mentionText === '-1') return (<div/>); + if (mentionText === '-1') return null; var profiles = UserStore.getActiveOnlyProfiles(); var users = []; @@ -100,8 +105,7 @@ module.exports = React.createClass({ var mentions = {}; var index = 0; - for (var i = 0; i < users.length; i++) { - if (Object.keys(mentions).length >= 25) break; + for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) { if (this.alreadyMentioned(users[i].username)) continue; var firstName = "", lastName = ""; @@ -127,17 +131,20 @@ module.exports = React.createClass({ } var numMentions = Object.keys(mentions).length; - if (numMentions < 1) return (<div/>); + if (numMentions < 1) return null; - var height = (numMentions*36) + 4; - var width = $('#'+this.props.id).parent().width(); - var bottom = $(window).height() - $('#'+this.props.id).offset().top; - var left = $('#'+this.props.id).offset().left; - var max_height = $('#'+this.props.id).offset().top - 10; + var $mention_tab = $('#'+this.props.id); + var maxHeight = Math.min(MAX_HEIGHT_LIST, $mention_tab.offset().top - 10); + var style = { + height: Math.min(maxHeight, (numMentions*ITEM_HEIGHT) + 4), + width: $mention_tab.parent().width(), + bottom: $(window).height() - $mention_tab.offset().top, + left: $mention_tab.offset().left + }; return ( - <div className="mentions--top" style={{height: height, width: width, bottom: bottom, left: left}}> - <div ref="mentionlist" className="mentions-box" style={{height: height, width: width}}> + <div className="mentions--top" style={style}> + <div ref="mentionlist" className="mentions-box"> { mentions } </div> </div> diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 177e4a1db..d6dc9ce30 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -78,7 +78,6 @@ module.exports = React.createClass({ PostStore.addChangeListener(this._onChange); ChannelStore.addChangeListener(this._onChange); - UserStore.addStatusesChangeListener(this._onChange); SocketStore.addChangeListener(this._onSocketChange); $(".post-list-holder-by-time").perfectScrollbar(); @@ -158,7 +157,6 @@ module.exports = React.createClass({ componentWillUnmount: function() { PostStore.removeChangeListener(this._onChange); ChannelStore.removeChangeListener(this._onChange); - UserStore.removeStatusesChangeListener(this._onChange); SocketStore.removeChangeListener(this._onSocketChange); $('body').off('click.userpopover'); }, @@ -195,9 +193,6 @@ module.exports = React.createClass({ this.scrolledToNew = false; } this.setState(newState); - } else { - // Updates the timestamp on each post - this.forceUpdate() } }, _onSocketChange: function(msg) { diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 60c8ffae6..8334b345b 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -16,16 +16,10 @@ module.exports = React.createClass({ componentDidMount: function() { PostStore.addSearchChangeListener(this._onSearchChange); PostStore.addSelectedPostChangeListener(this._onSelectedChange); - UserStore.addStatusesChangeListener(this._onChange); }, componentWillUnmount: function() { PostStore.removeSearchChangeListener(this._onSearchChange); PostStore.removeSelectedPostChangeListener(this._onSelectedChange); - UserStore.removeStatusesChangeListener(this._onChange); - }, - _onChange: function() { - // Updates the timestamp on each post - this.forceUpdate(); }, _onSelectedChange: function(from_search) { if (this.isMounted()) { diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index da46866c8..7e8c1869a 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -11,13 +11,14 @@ position: absolute; z-index: 1060; .mentions-box { - max-height: 303px; - position:absolute; - background-color:#fff; + width: 100%; + height: 100%; + position: absolute; + background-color: #fff; border: $border-gray; overflow-x: hidden; overflow-y: scroll; - bottom:0; + bottom: 0; } } |