diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/channel_invite_modal.jsx | 28 | ||||
-rw-r--r-- | web/react/components/channel_members_modal.jsx | 23 | ||||
-rw-r--r-- | web/react/components/filtered_user_list.jsx | 12 | ||||
-rw-r--r-- | web/react/components/member_list_team.jsx | 5 | ||||
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 23 | ||||
-rw-r--r-- | web/react/components/team_members_modal.jsx | 36 |
6 files changed, 44 insertions, 83 deletions
diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index f0c8a9030..6c8d51abb 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -25,7 +25,9 @@ export default class ChannelInviteModal extends React.Component { this.createInviteButton = this.createInviteButton.bind(this); // the state gets populated when the modal is shown - this.state = {}; + this.state = { + loading: true + }; } shouldComponentUpdate(nextProps, nextState) { if (!this.props.show && !nextProps.show) { @@ -79,20 +81,6 @@ export default class ChannelInviteModal extends React.Component { loading: false }; } - onShow() { - // TODO ugh - /*if ($(window).width() > 768) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); - } else { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); - }*/ - } - componentDidUpdate(prevProps) { - if (this.props.show && !prevProps.show) { - this.onShow(); - } - } componentWillReceiveProps(nextProps) { if (!this.props.show && nextProps.show) { ChannelStore.addExtraInfoChangeListener(this.onListenerChange); @@ -152,8 +140,14 @@ export default class ChannelInviteModal extends React.Component { if (this.state.loading) { content = (<LoadingScreen/>); } else { + let maxHeight = 1000; + if (Utils.windowHeight() <= 1200) { + maxHeight = Utils.windowHeight() - 300; + } + content = ( <FilteredUserList + style={{maxHeight}} users={this.state.nonmembers} actions={[this.createInviteButton]} /> @@ -175,9 +169,7 @@ export default class ChannelInviteModal extends React.Component { <span className='name'>{this.props.channel.display_name}</span> </Modal.Title> </Modal.Header> - <Modal.Body - ref='modalBody' - > + <Modal.Body> {inviteError} {content} </Modal.Body> diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx index 51f36a4f2..688ab7dd2 100644 --- a/web/react/components/channel_members_modal.jsx +++ b/web/react/components/channel_members_modal.jsx @@ -75,17 +75,6 @@ export default class ChannelMembersModal extends React.Component { loading: false }; } - onShow() { - // TODO ugh - if ($(window).width() > 768) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); - } - } - componentDidUpdate(prevProps) { - if (this.props.show && !prevProps.show) { - this.onShow(); - } - } componentWillReceiveProps(nextProps) { if (!this.props.show && nextProps.show) { ChannelStore.addExtraInfoChangeListener(this.onChange); @@ -148,17 +137,18 @@ export default class ChannelMembersModal extends React.Component { ); } render() { - var maxHeight = 1000; - if (Utils.windowHeight() <= 1200) { - maxHeight = Utils.windowHeight() - 300; - } - let content; if (this.state.loading) { content = (<LoadingScreen/>); } else { + let maxHeight = 1000; + if (Utils.windowHeight() <= 1200) { + maxHeight = Utils.windowHeight() - 300; + } + content = ( <FilteredUserList + style={{maxHeight}} users={this.state.memberList} actions={[this.createRemoveMemberButton]} /> @@ -197,7 +187,6 @@ export default class ChannelMembersModal extends React.Component { </Modal.Header> <Modal.Body ref='modalBody' - style={{maxHeight}} > {content} </Modal.Body> diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx index 7099f99af..ffd6ebf53 100644 --- a/web/react/components/filtered_user_list.jsx +++ b/web/react/components/filtered_user_list.jsx @@ -27,6 +27,10 @@ class FilteredUserList extends React.Component { }; } + componentDidMount() { + $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); + } + componentDidUpdate(prevProps, prevState) { if (prevState.filter !== this.state.filter) { $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); @@ -86,7 +90,10 @@ class FilteredUserList extends React.Component { } return ( - <div> + <div + className='filtered-user-list' + style={this.props.style} + > <div className='filter-row'> <div className='col-sm-6'> <input @@ -122,7 +129,8 @@ FilteredUserList.defaultProps = { FilteredUserList.propTypes = { intl: intlShape.isRequired, users: React.PropTypes.arrayOf(React.PropTypes.object), - actions: React.PropTypes.arrayOf(React.PropTypes.func) + actions: React.PropTypes.arrayOf(React.PropTypes.func), + style: React.PropTypes.object }; export default injectIntl(FilteredUserList); diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx index 0787bf8d8..cfd5359b7 100644 --- a/web/react/components/member_list_team.jsx +++ b/web/react/components/member_list_team.jsx @@ -47,9 +47,14 @@ export default class MemberListTeam extends React.Component { render() { return ( <FilteredUserList + style={this.props.style} users={this.state.users} actions={[TeamMembersDropdown]} /> ); } } + +MemberListTeam.propTypes = { + style: React.PropTypes.object +}; diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index c85b5e9c5..0814ac1b3 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -48,23 +48,6 @@ export default class MoreDirectChannels extends React.Component { UserStore.removeChangeListener(this.handleUserChange); } - componentDidUpdate(prevProps) { - if (!prevProps.show && this.props.show) { - this.onShow(); - } - } - - onShow() { - // TODO ugh - /*if (Utils.isMobile()) { - $(ReactDOM.findDOMNode(this.refs.modal)).css('max-height', $(window).height() - 250); - } else { - console.log(ReactDOM.findDOMNode(this.refs.modal)); - console.log($(ReactDOM.findDOMNode(this.refs.modal))); - $(ReactDOM.findDOMNode(this.refs.modal)).css('max-height', $(window).height() - 300); - }*/ - } - handleHide() { if (this.props.onModalDismissed) { this.props.onModalDismissed(); @@ -121,6 +104,11 @@ export default class MoreDirectChannels extends React.Component { } render() { + let maxHeight = 1000; + if (Utils.windowHeight() <= 1200) { + maxHeight = Utils.windowHeight() - 300; + } + return ( <Modal dialogClassName='more-modal more-direct-channels' @@ -137,6 +125,7 @@ export default class MoreDirectChannels extends React.Component { </Modal.Header> <Modal.Body> <FilteredUserList + style={{maxHeight}} users={this.state.users} actions={[this.createJoinDirectChannelButton]} /> diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx index dfd48b614..9bdb16438 100644 --- a/web/react/components/team_members_modal.jsx +++ b/web/react/components/team_members_modal.jsx @@ -3,43 +3,21 @@ import MemberListTeam from './member_list_team.jsx'; import TeamStore from '../stores/team_store.jsx'; +import * as Utils from '../utils/utils.jsx'; import {FormattedMessage} from 'mm-intl'; const Modal = ReactBootstrap.Modal; export default class TeamMembersModal extends React.Component { - constructor(props) { - super(props); - - this.onShow = this.onShow.bind(this); - } - - componentDidMount() { - if (this.props.show) { - this.onShow(); - } - } - - componentDidUpdate(prevProps) { - if (this.props.show && !prevProps.show) { - this.onShow(); - } - } - - onShow() { - // TODO ugh - /*if ($(window).width() > 768) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); - } else { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); - }*/ - } - render() { const team = TeamStore.getCurrent(); + let maxHeight = 1000; + if (Utils.windowHeight() <= 1200) { + maxHeight = Utils.windowHeight() - 300; + } + return ( <Modal dialogClassName='more-modal' @@ -56,7 +34,7 @@ export default class TeamMembersModal extends React.Component { /> </Modal.Header> <Modal.Body> - <MemberListTeam/> + <MemberListTeam style={{maxHeight}}/> </Modal.Body> <Modal.Footer> <button |