arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

Refactor components/styles

Browse Source
pull/3/head
Vasek Mlejnsky 6 years ago
parent 2d9bad285b
commit 5701555117
5 changed files with 217 additions and 103 deletions
Show Stats Download Patch File Download Diff File

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

@ -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',

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

@ -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>
);
}
}

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

@ -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>
);
}

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

@ -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}

172
src/styles/aside.less
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save