Creating spanish translation

src/components/Header/Header.js

@@ -13,6 +13,8 @@ class Header extends Component {
     location: PropTypes.object.isRequired,
     openUserPreferencesModal: PropTypes.func,
     children: PropTypes.node,
+    t: PropTypes.func,
+    i18n: PropTypes.object,
   };
 
   static defaultProps = {
@@ -27,21 +29,33 @@ class Header extends Component {
       userPreferencesOpen: false,
     };
 
+    this.loadOptions();
+  }
+
+  loadOptions() {
+    const { t } = this.props;
     this.options = [
       {
-        title: 'Preferences ',
+        title: t('header_preferences'),
         icon: 'fa fa-user',
         onClick: this.props.openUserPreferencesModal,
       },
       {
-        title: 'About',
+        title: t('header_about'),
         icon: 'fa fa-info',
         link: 'http://ohif.org',
       },
     ];
   }
 
+  changeLanguage(language) {
+    const { i18n } = this.props;
+    i18n.changeLanguage(language);
+    this.loadOptions();
+  }
+
   render() {
+    const { t } = this.props;
     return (
       <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
         <div className="header-left-box">
@@ -50,7 +64,7 @@ class Header extends Component {
               to={this.props.location.studyLink}
               className="header-btn header-viewerLink"
             >
-              Back to Viewer
+              {t('header_back_to_viewer')}
             </Link>
           )}
 
@@ -64,16 +78,30 @@ class Header extends Component {
                 state: { studyLink: this.props.location.pathname },
               }}
             >
-              Study list
+              {t('header_study_list')}
             </Link>
           )}
         </div>
 
         <div className="header-menu">
-          <span className="research-use">
-            INVESTIGATIONAL USE ONLY {this.props.t('header_test')}
-          </span>
-          <Dropdown title="Options" list={this.options} align="right" />
+          <span className="research-use">{t('header_research_use')}</span>
+          <button
+            className="research-use"
+            onClick={() => this.changeLanguage('en-US')}
+          >
+            US
+          </button>
+          <button
+            className="research-use"
+            onClick={() => this.changeLanguage('en-ES')}
+          >
+            ES
+          </button>
+          <Dropdown
+            title={t('header_options')}
+            list={this.options}
+            align="right"
+          />
           <ConnectedUserPreferencesModal />
         </div>
       </div>

src/locales/en-ES/Header.json

@@ -0,0 +1,7 @@
+{
+  "header_research_use": "SOLO USO DE INVESTIGACIÓN",
+  "header_options": "Opciones",
+  "header_about": "Sobre",
+  "header_preferences": "Preferencias",
+  "header_study_list": "Lista de estudio"
+}

src/locales/en-ES/Toolbar.json

@@ -0,0 +1,13 @@
+{
+  "toolbar_series": "Series",
+  "toolbar_measurements": "Medidas",
+  "toolbar_stack_scroll": "Avance X slice",
+  "toolbar_zoom": "Zoom",
+  "toolbar_levels": "Niveles",
+  "toolbar_pan": "Mover",
+  "toolbar_length": "Medición",
+  "toolbar_annotate": "Anotación",
+  "toolbar_angle": "Ángulo",
+  "toolbar_reset": "Reiniciar",
+  "toolbar_cine": "CINE"
+}

src/locales/en-ES/common.json

@@ -0,0 +1,20 @@
+{
+  "Themes": "Temas",
+  "Previous": "Anterior",
+  "Next": "Próximo",
+  "Play": "Play",
+  "Stop": "Stop",
+  "Layout": "Esquema",
+  "More": "Más",
+  "Crosshairs": "Cruces",
+  "Magnify": "Lupa",
+  "ROI Window": "Ventana ROI",
+  "Probe": "Probar",
+  "Ellipse": "Elipse",
+  "Rectangle": "Rectángulo",
+  "Invert": "Invertido",
+  "Rotate Right": "Rotar ->",
+  "Flip H": "Espejo Hor.",
+  "Flip V": "Espejo Ver.",
+  "Clear": "Limpiar"
+}

src/locales/en-US/Header.json

@@ -1,3 +1,9 @@
 {
+  "header_preferences": "Preferences",
+  "header_options": "Options",
+  "header_about": "About",
+  "header_back_to_viewer": "Back to Viewer",
+  "header_study_list": "Study list",
+  "header_research_use": "INVESTIGATIONAL USE ONLY",
   "header_test": "$t(common:test)"
 }

src/locales/en-US/Toolbar.json

@@ -0,0 +1,19 @@
+{
+  "toolbar_series": "Series",
+  "toolbar_measurements": "Measurements",
+  "toolbar_stack_scroll": "Stack Scroll",
+  "toolbar_zoom": "Zoom",
+  "toolbar_levels": "Levels",
+  "toolbar_pan": "Pan",
+  "toolbar_length": "Length",
+  "toolbar_annotate": "Annotate",
+  "toolbar_angle": "Angle",
+  "toolbar_reset": "Reset",
+  "toolbar_cine": "CINE",
+  "toolbar_bidirectional": "Bidirectional",
+  "toolbar_brush": "Brush",
+  "toolbar_freehand": "Freehand",
+  "toolbar_elliptical_roi": "EllipticalRoi",
+  "toolbar_circle_roi": "CircleRoi",
+  "toolbar_rectangle_roi": "RectangleRoi"
+}

src/locales/en/Header.json

@@ -1,3 +1,7 @@
 {
-  "header_test": "$t(common:test)"
+  "header_research_use": "SOLO USO DE INVESTIGACIÓN",
+  "header_options": "Opciones",
+  "header_about": "Sobre",
+  "header_preferences": "Preferencias",
+  "header_study_list": "Lista de estudio"
 }