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
This commit is contained in:
parent
4ee38eccc0
commit
2075a416ae
|
@ -13,7 +13,8 @@ export function showNotification(
|
||||||
payload: {
|
payload: {
|
||||||
level,
|
level,
|
||||||
msg,
|
msg,
|
||||||
duration
|
duration,
|
||||||
|
id: Math.random()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@ export type INFINITY = 'infinity';
|
||||||
export interface Notification {
|
export interface Notification {
|
||||||
level: NOTIFICATION_LEVEL;
|
level: NOTIFICATION_LEVEL;
|
||||||
msg: ReactElement<any> | string;
|
msg: ReactElement<any> | string;
|
||||||
|
id: number;
|
||||||
duration?: number | INFINITY;
|
duration?: number | INFINITY;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -5,6 +5,7 @@ import {
|
||||||
} from 'actions/notifications';
|
} from 'actions/notifications';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
||||||
import NotificationRow from './NotificationRow';
|
import NotificationRow from './NotificationRow';
|
||||||
import './Notifications.scss';
|
import './Notifications.scss';
|
||||||
|
|
||||||
|
@ -12,21 +13,30 @@ interface Props {
|
||||||
notifications: Notification[];
|
notifications: Notification[];
|
||||||
closeNotification: TCloseNotification;
|
closeNotification: TCloseNotification;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Transition = props => (
|
||||||
|
<CSSTransition
|
||||||
|
{...props}
|
||||||
|
classNames="NotificationAnimation"
|
||||||
|
timeout={{ enter: 500, exit: 500 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
export class Notifications extends React.Component<Props, {}> {
|
export class Notifications extends React.Component<Props, {}> {
|
||||||
public render() {
|
public render() {
|
||||||
if (!this.props.notifications.length) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div className="Notifications">
|
<TransitionGroup className="Notifications">
|
||||||
{this.props.notifications.map((n, i) => (
|
{this.props.notifications.map(n => {
|
||||||
<NotificationRow
|
return (
|
||||||
key={`${n.level}-${i}`}
|
<Transition key={n.id}>
|
||||||
notification={n}
|
<NotificationRow
|
||||||
onClose={this.props.closeNotification}
|
notification={n}
|
||||||
/>
|
onClose={this.props.closeNotification}
|
||||||
))}
|
/>
|
||||||
</div>
|
</Transition>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TransitionGroup>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -307,14 +307,14 @@ export class SendTransaction extends React.Component<Props, State> {
|
||||||
onChange={readOnly ? void 0 : this.onGasChange}
|
onChange={readOnly ? void 0 : this.onGasChange}
|
||||||
/>
|
/>
|
||||||
{(offline || forceOffline) && (
|
{(offline || forceOffline) && (
|
||||||
<div>
|
<div>
|
||||||
<NonceField
|
<NonceField
|
||||||
value={nonce}
|
value={nonce}
|
||||||
onChange={this.onNonceChange}
|
onChange={this.onNonceChange}
|
||||||
placeholder={'0'}
|
placeholder={'0'}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{unit === 'ether' && (
|
{unit === 'ether' && (
|
||||||
<DataField
|
<DataField
|
||||||
value={data}
|
value={data}
|
||||||
|
|
|
@ -88,7 +88,6 @@
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -32,6 +32,7 @@
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-router-redux": "^4.0.8",
|
"react-router-redux": "^4.0.8",
|
||||||
|
"react-transition-group": "^2.2.1",
|
||||||
"redux": "^3.6.0",
|
"redux": "^3.6.0",
|
||||||
"redux-form": "^6.6.3",
|
"redux-form": "^6.6.3",
|
||||||
"redux-logger": "^3.0.1",
|
"redux-logger": "^3.0.1",
|
||||||
|
|
Loading…
Reference in New Issue