mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Merge pull request #1316 from asaadmahmoodspin/ui-improvements

Просмотр исходного кода 
Modal improvements for members
Этот коммит содержится в:
Harrison Healey
2015-11-05 12:08:34 -05:00
родитель 0e72831639 bc1820a498
Коммит ff38c402cb
7 изменённых файлов: 134 добавлений и 96 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

90
web/react/components/admin_console/user_item.jsx
Просмотреть файл

@@ -212,50 +212,52 @@ export default class UserItem extends React.Component {
} }
return ( return (
<div className='row member-div'> <tr>
<img <td className='row member-div'>
className='post-profile-img pull-left' <img
src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`} className='post-profile-img pull-left'
height='36' src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
width='36' height='36'
/> width='36'
<span className='member-name'>{Utils.getDisplayName(user)}</span> />
<span className='member-email'>{email}</span> <span className='member-name'>{Utils.getDisplayName(user)}</span>
<div className='dropdown member-drop'> <span className='member-email'>{email}</span>
<a <div className='dropdown member-drop'>
href='#' <a
className='dropdown-toggle theme' href='#'
type='button' className='dropdown-toggle theme'
id='channel_header_dropdown' type='button'
data-toggle='dropdown' id='channel_header_dropdown'
aria-expanded='true' data-toggle='dropdown'
> aria-expanded='true'
<span>{currentRoles} </span> >
<span className='caret'></span> <span>{currentRoles} </span>
</a> <span className='caret'></span>
<ul </a>
className='dropdown-menu member-menu' <ul
role='menu' className='dropdown-menu member-menu'
aria-labelledby='channel_header_dropdown' role='menu'
> aria-labelledby='channel_header_dropdown'
{makeAdmin} >
{makeMember} {makeAdmin}
{makeActive} {makeMember}
{makeNotActive} {makeActive}
{makeSystemAdmin} {makeNotActive}
<li role='presentation'> {makeSystemAdmin}
<a <li role='presentation'>
role='menuitem' <a
href='#' role='menuitem'
onClick={this.handleResetPassword} href='#'
> onClick={this.handleResetPassword}
{'Reset Password'} >
</a> {'Reset Password'}
</li> </a>
</ul> </li>
</div> </ul>
{serverError} </div>
</div> {serverError}
</td>
</tr>
); );
} }
} }

21
web/react/components/channel_invite_modal.jsx
Просмотреть файл

@@ -54,6 +54,16 @@ export default class ChannelInviteModal extends React.Component {
loading loading
}; };
} }
onShow() {
if ($(window).width() > 768) {
$(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
}
}
componentDidUpdate(prevProps) {
if (this.props.show && !prevProps.show) {
this.onShow();
}
}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (!this.props.show && nextProps.show) { if (!this.props.show && nextProps.show) {
ChannelStore.addExtraInfoChangeListener(this.onListenerChange); ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
@@ -103,6 +113,11 @@ export default class ChannelInviteModal extends React.Component {
); );
} }
render() { render() {
var maxHeight = 1000;
if (Utils.windowHeight() <= 1200) {
maxHeight = Utils.windowHeight() - 300;
}
var inviteError = null; var inviteError = null;
if (this.state.inviteError) { if (this.state.inviteError) {
inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>); inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
@@ -129,13 +144,17 @@ export default class ChannelInviteModal extends React.Component {
return ( return (
<Modal <Modal
dialogClassName='more-modal'
show={this.props.show} show={this.props.show}
onHide={this.props.onModalDismissed} onHide={this.props.onModalDismissed}
> >
<Modal.Header closeButton={true}> <Modal.Header closeButton={true}>
<Modal.Title>{'Add New Members to '}<span className='name'>{this.state.channelName}</span></Modal.Title> <Modal.Title>{'Add New Members to '}<span className='name'>{this.state.channelName}</span></Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body
ref='modalBody'
style={{maxHeight}}
>
{inviteError} {inviteError}
{content} {content}
</Modal.Body> </Modal.Body>

35
web/react/components/channel_members_modal.jsx
Просмотреть файл

@@ -70,6 +70,16 @@ export default class ChannelMembersModal extends React.Component {
channelName channelName
}; };
} }
onShow() {
if ($(window).width() > 768) {
$(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
}
}
componentDidUpdate(prevProps) {
if (this.props.show && !prevProps.show) {
this.onShow();
}
}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (!this.props.show && nextProps.show) { if (!this.props.show && nextProps.show) {
ChannelStore.addExtraInfoChangeListener(this.onChange); ChannelStore.addExtraInfoChangeListener(this.onChange);
@@ -128,6 +138,11 @@ export default class ChannelMembersModal extends React.Component {
); );
} }
render() { render() {
var maxHeight = 1000;
if (Utils.windowHeight() <= 1200) {
maxHeight = Utils.windowHeight() - 300;
}
const currentMember = ChannelStore.getCurrentMember(); const currentMember = ChannelStore.getCurrentMember();
let isAdmin = false; let isAdmin = false;
if (currentMember) { if (currentMember) {
@@ -137,6 +152,7 @@ export default class ChannelMembersModal extends React.Component {
return ( return (
<div> <div>
<Modal <Modal
dialogClassName='more-modal'
show={this.props.show} show={this.props.show}
onHide={this.props.onModalDismissed} onHide={this.props.onModalDismissed}
> >
@@ -153,15 +169,16 @@ export default class ChannelMembersModal extends React.Component {
<i className='glyphicon glyphicon-envelope'/>{' Add New Members'} <i className='glyphicon glyphicon-envelope'/>{' Add New Members'}
</a> </a>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body
<div className='col-sm-12'> ref='modalBody'
<div className='team-member-list'> style={{maxHeight}}
<MemberList >
memberList={this.state.memberList} <div className='team-member-list'>
isAdmin={isAdmin} <MemberList
handleRemove={this.handleRemove} memberList={this.state.memberList}
/> isAdmin={isAdmin}
</div> handleRemove={this.handleRemove}
/>
</div> </div>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>

2
web/react/components/member_list.jsx
Просмотреть файл

@@ -15,7 +15,7 @@ export default class MemberList extends React.Component {
members = this.props.memberList; members = this.props.memberList;
} }
var message = ''; var message = null;
if (members.length === 0) { if (members.length === 0) {
message = <tr><td>No users to add.</td></tr>; message = <tr><td>No users to add.</td></tr>;
} }

70
web/react/components/member_list_team_item.jsx
Просмотреть файл

@@ -166,40 +166,42 @@ export default class MemberListTeamItem extends React.Component {
} }
return ( return (
<div className='row member-div'> <tr>
<img <td className='row member-div'>
className='post-profile-img pull-left' <img
src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`} className='post-profile-img pull-left'
height='36' src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
width='36' height='36'
/> width='36'
<span className='member-name'>{Utils.getDisplayName(user)}</span> />
<span className='member-email'>{email}</span> <span className='member-name'>{Utils.getDisplayName(user)}</span>
<div className='dropdown member-drop'> <span className='member-email'>{email}</span>
<a <div className='dropdown member-drop'>
href='#' <a
className='dropdown-toggle theme' href='#'
type='button' className='dropdown-toggle theme'
id='channel_header_dropdown' type='button'
data-toggle='dropdown' id='channel_header_dropdown'
aria-expanded='true' data-toggle='dropdown'
> aria-expanded='true'
<span>{currentRoles} </span> >
<span className='caret'></span> <span>{currentRoles} </span>
</a> <span className='caret'></span>
<ul </a>
className='dropdown-menu member-menu' <ul
role='menu' className='dropdown-menu member-menu'
aria-labelledby='channel_header_dropdown' role='menu'
> aria-labelledby='channel_header_dropdown'
{makeAdmin} >
{makeMember} {makeAdmin}
{makeActive} {makeMember}
{makeNotActive} {makeActive}
</ul> {makeNotActive}
</div> </ul>
{serverError} </div>
</div> {serverError}
</td>
</tr>
); );
} }
} }

10
web/react/components/team_members.jsx
Просмотреть файл

@@ -79,7 +79,7 @@ export default class TeamMembers extends React.Component {
return ( return (
<div <div
className='modal fade' className='modal fade more-modal'
ref='modal' ref='modal'
id='team_members' id='team_members'
tabIndex='-1' tabIndex='-1'
@@ -106,12 +106,10 @@ export default class TeamMembers extends React.Component {
ref='modalBody' ref='modalBody'
className='modal-body' className='modal-body'
> >
<div className='channel-settings'> <div className='team-member-list'>
<div className='team-member-list'> {renderMembers}
{renderMembers}
</div>
{serverError}
</div> </div>
{serverError}
</div> </div>
<div className='modal-footer'> <div className='modal-footer'>
<button <button

2
web/sass-files/sass/partials/_modal.scss
Просмотреть файл

@@ -174,7 +174,7 @@
td { td {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; @include legacy-pie-clearfix;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 8px 8px 8px 15px; padding: 8px 8px 8px 15px;
&.td--action { &.td--action {