summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/react/components/channel_invite_modal.jsx28
-rw-r--r--web/react/components/channel_members_modal.jsx23
-rw-r--r--web/react/components/filtered_user_list.jsx12
-rw-r--r--web/react/components/member_list_team.jsx5
-rw-r--r--web/react/components/more_direct_channels.jsx23
-rw-r--r--web/react/components/team_members_modal.jsx36
-rw-r--r--web/sass-files/sass/partials/_modal.scss17
7 files changed, 59 insertions, 85 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
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index d8979c607..fc4c13038 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -403,7 +403,6 @@
overflow-y: auto;
overflow-x: hidden;
margin-top: 10px;
- max-height: 500px;
position: relative;
}
@@ -451,7 +450,6 @@
flex-shrink: 0;
}
-
.user-list-item__details {
flex-grow: 1;
flex-shrink: 1;
@@ -472,3 +470,18 @@
flex-shrink: 0;
}
}
+
+.filtered-user-list {
+ display: flex;
+ flex-direction: column;
+
+ .filter-row {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+
+ .user-list {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-30 14:11:30 +0000