Merge branch 'add-settings-navigation'

1 files changed, 96 insertions, 0 deletions

diff --git a/app/components/NavigationBar.js b/app/components/NavigationBar.js
new file mode 100644
index 0000000000..c1a5daab1e
--- /dev/null
+++ b/app/components/NavigationBar.js
@@ -0,0 +1,96 @@
+// @flow
+
+import * as React from 'react';
+import { Button, Component, Text, View, Styles } from 'reactxp';
+import Img from './Img';
+import { colors } from '../config';
+
+const styles = {
+  navigationBar: {
+    default: Styles.createViewStyle({
+      flex: 0,
+      alignItems: 'flex-start',
+      marginLeft: 12,
+    }),
+    darwin: Styles.createViewStyle({
+      marginTop: 24,
+    }),
+    windows: Styles.createViewStyle({
+      marginTop: 24,
+    }),
+    linux: Styles.createViewStyle({
+      marginTop: 12,
+    }),
+  },
+  closeBarItem: {
+    default: Styles.createViewStyle({
+      cursor: 'default',
+    }),
+    icon: Styles.createViewStyle({
+      flex: 0,
+      opacity: 0.6,
+    }),
+  },
+  backBarButton: {
+    default: Styles.createViewStyle({
+      borderWidth: 0,
+      padding: 0,
+      margin: 0,
+      cursor: 'default',
+    }),
+    content: Styles.createViewStyle({
+      flexDirection: 'row',
+      alignItems: 'center',
+    }),
+    label: Styles.createTextStyle({
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.white60,
+    }),
+    icon: Styles.createViewStyle({
+      opacity: 0.6,
+      marginRight: 8,
+    }),
+  },
+};
+
+export default class NavigationBar extends Component {
+  render() {
+    return (
+      <View style={[styles.navigationBar.default, styles.navigationBar[process.platform]]}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+export class CloseBarItem extends Component {
+  props: {
+    action: () => void,
+  };
+  render() {
+    return (
+      <Button style={[styles.closeBarItem.default]} onPress={this.props.action}>
+        <Img height={24} width={24} style={[styles.closeBarItem.icon]} source="icon-close" />
+      </Button>
+    );
+  }
+}
+
+export class BackBarItem extends Component {
+  props: {
+    title: string,
+    action: () => void,
+  };
+  render() {
+    return (
+      <Button style={styles.backBarButton.default} onPress={this.props.action}>
+        <View style={styles.backBarButton.content}>
+          <Img style={styles.backBarButton.icon} source="icon-back" />
+          <Text style={styles.backBarButton.label}>{this.props.title}</Text>
+        </View>
+      </Button>
+    );
+  }
+}