mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Refactor components/styles
This commit is contained in:
parent
2d9bad285b
commit
5701555117
@ -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',
|
||||
|
@ -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 (
|
||||
// <div>
|
||||
// Hello
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
const AccountMenu = (props: Props): ?React$Element<string> => {
|
||||
const selected = props.wallet.selectedDevice;
|
||||
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 (
|
||||
<NavLink
|
||||
to={url}
|
||||
@ -147,9 +223,18 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
|
||||
const lastAccount = deviceAccounts[deviceAccounts.length - 1];
|
||||
if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) {
|
||||
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
|
||||
</div>
|
||||
</AddAccountWrapper>
|
||||
);
|
||||
} else {
|
||||
const tooltip = (
|
||||
@ -171,16 +256,21 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
|
||||
}
|
||||
} else if (!selected.connected || !selected.available) {
|
||||
discoveryStatus = (
|
||||
<div className="discovery-status">
|
||||
<DiscoveryStatusWrapper>
|
||||
Accounts could not be loaded
|
||||
<span>{`Connect ${selected.instanceLabel} device`}</span>
|
||||
</div>
|
||||
<DiscoveryStatusText>
|
||||
{`Connect ${selected.instanceLabel} device`}
|
||||
</DiscoveryStatusText>
|
||||
</DiscoveryStatusWrapper>
|
||||
);
|
||||
} else {
|
||||
discoveryStatus = (
|
||||
<div className="discovery-loading">
|
||||
<Loader size="20" /> Loading accounts...
|
||||
</div>
|
||||
<DiscoveryLoadingWrapper>
|
||||
<Loader size="20" />
|
||||
<DiscoveryLoadingText>
|
||||
Loading accounts...
|
||||
</DiscoveryLoadingText>
|
||||
</DiscoveryLoadingWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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<Props> {
|
||||
// Class variables.
|
||||
currentScrollY: number = 0;
|
||||
@ -136,12 +144,11 @@ export default class StickyContainer extends React.PureComponent<Props> {
|
||||
onTouchMove={this.handleScroll}
|
||||
onTouchEnd={this.handleScroll}
|
||||
>
|
||||
<div
|
||||
className="sticky-container"
|
||||
<StickyContainerWrapper
|
||||
ref={node => this.wrapper = node}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</StickyContainerWrapper>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
@ -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 (
|
||||
<TransitionGroupWrapper component="div" className="transition-container">
|
||||
<CSSTransition
|
||||
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'))}
|
||||
in
|
||||
out
|
||||
classNames={this.state.animationType}
|
||||
appear={false}
|
||||
timeout={300}
|
||||
timeout={30000}
|
||||
in
|
||||
out
|
||||
>
|
||||
<TransitionContentWrapper>
|
||||
{children}
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user