arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00
Code Issues Releases Wiki Activity

notification message can be component, styles adjusted

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-11 12:01:31 +02:00 committed by Szymon Lesisz
parent 2ed673b05a
commit 817b333d3a
4 changed files with 54 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/actions/SendFormActions.js
View File

@ -1,5 +1,6 @@
/* @flow */
import React from 'react';
import Link from 'components/Link';
import TrezorConnect from 'trezor-connect';
import BigNumber from 'bignumber.js';
import * as ACCOUNT from 'actions/constants/account';
@ -513,13 +514,12 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
// reset form
dispatch(init());
dispatch({
type: NOTIFICATION.ADD,
payload: {
type: 'success',
title: 'Transaction success',
message: `<a href="${network.explorer.tx}${txid}" class="green" target="_blank" rel="noreferrer noopener">See transaction detail</a>`,
message: <Link href={`${network.explorer.tx}${txid}`} isGreen>See transaction detail</Link>,
cancelable: true,
actions: [],
},

24
src/components/Notification/index.js
View File

@ -8,7 +8,7 @@ import colors from 'config/colors';
import { getColor, getIcon } from 'utils/notification';
import Icon from 'components/Icon';
import icons from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
import * as NotificationActions from 'actions/NotificationActions';
import Loader from 'components/Loader';
@ -16,7 +16,6 @@ import type { CallbackAction } from 'reducers/NotificationReducer';
import NotificationButton from './components/NotificationButton';
type Props = {
type: string,
cancelable?: boolean;
@ -35,7 +34,6 @@ const Wrapper = styled.div`
background: ${colors.TEXT_SECONDARY};
padding: 24px 48px 24px 24px;
display: flex;
min-height: 90px;
flex-direction: row;
text-align: left;
@ -73,6 +71,10 @@ const Body = styled.div`
`}
`;
const Message = styled.div`
font-size: ${FONT_SIZE.SMALLER};
`;
const Title = styled.div`
padding-bottom: 5px;
font-weight: ${FONT_WEIGHT.BIGGER};
@ -85,10 +87,6 @@ const CloseClick = styled.div`
padding: 20px 10px 0 0;
`;
const Message = styled.div`
font-size: ${FONT_SIZE.SMALLER};
`;
const StyledIcon = styled(Icon)`
position: relative;
top: -7px;
@ -148,11 +146,7 @@ const Notification = (props: Props): React$Element<string> => {
</IconWrapper>
<Texts>
<Title>{ props.title }</Title>
{ props.message && (
<Message>
<p dangerouslySetInnerHTML={{ __html: props.message }} /> { /* eslint-disable-line */ }
</Message>
) }
{ props.message ? <Message>{props.message}</Message> : '' }
</Texts>
</Body>
<AdditionalContent>
@ -174,10 +168,14 @@ const Notification = (props: Props): React$Element<string> => {
};
Notification.propTypes = {
className: PropTypes.string,
type: PropTypes.string.isRequired,
cancelable: PropTypes.bool,
title: PropTypes.string.isRequired,
message: PropTypes.string,
message: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]).isRequired,
actions: PropTypes.arrayOf(PropTypes.object),
close: PropTypes.func,
loading: PropTypes.bool,

2
src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js
View File

@ -33,7 +33,7 @@ const Title = styled.div`
`;
const StyledNotification = styled(Notification)`
border-bottom: 1px solid ${props => getColor(props.type)};
border-bottom: 1px solid ${colors.WHITE};
&:last-child {
border: 0;

78
src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js
View File

@ -24,45 +24,45 @@ class NotificationsGroup extends PureComponent {
}
render() {
const { close } = this.props;
const notifications = [
{
key: 1,
title: 'this is a title of error notification',
type: 'error',
message: 'this is a message of error notification',
},
{
key: 2,
title: 'this is a title of warning notification',
type: 'warning',
message: 'this is a message of warning notification',
},
{
key: 3,
title: 'this is a title of warning notification',
type: 'warning',
message: 'this is a message of warning notification',
},
{
key: 4,
title: 'this is a title of warning notification sds d',
type: 'warning',
message: 'this is a message of warning notification',
},
{
key: 5,
title: 'this is a title of warning notification as',
type: 'info',
message: 'this is a message of warning notification',
},
{
key: 6,
title: 'this is a title of info notification s ',
type: 'info',
message: 'this is a message of info notification',
},
];
const { close, notifications } = this.props;
// const notifications = [
// {
// key: 1,
// title: 'this is a title of error notification',
// type: 'error',
// message: 'this is a message of error notification',
// },
// {
// key: 2,
// title: 'this is a title of warning notification',
// type: 'warning',
// message: 'this is a message of warning notification',
// },
// {
// key: 3,
// title: 'this is a title of warning notification',
// type: 'warning',
// message: 'this is a message of warning notification',
// },
// {
// key: 4,
// title: 'this is a title of warning notification sds d',
// type: 'warning',
// message: 'this is a message of warning notification',
// },
// {
// key: 5,
// title: 'this is a title of warning notification as',
// type: 'info',
// message: 'this is a message of warning notification',
// },
// {
// key: 6,
// title: 'this is a title of info notification s ',
// type: 'info',
// message: 'this is a message of info notification',
// },
// ];
const notificationGroups = this.groupNotifications(notifications);
const sortedNotifications = this.sortByPriority(notificationGroups);