summaryrefslogtreecommitdiffstats
path: root/webapp/components
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components')
-rw-r--r--webapp/components/channel_switch_modal.jsx14
-rw-r--r--webapp/components/post_view/components/post_body_additional_content.jsx22
-rw-r--r--webapp/components/rhs_comment.jsx14
-rw-r--r--webapp/components/rhs_root_post.jsx13
-rw-r--r--webapp/components/rhs_thread.jsx16
5 files changed, 57 insertions, 22 deletions
diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx
index 761da1395..3b8fbc7af 100644
--- a/webapp/components/channel_switch_modal.jsx
+++ b/webapp/components/channel_switch_modal.jsx
@@ -98,10 +98,12 @@ export default class SwitchChannelModal extends React.Component {
</Modal.Header>
<Modal.Body>
- <FormattedMessage
- id='channel_switch_modal.help'
- defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss'
- />
+ <div className='modal__hint'>
+ <FormattedMessage
+ id='channel_switch_modal.help'
+ defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss'
+ />
+ </div>
<SuggestionBox
ref='search'
className='form-control focused'
@@ -118,9 +120,9 @@ export default class SwitchChannelModal extends React.Component {
/>
</Modal.Body>
<Modal.Footer>
- <label className='control-label'>
+ <div className='modal__error'>
{message}
- </label>
+ </div>
<button
type='button'
className='btn btn-default'
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index ea6e1cb49..bd29da962 100644
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -97,18 +97,16 @@ export default class PostBodyAdditionalContent extends React.Component {
);
}
- if (!this.props.compactDisplay) {
- for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
- const imageType = Constants.IMAGE_TYPES[i];
- const suffix = link.substring(link.length - (imageType.length + 1));
- if (suffix === '.' + imageType || suffix === '=' + imageType) {
- return (
- <PostImage
- channelId={this.props.post.channel_id}
- link={link}
- />
- );
- }
+ for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
+ const imageType = Constants.IMAGE_TYPES[i];
+ const suffix = link.substring(link.length - (imageType.length + 1));
+ if (suffix === '.' + imageType || suffix === '=' + imageType) {
+ return (
+ <PostImage
+ channelId={this.props.post.channel_id}
+ link={link}
+ />
+ );
}
}
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index a49a84b88..0ef2348d0 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -35,6 +35,9 @@ export default class RhsComment extends React.Component {
GlobalActions.showGetPostLinkModal(this.props.post);
}
shouldComponentUpdate(nextProps) {
+ if (nextProps.compactDisplay !== this.props.compactDisplay) {
+ return true;
+ }
if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
return true;
}
@@ -186,6 +189,11 @@ export default class RhsComment extends React.Component {
);
}
+ let compactClass = '';
+ if (this.props.compactDisplay) {
+ compactClass = 'post--compact';
+ }
+
var dropdown = this.createDropdown();
var fileAttachment;
@@ -195,12 +203,13 @@ export default class RhsComment extends React.Component {
filenames={post.filenames}
channelId={post.channel_id}
userId={post.user_id}
+ compactDisplay={this.props.compactDisplay}
/>
);
}
return (
- <div className={'post ' + currentUserCss}>
+ <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
<div className='post__content'>
<div className='post__img'>
<img
@@ -249,5 +258,6 @@ export default class RhsComment extends React.Component {
RhsComment.propTypes = {
post: React.PropTypes.object,
user: React.PropTypes.object.isRequired,
- currentUser: React.PropTypes.object.isRequired
+ currentUser: React.PropTypes.object.isRequired,
+ compactDisplay: React.PropTypes.bool
};
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index f7c9c9141..8996381ba 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -32,6 +32,9 @@ export default class RhsRootPost extends React.Component {
GlobalActions.showGetPostLinkModal(this.props.post);
}
shouldComponentUpdate(nextProps) {
+ if (nextProps.compactDisplay !== this.props.compactDisplay) {
+ return true;
+ }
if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
return true;
}
@@ -220,6 +223,11 @@ export default class RhsRootPost extends React.Component {
);
}
+ let compactClass = '';
+ if (this.props.compactDisplay) {
+ compactClass = 'post--compact';
+ }
+
const messageWrapper = (
<div
ref='message_holder'
@@ -229,7 +237,7 @@ export default class RhsRootPost extends React.Component {
);
return (
- <div className={'post post--root ' + userCss + ' ' + systemMessageClass}>
+ <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
<div className='post-right-channel__name'>{channelName}</div>
<div className='post__content'>
<div className='post__img'>
@@ -279,5 +287,6 @@ RhsRootPost.propTypes = {
post: React.PropTypes.object.isRequired,
user: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object.isRequired,
- commentCount: React.PropTypes.number
+ commentCount: React.PropTypes.number,
+ compactDisplay: React.PropTypes.bool
};
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index ca5ed2dc8..b001da80a 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -12,6 +12,7 @@ import RhsHeaderPost from './rhs_header_post.jsx';
import RootPost from './rhs_root_post.jsx';
import Comment from './rhs_comment.jsx';
import Constants from 'utils/constants.jsx';
+const Preferences = Constants.Preferences;
import FileUploadOverlay from './file_upload_overlay.jsx';
import Scrollbars from 'react-custom-scrollbars';
@@ -50,12 +51,14 @@ export default class RhsThread extends React.Component {
this.onPostChange = this.onPostChange.bind(this);
this.onUserChange = this.onUserChange.bind(this);
this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
+ this.onPreferenceChange = this.onPreferenceChange.bind(this);
this.handleResize = this.handleResize.bind(this);
const state = this.getPosts();
state.windowWidth = Utils.windowWidth();
state.windowHeight = Utils.windowHeight();
state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
+ state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT;
this.state = state;
}
@@ -63,6 +66,7 @@ export default class RhsThread extends React.Component {
PostStore.addSelectedPostChangeListener(this.onPostChange);
PostStore.addChangeListener(this.onPostChange);
PreferenceStore.addChangeListener(this.forceUpdateInfo);
+ PreferenceStore.addChangeListener(this.onPreferenceChange);
UserStore.addChangeListener(this.onUserChange);
this.scrollToBottom();
@@ -74,6 +78,7 @@ export default class RhsThread extends React.Component {
PostStore.removeSelectedPostChangeListener(this.onPostChange);
PostStore.removeChangeListener(this.onPostChange);
PreferenceStore.removeChangeListener(this.forceUpdateInfo);
+ PreferenceStore.removeChangeListener(this.onPreferenceChange);
UserStore.removeChangeListener(this.onUserChange);
window.removeEventListener('resize', this.handleResize);
@@ -103,6 +108,10 @@ export default class RhsThread extends React.Component {
return true;
}
+ if (nextState.compactDisplay !== this.state.compactDisplay) {
+ return true;
+ }
+
if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) {
return true;
}
@@ -124,6 +133,11 @@ export default class RhsThread extends React.Component {
windowHeight: Utils.windowHeight()
});
}
+ onPreferenceChange() {
+ this.setState({
+ compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+ });
+ }
onPostChange() {
if (this.mounted) {
this.setState(this.getPosts());
@@ -228,6 +242,7 @@ export default class RhsThread extends React.Component {
commentCount={postsArray.length}
user={profile}
currentUser={this.props.currentUser}
+ compactDisplay={this.state.compactDisplay}
/>
<div className='post-right-comments-container'>
{postsArray.map((comPost) => {
@@ -244,6 +259,7 @@ export default class RhsThread extends React.Component {
post={comPost}
user={p}
currentUser={this.props.currentUser}
+ compactDisplay={this.state.compactDisplay}
/>
);
})}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-10 01:33:46 +0000