From 2075a416ae192e77d521f5076f58d5c63eaf049e Mon Sep 17 00:00:00 2001 From: James Prado Date: Tue, 7 Nov 2017 01:20:19 -0500 Subject: [PATCH] Animate transaction notifications & fix styles (#305) * Add disclaimer modal to footer * Remove duplicate code & unnecessary styles * Fix formatting noise * remove un-used css style * Fix tslint error & add media query for modals * Nest Media Query * Add react-transition-group * Animate notifications with react-transition-group * Identify issue with notifications getting overridden * Update RTG (react-transition-group) to v2 & identify keys as animation issue * Add unique id on successful transactions for unique keys * update classNames, remove unused import * Revert removing lodash * Remove unnecessary test util * Remove formatting noise * Remove all formatting noise * Update CSS & Change notification unique id * Add unique id for each notification --- .../actions/notifications/actionCreators.ts | 3 +- common/actions/notifications/actionTypes.ts | 1 + .../containers/TabSection/Notifications.scss | 22 + .../containers/TabSection/Notifications.tsx | 34 +- .../containers/Tabs/SendTransaction/index.tsx | 16 +- common/sass/styles/overrides/buttons.scss | 1 - package-lock.json | 2892 ++++++++++++----- package.json | 1 + 8 files changed, 2152 insertions(+), 818 deletions(-) diff --git a/common/actions/notifications/actionCreators.ts b/common/actions/notifications/actionCreators.ts index c439c65d..75c0a735 100644 --- a/common/actions/notifications/actionCreators.ts +++ b/common/actions/notifications/actionCreators.ts @@ -13,7 +13,8 @@ export function showNotification( payload: { level, msg, - duration + duration, + id: Math.random() } }; } diff --git a/common/actions/notifications/actionTypes.ts b/common/actions/notifications/actionTypes.ts index 939cc1af..16de73a2 100644 --- a/common/actions/notifications/actionTypes.ts +++ b/common/actions/notifications/actionTypes.ts @@ -7,6 +7,7 @@ export type INFINITY = 'infinity'; export interface Notification { level: NOTIFICATION_LEVEL; msg: ReactElement | string; + id: number; duration?: number | INFINITY; } diff --git a/common/containers/TabSection/Notifications.scss b/common/containers/TabSection/Notifications.scss index bb49e4c7..ae5d0459 100644 --- a/common/containers/TabSection/Notifications.scss +++ b/common/containers/TabSection/Notifications.scss @@ -142,3 +142,25 @@ } } } + +.NotificationAnimation{ + &-enter { + opacity: 0.01; + &-active { + opacity: 1; + transition: opacity 500ms; + } + } +} + +.NotificationAnimation{ + &-exit { + opacity: 1; + transform: none; + &-active { + opacity: 0.01; + transform: translateY(100%); + transition: opacity 500ms, transform 500ms; + } + } +} \ No newline at end of file diff --git a/common/containers/TabSection/Notifications.tsx b/common/containers/TabSection/Notifications.tsx index d768df22..3b560eea 100644 --- a/common/containers/TabSection/Notifications.tsx +++ b/common/containers/TabSection/Notifications.tsx @@ -5,6 +5,7 @@ import { } from 'actions/notifications'; import React from 'react'; import { connect } from 'react-redux'; +import { TransitionGroup, CSSTransition } from 'react-transition-group'; import NotificationRow from './NotificationRow'; import './Notifications.scss'; @@ -12,21 +13,30 @@ interface Props { notifications: Notification[]; closeNotification: TCloseNotification; } + +const Transition = props => ( + +); + export class Notifications extends React.Component { public render() { - if (!this.props.notifications.length) { - return null; - } return ( -
- {this.props.notifications.map((n, i) => ( - - ))} -
+ + {this.props.notifications.map(n => { + return ( + + + + ); + })} + ); } } diff --git a/common/containers/Tabs/SendTransaction/index.tsx b/common/containers/Tabs/SendTransaction/index.tsx index d6c28078..befa1e7b 100644 --- a/common/containers/Tabs/SendTransaction/index.tsx +++ b/common/containers/Tabs/SendTransaction/index.tsx @@ -307,14 +307,14 @@ export class SendTransaction extends React.Component { onChange={readOnly ? void 0 : this.onGasChange} /> {(offline || forceOffline) && ( -
- -
- )} +
+ +
+ )} {unit === 'ether' && (