chore(client): move geojson example to navbar-right

tomchentw · Nov 20, 2014 · c8e1870 · c8e1870
1 parent f15d8a3
commit c8e1870
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/client/scripts/NavHeaderBar.js b/client/scripts/NavHeaderBar.js
@@ -9,7 +9,8 @@ var React = require("react/addons"),
         key: PropTypes.string.isRequired,
         displayName: PropTypes.string.isRequired,
         path: PropTypes.string.isRequired,
-      });
+      }),
+    actionsArrayType = PropTypes.arrayOf(actionPropType).isRequired;
 
 function noop () {}
 
@@ -21,10 +22,11 @@ module.exports = React.createClass({
   propTypes: {
     activeActionKey: PropTypes.string.isRequired,
     onNavigateTo: PropTypes.func,
-    actions: PropTypes.arrayOf(actionPropType).isRequired,
+    actions: actionsArrayType,
     dropdownActions: PropTypes.arrayOf(
         PropTypes.oneOfType([actionPropType, PropTypes.bool])
       ),
+    rightActions: actionsArrayType,
   },
 
   getInitialState () {
@@ -36,7 +38,9 @@ module.exports = React.createClass({
   getDefaultProps () {
     return {
       onNavigateTo: noop,
+      actions: [],
       dropdownActions: [],
+      rightActions: [],
     };
   },
 
@@ -78,6 +82,9 @@ module.exports = React.createClass({
               </ul>
             </li>
           </ul>
+          <ul className="nav navbar-nav navbar-right" style={{marginRight:100}}>
+            {props.rightActions.map(actionToMenuItem, this)}
+          </ul>
         </div>
       </div>
     </nav>;

diff --git a/client/scripts/index.js b/client/scripts/index.js
@@ -13,23 +13,10 @@ var React = require("react/addons"),
 
     ACTIONS,
     DROPDOWN_ACTIONS,
+    RIGHT_ACTIONS,
     ALL_ACTIONS;
 
 ACTIONS = [
-  {
-    key: "gs",
-    displayName: "Getting started",
-    path: "#gs",
-    component: {
-      componentClass: require("./components/GeojsonToComponents"),
-      componentProps: {
-        initialGeoJson: require("./geojson"),
-      },
-      componentRaw: {
-        __raw: require("!raw-loader!./components/GeojsonToComponents"),
-      },
-    },
-  },
   {
     key: "gs",
     displayName: "Getting started",
@@ -124,7 +111,24 @@ DROPDOWN_ACTIONS = [
   },
 ];
 
-ALL_ACTIONS = ACTIONS.concat(DROPDOWN_ACTIONS.filter((x) => { return !!x; }));
+RIGHT_ACTIONS = [
+  {
+    key: "geojson",
+    displayName: "Geojson",
+    path: "#geojson",
+    component: {
+      componentClass: require("./components/GeojsonToComponents"),
+      componentProps: {
+        initialGeoJson: require("./geojson"),
+      },
+      componentRaw: {
+        __raw: require("!raw-loader!./components/GeojsonToComponents"),
+      },
+    },
+  },
+];
+
+ALL_ACTIONS = ACTIONS.concat(DROPDOWN_ACTIONS.filter((x) => { return !!x; })).concat(RIGHT_ACTIONS);
 
 Body = React.createClass({
   displayName: "Body",
@@ -148,7 +152,7 @@ Body = React.createClass({
     var {action} = state;
 
     return <div id="react-root">
-      <NavHeaderBar activeActionKey={action.key} onNavigateTo={this._handle_navigate} actions={ACTIONS} dropdownActions={DROPDOWN_ACTIONS} />
+      <NavHeaderBar activeActionKey={action.key} onNavigateTo={this._handle_navigate} actions={ACTIONS} dropdownActions={DROPDOWN_ACTIONS} rightActions={RIGHT_ACTIONS} />
 
       <div className="container-fluid container--full-height">
         <div className="github-fork-ribbon-wrapper right">