// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import Constants from '../../utils/constants.jsx'; const OverlayTrigger = ReactBootstrap.OverlayTrigger; const Popover = ReactBootstrap.Popover; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; const messages = defineMessages({ sidebarBg: { id: 'user.settings.custom_theme.sidebarBg', defaultMessage: 'Sidebar BG' }, sidebarText: { id: 'user.settings.custom_theme.sidebarText', defaultMessage: 'Sidebar Text' }, sidebarHeaderBg: { id: 'user.settings.custom_theme.sidebarHeaderBg', defaultMessage: 'Sidebar Header BG' }, sidebarHeaderTextColor: { id: 'user.settings.custom_theme.sidebarHeaderTextColor', defaultMessage: 'Sidebar Header Text' }, sidebarUnreadText: { id: 'user.settings.custom_theme.sidebarUnreadText', defaultMessage: 'Sidebar Unread Text' }, sidebarTextHoverBg: { id: 'user.settings.custom_theme.sidebarTextHoverBg', defaultMessage: 'Sidebar Text Hover BG' }, sidebarTextActiveBorder: { id: 'user.settings.custom_theme.sidebarTextActiveBorder', defaultMessage: 'Sidebar Text Active Border' }, sidebarTextActiveColor: { id: 'user.settings.custom_theme.sidebarTextActiveColor', defaultMessage: 'Sidebar Text Active Color' }, onlineIndicator: { id: 'user.settings.custom_theme.onlineIndicator', defaultMessage: 'Online Indicator' }, awayIndicator: { id: 'user.settings.custom_theme.awayIndicator', defaultMessage: 'Away Indicator' }, mentionBj: { id: 'user.settings.custom_theme.mentionBj', defaultMessage: 'Mention Jewel BG' }, mentionColor: { id: 'user.settings.custom_theme.mentionColor', defaultMessage: 'Mention Jewel Text' }, centerChannelBg: { id: 'user.settings.custom_theme.centerChannelBg', defaultMessage: 'Center Channel BG' }, centerChannelColor: { id: 'user.settings.custom_theme.centerChannelColor', defaultMessage: 'Center Channel Text' }, newMessageSeparator: { id: 'user.settings.custom_theme.newMessageSeparator', defaultMessage: 'New Message Separator' }, linkColor: { id: 'user.settings.custom_theme.linkColor', defaultMessage: 'Link Color' }, buttonBg: { id: 'user.settings.custom_theme.buttonBg', defaultMessage: 'Button BG' }, buttonColor: { id: 'user.settings.custom_theme.buttonColor', defaultMessage: 'Button Text' }, mentionHighlightBg: { id: 'user.settings.custom_theme.mentionHighlightBg', defaultMessage: 'Mention Highlight BG' }, mentionHighlightLink: { id: 'user.settings.custom_theme.mentionHighlightLink', defaultMessage: 'Mention Highlight Link' }, codeTheme: { id: 'user.settings.custom_theme.codeTheme', defaultMessage: 'Code Theme' } }); class CustomThemeChooser extends React.Component { constructor(props) { super(props); this.onPickerChange = this.onPickerChange.bind(this); this.onInputChange = this.onInputChange.bind(this); this.pasteBoxChange = this.pasteBoxChange.bind(this); this.state = {}; } componentDidMount() { $('.color-picker').colorpicker({ format: 'hex' }); $('.color-picker').on('changeColor', this.onPickerChange); } componentDidUpdate() { const theme = this.props.theme; Constants.THEME_ELEMENTS.forEach((element) => { if (theme.hasOwnProperty(element.id) && element.id !== 'codeTheme') { $('#' + element.id).data('colorpicker').color.setColor(theme[element.id]); $('#' + element.id).colorpicker('update'); } }); } onPickerChange(e) { const theme = this.props.theme; theme[e.target.id] = e.color.toHex(); theme.type = 'custom'; this.props.updateTheme(theme); } onInputChange(e) { const theme = this.props.theme; theme[e.target.parentNode.id] = e.target.value; theme.type = 'custom'; this.props.updateTheme(theme); } pasteBoxChange(e) { const text = e.target.value; if (text.length === 0) { return; } const colors = text.split(','); const theme = {type: 'custom'}; let index = 0; Constants.THEME_ELEMENTS.forEach((element) => { if (index < colors.length - 1) { theme[element.id] = colors[index]; } index++; }); theme.codeTheme = colors[colors.length - 1]; this.props.updateTheme(theme); } render() { const {formatMessage} = this.props.intl; const theme = this.props.theme; const elements = []; let colors = ''; Constants.THEME_ELEMENTS.forEach((element, index) => { if (element.id === 'codeTheme') { const codeThemeOptions = []; element.themes.forEach((codeTheme, codeThemeIndex) => { codeThemeOptions.push( ); }); var popoverContent = ( ); elements.push(
); } else { elements.push(
); colors += theme[element.id] + ','; } }); colors += theme.codeTheme; const pasteBox = (
); return (
{elements}
{pasteBox}
); } } CustomThemeChooser.propTypes = { intl: intlShape.isRequired, theme: React.PropTypes.object.isRequired, updateTheme: React.PropTypes.func.isRequired }; export default injectIntl(CustomThemeChooser);