Merge pull request #1288 from asaadmahmoodspin/plt-945

UI Improvements for multiple tickets
This commit is contained in:
Harrison Healey
2015-11-04 09:24:13 -05:00
12 changed files with 88 additions and 73 deletions

View File

@@ -147,9 +147,11 @@ export default class UserList extends React.Component {
className='form-horizontal'
role='form'
>
<div className='member-list-holder'>
{memberList}
</div>
<table className='table more-table member-list-holder'>
<tbody>
{memberList}
</tbody>
</table>
</form>
<ResetPasswordModal
user={this.state.user}

View File

@@ -139,7 +139,7 @@ export default class ChannelInviteModal extends React.Component {
return (
<div
className='modal fade'
className='modal fade more-modal'
id='channel_invite'
tabIndex='-1'
role='dialog'

View File

@@ -150,7 +150,7 @@ export default class ChannelMembers extends React.Component {
return (
<div
className='modal fade'
className='modal fade more-modal'
ref='modal'
id='channel_members'
tabIndex='-1'
@@ -181,11 +181,7 @@ export default class ChannelMembers extends React.Component {
ref='modalBody'
className='modal-body'
>
<div className='col-sm-12'>
<div className='team-member-list'>
{memberList}
</div>
</div>
{memberList}
</div>
<div className='modal-footer'>
<button

View File

@@ -21,7 +21,8 @@ export default class MemberList extends React.Component {
}
return (
<div className='member-list-holder'>
<table className='table more-table member-list-holder'>
<tbody>
{members.map(function mymembers(member) {
return (
<MemberListItem
@@ -34,8 +35,9 @@ export default class MemberList extends React.Component {
/>
);
}, this)}
</tbody>
{message}
</div>
</table>
);
}
}

View File

@@ -37,7 +37,7 @@ export default class MemberListItem extends React.Component {
invite = (
<a
onClick={this.handleInvite}
className='btn btn-sm btn-primary member-invite'
className='btn btn-sm btn-primary'
>
<i className='glyphicon glyphicon-envelope'/>
{' Add'}
@@ -102,17 +102,19 @@ export default class MemberListItem extends React.Component {
}
return (
<div className='row member-div'>
<img
className='post-profile-img pull-left'
src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
height='36'
width='36'
/>
<span className='member-name'>{member.username}</span>
<span className='member-email'>{member.email}</span>
{invite}
</div>
<tr>
<td className='direct-channel'>
<img
className='profile-img pull-left'
src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
height='36'
width='36'
/>
<div className='member-name'>{member.username}</div>
<div className='member-description'>{member.email}</div>
</td>
<td className='td--action lg'>{invite}</td>
</tr>
);
}
}

View File

@@ -15,9 +15,11 @@ export default class MemberListTeam extends React.Component {
}, this);
return (
<div className='member-list-holder'>
{memberList}
</div>
<table className='table more-table member-list-holder'>
<tbody>
{memberList}
</tbody>
</table>
);
}
}

View File

@@ -206,7 +206,7 @@ export default class MoreDirectChannels extends React.Component {
return (
<Modal
className='modal-direct-channels'
dialogClassName='more-modal'
show={this.props.show}
onHide={this.handleHide}
>

View File

@@ -46,7 +46,7 @@ export default class TeamSignUp extends React.Component {
} else {
teamListing = (
<div>
<h3>{'Choose a Team'}</h3>
<h4>{'Choose a Team'}</h4>
<div className='signup-team-all'>
{
this.props.teams.map((team) => {
@@ -58,19 +58,18 @@ export default class TeamSignUp extends React.Component {
<a
href={'/' + team.name}
>
<div className='signup-team-dir__group'>
<span className='signup-team-dir__name'>{team.display_name}</span>
<span
className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
aria-hidden='true'
/>
</div>
<span className='signup-team-dir__name'>{team.display_name}</span>
<span
className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
aria-hidden='true'
/>
</a>
</div>
);
})
}
</div>
<h4>{'Or Create a Team'}</h4>
</div>
);
}

View File

@@ -149,6 +149,12 @@
@include opacity(0.8);
margin: 5px 0;
}
.profile-img {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-right: 8px;
}
.more-name {
font-weight: 600;
font-size: 0.95em;
@@ -230,8 +236,8 @@
position: relative;
&:hover .file-playback-controls.stop {
@include opacity(1);
}
@include opacity(1);
}
}
img {
max-width: 100%;
@@ -347,7 +353,7 @@
}
}
.modal-direct-channels {
.more-modal {
.user-list {
margin-top: 10px;
@@ -362,11 +368,12 @@
}
.modal-body {
padding: 20px 0 0;
padding: 10px 0 0;
@include clearfix;
}
.filter-row {
margin-top: 10px;
padding: 0 15px;
}
@@ -379,11 +386,4 @@
.more-purpose {
@include opacity(0.7);
}
.profile-img {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-right: 8px;
}
}

View File

@@ -100,7 +100,7 @@
.date-separator, .new-separator {
&.hovered--comment {
&:before, &:after {
background: none;
background: none !important;
}
}
}

View File

@@ -314,32 +314,39 @@
}
.signup-team-all {
width: 280px;
box-shadow: 3px 3px 1px #d5d5d5;
margin: 0px 0px 50px 5px;
margin: 0 0 20px;
border: 1px solid #ddd;
@include border-radius(2px);
.signup-team-dir {
background: #fafafa;
border-top: 1px solid #d5d5d5;
&:first-child {
border: none;
}
a {
color: inherit;
display: block;
padding: 0 15px;
line-height: 3.5em;
height: 3.5em;
font-size: 1.1em;
}
}
.signup-team-dir__name {
white-space: nowrap;
float: left;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
.signup-team-dir__arrow {
float: right;
font-size: 0.9em;
color: #999;
line-height: 3.5em;
}
}
.signup-team-dir {
background: #fafafa;
border-bottom: 1px solid #d5d5d5;
}
.signup-team-dir__group {
padding: 15px 10px 15px 10px;
}
.signup-team-dir__name {
line-height: 1.3 !important;
font-size: 1.5em !important;
font-weight: 300 !important;
}
.signup-team-dir__arrow {
float: right;
line-height: 1.3 !important;
font-size: 1.5em !important;
font-weight: 300 !important;
}
.authorize-box {
margin: 100px auto;

View File

@@ -37,7 +37,12 @@
<script>
window.setup_channel_page({{ .Props }});
$('body').tooltip( {selector: '[data-toggle=tooltip]'} );
$('.modal-body').css('max-height', $(window).height() - 200);
if($(window).height() > 1200){
$('.modal-body').css('max-height', 1000);
}
else {
$('.modal-body').css('max-height', $(window).height() - 200);
}
$('.modal-body').perfectScrollbar();
</script>
</body>