1 files changed, 135 insertions, 2 deletions

diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index 7036d7389..f7a030e52 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -24,7 +24,8 @@ function getDisplayStateFromStores() {
         nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'),
         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),
-        messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT)
+        messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT),
+        collapseDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, Preferences.COLLAPSE_DISPLAY_DEFAULT)
     };
 }
 
@@ -41,9 +42,11 @@ export default class UserSettingsDisplay extends React.Component {
         this.updateSection = this.updateSection.bind(this);
         this.updateState = this.updateState.bind(this);
         this.deactivate = this.deactivate.bind(this);
+        this.createCollapseSection = this.createCollapseSection.bind(this);
 
         this.state = getDisplayStateFromStores();
     }
+
     handleSubmit() {
         const userId = UserStore.getCurrentId();
 
@@ -77,8 +80,14 @@ export default class UserSettingsDisplay extends React.Component {
             name: Preferences.MESSAGE_DISPLAY,
             value: this.state.messageDisplay
         };
+        const collapseDisplayPreference = {
+            user_id: userId,
+            category: Preferences.CATEGORY_DISPLAY_SETTINGS,
+            name: Preferences.COLLAPSE_DISPLAY,
+            value: this.state.collapseDisplay
+        };
 
-        AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference],
+        AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
             () => {
                 this.updateSection('');
             },
@@ -87,27 +96,38 @@ export default class UserSettingsDisplay extends React.Component {
             }
         );
     }
+
     handleClockRadio(militaryTime) {
         this.setState({militaryTime});
     }
+
     handleNameRadio(nameFormat) {
         this.setState({nameFormat});
     }
+
     handleChannelDisplayModeRadio(channelDisplayMode) {
         this.setState({channelDisplayMode});
     }
+
     handlemessageDisplayRadio(messageDisplay) {
         this.setState({messageDisplay});
     }
+
     handleFont(selectedFont) {
         Utils.applyFont(selectedFont);
         this.setState({selectedFont});
     }
+
+    handleCollapseRadio(collapseDisplay) {
+        this.setState({collapseDisplay});
+    }
+
     updateSection(section) {
         $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.updateState();
         this.props.updateSection(section);
     }
+
     updateState() {
         const newState = getDisplayStateFromStores();
         if (!Utils.areObjectsEqual(newState, this.state)) {
@@ -115,9 +135,118 @@ export default class UserSettingsDisplay extends React.Component {
             this.setState(newState);
         }
     }
+
     deactivate() {
         this.updateState();
     }
+
+    createCollapseSection() {
+        if (this.props.activeSection === 'collapse') {
+            const collapseFormat = [false, false];
+            if (this.state.collapseDisplay === 'true') {
+                collapseFormat[0] = true;
+            } else {
+                collapseFormat[1] = true;
+            }
+
+            const handleUpdateCollapseSection = (e) => {
+                this.updateSection('');
+                e.preventDefault();
+            };
+
+            const inputs = [
+                <div key='userDisplayCollapseOptions'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='collapseFormat'
+                                checked={collapseFormat[0]}
+                                onChange={this.handleCollapseRadio.bind(this, 'true')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.display.collapseOn'
+                                defaultMessage='On'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='collapseFormat'
+                                checked={collapseFormat[1]}
+                                onChange={this.handleCollapseRadio.bind(this, 'false')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.display.collapseOff'
+                                defaultMessage='Off'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div>
+                        <br/>
+                        <FormattedMessage
+                            id='user.settings.display.collapseDesc'
+                            defaultMessage='Toggle whether to automatically collapse all image previews.'
+                        />
+                    </div>
+                </div>
+            ];
+
+            return (
+                <SettingItemMax
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.collapseDisplay'
+                            defaultMessage='Auto Collapse Previews'
+                        />
+                    }
+                    inputs={inputs}
+                    submit={this.handleSubmit}
+                    server_error={this.state.serverError}
+                    updateSection={handleUpdateCollapseSection}
+                />
+            );
+        }
+
+        let describe;
+        if (this.state.collapseDisplay === 'true') {
+            describe = (
+                <FormattedMessage
+                    id='user.settings.display.collapseOn'
+                    defaultMessage='On'
+                />
+            );
+        } else {
+            describe = (
+                <FormattedMessage
+                    id='user.settings.display.collapseOff'
+                    defaultMessage='Off'
+                />
+            );
+        }
+
+        const handleUpdateCollapseSection = () => {
+            this.props.updateSection('collapse');
+        };
+
+        return (
+            <SettingItemMin
+                title={
+                    <FormattedMessage
+                        id='user.settings.display.collapseDisplay'
+                        defaultMessage='Auto Collapse Previews'
+                    />
+                }
+                describe={describe}
+                updateSection={handleUpdateCollapseSection}
+            />
+        );
+    }
+
     render() {
         const serverError = this.state.serverError || null;
         let clockSection;
@@ -127,6 +256,8 @@ export default class UserSettingsDisplay extends React.Component {
         let languagesSection;
         let messageDisplaySection;
 
+        const collapseSection = this.createCollapseSection();
+
         if (this.props.activeSection === 'clock') {
             const clockFormat = [false, false];
             if (this.state.militaryTime === 'true') {
@@ -729,6 +860,8 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
+                    {collapseSection}
+                    <div className='divider-dark'/>
                     {messageDisplaySection}
                     <div className='divider-dark'/>
                     {channelDisplayModeSection}