From 899ee09224799cb8b1dffaea781a18594616b50e Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Thu, 21 Apr 2016 09:56:11 -0400 Subject: [PATCH] Adding option to display channels sanely (#2761) --- webapp/components/create_post.jsx | 13 +- webapp/components/post.jsx | 14 ++- webapp/components/posts_view.jsx | 11 +- .../user_settings/user_settings_display.jsx | 116 +++++++++++++++++- webapp/sass/layout/_post.scss | 13 +- webapp/utils/constants.jsx | 6 +- 6 files changed, 162 insertions(+), 11 deletions(-) diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 025333d97f..232537d8bd 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -83,6 +83,7 @@ class CreatePost extends React.Component { submitting: false, initialText: draft.messageText, ctrlSend: false, + centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, showTutorialTip: false, showPostDeletedModal: false }; @@ -305,7 +306,8 @@ class CreatePost extends React.Component { // wait to load these since they may have changed since the component was constructed (particularly in the case of skipping the tutorial) this.setState({ - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER }); } @@ -336,7 +338,8 @@ class CreatePost extends React.Component { const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); this.setState({ showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER, - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') + ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED }); } getFileCount(channelId) { @@ -441,11 +444,17 @@ class CreatePost extends React.Component { tutorialTip = this.createTutorialTip(); } + let centerClass = ''; + if (this.state.centerTextbox) { + centerClass = 'center'; + } + return (
diff --git a/webapp/components/post.jsx b/webapp/components/post.jsx index 7294cf1637..7fabec7414 100644 --- a/webapp/components/post.jsx +++ b/webapp/components/post.jsx @@ -99,6 +99,10 @@ export default class Post extends React.Component { return true; } + if (nextProps.center !== this.props.center) { + return true; + } + if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { return true; } @@ -203,13 +207,18 @@ export default class Post extends React.Component { } } + let centerClass = ''; + if (this.props.center) { + centerClass = 'center'; + } + return (
-
+
{profilePic}
); @@ -373,6 +378,7 @@ export default class PostsView extends React.Component { this.updateScrolling(); } window.addEventListener('resize', this.handleResize); + PreferenceStore.addChangeListener(this.updateState); $('body').addClass('app__body'); } componentWillUnmount() { @@ -429,6 +435,9 @@ export default class PostsView extends React.Component { if (this.state.isScrolling !== nextState.isScrolling) { return true; } + if (this.state.centerPosts !== nextState.centerPosts) { + return true; + } if (!Utils.areObjectsEqual(this.props.profiles, nextProps.profiles)) { return true; } diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index d169e01b56..481cde9a52 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -22,7 +22,8 @@ function getDisplayStateFromStores() { return { militaryTime: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', 'false'), nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'), - selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT) + selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT), + channelDisplayMode: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) }; } @@ -63,8 +64,14 @@ export default class UserSettingsDisplay extends React.Component { name: 'selected_font', value: this.state.selectedFont }; + const channelDisplayModePreference = { + user_id: userId, + category: Preferences.CATEGORY_DISPLAY_SETTINGS, + name: Preferences.CHANNEL_DISPLAY_MODE, + value: this.state.channelDisplayMode + }; - AsyncClient.savePreferences([timePreference, namePreference, fontPreference], + AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference], () => { this.updateSection(''); }, @@ -79,6 +86,9 @@ export default class UserSettingsDisplay extends React.Component { handleNameRadio(nameFormat) { this.setState({nameFormat}); } + handleChannelDisplayModeRadio(channelDisplayMode) { + this.setState({channelDisplayMode}); + } handleFont(selectedFont) { Utils.applyFont(selectedFont); this.setState({selectedFont}); @@ -102,6 +112,7 @@ export default class UserSettingsDisplay extends React.Component { const serverError = this.state.serverError || null; let clockSection; let nameFormatSection; + let channelDisplayModeSection; let fontSection; let languagesSection; @@ -339,6 +350,105 @@ export default class UserSettingsDisplay extends React.Component { ); } + if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) { + const channelDisplayMode = [false, false]; + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + channelDisplayMode[0] = true; + } else { + channelDisplayMode[1] = true; + } + + const inputs = [ +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ ]; + + channelDisplayModeSection = ( + + } + inputs={inputs} + submit={this.handleSubmit} + server_error={serverError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + let describe; + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + describe = ( + + ); + } else { + describe = ( + + ); + } + + channelDisplayModeSection = ( + + } + describe={describe} + updateSection={() => { + this.props.updateSection(Preferences.CHANNEL_DISPLAY_MODE); + }} + /> + ); + } + if (this.props.activeSection === 'font') { const options = []; Object.keys(Constants.FONTS).forEach((fontName, idx) => { @@ -491,6 +601,8 @@ export default class UserSettingsDisplay extends React.Component {
{nameFormatSection}
+ {channelDisplayModeSection} +
{languagesSection}
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 93c4cf642e..592d486aaf 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -359,11 +359,14 @@ body.ios { .post-create__container { form { margin: 0 auto; - max-width: 1028px; - padding: .5em 14px 0; + padding: .5em 30px 0; width: 100%; } + .center { + max-width: 1028px; + } + .post-create-body { padding: 0 0 2px; position: relative; @@ -607,10 +610,10 @@ body.ios { .post__content { display: table; margin: 0 auto; - max-width: 1000px; position: relative; table-layout: fixed; width: 100%; + padding: 0 15px; > div { display: table-cell; @@ -618,6 +621,10 @@ body.ios { } } + .center { + max-width: 1000px; + } + .post__header { list-style: none; margin-bottom: 2px; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index ae660a4860..87f4153fb9 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -517,7 +517,11 @@ export default { DISPLAY_PREFER_NICKNAME: 'nickname_full_name', DISPLAY_PREFER_FULL_NAME: 'full_name', CATEGORY_ADVANCED_SETTINGS: 'advanced_settings', - TUTORIAL_STEP: 'tutorial_step' + TUTORIAL_STEP: 'tutorial_step', + CHANNEL_DISPLAY_MODE: 'channel_display_mode', + CHANNEL_DISPLAY_MODE_CENTERED: 'centered', + CHANNEL_DISPLAY_MODE_FULL_SCREEN: 'full', + CHANNEL_DISPLAY_MODE_DEFAULT: 'centered' }, TutorialSteps: { INTRO_SCREENS: 0,