diff options
Diffstat (limited to 'web/react/components/user_settings')
-rw-r--r-- | web/react/components/user_settings/user_settings_display.jsx | 85 |
1 files changed, 83 insertions, 2 deletions
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index 43c8d33d1..c83b74e62 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -6,14 +6,17 @@ import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; import Constants from '../../utils/constants.jsx'; import PreferenceStore from '../../stores/preference_store.jsx'; +import * as Utils from '../../utils/utils.jsx'; function getDisplayStateFromStores() { const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'}); const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'username'}); + const emojiStyle = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'emoji_style', {value: 'default'}); return { militaryTime: militaryTime.value, - nameFormat: nameFormat.value + nameFormat: nameFormat.value, + emojiStyle: emojiStyle.value }; } @@ -31,8 +34,9 @@ export default class UserSettingsDisplay extends React.Component { handleSubmit() { const timePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime); const namePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', this.state.nameFormat); + const emojiStyle = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'emoji_style', this.state.emojiStyle); - savePreferences([timePreference, namePreference], + savePreferences([timePreference, namePreference, emojiStyle], () => { PreferenceStore.emitChange(); this.updateSection(''); @@ -48,6 +52,9 @@ export default class UserSettingsDisplay extends React.Component { handleNameRadio(nameFormat) { this.setState({nameFormat}); } + handleEmojiRadio(emojiStyle) { + this.setState({emojiStyle}); + } updateSection(section) { this.setState(getDisplayStateFromStores()); this.props.updateSection(section); @@ -56,6 +63,7 @@ export default class UserSettingsDisplay extends React.Component { const serverError = this.state.serverError || null; let clockSection; let nameFormatSection; + let emojiSection; if (this.props.activeSection === 'clock') { const clockFormat = [false, false]; if (this.state.militaryTime === 'true') { @@ -209,6 +217,77 @@ export default class UserSettingsDisplay extends React.Component { ); } + if (this.props.activeSection === 'emoji') { + const inputs = [ + <div key='userDisplayClockOptions'> + <div className='radio'> + <label> + <input + type='radio' + checked={this.state.emojiStyle === 'default'} + onChange={this.handleEmojiRadio.bind(this, 'default')} + /> + {'Default Style'} + <img + className='emoji' + src={Utils.getImagePathForEmoticon('smile', 'default')} + /> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={this.state.emojiStyle === 'emojione'} + onChange={this.handleEmojiRadio.bind(this, 'emojione')} + /> + {'Emoji One Style'} + <img + className='emoji' + src={Utils.getImagePathForEmoticon('smile', 'emojione')} + /> + <span className='emojiAffiliation'> + {'Emoji provided free by '} + <a + href='http://emojione.com/' + target='blank' + > + {'Emoji One'} + </a> + </span> + </label> + <br/> + </div> + <div><br/>{'Select how you prefer time displayed.'}</div> + </div> + ]; + + emojiSection = ( + <SettingItemMax + title='Emoji Style' + inputs={inputs} + submit={this.handleSubmit} + server_error={serverError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + const describe = this.state.emojiStyle === 'default' ? 'Default Style' : 'Emoji One Style'; + emojiSection = ( + <SettingItemMin + title='Emoji Style' + describe={describe} + updateSection={() => { + this.props.updateSection('emoji'); + }} + /> + ); + } + return ( <div> <div className='modal-header'> @@ -239,6 +318,8 @@ export default class UserSettingsDisplay extends React.Component { <div className='divider-dark'/> {nameFormatSection} <div className='divider-dark'/> + {emojiSection} + <div className='divider-dark'/> </div> </div> ); |