Merge branch 'master' into ng-ui-fixes

js/src/ui/Actionbar/actionbar.js

@@ -17,11 +17,13 @@
 import React, { Component, PropTypes } from 'react';
 import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import styles from './actionbar.css';
 
 export default class Actionbar extends Component {
   static propTypes = {
-    title: PropTypes.string,
+    title: nodeOrStringProptype(),
     buttons: PropTypes.array,
     children: PropTypes.node,
     className: PropTypes.string

js/src/ui/Page/page.css

@@ -18,7 +18,7 @@
 .layout {
   padding: 0.25em;
 
-  > * {
+  &>div {
     margin-bottom: 0.75em;
   }
 }

js/src/ui/Page/page.js

@@ -16,21 +16,38 @@
 
 import React, { Component, PropTypes } from 'react';
 
+import Actionbar from '../Actionbar';
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import styles from './page.css';
 
 export default class Page extends Component {
   static propTypes = {
+    buttons: PropTypes.array,
     className: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.node,
+    title: nodeOrStringProptype()
   };
 
   render () {
-    const { className, children } = this.props;
+    const { buttons, className, children, title } = this.props;
     const classes = `${styles.layout} ${className}`;
+    let actionbar = null;
+
+    if (title || buttons) {
+      actionbar = (
+        <Actionbar
+          buttons={ buttons }
+          title={ title } />
+      );
+    }
 
     return (
-      <div className={ classes }>
-        { children }
+      <div>
+        { actionbar }
+        <div className={ classes }>
+          { children }
+        </div>
       </div>
     );
   }