From 78314c7d4d1417fd42ab48cbe41d360f80915453 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Sat, 30 Jan 2016 18:10:04 -0300
Subject: PLT-7: Refactoring frontend (chunk 6) - User settings

---
 .../user_settings/custom_theme_chooser.jsx         | 104 ++++++++++++++++++++-
 1 file changed, 100 insertions(+), 4 deletions(-)

(limited to 'web/react/components/user_settings/custom_theme_chooser.jsx')

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 8ec3863f3..9116dd938 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -6,7 +6,96 @@ import Constants from '../../utils/constants.jsx';
 const OverlayTrigger = ReactBootstrap.OverlayTrigger;
 const Popover = ReactBootstrap.Popover;
 
-export default class CustomThemeChooser extends React.Component {
+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);
 
@@ -65,6 +154,7 @@ export default class CustomThemeChooser extends React.Component {
         this.props.updateTheme(theme);
     }
     render() {
+        const {formatMessage} = this.props.intl;
         const theme = this.props.theme;
 
         const elements = [];
@@ -102,7 +192,7 @@ export default class CustomThemeChooser extends React.Component {
                         className='col-sm-4 form-group'
                         key={'custom-theme-key' + index}
                     >
-                        <label className='custom-label'>{element.uiName}</label>
+                        <label className='custom-label'>{formatMessage(messages[element.id])}</label>
                         <div
                             className='input-group theme-group group--code dropdown'
                             id={element.id}
@@ -135,7 +225,7 @@ export default class CustomThemeChooser extends React.Component {
                         className='col-sm-4 form-group'
                         key={'custom-theme-key' + index}
                     >
-                        <label className='custom-label'>{element.uiName}</label>
+                        <label className='custom-label'>{formatMessage(messages[element.id])}</label>
                         <div
                             className='input-group color-picker'
                             id={element.id}
@@ -160,7 +250,10 @@ export default class CustomThemeChooser extends React.Component {
         const pasteBox = (
             <div className='col-sm-12'>
                 <label className='custom-label'>
-                    {'Copy and paste to share theme colors:'}
+                    <FormattedMessage
+                        id='user.settings.custom_theme.copyPaste'
+                        defaultMessage='Copy and paste to share theme colors:'
+                    />
                 </label>
                 <input
                     type='text'
@@ -185,6 +278,9 @@ export default class CustomThemeChooser extends React.Component {
 }
 
 CustomThemeChooser.propTypes = {
+    intl: intlShape.isRequired,
     theme: React.PropTypes.object.isRequired,
     updateTheme: React.PropTypes.func.isRequired
 };
+
+export default injectIntl(CustomThemeChooser);
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22