From 570155511729160448ddbbff3cdc1a347da14ee9 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 20 Aug 2018 12:44:18 +0200 Subject: [PATCH] Refactor components/styles --- src/js/config/icons.js | 1 + .../components/AccountMenu/index.js | 110 ++++++++++-- .../components/StickyContainer/index.js | 13 +- .../Wallet/components/LeftNavigation/index.js | 24 ++- src/styles/aside.less | 168 +++++++++--------- 5 files changed, 215 insertions(+), 101 deletions(-) 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 = ( -
+ + + + Add account -
+ ); } 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; + // .help { + // width: 319px; // - 1px border-roght; 320px; + // padding: 14px 0px; + // text-align: center; + // border-top: 1px solid @color_divider; - &.fixed { - position: fixed; - bottom: 0px; - } + // &.fixed { + // position: fixed; + // bottom: 0px; + // } - a { - color: @color_text_secondary; - font-size: 12px; - display: inline-block; - padding: 8px; - height: auto; + // 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; - } + // &:before { + // .icomoon-chat; + // font-size: 32px; + // position: absolute; + // top: 0px; + // left: -26px; + // } - &:hover { - background: transparent; - color: @color_text_primary; - } - } - } + // &: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