Merge pull request #1288 from asaadmahmoodspin/plt-945

UI Improvements for multiple tickets

web/react/components/admin_console/team_users.jsx

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

web/react/components/channel_invite_modal.jsx

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

web/react/components/channel_members.jsx

@@ -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'>
+                            {memberList}
-                                <div className='team-member-list'>
-                                    {memberList}
-                                </div>
-                            </div>
                         </div>
                         <div className='modal-footer'>
                             <button

web/react/components/member_list.jsx

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

web/react/components/member_list_item.jsx

@@ -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'>
+            <tr>
-                <img
+                <td className='direct-channel'>
-                    className='post-profile-img pull-left'
+                    <img
-                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
+                        className='profile-img pull-left'
-                    height='36'
+                        src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
-                    width='36'
+                        height='36'
-                />
+                        width='36'
-                <span className='member-name'>{member.username}</span>
+                    />
-                <span className='member-email'>{member.email}</span>
+                    <div className='member-name'>{member.username}</div>
-                {invite}
+                    <div className='member-description'>{member.email}</div>
-            </div>
+                </td>
+                <td className='td--action lg'>{invite}</td>
+            </tr>
         );
     }
 }

web/react/components/member_list_team.jsx

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

web/react/components/more_direct_channels.jsx

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

web/react/components/signup_team.jsx

@@ -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='signup-team-dir__name'>{team.display_name}</span>
+                                                <span
-                                                    <span
+                                                    className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
-                                                        className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
+                                                    aria-hidden='true'
-                                                        aria-hidden='true'
+                                                />
-                                                    />
-                                                </div>
                                             </a>
                                         </div>
                                     );
                                 })
                             }
                         </div>
+                        <h4>{'Or Create a Team'}</h4>
                     </div>
                 );
             }

web/sass-files/sass/partials/_modal.scss

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

web/sass-files/sass/partials/_responsive.scss

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

web/sass-files/sass/partials/_signup.scss

@@ -314,32 +314,39 @@
 }
 
 .signup-team-all {
-    width: 280px;
+    margin: 0 0 20px;
-    box-shadow: 3px 3px 1px #d5d5d5;
+    border: 1px solid #ddd;
-    margin: 0px 0px 50px 5px;
+    @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;

web/templates/channel.html

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