diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 4 | ||||
-rw-r--r-- | web/react/components/popover_list_members.jsx | 22 | ||||
-rw-r--r-- | web/react/components/post_attachment.jsx | 5 | ||||
-rw-r--r-- | web/react/components/search_autocomplete.jsx | 12 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_tip.jsx | 27 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_general.jsx | 164 |
6 files changed, 124 insertions, 110 deletions
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 40deb37f2..d1265f67e 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -50,6 +50,10 @@ export default class MoreDirectChannels extends React.Component { handleFilterChange() { const filter = ReactDOM.findDOMNode(this.refs.filter).value; + if ($(window).width() > 768) { + $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); + } + if (filter !== this.state.filter) { this.setState({filter}); } diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index bd6b6d3bd..102bddcf5 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -69,7 +69,6 @@ export default class PopoverListMembers extends React.Component { render() { let popoverHtml = []; - let countText = '-'; const members = this.props.members; const teamMembers = UserStore.getProfilesUsernameMap(); const currentUserId = UserStore.getCurrentId(); @@ -148,13 +147,20 @@ export default class PopoverListMembers extends React.Component { ); } }); + } - const count = this.props.memberCount; - if (count > 20) { - countText = '20+'; - } else if (count > 0) { - countText = count.toString(); - } + let count = this.props.memberCount; + let countText = '-'; + + // fall back to checking the length of the member list if the count isn't set + if (!count && members) { + count = members.length; + } + + if (count > 20) { + countText = '20+'; + } else if (count > 0) { + countText = count.toString(); } return ( @@ -194,6 +200,6 @@ export default class PopoverListMembers extends React.Component { PopoverListMembers.propTypes = { members: React.PropTypes.array.isRequired, - memberCount: React.PropTypes.number.isRequired, + memberCount: React.PropTypes.number, channelId: React.PropTypes.string.isRequired }; diff --git a/web/react/components/post_attachment.jsx b/web/react/components/post_attachment.jsx index 2d6b47f03..cf65dfbfb 100644 --- a/web/react/components/post_attachment.jsx +++ b/web/react/components/post_attachment.jsx @@ -50,7 +50,8 @@ export default class PostAttachment extends React.Component { } shouldCollapse() { - return (this.props.attachment.text.match(/\n/g) || []).length >= 5 || this.props.attachment.text.length > 700; + const text = this.props.attachment.text || ''; + return (text.match(/\n/g) || []).length >= 5 || text.length > 700; } getCollapsedText() { @@ -292,4 +293,4 @@ export default class PostAttachment extends React.Component { PostAttachment.propTypes = { attachment: React.PropTypes.object.isRequired -};
\ No newline at end of file +}; diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx index d245c6bac..04384203f 100644 --- a/web/react/components/search_autocomplete.jsx +++ b/web/react/components/search_autocomplete.jsx @@ -46,7 +46,7 @@ export default class SearchAutocomplete extends React.Component { componentDidUpdate(prevProps, prevState) { const content = $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content'); - if (this.state.show) { + if (this.state.show && this.state.suggestions.length > 0) { if (!prevState.show) { content.perfectScrollbar(); content.css('max-height', $(window).height() - 200); @@ -143,10 +143,12 @@ export default class SearchAutocomplete extends React.Component { } getSelection() { - if (this.state.mode === 'channels') { - return this.state.suggestions[this.state.selection].name; - } else if (this.state.mode === 'users') { - return this.state.suggestions[this.state.selection].username; + if (this.state.suggestions.length > 0) { + if (this.state.mode === 'channels') { + return this.state.suggestions[this.state.selection].name; + } else if (this.state.mode === 'users') { + return this.state.suggestions[this.state.selection].username; + } } return ''; diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx index 75d73e920..dd231b816 100644 --- a/web/react/components/tutorial/tutorial_tip.jsx +++ b/web/react/components/tutorial/tutorial_tip.jsx @@ -51,21 +51,22 @@ export default class TutorialTip extends React.Component { const dots = []; if (this.props.screens.length > 1) { for (let i = 0; i < this.props.screens.length; i++) { + let className = 'circle'; if (i === this.state.currentScreen) { - dots.push( - <div - className='circle active' - key={'dotactive' + i} - /> - ); - } else { - dots.push( - <div - className='circle' - key={'dotinactive' + i} - /> - ); + className += ' active'; } + + dots.push( + <a + href='#' + key={'dotactive' + i} + className={className} + onClick={(e) => { //eslint-disable-line no-loop-func + e.preventDefault(); + this.setState({currentScreen: i}); + }} + /> + ); } } diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx index 1bfae6930..b363f0673 100644 --- a/web/react/components/user_settings/user_settings_general.jsx +++ b/web/react/components/user_settings/user_settings_general.jsx @@ -1,15 +1,16 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -var UserStore = require('../../stores/user_store.jsx'); -var ErrorStore = require('../../stores/error_store.jsx'); -var SettingItemMin = require('../setting_item_min.jsx'); -var SettingItemMax = require('../setting_item_max.jsx'); -var SettingPicture = require('../setting_picture.jsx'); -var client = require('../../utils/client.jsx'); -var AsyncClient = require('../../utils/async_client.jsx'); -var utils = require('../../utils/utils.jsx'); -var assign = require('object-assign'); +const SettingItemMin = require('../setting_item_min.jsx'); +const SettingItemMax = require('../setting_item_max.jsx'); +const SettingPicture = require('../setting_picture.jsx'); + +const UserStore = require('../../stores/user_store.jsx'); +const ErrorStore = require('../../stores/error_store.jsx'); + +const Client = require('../../utils/client.jsx'); +const AsyncClient = require('../../utils/async_client.jsx'); +const Utils = require('../../utils/utils.jsx'); export default class UserSettingsGeneralTab extends React.Component { constructor(props) { @@ -32,17 +33,15 @@ export default class UserSettingsGeneralTab extends React.Component { this.updatePicture = this.updatePicture.bind(this); this.updateSection = this.updateSection.bind(this); - this.setupInitialState = this.setupInitialState.bind(this); - this.state = this.setupInitialState(props); } submitUsername(e) { e.preventDefault(); - var user = this.props.user; - var username = this.state.username.trim().toLowerCase(); + const user = Object.assign({}, this.props.user); + const username = this.state.username.trim().toLowerCase(); - var usernameError = utils.isValidUsername(username); + const usernameError = Utils.isValidUsername(username); if (usernameError === 'Cannot use a reserved word as a username.') { this.setState({clientError: 'This username is reserved, please choose a new one.'}); return; @@ -52,7 +51,7 @@ export default class UserSettingsGeneralTab extends React.Component { } if (user.username === username) { - this.setState({clientError: 'You must submit a new username'}); + this.setState({clientError: 'You must submit a new username.', emailError: '', serverError: ''}); return; } @@ -63,11 +62,11 @@ export default class UserSettingsGeneralTab extends React.Component { submitNickname(e) { e.preventDefault(); - var user = UserStore.getCurrentUser(); - var nickname = this.state.nickname.trim(); + const user = Object.assign({}, this.props.user); + const nickname = this.state.nickname.trim(); if (user.nickname === nickname) { - this.setState({clientError: 'You must submit a new nickname'}); + this.setState({clientError: 'You must submit a new nickname.', emailError: '', serverError: ''}); return; } @@ -78,12 +77,12 @@ export default class UserSettingsGeneralTab extends React.Component { submitName(e) { e.preventDefault(); - var user = UserStore.getCurrentUser(); - var firstName = this.state.firstName.trim(); - var lastName = this.state.lastName.trim(); + const user = Object.assign({}, this.props.user); + const firstName = this.state.firstName.trim(); + const lastName = this.state.lastName.trim(); if (user.first_name === firstName && user.last_name === lastName) { - this.setState({clientError: 'You must submit a new first or last name'}); + this.setState({clientError: 'You must submit a new first or last name.', emailError: '', serverError: ''}); return; } @@ -95,21 +94,21 @@ export default class UserSettingsGeneralTab extends React.Component { submitEmail(e) { e.preventDefault(); - var user = UserStore.getCurrentUser(); - var email = this.state.email.trim().toLowerCase(); - var confirmEmail = this.state.confirmEmail.trim().toLowerCase(); + const user = Object.assign({}, this.props.user); + const email = this.state.email.trim().toLowerCase(); + const confirmEmail = this.state.confirmEmail.trim().toLowerCase(); if (user.email === email) { return; } - if (email === '' || !utils.isEmail(email)) { - this.setState({emailError: 'Please enter a valid email address'}); + if (email === '' || !Utils.isEmail(email)) { + this.setState({emailError: 'Please enter a valid email address.', clientError: '', serverError: ''}); return; } if (email !== confirmEmail) { - this.setState({emailError: 'The new emails you entered do not match'}); + this.setState({emailError: 'The new emails you entered do not match.', clientError: '', serverError: ''}); return; } @@ -117,7 +116,7 @@ export default class UserSettingsGeneralTab extends React.Component { this.submitUser(user, true); } submitUser(user, emailUpdated) { - client.updateUser(user, + Client.updateUser(user, () => { this.updateSection(''); AsyncClient.getMe(); @@ -130,13 +129,13 @@ export default class UserSettingsGeneralTab extends React.Component { } }, (err) => { - var state = this.setupInitialState(this.props); + let serverError; if (err.message) { - state.serverError = err.message; + serverError = err.message; } else { - state.serverError = err; + serverError = err; } - this.setState(state); + this.setState({serverError, emailError: '', clientError: ''}); } ); } @@ -151,10 +150,10 @@ export default class UserSettingsGeneralTab extends React.Component { return; } - var picture = this.state.picture; + const picture = this.state.picture; if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') { - this.setState({clientError: 'Only JPG or PNG images may be used for profile pictures'}); + this.setState({clientError: 'Only JPG or PNG images may be used for profile pictures.'}); return; } @@ -162,17 +161,17 @@ export default class UserSettingsGeneralTab extends React.Component { formData.append('image', picture, picture.name); this.setState({loadingPicture: true}); - client.uploadProfileImage(formData, - function imageUploadSuccess() { + Client.uploadProfileImage(formData, + () => { this.submitActive = false; AsyncClient.getMe(); window.location.reload(); - }.bind(this), - function imageUploadFailure(err) { + }, + (err) => { var state = this.setupInitialState(this.props); state.serverError = err.message; this.setState(state); - }.bind(this) + } ); } updateUsername(e) { @@ -205,34 +204,34 @@ export default class UserSettingsGeneralTab extends React.Component { } updateSection(section) { const emailChangeInProgress = this.state.emailChangeInProgress; - this.setState(assign({}, this.setupInitialState(this.props), {emailChangeInProgress: emailChangeInProgress, clientError: '', serverError: '', emailError: ''})); + this.setState(Object.assign({}, this.setupInitialState(this.props), {emailChangeInProgress, clientError: '', serverError: '', emailError: ''})); this.submitActive = false; this.props.updateSection(section); } setupInitialState(props) { - var user = props.user; + const user = props.user; return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname, email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false}; } render() { - var user = this.props.user; + const user = this.props.user; - var clientError = null; + let clientError = null; if (this.state.clientError) { clientError = this.state.clientError; } - var serverError = null; + let serverError = null; if (this.state.serverError) { serverError = this.state.serverError; } - var emailError = null; + let emailError = null; if (this.state.emailError) { emailError = this.state.emailError; } - var nameSection; - var inputs = []; + let nameSection; + const inputs = []; if (this.props.activeSection === 'name') { inputs.push( @@ -298,15 +297,15 @@ export default class UserSettingsGeneralTab extends React.Component { submit={this.submitName} server_error={serverError} client_error={clientError} - updateSection={function clearSection(e) { + updateSection={(e) => { this.updateSection(''); e.preventDefault(); - }.bind(this)} + }} extraInfo={extraInfo} /> ); } else { - var fullName = ''; + let fullName = ''; if (user.first_name && user.last_name) { fullName = user.first_name + ' ' + user.last_name; @@ -320,17 +319,17 @@ export default class UserSettingsGeneralTab extends React.Component { <SettingItemMin title='Full Name' describe={fullName} - updateSection={function updateNameSection() { + updateSection={() => { this.updateSection('name'); - }.bind(this)} + }} /> ); } - var nicknameSection; + let nicknameSection; if (this.props.activeSection === 'nickname') { let nicknameLabel = 'Nickname'; - if (utils.isMobile()) { + if (Utils.isMobile()) { nicknameLabel = ''; } @@ -364,10 +363,10 @@ export default class UserSettingsGeneralTab extends React.Component { submit={this.submitNickname} server_error={serverError} client_error={clientError} - updateSection={function clearSection(e) { + updateSection={(e) => { this.updateSection(''); e.preventDefault(); - }.bind(this)} + }} extraInfo={extraInfo} /> ); @@ -376,17 +375,17 @@ export default class UserSettingsGeneralTab extends React.Component { <SettingItemMin title='Nickname' describe={UserStore.getCurrentUser().nickname} - updateSection={function updateNicknameSection() { + updateSection={() => { this.updateSection('nickname'); - }.bind(this)} + }} /> ); } - var usernameSection; + let usernameSection; if (this.props.activeSection === 'username') { let usernameLabel = 'Username'; - if (utils.isMobile()) { + if (Utils.isMobile()) { usernameLabel = ''; } @@ -416,10 +415,10 @@ export default class UserSettingsGeneralTab extends React.Component { submit={this.submitUsername} server_error={serverError} client_error={clientError} - updateSection={function clearSection(e) { + updateSection={(e) => { this.updateSection(''); e.preventDefault(); - }.bind(this)} + }} extraInfo={extraInfo} /> ); @@ -428,13 +427,14 @@ export default class UserSettingsGeneralTab extends React.Component { <SettingItemMin title='Username' describe={UserStore.getCurrentUser().username} - updateSection={function updateUsernameSection() { + updateSection={() => { this.updateSection('username'); - }.bind(this)} + }} /> ); } - var emailSection; + + let emailSection; if (this.props.activeSection === 'email') { const emailEnabled = global.window.mm_config.SendEmailNotifications === 'true'; const emailVerificationEnabled = global.window.mm_config.RequireEmailVerification === 'true'; @@ -507,10 +507,10 @@ export default class UserSettingsGeneralTab extends React.Component { submit={submit} server_error={serverError} client_error={emailError} - updateSection={function clearSection(e) { + updateSection={(e) => { this.updateSection(''); e.preventDefault(); - }.bind(this)} + }} /> ); } else { @@ -534,26 +534,26 @@ export default class UserSettingsGeneralTab extends React.Component { <SettingItemMin title='Email' describe={describe} - updateSection={function updateEmailSection() { + updateSection={() => { this.updateSection('email'); - }.bind(this)} + }} /> ); } - var pictureSection; + let pictureSection; if (this.props.activeSection === 'picture') { pictureSection = ( <SettingPicture title='Profile Picture' submit={this.submitPicture} - src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update + '&' + utils.getSessionIndex()} + src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update + '&' + Utils.getSessionIndex()} server_error={serverError} client_error={clientError} - updateSection={function clearSection(e) { + updateSection={(e) => { this.updateSection(''); e.preventDefault(); - }.bind(this)} + }} picture={this.state.picture} pictureChange={this.updatePicture} submitActive={this.submitActive} @@ -561,17 +561,17 @@ export default class UserSettingsGeneralTab extends React.Component { /> ); } else { - var minMessage = 'Click \'Edit\' to upload an image.'; + let minMessage = 'Click \'Edit\' to upload an image.'; if (user.last_picture_update) { - minMessage = 'Image last updated ' + utils.displayDate(user.last_picture_update); + minMessage = 'Image last updated ' + Utils.displayDate(user.last_picture_update); } pictureSection = ( <SettingItemMin title='Profile Picture' describe={minMessage} - updateSection={function updatePictureSection() { + updateSection={() => { this.updateSection('picture'); - }.bind(this)} + }} /> ); } @@ -619,10 +619,10 @@ export default class UserSettingsGeneralTab extends React.Component { } UserSettingsGeneralTab.propTypes = { - user: React.PropTypes.object, - updateSection: React.PropTypes.func, - updateTab: React.PropTypes.func, - activeSection: React.PropTypes.string, + user: React.PropTypes.object.isRequired, + updateSection: React.PropTypes.func.isRequired, + updateTab: React.PropTypes.func.isRequired, + activeSection: React.PropTypes.string.isRequired, closeModal: React.PropTypes.func.isRequired, collapseModal: React.PropTypes.func.isRequired }; |