Extract i18n from shared UI components (#4834)

* Actionbar i18n * ui Errors i18n * Features i18n * GapPriceSelector i18n * WIP * WIP #2 * Update methodDecoding * ModalBox -> functional * Signer pages i18n (missed previously) * Update ModalBox tests * Update variable
openethereum · Mar 10, 2017 · 4e5fd92 · 4e5fd92
1 parent d98b7aa
commit 4e5fd92
Show file tree

Hide file tree

Showing 13 changed files with 451 additions and 198 deletions.
diff --git a/js/src/ui/Actionbar/Export/export.js b/js/src/ui/Actionbar/Export/export.js
@@ -15,11 +15,12 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import FileSaver from 'file-saver';
-import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
 
 import Button from '../../Button';
+import { FileDownloadIcon } from '../../Icons';
 
 class ActionbarExport extends Component {
   static propTypes = {
@@ -38,17 +39,20 @@ class ActionbarExport extends Component {
       <Button
         className={ className }
         icon={ <FileDownloadIcon /> }
-        label='export'
+        label={
+          <FormattedMessage
+            id='ui.actionbar.export.button.export'
+            defaultMessage='export'
+          />
+        }
         onClick={ this.handleExport }
       />
     );
   }
 
   handleExport = () => {
     const { filename, content } = this.props;
-
     const text = JSON.stringify(content, null, 4);
-
     const blob = new Blob([ text ], { type: 'application/json' });
 
     FileSaver.saveAs(blob, `${filename}.json`);

diff --git a/js/src/ui/Actionbar/Search/search.js b/js/src/ui/Actionbar/Search/search.js
@@ -15,10 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import ActionSearch from 'material-ui/svg-icons/action/search';
+import { FormattedMessage } from 'react-intl';
 
 import Button from '../../Button';
 import InputChip from '../../Form/InputChip';
+import { SearchIcon } from '../../Icons';
 
 import styles from './search.css';
 
@@ -74,7 +75,12 @@ export default class ActionbarSearch extends Component {
           <InputChip
             addOnBlur
             className={ styles.input }
-            hint='Enter search input...'
+            hint={
+              <FormattedMessage
+                id='ui.actionbar.search.hint'
+                defaultMessage='Enter search input...'
+              />
+            }
             ref='inputChip'
             tokens={ tokens }
 
@@ -86,7 +92,7 @@ export default class ActionbarSearch extends Component {
 
         <Button
           className={ styles.searchButton }
-          icon={ <ActionSearch /> }
+          icon={ <SearchIcon /> }
           label=''
           onClick={ this.handleSearchClick }
         />

diff --git a/js/src/ui/Errors/errors.js b/js/src/ui/Errors/errors.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Snackbar } from 'material-ui';
@@ -24,6 +25,19 @@ import { closeErrors } from './actions';
 import styles from './errors.css';
 
 const ERROR_REGEX = /-(\d+): (.+)$/;
+const DURATION_OPEN = 60000;
+const STYLE_BODY = {
+  height: 'auto',
+  whiteSpace: 'pre-line'
+};
+const STYLE_CONTENT = {
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  lineHeight: '1.5em',
+  padding: '0.75em 0'
+};
 
 class Errors extends Component {
   static propTypes = {
@@ -46,23 +60,18 @@ class Errors extends Component {
       <Snackbar
         className={ styles.container }
         open
-        action='close'
-        autoHideDuration={ 60000 }
+        action={
+          <FormattedMessage
+            id='ui.errors.close'
+            defaultMessage='close'
+          />
+        }
+        autoHideDuration={ DURATION_OPEN }
         message={ text }
         onActionTouchTap={ onCloseErrors }
         onRequestClose={ this.onRequestClose }
-        bodyStyle={ {
-          whiteSpace: 'pre-line',
-          height: 'auto'
-        } }
-        contentStyle={ {
-          display: 'flex',
-          flexDirection: 'row',
-          lineHeight: '1.5em',
-          padding: '0.75em 0',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        } }
+        bodyStyle={ STYLE_BODY }
+        contentStyle={ STYLE_CONTENT }
       />
     );
   }

diff --git a/js/src/ui/Features/defaults.js b/js/src/ui/Features/defaults.js
@@ -14,6 +14,9 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
 const MODES = {
   DEVELOPMENT: 1000, // only in dev mode, disabled by default, can be toggled
   TESTING: 1011, // feature is available in dev mode
@@ -28,13 +31,33 @@ const FEATURES = {
 const DEFAULTS = {
   [FEATURES.LANGUAGE]: {
     mode: MODES.TESTING,
-    name: 'Language Selection',
-    description: 'Allows changing the default interface language'
+    name: (
+      <FormattedMessage
+        id='ui.features.defaults.i18n.name'
+        defaultMssage='Language Selection'
+      />
+    ),
+    description: (
+      <FormattedMessage
+        id='ui.features.defaults.i18n.desc'
+        defaultMssage='Allows changing the default interface language'
+      />
+    )
   },
   [FEATURES.LOGLEVELS]: {
     mode: MODES.TESTING,
-    name: 'Logging Level Selection',
-    description: 'Allows changing of the log levels for various components'
+    name: (
+      <FormattedMessage
+        id='ui.features.defaults.logging.name'
+        defaultMssage='Logging Level Selection'
+      />
+    ),
+    description: (
+      <FormattedMessage
+        id='ui.features.defaults.logging.desc'
+        defaultMssage='Allows changing of the log levels for various components'
+      />
+    )
   }
 };
 

diff --git a/js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js b/js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js
@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 export default class CustomTooltip extends Component {
   static propTypes = {
@@ -41,11 +42,15 @@ export default class CustomTooltip extends Component {
     return (
       <div>
         <p className='label'>
-          { count.toNumber() } transactions
-          with gas price set from
-          <span> { minprice.toFormat(0) } </span>
-          to
-          <span> { maxprice.toFormat(0) } </span>
+          <FormattedMessage
+            id='ui.gasPriceSelector.customTooltip.transactions'
+            defaultMessage='{number} {number, plural, one {transaction} other {transactions}} with gas price set from {minPrice} to {maxPrice}'
+            values={ {
+              number: count.toNumber(),
+              minPrice: <span>{ minprice.toFormat(0) }</span>,
+              maxPrice: <span>{ maxprice.toFormat(0) }</span>
+            } }
+          />
         </p>
       </div>
     );

diff --git a/js/src/ui/Icons/index.js b/js/src/ui/Icons/index.js
@@ -34,6 +34,7 @@ export DoneIcon from 'material-ui/svg-icons/action/done-all';
 export DialIcon from 'material-ui/svg-icons/communication/dialpad';
 export EditIcon from 'material-ui/svg-icons/content/create';
 export ErrorIcon from 'material-ui/svg-icons/alert/error';
+export FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
 export FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
 export FileIcon from 'material-ui/svg-icons/editor/insert-drive-file';
 export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
@@ -55,6 +56,7 @@ export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
 export ReorderIcon from 'material-ui/svg-icons/action/reorder';
 export ReplayIcon from 'material-ui/svg-icons/av/replay';
 export SaveIcon from 'material-ui/svg-icons/content/save';
+export SearchIcon from 'material-ui/svg-icons/action/search';
 export SendIcon from 'material-ui/svg-icons/content/send';
 export SettingsIcon from 'material-ui/svg-icons/action/settings';
 export SnoozeIcon from 'material-ui/svg-icons/av/snooze';