diff options
author | ralder <ralder@yandex.ru> | 2015-07-10 12:20:00 -0700 |
---|---|---|
committer | ralder <ralder@yandex.ru> | 2015-07-10 14:12:05 -0700 |
commit | e79ade46b2c43c0a6ee1ecffac91ba348aac790d (patch) | |
tree | 6195dbdc1f5f7eb417ad8e6c7e68a7cb5854edbd /web/react | |
parent | 947da5d2878007a693460c7d3df29f19969683e5 (diff) | |
download | chat-e79ade46b2c43c0a6ee1ecffac91ba348aac790d.tar.gz chat-e79ade46b2c43c0a6ee1ecffac91ba348aac790d.tar.bz2 chat-e79ade46b2c43c0a6ee1ecffac91ba348aac790d.zip |
[webui] fix incorrect height for mentions list for reply textbox
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/mention_list.jsx | 29 |
1 files changed, 18 insertions, 11 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> |