// 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 = (