summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/more_channels.jsx21
-rw-r--r--web/react/components/new_channel_modal.jsx12
-rw-r--r--web/react/components/post_body.jsx9
-rw-r--r--web/react/components/post_info.jsx5
-rw-r--r--web/react/components/post_list.jsx1
-rw-r--r--web/react/components/rhs_comment.jsx9
-rw-r--r--web/react/components/rhs_root_post.jsx13
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'>&times;</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)}}
/>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-08 12:35:22 +0000