diff options
Diffstat (limited to 'webapp/components/user_settings/user_settings_display.jsx')
-rw-r--r-- | webapp/components/user_settings/user_settings_display.jsx | 137 |
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} |