From 1e245f19c7884e293698fe2e8cd7f46d4dac54c9 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Mon, 6 Jun 2016 13:41:54 -0400 Subject: PLT-3114 Moved preview collapse out of pre-release features (#3206) * Added user setting to auto collapse image previews * Added slash commands for collapsing/expanding image previews * Added translation strings for collapse setting * Add default props for preview collapse setting --- webapp/components/post_view/components/post.jsx | 6 +++ .../components/post_view/components/post_body.jsx | 10 ++++- .../components/post_body_additional_content.jsx | 46 ++++++++++++---------- .../components/post_view/components/post_list.jsx | 4 +- .../components/post_view/post_view_controller.jsx | 21 ++++++++-- 5 files changed, 61 insertions(+), 26 deletions(-) (limited to 'webapp/components/post_view') diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 2ed062c74..d30216180 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -72,6 +72,10 @@ export default class Post extends React.Component { return true; } + if (nextProps.previewCollapsed !== this.props.previewCollapsed) { + return true; + } + if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { return true; } @@ -190,6 +194,7 @@ export default class Post extends React.Component { parentPost={parentPost} handleCommentClick={this.handleCommentClick} compactDisplay={this.props.compactDisplay} + previewCollapsed={this.props.previewCollapsed} /> @@ -213,5 +218,6 @@ Post.propTypes = { currentUser: React.PropTypes.object.isRequired, center: React.PropTypes.bool, compactDisplay: React.PropTypes.bool, + previewCollapsed: React.PropTypes.string, commentCount: React.PropTypes.number }; diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index eba62ad77..2a2be75a9 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -25,7 +25,11 @@ export default class PostBody extends React.Component { return true; } - if (!Utils.areObjectsEqual(nextProps.compactDisplay, this.props.compactDisplay)) { + if (nextProps.compactDisplay !== this.props.compactDisplay) { + return true; + } + + if (nextProps.previewCollapsed !== this.props.previewCollapsed) { return true; } @@ -172,6 +176,7 @@ export default class PostBody extends React.Component { post={this.props.post} message={messageWrapper} compactDisplay={this.props.compactDisplay} + previewCollapsed={this.props.previewCollapsed} /> ); } @@ -193,5 +198,6 @@ PostBody.propTypes = { parentPost: React.PropTypes.object, retryPost: React.PropTypes.func.isRequired, handleCommentClick: React.PropTypes.func.isRequired, - compactDisplay: React.PropTypes.bool + compactDisplay: React.PropTypes.bool, + previewCollapsed: React.PropTypes.string }; 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 bd29da962..6757f3b2a 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -22,10 +22,14 @@ export default class PostBodyAdditionalContent extends React.Component { this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this); this.state = { - embedVisible: true + embedVisible: props.previewCollapsed.startsWith('false') }; } + componentWillReceiveProps(nextProps) { + this.setState({embedVisible: nextProps.previewCollapsed.startsWith('false')}); + } + shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; @@ -118,25 +122,23 @@ export default class PostBodyAdditionalContent extends React.Component { if (generateEmbed) { let messageWithToggle = []; - if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_TOGGLE)) { - // if message has only one line and starts with a link place toggle in this only line - // else - place it in new line between message and embed - const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message); - messageWithToggle.push( - - ); - if (prependToggle) { - messageWithToggle.push(this.props.message); - } else { - messageWithToggle.unshift(this.props.message); - } - } else { + + // if message has only one line and starts with a link place toggle in this only line + // else - place it in new line between message and embed + const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message); + messageWithToggle.push( + + ); + + if (prependToggle) { messageWithToggle.push(this.props.message); + } else { + messageWithToggle.unshift(this.props.message); } return ( @@ -156,8 +158,12 @@ export default class PostBodyAdditionalContent extends React.Component { } } +PostBodyAdditionalContent.defaultProps = { + previewCollapsed: 'false' +}; PostBodyAdditionalContent.propTypes = { post: React.PropTypes.object.isRequired, + message: React.PropTypes.element.isRequired, compactDisplay: React.PropTypes.bool, - message: React.PropTypes.element.isRequired + previewCollapsed: React.PropTypes.string }; diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 288609cd9..28be93544 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -260,6 +260,7 @@ export default class PostList extends React.Component { center={this.props.displayPostsInCenter} commentCount={commentCount} compactDisplay={this.props.compactDisplay} + previewCollapsed={this.props.previewsCollapsed} /> ); @@ -520,5 +521,6 @@ PostList.propTypes = { postsToHighlight: React.PropTypes.object, displayNameType: React.PropTypes.string, displayPostsInCenter: React.PropTypes.bool, - compactDisplay: React.PropTypes.bool + compactDisplay: React.PropTypes.bool, + previewsCollapsed: React.PropTypes.string }; diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx index d2866d8eb..e5a14af36 100644 --- a/webapp/components/post_view/post_view_controller.jsx +++ b/webapp/components/post_view/post_view_controller.jsx @@ -51,7 +51,8 @@ export default class PostViewController extends React.Component { scrollType: ScrollTypes.NEW_MESSAGE, displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, - compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT + compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT, + previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') }; } @@ -67,11 +68,19 @@ export default class PostViewController extends React.Component { } } - onPreferenceChange() { + onPreferenceChange(category) { + // Bit of a hack to force render when this setting is updated + // regardless of change + let previewSuffix = ''; + if (category === Preferences.CATEGORY_DISPLAY_SETTINGS) { + previewSuffix = '_' + Utils.generateId(); + } + this.setState({ displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, - compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT + compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT, + previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix }); } @@ -132,6 +141,7 @@ export default class PostViewController extends React.Component { displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT, + previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'), scrollType: ScrollTypes.NEW_MESSAGE }); } @@ -183,6 +193,10 @@ export default class PostViewController extends React.Component { return true; } + if (nextState.previewsCollapsed !== this.state.previewsCollapsed) { + return true; + } + if (nextState.lastViewed !== this.state.lastViewed) { return true; } @@ -241,6 +255,7 @@ export default class PostViewController extends React.Component { displayNameType={this.state.displayNameType} displayPostsInCenter={this.state.displayPostsInCenter} compactDisplay={this.state.compactDisplay} + previewsCollapsed={this.state.previewsCollapsed} lastViewed={this.state.lastViewed} /> ); -- cgit v1.2.3-1-g7c22