summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/admin_console/team_users.jsx8
-rw-r--r--web/react/components/channel_invite_modal.jsx2
-rw-r--r--web/react/components/channel_members.jsx8
-rw-r--r--web/react/components/member_list.jsx6
-rw-r--r--web/react/components/member_list_item.jsx26
-rw-r--r--web/react/components/member_list_team.jsx8
-rw-r--r--web/react/components/more_direct_channels.jsx2
-rw-r--r--web/react/components/navbar_dropdown.jsx18
-rw-r--r--web/react/components/post_body.jsx9
-rw-r--r--web/react/components/search_results.jsx11
-rw-r--r--web/react/components/settings_sidebar.jsx4
-rw-r--r--web/react/components/sidebar_header.jsx3
-rw-r--r--web/react/components/signup_team.jsx15
-rw-r--r--web/react/components/team_general_tab.jsx46
-rw-r--r--web/react/components/tutorial/tutorial_intro_screens.jsx37
15 files changed, 115 insertions, 88 deletions
diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx
index b44aba56e..7161139e6 100644
--- a/web/react/components/admin_console/team_users.jsx
+++ b/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'>
- {memberList}
- </div>
+ <table className='table more-table member-list-holder'>
+ <tbody>
+ {memberList}
+ </tbody>
+ </table>
</form>
<ResetPasswordModal
user={this.state.user}
diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx
index 7c7770095..e90d1a666 100644
--- a/web/react/components/channel_invite_modal.jsx
+++ b/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'
diff --git a/web/react/components/channel_members.jsx b/web/react/components/channel_members.jsx
index 86cc2464d..d0ea7278b 100644
--- a/web/react/components/channel_members.jsx
+++ b/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'>
- <div className='team-member-list'>
- {memberList}
- </div>
- </div>
+ {memberList}
</div>
<div className='modal-footer'>
<button
diff --git a/web/react/components/member_list.jsx b/web/react/components/member_list.jsx
index fe744760f..70eb0a500 100644
--- a/web/react/components/member_list.jsx
+++ b/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>
);
}
}
diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx
index 8ed94680e..8251d67bc 100644
--- a/web/react/components/member_list_item.jsx
+++ b/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'>
- <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>
);
}
}
diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx
index 5ca40a39d..cb2d0660b 100644
--- a/web/react/components/member_list_team.jsx
+++ b/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'>
- {memberList}
- </div>
+ <table className='table more-table member-list-holder'>
+ <tbody>
+ {memberList}
+ </tbody>
+ </table>
);
}
}
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index b0232fc08..40deb37f2 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/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}
>
diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx
index f43bdffdf..029b9c137 100644
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -11,23 +11,15 @@ var AboutBuildModal = require('./about_build_modal.jsx');
var Constants = require('../utils/constants.jsx');
function getStateFromStores() {
- let teams = [];
- let teamsObject = UserStore.getTeams();
- for (let teamId in teamsObject) {
+ const teams = [];
+ const teamsObject = UserStore.getTeams();
+ for (const teamId in teamsObject) {
if (teamsObject.hasOwnProperty(teamId)) {
teams.push(teamsObject[teamId]);
}
}
- teams.sort(function sortByDisplayName(teamA, teamB) {
- let teamADisplayName = teamA.display_name.toLowerCase();
- let teamBDisplayName = teamB.display_name.toLowerCase();
- if (teamADisplayName < teamBDisplayName) {
- return -1;
- } else if (teamADisplayName > teamBDisplayName) {
- return 1;
- }
- return 0;
- });
+
+ teams.sort(Utils.sortByDisplayName);
return {teams};
}
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index e1f495d54..e4094daf3 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -77,12 +77,12 @@ export default class PostBody extends React.Component {
this.isGifLoading = true;
const gif = new Image();
- gif.src = src;
gif.onload = (
() => {
this.setState({gifLoaded: true});
}
);
+ gif.src = src;
}
createGifEmbed(link) {
@@ -92,7 +92,12 @@ export default class PostBody extends React.Component {
if (!this.state.gifLoaded) {
this.loadGif(link);
- return null;
+ return (
+ <img
+ className='gif-div placeholder'
+ height='500px'
+ />
+ );
}
return (
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx
index ce19c48f0..b56a7b006 100644
--- a/web/react/components/search_results.jsx
+++ b/web/react/components/search_results.jsx
@@ -83,7 +83,16 @@ export default class SearchResults extends React.Component {
var ctls = null;
if (noResults) {
- ctls = <div className='sidebar--right__subheader'>No results</div>;
+ ctls =
+ (
+ <div className='sidebar--right__subheader'>
+ <h4>{'NO RESULTS'}</h4>
+ <ul>
+ <li>If you're searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term</li>
+ <li>Due to the volume of results, two letter searches and common words like "this", "a" and "is" won't appear in search results</li>
+ </ul>
+ </div>
+ );
} else {
ctls = results.order.map(function mymap(id) {
var post = results.posts[id];
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx
index 4af46c35a..68d9cea48 100644
--- a/web/react/components/settings_sidebar.jsx
+++ b/web/react/components/settings_sidebar.jsx
@@ -1,10 +1,14 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+var utils = require('../utils/utils.jsx');
export default class SettingsSidebar extends React.Component {
componentDidUpdate() {
$('.settings-modal').find('.modal-body').scrollTop(0);
$('.settings-modal').find('.modal-body').perfectScrollbar('update');
+ if (utils.isSafari()) {
+ $('.settings-modal .settings-links .nav').addClass('absolute');
+ }
}
constructor(props) {
super(props);
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index 3f777d93c..46730e1e6 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -62,6 +62,9 @@ export default class SidebarHeader extends React.Component {
<p>
{'Team administrators can also access their '}<strong>{'Team Settings'}</strong>{' from this menu.'}
</p>
+ <p>
+ {'System administrators will find a '}<strong>{'System Console'}</strong>{' option to administrate the entire system.'}
+ </p>
</div>
);
diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx
index 37760a2a2..516765a3f 100644
--- a/web/react/components/signup_team.jsx
+++ b/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='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>
);
}
diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx
index c7c4fa2ea..587ef5ec2 100644
--- a/web/react/components/team_general_tab.jsx
+++ b/web/react/components/team_general_tab.jsx
@@ -372,29 +372,28 @@ export default class GeneralTab extends React.Component {
const inputs = [];
inputs.push(
- <div
- key='teamInviteSetting'
- className='form-group'
- >
- <label className='col-sm-5 control-label'>{'Invite Code'}</label>
- <div className='col-sm-7'>
- <input
- className='form-control'
- type='text'
- onChange={this.updateInviteId}
- value={this.state.invite_id}
- maxLength='32'
- />
- </div>
- <div><br/>{'Your Invite Code is used in the URL sent to people to join your team. Regenerating your Invite Code will invalidate the URLs in previous invitations, unless "Allow anyone to sign-up from login page" is enabled.'}</div>
- <div className='help-text'>
- <button
- className='btn btn-default'
- onClick={this.handleGenerateInviteId}
- >
- {'Re-Generate'}
- </button>
+ <div key='teamInviteSetting'>
+ <div className='row'>
+ <label className='col-sm-5 control-label'>{'Invite Code'}</label>
+ <div className='col-sm-7'>
+ <input
+ className='form-control'
+ type='text'
+ onChange={this.updateInviteId}
+ value={this.state.invite_id}
+ maxLength='32'
+ />
+ <div className='padding-top x2'>
+ <a
+ href='#'
+ onClick={this.handleGenerateInviteId}
+ >
+ {'Re-Generate'}
+ </a>
+ </div>
+ </div>
</div>
+ <div className='setting-list__hint'>{'When allowing open invites this code is used as part of the signup process. Changing this code will invalidate the previous open signup link.'}</div>
</div>
);
@@ -493,8 +492,11 @@ export default class GeneralTab extends React.Component {
<h3 className='tab-header'>{'General Settings'}</h3>
<div className='divider-dark first'/>
{nameSection}
+ <div className='divider-light'/>
{openInviteSection}
+ <div className='divider-light'/>
{teamListingSection}
+ <div className='divider-light'/>
{inviteSection}
<div className='divider-dark'/>
</div>
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx
index c7abccae3..a99e9fe28 100644
--- a/web/react/components/tutorial/tutorial_intro_screens.jsx
+++ b/web/react/components/tutorial/tutorial_intro_screens.jsx
@@ -35,6 +35,9 @@ export default class TutorialIntroScreens extends React.Component {
preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue);
AsyncClient.savePreferences([preference]);
}
+ componentDidMount() {
+ $('.tutorials__scroll').perfectScrollbar();
+ }
createScreen() {
switch (this.state.currentScreen) {
case 0:
@@ -50,7 +53,7 @@ export default class TutorialIntroScreens extends React.Component {
<div>
<h3>{'Welcome to:'}</h3>
<h1>{'Mattermost'}</h1>
- <p>{'Your team communications all in one place, instantly searchable and available anywhere.'}</p>
+ <p>{'Your team communication all in one place, instantly searchable and available anywhere.'}</p>
<p>{'Keep your team connected to help them achieve what matters most.'}</p>
<div className='tutorial__circles'>
<div className='circle active'/>
@@ -65,7 +68,7 @@ export default class TutorialIntroScreens extends React.Component {
<div>
<h3>{'How Mattermost works:'}</h3>
<p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p>
- <p>{'Everything is archived and searchable from any web-enabled laptop, tablet or phone.'}</p>
+ <p>{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}</p>
<div className='tutorial__circles'>
<div className='circle'/>
<div className='circle active'/>
@@ -120,7 +123,7 @@ export default class TutorialIntroScreens extends React.Component {
</a>
{'.'}
</p>
- {'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
+ {'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'}
<div className='tutorial__circles'>
<div className='circle'/>
<div className='circle'/>
@@ -130,20 +133,26 @@ export default class TutorialIntroScreens extends React.Component {
);
}
render() {
+ const height = Utils.windowHeight() - 100;
const screen = this.createScreen();
return (
- <div className='tutorial-steps__container'>
- <div className='tutorial__content'>
- <div className='tutorial__steps'>
- {screen}
- <button
- className='btn btn-primary'
- tabIndex='1'
- onClick={this.handleNext}
- >
- {'Next'}
- </button>
+ <div
+ className='tutorials__scroll'
+ style={{height}}
+ >
+ <div className='tutorial-steps__container'>
+ <div className='tutorial__content'>
+ <div className='tutorial__steps'>
+ {screen}
+ <button
+ className='btn btn-primary'
+ tabIndex='1'
+ onClick={this.handleNext}
+ >
+ {'Next'}
+ </button>
+ </div>
</div>
</div>
</div>