1 files changed, 136 insertions, 0 deletions
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
new file mode 100644
index 0000000000..56c5844346
--- /dev/null
+++ b/app/components/AdvancedSettings.js
@@ -0,0 +1,136 @@
+// @flow
+
+import React from 'react';
+import { Layout, Container, Header } from './Layout';
+import CustomScrollbars from './CustomScrollbars';
+
+import TickSVG from '../assets/images/icon-tick.svg';
+
+export class AdvancedSettings extends React.Component {
+
+  props: {
+    protocol: string,
+    port: string | number,
+    onUpdate: (protocol: string, port: string | number) => void,
+    onClose: () => void,
+  };
+
+  render() {
+    let portSelector = null;
+    let protocol = this.props.protocol.toUpperCase();
+
+    if (protocol === 'AUTOMATIC') {
+      protocol = 'Automatic';
+    } else {
+      portSelector = this._createPortSelector();
+    }
+
+    return <BaseLayout onClose={ this.props.onClose }>
+
+      <Selector
+        title={ 'Network protocols' }
+        values={ ['Automatic', 'UDP', 'TCP'] }
+        value={ protocol }
+        onSelect={ protocol => {
+          this.props.onUpdate(protocol, 'Automatic');
+        }}/>
+
+      <div className="settings__cell-spacer"></div>
+
+      { portSelector }
+
+    </BaseLayout>;
+  }
+
+  _createPortSelector() {
+    const protocol = this.props.protocol.toUpperCase();
+    const ports = protocol === 'TCP'
+      ? ['Automatic', 80, 443]
+      : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
+
+    return <Selector
+      title={ protocol + ' port' }
+      values={ ports }
+      value={ this.props.port }
+      onSelect={ port => {
+        this.props.onUpdate(protocol, port);
+      }} />;
+  }
+}
+
+
+class Selector extends React.Component {
+
+  props: {
+    title: string,
+    values: Array<*>,
+    value: *,
+    onSelect: (*) => void,
+  }
+
+  render() {
+    return <div>
+      <div className="advanced-settings__section-title">
+        { this.props.title }
+      </div>
+
+      { this.props.values.map(value => this._renderCell(value)) }
+    </div>;
+  }
+
+  _renderCell(value) {
+    const selected = value === this.props.value;
+    if (selected) {
+      return this._renderSelectedCell(value);
+    } else {
+      return this._renderUnselectedCell(value);
+    }
+  }
+
+  _renderSelectedCell(value) {
+    return <div
+      key={ value }
+      className="advanced-settings__cell advanced-settings__cell--selected"
+      onClick={ () => this.props.onSelect(value) } >
+      <div className="advanced-settings__cell-icon"><TickSVG /></div>
+      <div className="advanced-settings__cell-label">{ value }</div>
+    </div>;
+  }
+
+  _renderUnselectedCell(value) {
+    return <div
+      key={ value }
+      className="advanced-settings__cell advanced-settings__cell--dimmed"
+      onClick={ () => this.props.onSelect(value) }>
+      <div className="advanced-settings__cell-icon"></div>
+      <div className="advanced-settings__cell-label">{ value }</div>
+    </div>;
+  }
+}
+
+function BaseLayout(props) {
+  return <Layout>
+    <Header hidden={ true } style={ 'defaultDark' } />
+    <Container>
+      <div className="settings">
+        <div className="support__close" onClick={ props.onClose }>
+          <img className="support__close-icon" src="./assets/images/icon-back.svg" />
+          <span className="support__close-title">Settings</span>
+        </div>
+        <div className="settings__container">
+          <div className="settings__header">
+            <h2 className="settings__title">Advanced</h2>
+          </div>
+          <CustomScrollbars autoHide={ true }>
+            <div className="settings__content">
+              <div className="settings__main">
+                { props.children }
+              </div>
+            </div>
+          </CustomScrollbars>
+        </div>
+      </div>
+    </Container>
+  </Layout>;
+}
+