IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[webui] fix incorrect height for mentions list for reply textbox

Browse Source
This commit is contained in:
ralder
2015-07-10 12:20:00 -07:00
parent 947da5d287
commit e79ade46b2
2 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/react/components/mention_list.jsx
View File

@@ -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>

9
web/sass-files/sass/partials/_mentions.scss
View File

@@ -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;
}
}