summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings/user_settings_display.jsx
diff options
context:
space:
mode:
authorChristopher Speller <crspeller@gmail.com>2016-03-14 08:50:46 -0400
committerChristopher Speller <crspeller@gmail.com>2016-03-16 18:02:55 -0400
commit12896bd23eeba79884245c1c29fdc568cf21a7fa (patch)
tree4e7f83d3e2564b9b89d669e9f7905ff11768b11a /web/react/components/user_settings/user_settings_display.jsx
parent29fe6a3d13c9c7aa490fffebbe5d1b5fdf1e3090 (diff)
downloadchat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.gz
chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.bz2
chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.zip
Converting to Webpack. Stage 1.
Diffstat (limited to 'web/react/components/user_settings/user_settings_display.jsx')
-rw-r--r--web/react/components/user_settings/user_settings_display.jsx496
1 files changed, 0 insertions, 496 deletions
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
deleted file mode 100644
index b0e64b0aa..000000000
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ /dev/null
@@ -1,496 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import SettingItemMin from '../setting_item_min.jsx';
-import SettingItemMax from '../setting_item_max.jsx';
-import ManageLanguages from './manage_languages.jsx';
-import ThemeSetting from './user_settings_theme.jsx';
-
-import PreferenceStore from '../../stores/preference_store.jsx';
-import * as Utils from '../../utils/utils.jsx';
-
-import Constants from '../../utils/constants.jsx';
-
-import {savePreferences} from '../../utils/client.jsx';
-import {FormattedMessage} from 'mm-intl';
-
-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 selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT});
-
- return {
- militaryTime: militaryTime.value,
- nameFormat: nameFormat.value,
- selectedFont: selectedFont.value
- };
-}
-
-export default class UserSettingsDisplay extends React.Component {
- constructor(props) {
- super(props);
-
- this.handleSubmit = this.handleSubmit.bind(this);
- this.handleClockRadio = this.handleClockRadio.bind(this);
- this.handleNameRadio = this.handleNameRadio.bind(this);
- this.handleFont = this.handleFont.bind(this);
- this.updateSection = this.updateSection.bind(this);
- this.updateState = this.updateState.bind(this);
- this.deactivate = this.deactivate.bind(this);
-
- this.state = getDisplayStateFromStores();
- }
- 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 fontPreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', this.state.selectedFont);
-
- savePreferences([timePreference, namePreference, fontPreference],
- () => {
- PreferenceStore.emitChange();
- this.updateSection('');
- },
- (err) => {
- this.setState({serverError: err.message});
- }
- );
- }
- handleClockRadio(militaryTime) {
- this.setState({militaryTime});
- }
- handleNameRadio(nameFormat) {
- this.setState({nameFormat});
- }
- handleFont(selectedFont) {
- Utils.applyFont(selectedFont);
- this.setState({selectedFont});
- }
- updateSection(section) {
- this.updateState();
- this.props.updateSection(section);
- }
- updateState() {
- const newState = getDisplayStateFromStores();
- if (!Utils.areObjectsEqual(newState, this.state)) {
- this.handleFont(newState.selectedFont);
- this.setState(newState);
- }
- }
- deactivate() {
- this.updateState();
- }
- render() {
- const serverError = this.state.serverError || null;
- let clockSection;
- let nameFormatSection;
- let fontSection;
- let languagesSection;
-
- if (this.props.activeSection === 'clock') {
- const clockFormat = [false, false];
- if (this.state.militaryTime === 'true') {
- clockFormat[1] = true;
- } else {
- clockFormat[0] = true;
- }
-
- const handleUpdateClockSection = (e) => {
- this.updateSection('');
- e.preventDefault();
- };
-
- const inputs = [
- <div key='userDisplayClockOptions'>
- <div className='radio'>
- <label>
- <input
- type='radio'
- checked={clockFormat[0]}
- onChange={this.handleClockRadio.bind(this, 'false')}
- />
- <FormattedMessage
- id='user.settings.display.normalClock'
- defaultMessage='12-hour clock (example: 4:00 PM)'
- />
- </label>
- <br/>
- </div>
- <div className='radio'>
- <label>
- <input
- type='radio'
- checked={clockFormat[1]}
- onChange={this.handleClockRadio.bind(this, 'true')}
- />
- <FormattedMessage
- id='user.settings.display.militaryClock'
- defaultMessage='24-hour clock (example: 16:00)'
- />
- </label>
- <br/>
- </div>
- <div>
- <br/>
- <FormattedMessage
- id='user.settings.display.preferTime'
- defaultMessage='Select how you prefer time displayed.'
- />
- </div>
- </div>
- ];
-
- clockSection = (
- <SettingItemMax
- title={
- <FormattedMessage
- id='user.settings.display.clockDisplay'
- defaultMessage='Clock Display'
- />
- }
- inputs={inputs}
- submit={this.handleSubmit}
- server_error={serverError}
- updateSection={handleUpdateClockSection}
- />
- );
- } else {
- let describe;
- if (this.state.militaryTime === 'true') {
- describe = (
- <FormattedMessage
- id='user.settings.display.militaryClock'
- defaultMessage='24-hour clock (example: 16:00)'
- />
- );
- } else {
- describe = (
- <FormattedMessage
- id='user.settings.display.normalClock'
- defaultMessage='12-hour clock (example: 4:00 PM)'
- />
- );
- }
-
- const handleUpdateClockSection = () => {
- this.props.updateSection('clock');
- };
-
- clockSection = (
- <SettingItemMin
- title={
- <FormattedMessage
- id='user.settings.display.clockDisplay'
- defaultMessage='Clock Display'
- />
- }
- describe={describe}
- updateSection={handleUpdateClockSection}
- />
- );
- }
-
- const showUsername = (
- <FormattedMessage
- id='user.settings.display.showUsername'
- defaultMessage='Show username (team default)'
- />
- );
- const showNickname = (
- <FormattedMessage
- id='user.settings.display.showNickname'
- defaultMessage='Show nickname if one exists, otherwise show first and last name'
- />
- );
- const showFullName = (
- <FormattedMessage
- id='user.settings.display.showFullname'
- defaultMessage='Show first and last name'
- />
- );
- 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[1]}
- onChange={this.handleNameRadio.bind(this, 'username')}
- />
- {showUsername}
- </label>
- <br/>
- </div>
- <div className='radio'>
- <label>
- <input
- type='radio'
- checked={nameFormat[0]}
- onChange={this.handleNameRadio.bind(this, 'nickname_full_name')}
- />
- {showNickname}
- </label>
- <br/>
- </div>
- <div className='radio'>
- <label>
- <input
- type='radio'
- checked={nameFormat[2]}
- onChange={this.handleNameRadio.bind(this, 'full_name')}
- />
- {showFullName}
- </label>
- <br/>
- </div>
- <div>
- <br/>
- <FormattedMessage
- id='user.settings.display.nameOptsDesc'
- defaultMessage="Set how to display other user's names in posts and the Direct Messages list."
- />
- </div>
- </div>
- ];
-
- nameFormatSection = (
- <SettingItemMax
- title={
- <FormattedMessage
- id='user.settings.display.teammateDisplay'
- defaultMessage='Teammate Name Display'
- />
- }
- inputs={inputs}
- submit={this.handleSubmit}
- server_error={serverError}
- updateSection={(e) => {
- this.updateSection('');
- e.preventDefault();
- }}
- />
- );
- } else {
- let describe;
- if (this.state.nameFormat === 'username') {
- describe = (
- <FormattedMessage
- id='user.settings.display.showUsername'
- defaultMessage='Show username (team default)'
- />
- );
- } else if (this.state.nameFormat === 'full_name') {
- describe = (
- <FormattedMessage
- id='user.settings.display.showFullname'
- defaultMessage='Show first and last name'
- />
- );
- } else {
- describe = (
- <FormattedMessage
- id='user.settings.display.showNickname'
- defaultMessage='Show nickname if one exists, otherwise show first and last name'
- />
- );
- }
-
- nameFormatSection = (
- <SettingItemMin
- title={
- <FormattedMessage
- id='user.settings.display.teammateDisplay'
- defaultMessage='Teammate Name Display'
- />
- }
- describe={describe}
- updateSection={() => {
- this.props.updateSection('name_format');
- }}
- />
- );
- }
-
- if (this.props.activeSection === 'font') {
- const options = [];
- Object.keys(Constants.FONTS).forEach((fontName, idx) => {
- const className = Constants.FONTS[fontName];
- options.push(
- <option
- key={'font_' + idx}
- value={fontName}
- className={className}
- >
- {fontName}
- </option>
- );
- });
-
- const inputs = [
- <div key='userDisplayNameOptions'>
- <div
- className='dropdown'
- >
- <select
- className='form-control'
- type='text'
- value={this.state.selectedFont}
- onChange={(e) => this.handleFont(e.target.value)}
- >
- {options}
- </select>
- </div>
- <div>
- <br/>
- <FormattedMessage
- id='user.settings.display.fontDesc'
- defaultMessage='Select the font displayed in the Mattermost user interface.'
- />
- </div>
- </div>
- ];
-
- fontSection = (
- <SettingItemMax
- title={
- <FormattedMessage
- id='user.settings.display.fontTitle'
- defaultMessage='Display Font'
- />
- }
- inputs={inputs}
- submit={this.handleSubmit}
- server_error={serverError}
- updateSection={(e) => {
- this.updateSection('');
- e.preventDefault();
- }}
- />
- );
- } else {
- fontSection = (
- <SettingItemMin
- title={
- <FormattedMessage
- id='user.settings.display.fontTitle'
- defaultMessage='Display Font'
- />
- }
- describe={this.state.selectedFont}
- updateSection={() => {
- this.props.updateSection('font');
- }}
- />
- );
- }
-
- if (this.props.activeSection === 'languages') {
- languagesSection = (
- <ManageLanguages
- user={this.props.user}
- updateSection={(e) => {
- this.updateSection('');
- e.preventDefault();
- }}
- />
- );
- } else {
- var locale = 'English';
- Utils.languages().forEach((l) => {
- if (l.value === this.props.user.locale) {
- locale = l.name;
- }
- });
-
- languagesSection = (
- <SettingItemMin
- title={
- <FormattedMessage
- id='user.settings.display.language'
- defaultMessage='Language'
- />
- }
- width='medium'
- describe={locale}
- updateSection={() => {
- this.updateSection('languages');
- }}
- />
- );
- }
-
- return (
- <div>
- <div className='modal-header'>
- <button
- type='button'
- className='close'
- data-dismiss='modal'
- aria-label='Close'
- onClick={this.props.closeModal}
- >
- <span aria-hidden='true'>{'×'}</span>
- </button>
- <h4
- className='modal-title'
- ref='title'
- >
- <div className='modal-back'>
- <i
- className='fa fa-angle-left'
- onClick={this.props.collapseModal}
- />
- </div>
- <FormattedMessage
- id='user.settings.display.title'
- defaultMessage='Display Settings'
- />
- </h4>
- </div>
- <div className='user-settings'>
- <h3 className='tab-header'>
- <FormattedMessage
- id='user.settings.display.title'
- defaultMessage='Display Settings'
- />
- </h3>
- <div className='divider-dark first'/>
- <ThemeSetting
- selected={this.props.activeSection === 'theme'}
- updateSection={this.updateSection}
- setRequireConfirm={this.props.setRequireConfirm}
- setEnforceFocus={this.props.setEnforceFocus}
- />
- <div className='divider-dark'/>
- {fontSection}
- <div className='divider-dark'/>
- {clockSection}
- <div className='divider-dark'/>
- {nameFormatSection}
- <div className='divider-dark'/>
- {languagesSection}
- </div>
- </div>
- );
- }
-}
-
-UserSettingsDisplay.propTypes = {
- user: React.PropTypes.object,
- updateSection: React.PropTypes.func,
- updateTab: React.PropTypes.func,
- activeSection: React.PropTypes.string,
- closeModal: React.PropTypes.func.isRequired,
- collapseModal: React.PropTypes.func.isRequired,
- setRequireConfirm: React.PropTypes.func.isRequired,
- setEnforceFocus: React.PropTypes.func.isRequired
-};