arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Refactor components/styles

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-20 12:44:18 +02:00
parent 2d9bad285b
commit 5701555117
5 changed files with 215 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/config/icons.js
View File

@ -1,4 +1,5 @@
export default { 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', 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', 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', 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',

110
src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -1,6 +1,7 @@
/* @flow */ /* @flow */
import React, { Component } from 'react'; import React, { Component } from 'react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import Icon from 'components/Icon';
import colors from 'config/colors'; import colors from 'config/colors';
import Loader from 'components/LoaderCircle'; import Loader from 'components/LoaderCircle';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -11,7 +12,9 @@ import ICONS from 'config/icons';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { findDeviceAccounts } from 'reducers/AccountsReducer'; 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 { Accounts } from 'flowtype';
import type { Props } from '../common'; import type { Props } from '../common';
@ -72,6 +75,79 @@ RowAccount.propTypes = {
isSelected: PropTypes.bool, 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 (
// <div>
// Hello
// </div>
// );
// }
// }
const AccountMenu = (props: Props): ?React$Element<string> => { const AccountMenu = (props: Props): ?React$Element<string> => {
const selected = props.wallet.selectedDevice; const selected = props.wallet.selectedDevice;
const { location } = props.router; const { location } = props.router;
@ -104,7 +180,7 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
} }
} }
const urlAccountIndex = parseInt(props.location.state.account); const urlAccountIndex = parseInt(props.router.location.state.account, 10);
return ( return (
<NavLink <NavLink
to={url} to={url}
@ -147,9 +223,18 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
const lastAccount = deviceAccounts[deviceAccounts.length - 1]; const lastAccount = deviceAccounts[deviceAccounts.length - 1];
if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) { if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) {
discoveryStatus = ( discoveryStatus = (
<div className="add-account" onClick={props.addAccount}> <AddAccountWrapper
onClick={props.addAccount}
>
<AddAccountIconWrapper>
<Icon
icon={ICONS.PLUS}
size={24}
color={colors.TEXT_SECONDARY}
/>
</AddAccountIconWrapper>
Add account Add account
</div> </AddAccountWrapper>
); );
} else { } else {
const tooltip = ( const tooltip = (
@ -171,16 +256,21 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
} }
} else if (!selected.connected || !selected.available) { } else if (!selected.connected || !selected.available) {
discoveryStatus = ( discoveryStatus = (
<div className="discovery-status"> <DiscoveryStatusWrapper>
Accounts could not be loaded Accounts could not be loaded
<span>{`Connect ${selected.instanceLabel} device`}</span> <DiscoveryStatusText>
</div> {`Connect ${selected.instanceLabel} device`}
</DiscoveryStatusText>
</DiscoveryStatusWrapper>
); );
} else { } else {
discoveryStatus = ( discoveryStatus = (
<div className="discovery-loading"> <DiscoveryLoadingWrapper>
<Loader size="20" /> Loading accounts... <Loader size="20" />
</div> <DiscoveryLoadingText>
Loading accounts...
</DiscoveryLoadingText>
</DiscoveryLoadingWrapper>
); );
} }
} }

13
src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
View File

@ -6,6 +6,7 @@
import * as React from 'react'; import * as React from 'react';
import raf from 'raf'; import raf from 'raf';
import { getViewportHeight, getScrollY } from 'utils/windowUtils'; import { getViewportHeight, getScrollY } from 'utils/windowUtils';
import styled from 'styled-components';
type Props = { type Props = {
location: string, location: string,
@ -13,6 +14,13 @@ type Props = {
children?: React.Node, children?: React.Node,
} }
const StickyContainerWrapper = styled.div`
position: relative;
top: 0;
width: 320px;
overflow: hidden;
`;
export default class StickyContainer extends React.PureComponent<Props> { export default class StickyContainer extends React.PureComponent<Props> {
// Class variables. // Class variables.
currentScrollY: number = 0; currentScrollY: number = 0;
@ -136,12 +144,11 @@ export default class StickyContainer extends React.PureComponent<Props> {
onTouchMove={this.handleScroll} onTouchMove={this.handleScroll}
onTouchEnd={this.handleScroll} onTouchEnd={this.handleScroll}
> >
<div <StickyContainerWrapper
className="sticky-container"
ref={node => this.wrapper = node} ref={node => this.wrapper = node}
> >
{this.props.children} {this.props.children}
</div> </StickyContainerWrapper>
</aside> </aside>
); );
} }

24
src/js/views/Wallet/components/LeftNavigation/index.js
View File

@ -30,6 +30,9 @@ const StickyBottom = styled.div`
const MenuWrapper = styled.div``; const MenuWrapper = styled.div``;
const Help = styled.div` const Help = styled.div`
display: flex;
align-items: center;
justify-content: center;
text-align: center; text-align: center;
width: 319px; width: 319px;
padding: 8px 0px; padding: 8px 0px;
@ -94,17 +97,30 @@ class LeftNavigation extends Component {
// TODO: refactor to transition component for reuse of transitions // TODO: refactor to transition component for reuse of transitions
getMenuTransition(children) { getMenuTransition(children) {
console.warn('GET MENU TRANSITION', this.state.animationType);
return ( return (
<TransitionGroupWrapper component="div" className="transition-container"> <TransitionGroupWrapper component="div" className="transition-container">
<CSSTransition <CSSTransition
key={this.state.animationType} key={this.state.animationType}
onExit={() => { 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'))} onExited={() => window.dispatchEvent(new Event('resize'))}
in
out
classNames={this.state.animationType} classNames={this.state.animationType}
appear={false} appear={false}
timeout={300} timeout={30000}
in
out
> >
<TransitionContentWrapper> <TransitionContentWrapper>
{children} {children}

168
src/styles/aside.less
View File

@ -6,10 +6,10 @@ aside {
overflow-x: hidden; overflow-x: hidden;
.sticky-container { .sticky-container {
position: relative; // position: relative;
top: 0; // top: 0;
width: 320px; // width: 320px;
overflow: hidden; // overflow: hidden;
&.fixed { &.fixed {
position: fixed; position: fixed;
@ -18,12 +18,12 @@ aside {
&.fixed-bottom { &.fixed-bottom {
padding-bottom: 60px; // height of .help padding-bottom: 60px; // height of .help
.sticky-bottom { // .sticky-bottom {
position: fixed; // position: fixed;
bottom: 0; // bottom: 0;
background: @color_main; // background: @color_main;
border-right: 1px solid @color_divider; // border-right: 1px solid @color_divider;
} // }
} }
} }
@ -475,38 +475,38 @@ aside {
// border-bottom: 1px solid @color_divider; // border-bottom: 1px solid @color_divider;
// } // }
.help { // .help {
width: 319px; // - 1px border-roght; 320px; // width: 319px; // - 1px border-roght; 320px;
padding: 14px 0px; // padding: 14px 0px;
text-align: center; // text-align: center;
border-top: 1px solid @color_divider; // border-top: 1px solid @color_divider;
&.fixed { // &.fixed {
position: fixed; // position: fixed;
bottom: 0px; // bottom: 0px;
} // }
a { // a {
color: @color_text_secondary; // color: @color_text_secondary;
font-size: 12px; // font-size: 12px;
display: inline-block; // display: inline-block;
padding: 8px; // padding: 8px;
height: auto; // height: auto;
&:before { // &:before {
.icomoon-chat; // .icomoon-chat;
font-size: 32px; // font-size: 32px;
position: absolute; // position: absolute;
top: 0px; // top: 0px;
left: -26px; // left: -26px;
} // }
&:hover { // &:hover {
background: transparent; // background: transparent;
color: @color_text_primary; // color: @color_text_primary;
} // }
} // }
} // }
.wallet-settings { .wallet-settings {
@ -514,56 +514,56 @@ aside {
.add-account { // .add-account {
position: relative; // position: relative;
padding: 8px 0 8px 20px; // padding: 8px 0 8px 20px;
cursor: pointer; // cursor: pointer;
color: @color_text_secondary; // color: @color_text_secondary;
display: flex; // display: flex;
align-items: center; // align-items: center;
&:before { // &:before {
.icomoon-plus; // .icomoon-plus;
margin-right: 12px; // margin-right: 12px;
} // }
.hover(); // .hover();
&:hover { // &:hover {
color: @color_text_primary; // color: @color_text_primary;
} // }
} // }
.discovery-status { // .discovery-status {
height: 64px; // height: 64px;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: space-evenly; // justify-content: space-evenly;
font-size: 14px; // font-size: 14px;
padding: 16px 28px 16px 30px; // padding: 16px 28px 16px 30px;
white-space: nowrap; // white-space: nowrap;
border-top: 1px solid @color_divider; // border-top: 1px solid @color_divider;
span { // span {
display: block; // display: block;
font-size: 12px; // font-size: 12px;
color: @color_text_secondary; // color: @color_text_secondary;
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
} // }
} // }
.discovery-loading { // .discovery-loading {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
align-items: center; // align-items: center;
font-size: 14px; // font-size: 14px;
padding: 8px 0 8px 22px; // padding: 8px 0 8px 22px;
white-space: nowrap; // white-space: nowrap;
color: @color_text_secondary; // color: @color_text_secondary;
//border-top: 1px solid @color_divider; // //border-top: 1px solid @color_divider;
.loader-circle { // .loader-circle {
margin-right: 14px; // margin-right: 14px;
} // }
} // }
// menu trasitions // menu trasitions