mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

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
Этот коммит содержится в:
Joram Wilander
2016-06-06 13:41:54 -04:00
коммит произвёл Corey Hulen
родитель 629b49a119
Коммит 1e245f19c7
14 изменённых файлов: 353 добавлений и 43 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

6
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}
/>
</div>
</div>
@@ -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
};

10
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
};

46
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(
<a
className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`}
data-expanded={this.state.embedVisible}
aria-label='Toggle Embed Visibility'
onClick={this.toggleEmbedVisibility}
/>
);
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(
<a
className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`}
data-expanded={this.state.embedVisible}
aria-label='Toggle Embed Visibility'
onClick={this.toggleEmbedVisibility}
/>
);
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
};

4
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
};

21
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}
/>
);