Adding option to display channels sanely (#2761)

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 (
             <form
                 id='create_post'
                 ref='topDiv'
                 role='form'
+                className={centerClass}
                 onSubmit={this.handleSubmit}
             >
                 <div className='post-create'>

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 (
             <div>
                 <div
                     id={'post_' + post.id}
                     className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass}
                 >
-                    <div className='post__content'>
+                    <div className={'post__content ' + centerClass}>
                         <div className='post__img'>{profilePic}</div>
                         <div>
                             <PostHeader
@@ -251,5 +260,6 @@ Post.propTypes = {
     shouldHighlight: React.PropTypes.bool,
     displayNameType: React.PropTypes.string,
     hasProfiles: React.PropTypes.bool,
-    currentUser: React.PropTypes.object.isRequired
+    currentUser: React.PropTypes.object.isRequired,
+    center: React.PropTypes.bool
 };

webapp/components/posts_view.jsx

@@ -40,6 +40,7 @@ export default class PostsView extends React.Component {
 
         this.state = {
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
+            centerPosts: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
             isScrolling: false,
             topPostId: null,
             showUnreadMessageAlert: false
@@ -61,7 +62,10 @@ export default class PostsView extends React.Component {
         return 5;
     }
     updateState() {
-        this.setState({displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')});
+        this.setState({
+            displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
+            centerPosts: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED
+        });
     }
     isAtBottom() {
         // consider the view to be at the bottom if it's within this many pixels of the bottom
@@ -247,6 +251,7 @@ export default class PostsView extends React.Component {
                     displayNameType={this.state.displayNameType}
                     user={profile}
                     currentUser={this.props.currentUser}
+                    center={this.state.centerPosts}
                 />
             );
 
@@ -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;
         }

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 = [
+                <div key='userDisplayNameOptions'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={channelDisplayMode[0]}
+                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)}
+                            />
+                            <FormattedMessage
+                                id='user.settings.display.fixedWidthCentered'
+                                defaultMessage='Fixed with, centered'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={channelDisplayMode[1]}
+                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)}
+                            />
+                            <FormattedMessage
+                                id='user.settings.display.fullScreen'
+                                defaultMessage='Full screen'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div>
+                        <br/>
+                        <FormattedMessage
+                            id='user.settings.display.channeldisplaymode'
+                            defaultMessage='How to display channels.'
+                        />
+                    </div>
+                </div>
+            ];
+
+            channelDisplayModeSection = (
+                <SettingItemMax
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.channelDisplayTitle'
+                            defaultMessage='Channel Display Mode'
+                        />
+                    }
+                    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 = (
+                    <FormattedMessage
+                        id='user.settings.display.fixedWidthCentered'
+                        defaultMessage='Fixed with, centered'
+                    />
+                );
+            } else {
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.display.fullScreen'
+                        defaultMessage='Full screen'
+                    />
+                );
+            }
+
+            channelDisplayModeSection = (
+                <SettingItemMin
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.channelDisplayTitle'
+                            defaultMessage='Channel Display Mode'
+                        />
+                    }
+                    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 {
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
+                    {channelDisplayModeSection}
+                    <div className='divider-dark'/>
                     {languagesSection}
                 </div>
             </div>

webapp/sass/layout/_post.scss

@@ -359,11 +359,14 @@ body.ios {
 .post-create__container {
     form {
         margin: 0 auto;
-        max-width: 1028px;
+        padding: .5em 30px 0;
-        padding: .5em 14px 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;

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,