diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/channel_header.jsx | 7 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_display.jsx | 100 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 17 |
4 files changed, 120 insertions, 6 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 101fd85e5..20f106f30 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -4,6 +4,7 @@ const ChannelStore = require('../stores/channel_store.jsx'); const UserStore = require('../stores/user_store.jsx'); const SearchStore = require('../stores/search_store.jsx'); +const PreferenceStore = require('../stores/preference_store.jsx'); const NavbarSearchBox = require('./search_bar.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const Client = require('../utils/client.jsx'); @@ -46,12 +47,14 @@ export default class ChannelHeader extends React.Component { ChannelStore.addExtraInfoChangeListener(this.onListenerChange); SearchStore.addSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); + PreferenceStore.addChangeListener(this.onListenerChange); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); SearchStore.removeSearchChangeListener(this.onListenerChange); - UserStore.addChangeListener(this.onListenerChange); + UserStore.removeChangeListener(this.onListenerChange); + PreferenceStore.removeChangeListener(this.onListenerChange); } onListenerChange() { const newState = this.getStateFromStores(); @@ -134,7 +137,7 @@ export default class ChannelHeader extends React.Component { } else { contact = this.state.users[0]; } - channelTitle = contact.nickname || contact.username; + channelTitle = Utils.displayUsername(contact.id); } } diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 5cb6d168b..a69fd48fc 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -136,7 +136,7 @@ export default class Sidebar extends React.Component { channel.type = 'D'; } - channel.display_name = teammate.username; + channel.display_name = Utils.displayUsername(teammate.id); channel.teammate_id = teammate.id; channel.status = UserStore.getStatus(teammate.id); diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index 22a62273c..d086c78a9 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -9,8 +9,12 @@ import PreferenceStore from '../../stores/preference_store.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'}); - return {militaryTime: militaryTime.value}; + return { + militaryTime: militaryTime.value, + nameFormat: nameFormat.value + }; } export default class UserSettingsDisplay extends React.Component { @@ -19,15 +23,17 @@ export default class UserSettingsDisplay extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); this.handleClockRadio = this.handleClockRadio.bind(this); + this.handleNameRadio = this.handleNameRadio.bind(this); this.updateSection = this.updateSection.bind(this); this.handleClose = this.handleClose.bind(this); this.state = getDisplayStateFromStores(); } handleSubmit() { - const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime); + 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); - savePreferences([preference], + savePreferences([timePreference, namePreference], () => { PreferenceStore.emitChange(); this.updateSection(''); @@ -40,6 +46,9 @@ export default class UserSettingsDisplay extends React.Component { handleClockRadio(militaryTime) { this.setState({militaryTime}); } + handleNameRadio(nameFormat) { + this.setState({nameFormat}); + } updateSection(section) { this.setState(getDisplayStateFromStores()); this.props.updateSection(section); @@ -56,6 +65,7 @@ export default class UserSettingsDisplay extends React.Component { render() { const serverError = this.state.serverError || null; let clockSection; + let nameFormatSection; if (this.props.activeSection === 'clock') { const clockFormat = [false, false]; if (this.state.militaryTime === 'true') { @@ -127,6 +137,88 @@ export default class UserSettingsDisplay extends React.Component { ); } + if (this.props.activeSection === 'name_format') { + const nameFormat = [false, false, false]; + if (this.state.nameFormat === 'nickname_full_name') { + nameFormat[0] = true; + } else if (this.state.nameFormat === 'full_name') { + nameFormat[2] = true; + } else { + nameFormat[1] = true; + } + + const inputs = [ + <div key='userDisplayNameOptions'> + <div className='radio'> + <label> + <input + type='radio' + checked={nameFormat[0]} + onChange={this.handleNameRadio.bind(this, 'nickname_full_name')} + /> + {'Show nickname if one exists, otherwise show first and last name (team default)'} + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={nameFormat[1]} + onChange={this.handleNameRadio.bind(this, 'username')} + /> + {'Show username'} + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={nameFormat[2]} + onChange={this.handleNameRadio.bind(this, 'full_name')} + /> + {'Show first and last name'} + </label> + <br/> + </div> + <div><br/>{'How should other users be shown in Direct Messages list?'}</div> + </div> + ]; + + nameFormatSection = ( + <SettingItemMax + title='Show real names, nick names or usernames?' + inputs={inputs} + submit={this.handleSubmit} + server_error={serverError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + let describe = ''; + if (this.state.nameFormat === 'username') { + describe = 'Show username'; + } else if (this.state.nameFormat === 'full_name') { + describe = 'Show first and last name'; + } else { + describe = 'Show nickname if one exists, otherwise show first and last name (team default)'; + } + + nameFormatSection = ( + <SettingItemMin + title='Show real names, nick names or usernames?' + describe={describe} + updateSection={() => { + this.props.updateSection('name_format'); + }} + /> + ); + } + return ( <div> <div className='modal-header'> @@ -151,6 +243,8 @@ export default class UserSettingsDisplay extends React.Component { <div className='divider-dark first'/> {clockSection} <div className='divider-dark'/> + {nameFormatSection} + <div className='divider-dark'/> </div> </div> ); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 4bd651649..296307bc6 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -884,6 +884,23 @@ export function getDisplayName(user) { return user.username; } +export function displayUsername(userId) { + const user = UserStore.getProfile(userId); + const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value; + + let username = ''; + if (nameFormat === 'nickname_full_name') { + username = user.nickname || getFullName(user); + } else if (nameFormat === 'full_name') { + username = getFullName(user); + } + if (!username.trim().length) { + username = user.username; + } + + return username; +} + //IE10 does not set window.location.origin automatically so this must be called instead when using it export function getWindowLocationOrigin() { var windowLocationOrigin = window.location.origin; |