diff options
| -rw-r--r-- | app/components/Connect.js | 23 | ||||
| -rw-r--r-- | app/components/HeaderBar.css | 1 | ||||
| -rw-r--r-- | app/lib/backend.js | 3 |
3 files changed, 20 insertions, 7 deletions
diff --git a/app/components/Connect.js b/app/components/Connect.js index 0898f28a44..21c308d660 100644 --- a/app/components/Connect.js +++ b/app/components/Connect.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react'; import { If, Then } from 'react-if'; import { Layout, Container, Header } from './Layout'; -import { servers } from '../constants'; +import { servers, ConnectionState } from '../constants'; export default class Connect extends Component { @@ -20,7 +20,8 @@ export default class Connect extends Component { } onConnect() { - this.props.onConnect(); + const server = this.props.settings.preferredServer; + this.props.onConnect(server); } onDisconnect() { @@ -29,19 +30,27 @@ export default class Connect extends Component { serverName(key) { switch(key) { - case 'fastest': return 'Fastest'; - case 'nearest': return 'Nearest'; - default: return (servers[key] || {}).name + case 'fastest': return 'Fastest'; + case 'nearest': return 'Nearest'; + default: return (servers[key] || {}).name; + } + } + + headerStyle() { + const S = Header.Style; + switch(this.props.connect.status) { + case ConnectionState.disconnected: return S.error; + case ConnectionState.connected: return S.success; + default: return S.default; } } render() { const preferredServer = this.props.settings.preferredServer; const serverName = this.serverName(preferredServer); - return ( <Layout> - <Header showSettings={ true } onSettings={ ::this.onSettings } /> + <Header style={ this.headerStyle() } showSettings={ true } onSettings={ ::this.onSettings } /> <Container> <div className="connect"> <div className="connect__map"></div> diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css index 5e6f4386af..b8dfe2543c 100644 --- a/app/components/HeaderBar.css +++ b/app/components/HeaderBar.css @@ -4,6 +4,7 @@ -webkit-mask: url(../assets/images/app-triangle.svg) 50% 0% no-repeat, url(../assets/images/app-header-backdrop.svg) no-repeat; + transition: 0.5s background-color ease-in-out; } .headerbar--hidden { diff --git a/app/lib/backend.js b/app/lib/backend.js index 8e08ab237c..a97f19a6fb 100644 --- a/app/lib/backend.js +++ b/app/lib/backend.js @@ -55,6 +55,9 @@ export default class Backend extends EventEmitter { connect(addr) { this._serverAddress = addr; + + // emit: connecting + this.emit(EventType.connecting, addr); // @TODO: Add connect call setTimeout(() => { |