Add support for i18n of the explorer

client/src/components/explorer/ExplorerEmpty.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { STRINGS } from 'config';
 
 const ExplorerEmpty = () => (
-  <div className="c-explorer__placeholder">No results</div>
+  <div className="c-explorer__placeholder">{STRINGS['NO_RESULTS']}</div>
 );
 
 export default ExplorerEmpty;

client/src/components/explorer/ExplorerHeader.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import CSSTransitionGroup from 'react-addons-css-transition-group';
-import { EXPLORER_ANIM_DURATION, EXPLORER_FILTERS } from 'config';
+import { EXPLORER_ANIM_DURATION, EXPLORER_FILTERS, STRINGS } from 'config';
 
 import Icon from 'components/icon/Icon';
 import Filter from './Filter';
@@ -13,10 +13,8 @@ class ExplorerHeader extends Component {
   }
 
   _getBackBtn() {
-    let { onPop } = this.props;
-
     return (
-      <span className='c-explorer__back' onClick={onPop}>
+      <span className='c-explorer__back'>
         <Icon name="arrow-left" />
       </span>
     );
@@ -39,7 +37,7 @@ class ExplorerHeader extends Component {
     let { page, depth } = this.props;
 
     if (depth < 2 || !page) {
-      return 'EXPLORER';
+      return STRINGS['EXPLORER'];
     }
 
     return page.title;
@@ -59,10 +57,10 @@ class ExplorerHeader extends Component {
     return (
       <div className="c-explorer__header">
         <span className={this._getClass()} onClick={onPop}>
-          { depth > 1 ? this._getBackBtn() : null }
           <span className='u-overflow c-explorer__overflow'>
           <CSSTransitionGroup {...transitionProps}>
             <span className='c-explorer__parent-name' key={depth}>
+               { depth > 1 ? this._getBackBtn() : null }
               {this._getTitle()}
             </span>
           </CSSTransitionGroup>

client/src/components/explorer/ExplorerItem.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-import { ADMIN_PAGES } from 'config';
+import { ADMIN_PAGES, STRINGS } from 'config';
 import Icon from 'components/icon/Icon';
 import PublishStatus from 'components/publish-status/PublishStatus';
 import PublishedTime from 'components/published-time/PublishedTime';
@@ -42,7 +42,7 @@ export default class ExplorerItem extends Component {
         <span className="c-explorer__children" onClick={this._loadChildren}>
           <Icon name="folder-inverse" />
           <span aria-role='presentation'>
-            See Children
+            {STRINGS['SEE_CHILDREN']}
           </span>
         </span> : null }
         <h3 className="c-explorer__title">

client/src/components/explorer/ExplorerPanel.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import CSSTransitionGroup from 'react-addons-css-transition-group';
-import { EXPLORER_ANIM_DURATION } from 'config';
+import { EXPLORER_ANIM_DURATION, STRINGS } from 'config';
 
 import ExplorerEmpty from './ExplorerEmpty';
 import ExplorerHeader from './ExplorerHeader';

client/src/components/explorer/LoadingSpinner.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import { STRINGS } from 'config';
 
 const LoadingSpinner = () => (
   <div className="c-explorer__loading">
-    <span className="c-explorer__spinner icon icon-spinner" /> Loading...
+    <span className="c-explorer__spinner icon icon-spinner" /> {STRINGS['LOADING']}...
   </div>
 );
 

client/src/components/explorer/style.scss

@@ -76,7 +76,6 @@ $c-explorer-easing: cubic-bezier(0.075, 0.820, 0.165, 1.000);
 
 
 .c-explorer__back {
-    cursor: pointer;
     margin-right: .25rem;
     float: left;
     margin-top: -1px;

client/src/components/explorer/toggle.js

@@ -31,7 +31,7 @@ class Toggle extends Component {
     }
 
     return (
-      <a ref="btn" onClick={this._sandbox} className={cls.join('  ')}>
+      <a href="#" ref="btn" onClick={this._sandbox} className={cls.join('  ')}>
         {this.props.label}
       </a>
     );

client/src/components/loading-indicator/LoadingIndicator.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import { STRINGS } from 'config';
 
 const LoadingIndicator = () => (
     <div className="o-icon c-indicator is-spinning">
-        <span ariaRole="presentation">Loading...</span>
+        <span ariaRole="presentation">{STRINGS['LOADING']}...</span>
     </div>
 );
 

client/src/config/index.js

@@ -3,6 +3,8 @@ export const API_PAGES = global.wagtailConfig.api.pages;
 
 export const PAGES_ROOT_ID = 'root';
 
+export const STRINGS = global.wagtailConfig.strings;
+
 export const EXPLORER_ANIM_DURATION = 220;
 
 export const ADMIN_PAGES = global.wagtailConfig.urls.pages;

wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html

@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/skeleton.html" %}
-{% load staticfiles wagtailadmin_tags %}
+{% load i18n staticfiles wagtailadmin_tags %}
 
 {% block css %}
     <link rel="stylesheet" href="{% static 'wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css' %}" />
@@ -23,6 +23,13 @@
                 documents: '{% url "wagtailadmin_api_v1:documents:listing" %}',
                 images: '{% url "wagtailadmin_api_v1:images:listing" %}'
             };
+            wagtailConfig.strings = {
+                EXPLORER: "{% trans 'Explorer' %}",
+                LOADING: "{% trans 'Loading' %}",
+                NO_RESULTS: "{% trans 'No results' %}",
+                SEE_CHILDREN: "{% trans 'See Children' %}"
+
+            };
             wagtailConfig.urls = {
                 pages: '{% url "wagtailadmin_explore_root" %}'
             };