diff --git a/src/js/config/icons.js b/src/js/config/icons.js
index a4d679d2..936466a1 100644
--- a/src/js/config/icons.js
+++ b/src/js/config/icons.js
@@ -1,4 +1,5 @@
export default {
+ PLUS: 'M768 512c0 22.080-17.92 40-40 40h-176v176c0 22.080-17.92 40-40 40s-40-17.92-40-40v-176h-176c-22.080 0-40-17.92-40-40s17.92-40 40-40h176v-176c0-22.080 17.92-40 40-40s40 17.92 40 40v176h176c22.080 0 40 17.92 40 40z',
ARROW_LEFT: 'M603.072 757.216l-237.44-219.616c-8.576-8.128-13.632-19.296-13.632-31.040 0.288-11.744 5.056-23.2 13.664-31.040l227.040-208.768c16.928-15.36 43.040-14.176 58.176 3.008 15.424 16.864 13.952 43.392-2.656 59.040l-193.504 177.76 203.904 188.608c8 7.52 12.768 18.080 13.344 29.216 0.608 11.456-3.264 21.696-10.688 30.112-15.456 16.896-41.568 18.080-58.208 2.72z',
CHAT: 'M580.992 256h-137.984c-103.296 0-187.008 85.952-187.008 192 0 96.608 69.536 176.32 160 189.792v130.208l128-128h36.992c103.296 0 187.008-85.952 187.008-192s-83.712-192-187.008-192z',
SKIP: 'M512 256c-141.376 0-256 114.656-256 256 0 141.408 114.624 256 256 256s256-114.592 256-256c0-141.344-114.624-256-256-256zM529.056 631.456v-68.256c-102.4-34.144-136.544 0-170.656 68.256 0-170.656 102.4-204.8 170.656-204.8v-68.256l136.544 136.544-136.544 136.512z',
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
index ae6cbeef..63976041 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
+++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
@@ -1,6 +1,7 @@
/* @flow */
import React, { Component } from 'react';
import BigNumber from 'bignumber.js';
+import Icon from 'components/Icon';
import colors from 'config/colors';
import Loader from 'components/LoaderCircle';
import PropTypes from 'prop-types';
@@ -11,7 +12,9 @@ import ICONS from 'config/icons';
import { NavLink } from 'react-router-dom';
import { findDeviceAccounts } from 'reducers/AccountsReducer';
-import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
+import {
+ FONT_SIZE, BORDER_WIDTH, TRANSITION_TIME,
+} from 'config/variables';
import type { Accounts } from 'flowtype';
import type { Props } from '../common';
@@ -72,6 +75,79 @@ RowAccount.propTypes = {
isSelected: PropTypes.bool,
};
+const AddAccountWrapper = styled.div`
+ position: relative;
+ padding: 8px 0 8px 20px;
+ cursor: pointer;
+ color: ${colors.TEXT_SECONDARY};
+ display: flex;
+ align-items: center;
+
+ &:hover {
+ color: ${colors.TEXT_PRIMARY};
+ transition: background-color ${TRANSITION_TIME.BASE} ease-in-out, color ${TRANSITION_TIME.BASE} ease-in-out, border-color ${TRANSITION_TIME.BASE} ease-in-out;
+ }
+`;
+
+const AddAccountIconWrapper = styled.div`
+ margin-right: 12px;
+`;
+
+const DiscoveryStatusWrapper = styled.div`
+ height: 64px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ font-size: ${FONT_SIZE.SMALL};
+ padding: 16px 28px 16px 30px;
+ white-space: nowrap;
+ border-top: 1px solid ${colors.DIVIDER};
+`;
+
+const DiscoveryStatusText = styled.div`
+ display: block;
+ font-size: ${FONT_SIZE.SMALLER};
+ color: ${colors.TEXT_SECONDARY};
+ overflow: hidden;
+ text-overflow: ellipsis;
+`;
+
+const DiscoveryLoadingWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: ${FONT_SIZE.SMALL};
+ padding: 8px 0 8px 22px;
+ white-space: nowrap;
+ color: ${colors.TEXT_SECONDARY};
+`;
+
+const DiscoveryLoadingText = styled.span`
+ margin-left: 14px;
+`;
+
+// class AccountMenu extends Component {
+// constructor(props: Props) {
+// super(props);
+// this.state = {
+// selectedAccounts: null,
+// selectedCoin: null,
+// };
+// }
+
+// componentWillReceiveProps(nextProps) {
+
+// }
+
+// render() {
+// return (
+//
+// Hello
+//
+// );
+// }
+// }
+
const AccountMenu = (props: Props): ?React$Element => {
const selected = props.wallet.selectedDevice;
const { location } = props.router;
@@ -104,7 +180,7 @@ const AccountMenu = (props: Props): ?React$Element => {
}
}
- const urlAccountIndex = parseInt(props.location.state.account);
+ const urlAccountIndex = parseInt(props.router.location.state.account, 10);
return (
=> {
const lastAccount = deviceAccounts[deviceAccounts.length - 1];
if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) {
discoveryStatus = (
-
+
);
} else {
const tooltip = (
@@ -171,16 +256,21 @@ const AccountMenu = (props: Props): ?React$Element => {
}
} else if (!selected.connected || !selected.available) {
discoveryStatus = (
-
+
Accounts could not be loaded
- {`Connect ${selected.instanceLabel} device`}
-
+
+ {`Connect ${selected.instanceLabel} device`}
+
+
);
} else {
discoveryStatus = (
-
- Loading accounts...
-
+
+
+
+ Loading accounts...
+
+
);
}
}
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
index 6116c04c..d7575935 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
+++ b/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
@@ -6,6 +6,7 @@
import * as React from 'react';
import raf from 'raf';
import { getViewportHeight, getScrollY } from 'utils/windowUtils';
+import styled from 'styled-components';
type Props = {
location: string,
@@ -13,6 +14,13 @@ type Props = {
children?: React.Node,
}
+const StickyContainerWrapper = styled.div`
+ position: relative;
+ top: 0;
+ width: 320px;
+ overflow: hidden;
+`;
+
export default class StickyContainer extends React.PureComponent {
// Class variables.
currentScrollY: number = 0;
@@ -136,12 +144,11 @@ export default class StickyContainer extends React.PureComponent {
onTouchMove={this.handleScroll}
onTouchEnd={this.handleScroll}
>
- this.wrapper = node}
>
{this.props.children}
-
+
);
}
diff --git a/src/js/views/Wallet/components/LeftNavigation/index.js b/src/js/views/Wallet/components/LeftNavigation/index.js
index 2e075b1c..c810a2d3 100644
--- a/src/js/views/Wallet/components/LeftNavigation/index.js
+++ b/src/js/views/Wallet/components/LeftNavigation/index.js
@@ -30,6 +30,9 @@ const StickyBottom = styled.div`
const MenuWrapper = styled.div``;
const Help = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
text-align: center;
width: 319px;
padding: 8px 0px;
@@ -94,17 +97,30 @@ class LeftNavigation extends Component {
// TODO: refactor to transition component for reuse of transitions
getMenuTransition(children) {
+ console.warn('GET MENU TRANSITION', this.state.animationType);
return (
{ window.dispatchEvent(new Event('resize')); }}
+ onEnter={() => {
+ console.warn('ON ENTER');
+ }}
+ onEntering={() => {
+ console.warn('ON ENTERING (ACTIVE)');
+ }}
+ onExit={() => {
+ console.warn('ON EXIT');
+ window.dispatchEvent(new Event('resize'));
+ }}
+ onExiting={() => {
+ console.warn('ON EXITING (ACTIVE)');
+ }}
onExited={() => window.dispatchEvent(new Event('resize'))}
- in
- out
classNames={this.state.animationType}
appear={false}
- timeout={300}
+ timeout={30000}
+ in
+ out
>
{children}
diff --git a/src/styles/aside.less b/src/styles/aside.less
index e0288643..5b3fcfe1 100644
--- a/src/styles/aside.less
+++ b/src/styles/aside.less
@@ -6,10 +6,10 @@ aside {
overflow-x: hidden;
.sticky-container {
- position: relative;
- top: 0;
- width: 320px;
- overflow: hidden;
+ // position: relative;
+ // top: 0;
+ // width: 320px;
+ // overflow: hidden;
&.fixed {
position: fixed;
@@ -18,12 +18,12 @@ aside {
&.fixed-bottom {
padding-bottom: 60px; // height of .help
- .sticky-bottom {
- position: fixed;
- bottom: 0;
- background: @color_main;
- border-right: 1px solid @color_divider;
- }
+ // .sticky-bottom {
+ // position: fixed;
+ // bottom: 0;
+ // background: @color_main;
+ // border-right: 1px solid @color_divider;
+ // }
}
}
@@ -475,38 +475,38 @@ aside {
// border-bottom: 1px solid @color_divider;
// }
- .help {
- width: 319px; // - 1px border-roght; 320px;
- padding: 14px 0px;
- text-align: center;
- border-top: 1px solid @color_divider;
-
- &.fixed {
- position: fixed;
- bottom: 0px;
- }
-
- a {
- color: @color_text_secondary;
- font-size: 12px;
- display: inline-block;
- padding: 8px;
- height: auto;
+ // .help {
+ // width: 319px; // - 1px border-roght; 320px;
+ // padding: 14px 0px;
+ // text-align: center;
+ // border-top: 1px solid @color_divider;
- &:before {
- .icomoon-chat;
- font-size: 32px;
- position: absolute;
- top: 0px;
- left: -26px;
- }
+ // &.fixed {
+ // position: fixed;
+ // bottom: 0px;
+ // }
- &:hover {
- background: transparent;
- color: @color_text_primary;
- }
- }
- }
+ // a {
+ // color: @color_text_secondary;
+ // font-size: 12px;
+ // display: inline-block;
+ // padding: 8px;
+ // height: auto;
+
+ // &:before {
+ // .icomoon-chat;
+ // font-size: 32px;
+ // position: absolute;
+ // top: 0px;
+ // left: -26px;
+ // }
+
+ // &:hover {
+ // background: transparent;
+ // color: @color_text_primary;
+ // }
+ // }
+ // }
.wallet-settings {
@@ -514,56 +514,56 @@ aside {
- .add-account {
- position: relative;
- padding: 8px 0 8px 20px;
- cursor: pointer;
- color: @color_text_secondary;
- display: flex;
- align-items: center;
+ // .add-account {
+ // position: relative;
+ // padding: 8px 0 8px 20px;
+ // cursor: pointer;
+ // color: @color_text_secondary;
+ // display: flex;
+ // align-items: center;
- &:before {
- .icomoon-plus;
- margin-right: 12px;
- }
+ // &:before {
+ // .icomoon-plus;
+ // margin-right: 12px;
+ // }
- .hover();
- &:hover {
- color: @color_text_primary;
- }
- }
+ // .hover();
+ // &:hover {
+ // color: @color_text_primary;
+ // }
+ // }
- .discovery-status {
- height: 64px;
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
- font-size: 14px;
- padding: 16px 28px 16px 30px;
- white-space: nowrap;
- border-top: 1px solid @color_divider;
- span {
- display: block;
- font-size: 12px;
- color: @color_text_secondary;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
+ // .discovery-status {
+ // height: 64px;
+ // display: flex;
+ // flex-direction: column;
+ // justify-content: space-evenly;
+ // font-size: 14px;
+ // padding: 16px 28px 16px 30px;
+ // white-space: nowrap;
+ // border-top: 1px solid @color_divider;
+ // span {
+ // display: block;
+ // font-size: 12px;
+ // color: @color_text_secondary;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // }
+ // }
- .discovery-loading {
- display: flex;
- flex-direction: row;
- align-items: center;
- font-size: 14px;
- padding: 8px 0 8px 22px;
- white-space: nowrap;
- color: @color_text_secondary;
- //border-top: 1px solid @color_divider;
- .loader-circle {
- margin-right: 14px;
- }
- }
+ // .discovery-loading {
+ // display: flex;
+ // flex-direction: row;
+ // align-items: center;
+ // font-size: 14px;
+ // padding: 8px 0 8px 22px;
+ // white-space: nowrap;
+ // color: @color_text_secondary;
+ // //border-top: 1px solid @color_divider;
+ // .loader-circle {
+ // margin-right: 14px;
+ // }
+ // }
// menu trasitions