diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/channel_switch_modal.jsx | 14 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_body_additional_content.jsx | 22 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 14 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 13 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 16 |
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} /> ); })} |