Implemented language switch in Interface Config Tab

browser/main/Main.js

@@ -14,6 +14,7 @@ import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { hashHistory } from 'react-router'
 import store from 'browser/main/store'
+import i18n from 'browser/lib/i18n'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -148,7 +149,14 @@ class Main extends React.Component {
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
-
+    if (config.ui.language === 'en') {
+      i18n.setLocale('en')
+    } else if (config.ui.language === 'de') {
+      i18n.setLocale('de')
+    } else {
+      i18n.setLocale('fr')
+    }
+    
     // Reload all data
     dataApi.init()
       .then((data) => {

browser/main/lib/ConfigManager.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
+import i18n from 'browser/lib/i18n'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -132,6 +133,14 @@ function set (updates) {
     document.body.setAttribute('data-theme', 'default')
   }
 
+  if (newConfig.ui.language === 'en') {
+    i18n.setLocale('en')
+  } else if (newConfig.ui.language === 'de') {
+    i18n.setLocale('de')
+  } else {
+    i18n.setLocale('fr')
+  }
+
   let editorTheme = document.getElementById('editorTheme')
   if (editorTheme == null) {
     editorTheme = document.createElement('link')

browser/main/modals/PreferencesModal/UiTab.js

@@ -62,6 +62,7 @@ class UiTab extends React.Component {
     const newConfig = {
       ui: {
         theme: this.refs.uiTheme.value,
+        language: this.refs.uiLanguage.value,
         showCopyNotification: this.refs.showCopyNotification.checked,
         confirmDeletion: this.refs.confirmDeletion.checked,
         disableDirectWrite: this.refs.uiD2w != null
@@ -168,6 +169,21 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+
+          <div styleName='group-section'>
+          {i18n.__('Language')}
+            <div styleName='group-section-control'>
+              <select value={config.ui.language}
+                onChange={(e) => this.handleUIChange(e)}
+                ref='uiLanguage'
+              >
+                <option value='en'>{i18n.__('English')}</option>
+                <option value='de'>{i18n.__('German')}</option>
+                <option value='fr'>{i18n.__('French')}</option>
+              </select>
+            </div>
+          </div>
+
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -175,7 +191,7 @@ class UiTab extends React.Component {
                 ref='showCopyNotification'
                 type='checkbox'
               />&nbsp;
-              {i18n.__('Show &quot;Saved to Clipboard&quot; notification when copying')}
+              {i18n.__('Show "Saved to Clipboard" notification when copying')}
             </label>
           </div>
           <div styleName='group-checkBoxSection'>