diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/more_channels.jsx | 21 | ||||
-rw-r--r-- | web/react/components/new_channel_modal.jsx | 12 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 9 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 5 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 1 | ||||
-rw-r--r-- | web/react/components/rhs_comment.jsx | 9 | ||||
-rw-r--r-- | web/react/components/rhs_root_post.jsx | 13 |
7 files changed, 46 insertions, 24 deletions
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index ba8be12b2..65cd40975 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -6,6 +6,7 @@ var client = require('../utils/client.jsx'); var asyncClient = require('../utils/async_client.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var LoadingScreen = require('./loading_screen.jsx'); +var NewChannelFlow = require('./new_channel_flow.jsx'); function getStateFromStores() { return { @@ -25,6 +26,7 @@ export default class MoreChannels extends React.Component { var initState = getStateFromStores(); initState.channelType = ''; initState.joiningChannel = -1; + initState.showNewChannelModal = false; this.state = initState; } componentDidMount() { @@ -66,6 +68,7 @@ export default class MoreChannels extends React.Component { } handleNewChannel() { $(React.findDOMNode(this.refs.modal)).modal('hide'); + this.setState({showNewChannelModal: true}); } render() { var serverError; @@ -148,20 +151,22 @@ export default class MoreChannels extends React.Component { className='close' data-dismiss='modal' > - <span aria-hidden='true'>×</span> - <span className='sr-only'>Close</span> + <span aria-hidden='true'>{'×'}</span> + <span className='sr-only'>{'Close'}</span> </button> - <h4 className='modal-title'>More Channels</h4> + <h4 className='modal-title'>{'More Channels'}</h4> <button - data-toggle='modal' - data-target='#new_channel' - data-channeltype={this.state.channelType} type='button' className='btn btn-primary channel-create-btn' onClick={this.handleNewChannel} > - Create New Channel + {'Create New Channel'} </button> + <NewChannelFlow + show={this.state.showNewChannelModal} + channelType={this.state.channelType} + onModalDismissed={() => this.setState({showNewChannelModal: false})} + /> </div> <div className='modal-body'> {moreChannels} @@ -173,7 +178,7 @@ export default class MoreChannels extends React.Component { className='btn btn-default' data-dismiss='modal' > - Close + {'Close'} </button> </div> </div> diff --git a/web/react/components/new_channel_modal.jsx b/web/react/components/new_channel_modal.jsx index fc7b8c183..c43137744 100644 --- a/web/react/components/new_channel_modal.jsx +++ b/web/react/components/new_channel_modal.jsx @@ -107,8 +107,8 @@ export default class NewChannelModal extends React.Component { {channelSwitchText} </div> <div className={displayNameClass}> - <label className='col-sm-2 form__label control-label'>{'Name'}</label> - <div className='col-sm-10'> + <label className='col-sm-3 form__label control-label'>{'Name'}</label> + <div className='col-sm-9'> <input onChange={this.handleChange} type='text' @@ -121,7 +121,7 @@ export default class NewChannelModal extends React.Component { tabIndex='1' /> {displayNameError} - <p className='input__help'> + <p className='input__help dark'> {'Channel URL: ' + prettyTeamURL + this.props.channelData.name + ' ('} <a href='#' @@ -134,11 +134,11 @@ export default class NewChannelModal extends React.Component { </div> </div> <div className='form-group less'> - <div className='col-sm-2'> + <div className='col-sm-3'> <label className='form__label control-label'>{'Description'}</label> <label className='form__label light'>{'(optional)'}</label> </div> - <div className='col-sm-10'> + <div className='col-sm-9'> <textarea className='form-control no-resize' ref='channel_desc' @@ -150,7 +150,7 @@ export default class NewChannelModal extends React.Component { tabIndex='2' /> <p className='input__help'> - {'This is the purpose of your channel and helps others decide whether to join.'} + {'Description helps others decide whether to join this channel.'} </p> {serverError} </div> diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 3be615bb9..e0682e997 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -35,9 +35,7 @@ export default class PostBody extends React.Component { parseEmojis() { twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); - this.getAllChildNodes(React.findDOMNode(this)).forEach((current) => { - global.window.emojify.run(current); - }); + global.window.emojify.run(React.findDOMNode(this.refs.message_span)); } componentDidMount() { @@ -154,17 +152,18 @@ export default class PostBody extends React.Component { return ( <div className='post-body'> {comment} - <p + <div key={`${post.id}_message`} id={`${post.id}_message`} className={postClass} > {loading} <span + ref='message_span' onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}} /> - </p> + </div> {fileAttachmentHolder} {embed} </div> diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 34ac9e759..d2a0a4035 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -151,7 +151,10 @@ export default class PostInfo extends React.Component { return ( <ul className='post-header post-info'> <li className='post-header-col'> - <time className='post-profile-time'> + <time + className='post-profile-time' + title={new Date(post.create_at).toString()} + > {utils.displayDateTime(post.create_at)} </time> </li> diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 94cccaac3..703e548fb 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -83,6 +83,7 @@ export default class PostList extends React.Component { }; } componentDidMount() { + window.onload = () => this.scrollToBottom(); if (this.props.isActive) { this.activate(); this.loadFirstPosts(this.props.channelId); diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index ed136c01f..fe31ac381 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -56,6 +56,7 @@ export default class RhsComment extends React.Component { } parseEmojis() { twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + global.window.emojify.run(React.findDOMNode(this.refs.message_holder)); } componentDidMount() { this.parseEmojis(); @@ -193,7 +194,10 @@ export default class RhsComment extends React.Component { <strong><UserProfile userId={post.user_id} /></strong> </li> <li className='post-header-col'> - <time className='post-right-comment-time'> + <time + className='post-profile-time' + title={new Date(post.create_at).toString()} + > {Utils.displayCommentDateTime(post.create_at)} </time> </li> @@ -204,7 +208,8 @@ export default class RhsComment extends React.Component { <div className='post-body'> <p className={postClass}> {loading} - <span + <div + ref='message_holder' onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} /> diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 85755a85c..2ea697c5b 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -20,6 +20,7 @@ export default class RhsRootPost extends React.Component { } parseEmojis() { twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE}); + global.window.emojify.run(React.findDOMNode(this.refs.message_holder)); } componentDidMount() { this.parseEmojis(); @@ -132,7 +133,14 @@ export default class RhsRootPost extends React.Component { <div className='post__content'> <ul className='post-header'> <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li> - <li className='post-header-col'><time className='post-right-root-time'>{utils.displayCommentDateTime(post.create_at)}</time></li> + <li className='post-header-col'> + <time + className='post-profile-time' + title={new Date(post.create_at).toString()} + > + {utils.displayCommentDateTime(post.create_at)} + </time> + </li> <li className='post-header-col post-header__reply'> <div className='dropdown'> {ownerOptions} @@ -140,7 +148,8 @@ export default class RhsRootPost extends React.Component { </li> </ul> <div className='post-body'> - <p + <div + ref='message_holder' onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} /> |