diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/create_comment.jsx | 6 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 48 | ||||
-rw-r--r-- | web/react/components/delete_channel_modal.jsx | 3 | ||||
-rw-r--r-- | web/react/components/error_bar.jsx | 85 | ||||
-rw-r--r-- | web/react/components/navbar.jsx | 2 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 16 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 16 | ||||
-rw-r--r-- | web/react/components/signup_user_complete.jsx | 2 | ||||
-rw-r--r-- | web/react/components/team_signup_password_page.jsx | 2 | ||||
-rw-r--r-- | web/react/components/team_signup_with_sso.jsx | 2 | ||||
-rw-r--r-- | web/react/components/textbox.jsx | 53 | ||||
-rw-r--r-- | web/react/components/user_settings/manage_incoming_hooks.jsx | 2 | ||||
-rw-r--r-- | web/react/components/view_image.jsx | 18 |
13 files changed, 142 insertions, 113 deletions
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 99f553c0c..5097b3aa5 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -43,6 +43,12 @@ export default class CreateComment extends React.Component { submitting: false }; } + componentDidUpdate(prevProps, prevState) { + if (prevState.uploadsInProgress < this.state.uploadsInProgress) { + $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); + $('.post-right__scroll').perfectScrollbar('update'); + } + } handleSubmit(e) { e.preventDefault(); diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 595643027..0cd14747d 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -52,6 +52,12 @@ export default class CreatePost extends React.Component { componentDidUpdate(prevProps, prevState) { if (prevState.previews.length !== this.state.previews.length) { this.resizePostHolder(); + return; + } + + if (prevState.uploadsInProgress !== this.state.uploadsInProgress) { + this.resizePostHolder(); + return; } } getCurrentDraft() { @@ -79,7 +85,7 @@ export default class CreatePost extends React.Component { return; } - let post = {}; + const post = {}; post.filenames = []; post.message = this.state.messageText; @@ -99,20 +105,20 @@ export default class CreatePost extends React.Component { this.state.channelId, post.message, false, - function handleCommandSuccess(data) { + (data) => { PostStore.storeDraft(data.channel_id, null); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); if (data.goto_location.length > 0) { window.location.href = data.goto_location; } - }.bind(this), - function handleCommandError(err) { - let state = {}; + }, + (err) => { + const state = {}; state.serverError = err.message; state.submitting = false; this.setState(state); - }.bind(this) + } ); } else { post.channel_id = this.state.channelId; @@ -133,10 +139,10 @@ export default class CreatePost extends React.Component { this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); Client.createPost(post, channel, - function handlePostSuccess(data) { + (data) => { AsyncClient.getPosts(); - let member = ChannelStore.getMember(channel.id); + const member = ChannelStore.getMember(channel.id); member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); @@ -146,8 +152,8 @@ export default class CreatePost extends React.Component { post: data }); }, - function handlePostError(err) { - let state = {}; + (err) => { + const state = {}; if (err.message === 'Invalid RootId parameter') { if ($('#post_deleted').length > 0) { @@ -161,7 +167,7 @@ export default class CreatePost extends React.Component { state.submitting = false; this.setState(state); - }.bind(this) + } ); } } @@ -179,9 +185,9 @@ export default class CreatePost extends React.Component { } } handleUserInput(messageText) { - this.setState({messageText: messageText}); + this.setState({messageText}); - let draft = PostStore.getCurrentDraft(); + const draft = PostStore.getCurrentDraft(); draft.message = messageText; PostStore.storeCurrentDraft(draft); } @@ -191,7 +197,7 @@ export default class CreatePost extends React.Component { $(window).trigger('resize'); } handleUploadStart(clientIds, channelId) { - let draft = PostStore.getDraft(channelId); + const draft = PostStore.getDraft(channelId); draft.uploadsInProgress = draft.uploadsInProgress.concat(clientIds); PostStore.storeDraft(channelId, draft); @@ -199,7 +205,7 @@ export default class CreatePost extends React.Component { this.setState({uploadsInProgress: draft.uploadsInProgress}); } handleFileUploadComplete(filenames, clientIds, channelId) { - let draft = PostStore.getDraft(channelId); + const draft = PostStore.getDraft(channelId); // remove each finished file from uploads for (let i = 0; i < clientIds.length; i++) { @@ -217,7 +223,7 @@ export default class CreatePost extends React.Component { } handleUploadError(err, clientId) { if (clientId !== -1) { - let draft = PostStore.getDraft(this.state.channelId); + const draft = PostStore.getDraft(this.state.channelId); const index = draft.uploadsInProgress.indexOf(clientId); if (index !== -1) { @@ -237,8 +243,8 @@ export default class CreatePost extends React.Component { Utils.setCaretPosition(React.findDOMNode(this.refs.textbox.refs.message), newText.length); } removePreview(id) { - let previews = this.state.previews; - let uploadsInProgress = this.state.uploadsInProgress; + const previews = Object.assign([], this.state.previews); + const uploadsInProgress = this.state.uploadsInProgress; // id can either be the path of an uploaded file or the client id of an in progress upload let index = previews.indexOf(id); @@ -253,12 +259,12 @@ export default class CreatePost extends React.Component { } } - let draft = PostStore.getCurrentDraft(); + const draft = PostStore.getCurrentDraft(); draft.previews = previews; draft.uploadsInProgress = uploadsInProgress; PostStore.storeCurrentDraft(draft); - this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); + this.setState({previews, uploadsInProgress}); } componentDidMount() { ChannelStore.addChangeListener(this.onChange); @@ -272,7 +278,7 @@ export default class CreatePost extends React.Component { if (this.state.channelId !== channelId) { const draft = this.getCurrentDraft(); - this.setState({channelId: channelId, messageText: draft.messageText, initialText: draft.messageText, submitting: false, serverError: null, postError: null, previews: draft.previews, uploadsInProgress: draft.uploadsInProgress}); + this.setState({channelId, messageText: draft.messageText, initialText: draft.messageText, submitting: false, serverError: null, postError: null, previews: draft.previews, uploadsInProgress: draft.uploadsInProgress}); } } getFileCount(channelId) { diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index 4efb9cb23..44c54db72 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -4,6 +4,7 @@ const Client = require('../utils/client.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); +var TeamStore = require('../stores/team_store.jsx'); export default class DeleteChannelModal extends React.Component { constructor(props) { @@ -24,7 +25,7 @@ export default class DeleteChannelModal extends React.Component { Client.deleteChannel(this.state.channelId, function handleDeleteSuccess() { AsyncClient.getChannels(true); - window.location.href = '/'; + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; }, function handleDeleteError(err) { AsyncClient.dispatchError(err, 'handleDelete'); diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index 87d94a41d..05726e860 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -2,10 +2,6 @@ // See License.txt for license information. var ErrorStore = require('../stores/error_store.jsx'); -var utils = require('../utils/utils.jsx'); -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; export default class ErrorBar extends React.Component { constructor() { @@ -13,70 +9,79 @@ export default class ErrorBar extends React.Component { this.onErrorChange = this.onErrorChange.bind(this); this.handleClose = this.handleClose.bind(this); + this.prevTimer = null; - this.state = this.getStateFromStores(); - if (this.state.message) { - setTimeout(this.handleClose, 10000); + this.state = ErrorStore.getLastError(); + if (this.state && this.state.message) { + this.prevTimer = setTimeout(this.handleClose, 10000); } } - getStateFromStores() { - var error = ErrorStore.getLastError(); - if (!error || error.message === 'There appears to be a problem with your internet connection') { - return {message: null}; - } - return {message: error.message}; - } componentDidMount() { ErrorStore.addChangeListener(this.onErrorChange); $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); - $(window).resize(function onResize() { - if (this.state.message) { + $(window).resize(() => { + if (this.state && this.state.message) { $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); } - }.bind(this)); + }); } + componentWillUnmount() { ErrorStore.removeChangeListener(this.onErrorChange); } + onErrorChange() { - var newState = this.getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { - if (newState.message) { - setTimeout(this.handleClose, 10000); - } + var newState = ErrorStore.getLastError(); + + if (this.prevTimer != null) { + clearInterval(this.prevTimer); + this.prevTimer = null; + } + if (newState) { this.setState(newState); + this.prevTimer = setTimeout(this.handleClose, 10000); + } else { + this.setState({message: null}); } } + handleClose(e) { if (e) { e.preventDefault(); } - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_ERROR, - err: null - }); + ErrorStore.storeLastError(null); + ErrorStore.emitChange(); $('body').css('padding-top', '0'); } + render() { - if (this.state.message) { - return ( - <div className='error-bar'> - <span>{this.state.message}</span> - <a - href='#' - className='error-bar__close' - onClick={this.handleClose} - > - × - </a> - </div> - ); + if (!this.state) { + return <div/>; + } + + if (!this.state.message) { + return <div/>; + } + + if (this.state.connErrorCount < 7) { + return <div/>; } - return <div/>; + return ( + <div className='error-bar'> + <span>{this.state.message}</span> + <a + href='#' + className='error-bar__close' + onClick={this.handleClose} + > + × + </a> + </div> + ); } } diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index da9874b0b..bdb50cd9e 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -262,7 +262,7 @@ export default class Navbar extends React.Component { return ( <div className='navbar-brand'> <a - href='/' + href={TeamStore.getCurrentTeamUrl() + '/channels/town-square'} className='heading' > {channelTitle} diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index c38edf6a2..824e7ef39 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -5,6 +5,8 @@ var UserStore = require('../stores/user_store.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); +var Tooltip = ReactBootstrap.Tooltip; +var OverlayTrigger = ReactBootstrap.OverlayTrigger; export default class PostInfo extends React.Component { constructor(props) { @@ -148,15 +150,19 @@ export default class PostInfo extends React.Component { var dropdown = this.createDropdown(); + let tooltip = <Tooltip>{utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}</Tooltip>; + return ( <ul className='post-header post-info'> <li className='post-header-col'> - <time - className='post-profile-time' - title={`${utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}`} + <OverlayTrigger + placement='top' + overlay={tooltip} > - {utils.displayDateTime(post.create_at)} - </time> + <time className='post-profile-time'> + {utils.displayDateTime(post.create_at)} + </time> + </OverlayTrigger> </li> <li className='post-header-col post-header__reply'> <div className='dropdown'> diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 218922b67..3e1e075bb 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -105,18 +105,18 @@ export default class PostList extends React.Component { UserStore.addStatusesChangeListener(this.onTimeChange); SocketStore.addChangeListener(this.onSocketChange); - var postHolder = $(React.findDOMNode(this.refs.postlist)); + const postHolder = $(React.findDOMNode(this.refs.postlist)); - $(window).on('resize.' + this.props.channelId, function resize() { + $(window).resize(() => { this.resize(); if (!this.scrolled) { this.scrollToBottom(); } - }.bind(this)); + }); - postHolder.on('scroll', function scroll() { - var position = postHolder.scrollTop() + postHolder.height() + 14; - var bottom = postHolder[0].scrollHeight; + postHolder.on('scroll', () => { + const position = postHolder.scrollTop() + postHolder.height() + 14; + const bottom = postHolder[0].scrollHeight; if (position >= bottom) { this.scrolled = false; @@ -128,7 +128,7 @@ export default class PostList extends React.Component { this.userHasSeenNew = true; } this.isUserScroll = true; - }.bind(this)); + }); $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); @@ -146,7 +146,7 @@ export default class PostList extends React.Component { UserStore.removeStatusesChangeListener(this.onTimeChange); SocketStore.removeChangeListener(this.onSocketChange); $('body').off('click.userpopover'); - $(window).off('resize.' + this.props.channelId); + $(window).off('resize'); var postHolder = $(React.findDOMNode(this.refs.postlist)); postHolder.off('scroll'); } diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index 8311747ee..495159efc 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -84,7 +84,7 @@ export default class SignupUserComplete extends React.Component { if (this.props.hash > 0) { BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'})); } - window.location.href = '/'; + window.location.href = '/' + this.props.teamName + '/channels/town-square'; }.bind(this), function emailLoginFailure(err) { if (err.message === 'Login failed because email address has not been verified') { diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx index b26d9f6ce..105e4817a 100644 --- a/web/react/components/team_signup_password_page.jsx +++ b/web/react/components/team_signup_password_page.jsx @@ -53,7 +53,7 @@ export default class TeamSignupPasswordPage extends React.Component { props.state.wizard = 'finished'; props.updateParent(props.state, true); - window.location.href = '/'; + window.location.href = '/' + teamSignup.team.name + '/channels/town-square'; }.bind(this), function loginFail(err) { if (err.message === 'Login failed because email address has not been verified') { diff --git a/web/react/components/team_signup_with_sso.jsx b/web/react/components/team_signup_with_sso.jsx index 2849b4cbb..a4972dd8d 100644 --- a/web/react/components/team_signup_with_sso.jsx +++ b/web/react/components/team_signup_with_sso.jsx @@ -42,7 +42,7 @@ export default class SSOSignUpPage extends React.Component { if (data.follow_link) { window.location.href = data.follow_link; } else { - window.location.href = '/'; + window.location.href = '/' + team.name + '/channels/town-square'; } }, function fail(err) { diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index ea8126bec..5f5316013 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -5,7 +5,6 @@ const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); const PostStore = require('../stores/post_store.jsx'); const CommandList = require('./command_list.jsx'); const ErrorStore = require('../stores/error_store.jsx'); -const AsyncClient = require('../utils/async_client.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); @@ -18,7 +17,6 @@ export default class Textbox extends React.Component { this.getStateFromStores = this.getStateFromStores.bind(this); this.onListenerChange = this.onListenerChange.bind(this); this.onRecievedError = this.onRecievedError.bind(this); - this.onTimerInterrupt = this.onTimerInterrupt.bind(this); this.updateMentionTab = this.updateMentionTab.bind(this); this.handleChange = this.handleChange.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); @@ -35,8 +33,7 @@ export default class Textbox extends React.Component { this.state = { mentionText: '-1', mentions: [], - connection: '', - timerInterrupt: null + connection: '' }; this.caret = -1; @@ -44,6 +41,7 @@ export default class Textbox extends React.Component { this.doProcessMentions = false; this.mentions = []; } + getStateFromStores() { const error = ErrorStore.getLastError(); @@ -53,6 +51,7 @@ export default class Textbox extends React.Component { return {message: null}; } + componentDidMount() { PostStore.addAddMentionListener(this.onListenerChange); ErrorStore.addChangeListener(this.onRecievedError); @@ -60,46 +59,28 @@ export default class Textbox extends React.Component { this.resize(); this.updateMentionTab(null); } + componentWillUnmount() { PostStore.removeAddMentionListener(this.onListenerChange); ErrorStore.removeChangeListener(this.onRecievedError); } + onListenerChange(id, username) { if (id === this.props.id) { this.addMention(username); } } - onRecievedError() { - const errorState = this.getStateFromStores(); - if (this.state.timerInterrupt !== null) { - window.clearInterval(this.state.timerInterrupt); - this.setState({timerInterrupt: null}); - } + onRecievedError() { + const errorState = ErrorStore.getLastError(); - if (errorState.message === 'There appears to be a problem with your internet connection') { + if (errorState && errorState.connErrorCount > 0) { this.setState({connection: 'bad-connection'}); - const timerInterrupt = window.setInterval(this.onTimerInterrupt, 5000); - this.setState({timerInterrupt: timerInterrupt}); } else { this.setState({connection: ''}); } } - onTimerInterrupt() { - // Since these should only happen when you have no connection and slightly briefly after any - // performance hit should not matter - if (this.state.connection === 'bad-connection') { - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_ERROR, - err: null - }); - - AsyncClient.updateLastViewedAt(); - } - window.clearInterval(this.state.timerInterrupt); - this.setState({timerInterrupt: null}); - } componentDidUpdate() { if (this.caret >= 0) { Utils.setCaretPosition(React.findDOMNode(this.refs.message), this.caret); @@ -111,6 +92,7 @@ export default class Textbox extends React.Component { } this.resize(); } + componentWillReceiveProps(nextProps) { if (!this.addedMention) { this.checkForNewMention(nextProps.messageText); @@ -122,19 +104,22 @@ export default class Textbox extends React.Component { this.addedMention = false; this.refs.commands.getSuggestedCommands(nextProps.messageText); } + updateMentionTab(mentionText) { // using setTimeout so dispatch isn't called during an in progress dispatch - setTimeout(function updateMentionTabAfterTimeout() { + setTimeout(() => { AppDispatcher.handleViewAction({ type: ActionTypes.RECIEVED_MENTION_DATA, id: this.props.id, mention_text: mentionText }); - }.bind(this), 1); + }, 1); } + handleChange() { this.props.onUserInput(React.findDOMNode(this.refs.message).value); } + handleKeyPress(e) { const text = React.findDOMNode(this.refs.message).value; @@ -157,6 +142,7 @@ export default class Textbox extends React.Component { this.props.onKeyPress(e); } + handleKeyDown(e) { if (Utils.getSelectedText(React.findDOMNode(this.refs.message)) !== '') { this.doProcessMentions = true; @@ -166,6 +152,7 @@ export default class Textbox extends React.Component { this.handleBackspace(e); } } + handleBackspace() { const text = React.findDOMNode(this.refs.message).value; if (text.indexOf('/') === 0) { @@ -185,6 +172,7 @@ export default class Textbox extends React.Component { this.doProcessMentions = true; } } + checkForNewMention(text) { const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message)); @@ -211,6 +199,7 @@ export default class Textbox extends React.Component { const name = preText.substring(atIndex + 1, preText.length).toLowerCase(); this.updateMentionTab(name); } + addMention(name) { const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message)); @@ -233,11 +222,13 @@ export default class Textbox extends React.Component { this.props.onUserInput(`${prefix}@${name} ${suffix}`); } + addCommand(cmd) { const elm = React.findDOMNode(this.refs.message); elm.value = cmd; this.handleChange(); } + resize() { const e = React.findDOMNode(this.refs.message); const w = React.findDOMNode(this.refs.wrapper); @@ -264,21 +255,25 @@ export default class Textbox extends React.Component { this.props.onHeightChange(); } } + handleFocus() { const elm = React.findDOMNode(this.refs.message); if (elm.title === elm.value) { elm.value = ''; } } + handleBlur() { const elm = React.findDOMNode(this.refs.message); if (elm.value === '') { elm.value = elm.title; } } + handlePaste() { this.doProcessMentions = true; } + render() { return ( <div diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx index 12c041c7f..1bbfbd162 100644 --- a/web/react/components/user_settings/manage_incoming_hooks.jsx +++ b/web/react/components/user_settings/manage_incoming_hooks.jsx @@ -134,7 +134,7 @@ export default class ManageIncomingHooks extends React.Component { } else if (hooks.length > 0) { displayHooks = hooks; } else { - displayHooks = <label>{' None'}</label>; + displayHooks = <label>{': None'}</label>; } const existingHooks = ( diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index e645878c1..a7fecb689 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -1,10 +1,11 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var Client = require('../utils/client.jsx'); -var Utils = require('../utils/utils.jsx'); -var ViewImagePopoverBar = require('./view_image_popover_bar.jsx'); -var Modal = ReactBootstrap.Modal; +const Client = require('../utils/client.jsx'); +const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); +const ViewImagePopoverBar = require('./view_image_popover_bar.jsx'); +const Modal = ReactBootstrap.Modal; export default class ViewImageModal extends React.Component { constructor(props) { @@ -200,11 +201,20 @@ export default class ViewImageModal extends React.Component { </a> ); } else if (fileType === 'video' || fileType === 'audio') { + let width = Constants.WEB_VIDEO_WIDTH; + let height = Constants.WEB_VIDEO_HEIGHT; + if (Utils.isMobile()) { + width = Constants.MOBILE_VIDEO_WIDTH; + height = Constants.MOBILE_VIDEO_HEIGHT; + } + content = ( <video ref='video' data-setup='{}' controls='controls' + width={width} + height={height} > <source src={Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename} /> </video> |