// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var UserStore = require('../stores/user_store.jsx'); var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); var Client = require('../utils/client.jsx'); var Utils = require('../utils/utils.jsx'); export default class UserSettingsAppearance extends React.Component { constructor(props) { super(props); this.submitTheme = this.submitTheme.bind(this); this.updateTheme = this.updateTheme.bind(this); this.handleClose = this.handleClose.bind(this); this.state = this.getStateFromStores(); } getStateFromStores() { var user = UserStore.getCurrentUser(); var theme = '#2389d7'; if (config.ThemeColors != null) { theme = config.ThemeColors[0]; } if (user.props && user.props.theme) { theme = user.props.theme; } return {theme: theme.toLowerCase()}; } submitTheme(e) { e.preventDefault(); var user = UserStore.getCurrentUser(); if (!user.props) { user.props = {}; } user.props.theme = this.state.theme; Client.updateUser(user, function success() { this.props.updateSection(''); window.location.reload(); }.bind(this), function fail(err) { var state = this.getStateFromStores(); state.serverError = err; this.setState(state); }.bind(this) ); } updateTheme(e) { var hex = Utils.rgb2hex(e.target.style.backgroundColor); this.setState({theme: hex.toLowerCase()}); } handleClose() { this.setState({serverError: null}); this.props.updateTab('general'); } componentDidMount() { if (this.props.activeSection === 'theme') { $(React.findDOMNode(this.refs[this.state.theme])).addClass('active-border'); } $('#user_settings').on('hidden.bs.modal', this.handleClose); } componentDidUpdate() { if (this.props.activeSection === 'theme') { $('.color-btn').removeClass('active-border'); $(React.findDOMNode(this.refs[this.state.theme])).addClass('active-border'); } } componentWillUnmount() { $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); } render() { var serverError; if (this.state.serverError) { serverError = this.state.serverError; } var themeSection; var self = this; if (config.ThemeColors != null) { if (this.props.activeSection === 'theme') { var themeButtons = []; for (var i = 0; i < config.ThemeColors.length; i++) { themeButtons.push(

Appearance Settings

Appearance Settings

{themeSection}
); } } UserSettingsAppearance.defaultProps = { activeSection: '' }; UserSettingsAppearance.propTypes = { activeSection: React.PropTypes.string, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func };