arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-24 16:08:11 +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 PropTypes from 'prop-types';
import Paragraph from 'components/Paragraph';
import { DASH, GREEN_COLOR } from 'config/animations';
import colors from 'config/colors';
const Wrapper = styled.div`
@ -21,36 +22,6 @@ const SvgWrapper = styled.svg`
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`
${props => props.isRoute && css`
stroke: ${colors.GRAY_LIGHT};
@ -59,7 +30,7 @@ const CircleWrapper = styled.circle`
${props => props.isPath && css`
stroke-dasharray: 1, 200;
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;
`};
`;

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;
return a.instance > b.instance ? 1 : -1;
};
const deviceList = devices.sort(sortByInstance).map((dev, index) => {
if (dev === selected) return null;
let deviceStatus: string = 'Connected';
let css: string = 'device item';
if (dev.type === 'unacquired' || (dev.features && dev.status === 'occupied')) {
deviceStatus = 'Used in other window';
css += ' unacquired';
} else if (dev.type === 'unreadable') {
deviceStatus = 'Connected';
css += ' connected';
} else if (!dev.connected) {
deviceStatus = 'Disconnected';
css += ' disconnected';
} else if (!dev.available) {
deviceStatus = 'Unavailable';
css += ' unavailable';
}
if (dev.features && dev.features.major_version > 1) {
css += ' trezor-t';
}
return (
<DeviceHeader
onClickWrapper={() => this.props.onSelectDevice(dev)}
onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
icon={(
<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)}
/>
);
});
const deviceList = devices.sort(sortByInstance)
.map((dev, index) => {
if (dev === selected) return null;
return (
<DeviceHeader
key={`${dev.instanceLabel}`}
onClickWrapper={() => this.props.onSelectDevice(dev)}
onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
icon={(
<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 (
<Wrapper>