arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-06-05 15:48:47 +00:00
Code Issues Releases Wiki Activity

Separate animations

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-25 18:49:21 +02:00
parent a2d7916d9f
commit 39de4ad932
3 changed files with 72 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/js/components/Loader/index.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import styled, { css, keyframes } from 'styled-components'; import styled, { css, keyframes } from 'styled-components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Paragraph from 'components/Paragraph'; import Paragraph from 'components/Paragraph';
import { DASH, GREEN_COLOR } from 'config/animations';
import colors from 'config/colors'; import colors from 'config/colors';
const Wrapper = styled.div` const Wrapper = styled.div`
@ -21,36 +22,6 @@ const SvgWrapper = styled.svg`
transform-origin: center center; transform-origin: center center;
`; `;
const animationDash = keyframes`
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
`;
const animationColor = keyframes`
100%, 0% {
stroke: ${colors.GREEN_PRIMARY};
}
40% {
stroke: ${colors.GREEN_PRIMARY};
}
66% {
stroke: ${colors.GREEN_SECONDARY};
}
80%, 90% {
stroke: ${colors.GREEN_TERTIARY};
}
`;
const CircleWrapper = styled.circle` const CircleWrapper = styled.circle`
${props => props.isRoute && css` ${props => props.isRoute && css`
stroke: ${colors.GRAY_LIGHT}; stroke: ${colors.GRAY_LIGHT};
@ -59,7 +30,7 @@ const CircleWrapper = styled.circle`
${props => props.isPath && css` ${props => props.isPath && css`
stroke-dasharray: 1, 200; stroke-dasharray: 1, 200;
stroke-dashoffset: 0; stroke-dashoffset: 0;
animation: ${animationDash} 1.5s ease-in-out infinite, ${animationColor} 6s ease-in-out infinite; animation: ${DASH} 1.5s ease-in-out infinite, ${GREEN_COLOR} 6s ease-in-out infinite;
stroke-linecap: round; stroke-linecap: round;
`}; `};
`; `;

42
src/js/config/animations.js Normal file
View File

@ -0,0 +1,42 @@
import { keyframes } from 'styled-components';
import colors from 'config/colors';
export const ROTATE_180_UP = keyframes`
from { transform: rotate(0deg) }
to { transform: rotate(180deg) }
`;
export const ROTATE_180_DOWN = keyframes`
from { transform: rotate(180deg) }
to { transform: rotate(0deg) }
`;
export const DASH = keyframes`
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
`;
export const GREEN_COLOR = keyframes`
100%, 0% {
stroke: ${colors.GREEN_PRIMARY};
}
40% {
stroke: ${colors.GREEN_PRIMARY};
}
66% {
stroke: ${colors.GREEN_SECONDARY};
}
80%, 90% {
stroke: ${colors.GREEN_TERTIARY};
}
`;

74
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -150,53 +150,35 @@ export class DeviceDropdown extends Component<Props> {
if (!a.instance || !b.instance) return -1; if (!a.instance || !b.instance) return -1;
return a.instance > b.instance ? 1 : -1; return a.instance > b.instance ? 1 : -1;
}; };
const deviceList = devices.sort(sortByInstance).map((dev, index) => {
if (dev === selected) return null;
let deviceStatus: string = 'Connected'; const deviceList = devices.sort(sortByInstance)
let css: string = 'device item'; .map((dev, index) => {
if (dev.type === 'unacquired' || (dev.features && dev.status === 'occupied')) { if (dev === selected) return null;
deviceStatus = 'Used in other window'; return (
css += ' unacquired'; <DeviceHeader
} else if (dev.type === 'unreadable') { key={`${dev.instanceLabel}`}
deviceStatus = 'Connected'; onClickWrapper={() => this.props.onSelectDevice(dev)}
css += ' connected'; onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
} else if (!dev.connected) { icon={(
deviceStatus = 'Disconnected'; <IconClick onClick={(event) => {
css += ' disconnected'; event.stopPropagation();
} else if (!dev.available) { event.preventDefault();
deviceStatus = 'Unavailable'; this.onDeviceMenuClick({ type: 'forget', label: '' }, dev);
css += ' unavailable'; }}
} >
<Icon
if (dev.features && dev.features.major_version > 1) { icon={icons.EJECT}
css += ' trezor-t'; size={25}
} color={colors.TEXT_SECONDARY}
/>
return ( </IconClick>
<DeviceHeader )}
onClickWrapper={() => this.props.onSelectDevice(dev)} label={dev.instanceLabel}
onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)} status={getStatus(dev)}
icon={( trezorModel={getVersion(dev)}
<IconClick onClick={(event) => { />
event.stopPropagation(); );
event.preventDefault(); });
this.onDeviceMenuClick({ type: 'forget', label: '' }, dev);
}}
>
<Icon
icon={icons.EJECT}
size={25}
color={colors.TEXT_SECONDARY}
/>
</IconClick>
)}
label={dev.instanceLabel}
status={getStatus(dev)}
trezorModel={getVersion(dev)}
/>
);
});
return ( return (
<Wrapper> <Wrapper>