diff options
Diffstat (limited to 'web/react/components')
| -rw-r--r-- | web/react/components/access_history_modal.jsx | 16 | ||||
| -rw-r--r-- | web/react/components/activity_log_modal.jsx | 17 | ||||
| -rw-r--r-- | web/react/components/channel_header.jsx | 12 | ||||
| -rw-r--r-- | web/react/components/post_list.jsx | 7 | ||||
| -rw-r--r-- | web/react/components/rename_channel_modal.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/search_bar.jsx | 11 | ||||
| -rw-r--r-- | web/react/components/sidebar_header.jsx | 6 | ||||
| -rw-r--r-- | web/react/components/signup_team_complete.jsx | 44 | ||||
| -rw-r--r-- | web/react/components/user_settings.jsx | 25 |
9 files changed, 92 insertions, 48 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index 462f046f6..6cc8ec8a9 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -3,7 +3,8 @@ var UserStore = require('../stores/user_store.jsx'); var AsyncClient = require('../utils/async_client.jsx'); -var Utils = require('../utils/utils.jsx'); +var LoadingScreen = require('./loading_screen.jsx'); +var utils = require('../utils/utils.jsx'); function getStateFromStoresForAudits() { return { @@ -14,7 +15,9 @@ function getStateFromStoresForAudits() { module.exports = React.createClass({ componentDidMount: function() { UserStore.addAuditsChangeListener(this._onChange); - AsyncClient.getAudits(); + $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) { + AsyncClient.getAudits(); + }); var self = this; $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { @@ -25,7 +28,10 @@ module.exports = React.createClass({ UserStore.removeAuditsChangeListener(this._onChange); }, _onChange: function() { - this.setState(getStateFromStoresForAudits()); + var newState = getStateFromStoresForAudits(); + if (!utils.areStatesEqual(newState.audits, this.state.audits)) { + this.setState(newState); + } }, handleMoreInfo: function(index) { var newMoreInfo = this.state.moreInfo; @@ -87,9 +93,13 @@ module.exports = React.createClass({ <h4 className="modal-title" id="myModalLabel">Access History</h4> </div> <div ref="modalBody" className="modal-body"> + { !this.state.audits.loading ? <form role="form"> { accessList } </form> + : + <LoadingScreen /> + } </div> </div> </div> diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 90f139e8b..f28f0d5f1 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -4,6 +4,8 @@ var UserStore = require('../stores/user_store.jsx'); var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); +var LoadingScreen = require('./loading_screen.jsx'); +var utils = require('../utils/utils.jsx'); function getStateFromStoresForSessions() { return { @@ -29,7 +31,9 @@ module.exports = React.createClass({ }, componentDidMount: function() { UserStore.addSessionsChangeListener(this._onChange); - AsyncClient.getSessions(); + $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) { + AsyncClient.getSessions(); + }); var self = this; $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { @@ -40,7 +44,10 @@ module.exports = React.createClass({ UserStore.removeSessionsChangeListener(this._onChange); }, _onChange: function() { - this.setState(getStateFromStoresForSessions()); + var newState = getStateFromStoresForSessions(); + if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) { + this.setState(newState); + } }, handleMoreInfo: function(index) { var newMoreInfo = this.state.moreInfo; @@ -106,10 +113,16 @@ module.exports = React.createClass({ </div> <p className="session-help-text">Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the "Logout" button below to end a session.</p> <div ref="modalBody" className="modal-body"> + { !this.state.sessions.loading ? + <div> <form role="form"> { activityList } </form> { server_error } + </div> + : + <LoadingScreen /> + } </div> </div> </div> diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 7a129f200..76dbe370b 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -153,7 +153,7 @@ module.exports = React.createClass({ if (isDirect) { if (this.state.users.length > 1) { var contact = this.state.users[((this.state.users[0].id === currentId) ? 1 : 0)]; - channelTitle = <UserProfile userId={contact.id} overwriteName={contact.nickname || contact.username} />; + channelTitle = contact.nickname || contact.username; } } @@ -161,13 +161,13 @@ module.exports = React.createClass({ <table className="channel-header alt"> <tr> <th> - { !isDirect ? <div className="channel-header__info"> <div className="dropdown"> <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> <strong className="heading">{channelTitle} </strong> <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span> </a> + { !isDirect ? <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_info" data-channelid={channel.id} href="#">View Info</a></li> { !ChannelStore.isDefault(channel) ? @@ -193,12 +193,14 @@ module.exports = React.createClass({ : null } </ul> + : + <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> + <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> + </ul> + } </div> <div data-toggle="popover" data-content={popoverContent} className="description">{description}</div> </div> - : - <a href="#"><strong className="heading">{channelTitle}</strong></a> - } </th> <th><PopoverListMembers members={this.state.users} channelId={channel.id} /></th> <th className="search-bar__container"><NavbarSearchBox /></th> diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 8dc5013ca..46f77660d 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -309,12 +309,15 @@ module.exports = React.createClass({ var more_messages = <p className="beginning-messages-text">Beginning of Channel</p>; + var userStyle = { color: UserStore.getCurrentUser().props.theme } + if (channel != null) { if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) { more_messages = <a ref="loadmore" className="more-messages-text theme" href="#" onClick={this.getMorePosts}>Load more messages</a>; } else if (channel.type === 'D') { var teammate = utils.getDirectTeammate(channel.id) + if (teammate) { var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username; more_messages = ( @@ -329,6 +332,7 @@ module.exports = React.createClass({ {"This is the start of your private message history with " + teammate_name + "." }<br/> {"Private messages and files shared here are not shown to people outside this area."} </p> + <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> </div> ); } else { @@ -342,7 +346,6 @@ module.exports = React.createClass({ var ui_name = channel.display_name var members = ChannelStore.getCurrentExtraInfo().members; var creator_name = ""; - var userStyle = { color: UserStore.getCurrentUser().props.theme } for (var i = 0; i < members.length; i++) { if (members[i].roles.indexOf('admin') > -1) { @@ -374,7 +377,7 @@ module.exports = React.createClass({ <div className="channel-intro"> <h4 className="channel-intro__title">Beginning of {ui_name}</h4> <p className="channel-intro__content"> - {"This is the start of " + ui_name + ", a channel for conversations you’d prefer out of more focused channels."} + {"This is the start of " + ui_name + ", a channel for non-work-related conversations."} <br/> </p> <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx index 9e4a25f85..d67ab3afe 100644 --- a/web/react/components/rename_channel_modal.jsx +++ b/web/react/components/rename_channel_modal.jsx @@ -96,7 +96,7 @@ module.exports = React.createClass({ var self = this; $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { var button = $(e.relatedTarget); - self.setState({ display_name: button.attr('data-display'), title: button.attr('data-name'), channel_id: button.attr('data-channelid') }); + self.setState({ display_name: button.attr('data-display'), channel_name: button.attr('data-name'), channel_id: button.attr('data-channelid') }); }); $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', this.handleClose); }, diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index f21f0cd58..e39cf5d46 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -36,6 +36,9 @@ module.exports = React.createClass({ } } }, + clearFocus: function(e) { + $('.search-bar__container').removeClass('focused'); + }, handleClose: function(e) { e.preventDefault(); @@ -57,6 +60,7 @@ module.exports = React.createClass({ }, handleUserFocus: function(e) { e.target.select(); + $('.search-bar__container').addClass('focused'); }, performSearch: function(terms, isMentionSearch) { if (terms.length) { @@ -92,13 +96,14 @@ module.exports = React.createClass({ render: function() { return ( <div> - <div className="sidebar__collapse" onClick={this.handleClose}>Cancel</div> - <span className="glyphicon glyphicon-search sidebar__search-icon"></span> + <div className="sidebar__collapse" onClick={this.handleClose}><span className="fa fa-angle-left"></span></div> + <span onClick={this.clearFocus} className="search__clear">Cancel</span> <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}> + <span className="glyphicon glyphicon-search sidebar__search-icon"></span> <input type="text" ref="search" - className="form-control search-bar-box" + className="form-control search-bar" placeholder="Search" value={this.state.search_term} onFocus={this.handleUserFocus} diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index e7512934a..0156dc01a 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -107,6 +107,10 @@ module.exports = React.createClass({ }; }, + toggleDropdown: function(e) { + $('.team__header').find('.dropdown-toggle').trigger('click'); + }, + render: function() { var me = UserStore.getCurrentUser(); @@ -116,7 +120,7 @@ module.exports = React.createClass({ return ( <div className="team__header theme"> - <a className="settings_link" href="#" data-toggle="modal" data-target="#user_settings1"> + <a href="#" onClick={this.toggleDropdown}> { me.last_picture_update ? <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} /> : diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 21f9edef1..83daa3b1f 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -87,7 +87,7 @@ WelcomePage = React.createClass({ <h3 className="sub-heading">Welcome to:</h3> <h1 className="margin--top-none">{config.SiteName}</h1> </p> - <p className="margin--less">Let's setup your new team</p> + <p className="margin--less">Let's set up your new team</p> <p> Please confirm your email address:<br /> <div className="inner__content"> @@ -271,7 +271,7 @@ TeamURLPage = React.createClass({ <p>{"Choose the web address of your new " + strings.Team + ":"}</p> <ul className="color--light"> <li>Short and memorable is best</li> - <li>Use lower case letters, numbers and dashes</li> + <li>Use lowercase letters, numbers and dashes</li> <li>Must start with a letter and can't end in a dash</li> </ul> <button type="submit" className="btn btn-primary margin--extra" onClick={this.submitNext}>Next<i className="glyphicon glyphicon-chevron-right"></i></button> @@ -587,25 +587,23 @@ PasswordPage = React.createClass({ var props = this.props; - setTimeout(function() { - $('#sign-up-button').button('reset'); - props.state.wizard = "finished"; - props.updateParent(props.state, true); - - window.location.href = utils.getWindowLocationOrigin() + '/' + props.state.team.name + '/login?email=' + encodeURIComponent(teamSignup.team.email); - - // client.loginByEmail(teamSignup.team.domain, teamSignup.team.email, teamSignup.user.password, - // function(data) { - // TeamStore.setLastName(teamSignup.team.domain); - // UserStore.setLastEmail(teamSignup.team.email); - // UserStore.setCurrentUser(data); - // window.location.href = '/channels/town-square'; - // }.bind(ctl), - // function(err) { - // this.setState({name_error: err.message}); - // }.bind(ctl) - // ); - }, 5000); + $('#sign-up-button').button('reset'); + props.state.wizard = "finished"; + props.updateParent(props.state, true); + + window.location.href = utils.getWindowLocationOrigin() + '/' + props.state.team.name + '/login?email=' + encodeURIComponent(teamSignup.team.email); + + // client.loginByEmail(teamSignup.team.domain, teamSignup.team.email, teamSignup.user.password, + // function(data) { + // TeamStore.setLastName(teamSignup.team.domain); + // UserStore.setLastEmail(teamSignup.team.email); + // UserStore.setCurrentUser(data); + // window.location.href = '/channels/town-square'; + // }.bind(ctl), + // function(err) { + // this.setState({name_error: err.message}); + // }.bind(ctl) + // ); }.bind(this), function(err) { this.setState({server_error: err.message}); @@ -620,8 +618,8 @@ PasswordPage = React.createClass({ client.track('signup', 'signup_team_07_password'); - var password_error = this.state.password_error ? <label className="control-label">{ this.state.password_error }</label> : null; - var server_error = this.state.server_error ? <label className="control-label">{ this.state.server_error }</label> : null; + var password_error = this.state.password_error ? <div className="form-group has-error"><label className="control-label">{ this.state.password_error }</label></div> : null; + var server_error = this.state.server_error ? <div className="form-group has-error"><label className="control-label">{ this.state.server_error }</label></div> : null; return ( <div> diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index e1ae6da52..902989b7b 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -465,17 +465,17 @@ var SecurityTab = React.createClass({ var confirmPassword = this.state.confirm_password; if (currentPassword === '') { - this.setState({ password_error: "Please enter your current password" }); + this.setState({password_error: 'Please enter your current password', server_error: ''}); return; } if (newPassword.length < 5) { - this.setState({ password_error: "New passwords must be at least 5 characters" }); + this.setState({password_error: 'New passwords must be at least 5 characters', server_error: ''}); return; } - if (newPassword != confirmPassword) { - this.setState({ password_error: "The new passwords you entered do not match" }); + if (newPassword !== confirmPassword) { + this.setState({password_error: 'The new passwords you entered do not match', server_error: ''}); return; } @@ -488,11 +488,16 @@ var SecurityTab = React.createClass({ function(data) { this.props.updateSection(""); AsyncClient.getMe(); - this.setState({ current_password: '', new_password: '', confirm_password: '' }); + this.setState({current_password: '', new_password: '', confirm_password: ''}); }.bind(this), function(err) { - state = this.getInitialState(); - state.server_error = err; + var state = this.getInitialState(); + if (err.message) { + state.server_error = err.message; + } else { + state.server_error = err; + } + state.password_error = ''; this.setState(state); }.bind(this) ); @@ -709,7 +714,11 @@ var GeneralTab = React.createClass({ }.bind(this), function(err) { state = this.getInitialState(); - state.server_error = err; + if(err.message) { + state.server_error = err.message; + } else { + state.server_error = err + } this.setState(state); }.bind(this) ); |