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 */ /* @flow */
import React from 'react';
import Link from 'components/Link';
import TrezorConnect from 'trezor-connect'; import TrezorConnect from 'trezor-connect';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import * as ACCOUNT from 'actions/constants/account'; import * as ACCOUNT from 'actions/constants/account';
@ -513,13 +514,12 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
// reset form // reset form
dispatch(init()); dispatch(init());
dispatch({ dispatch({
type: NOTIFICATION.ADD, type: NOTIFICATION.ADD,
payload: { payload: {
type: 'success', type: 'success',
title: 'Transaction 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, cancelable: true,
actions: [], 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 { getColor, getIcon } from 'utils/notification';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import icons from 'config/icons'; 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 * as NotificationActions from 'actions/NotificationActions';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
@ -16,7 +16,6 @@ import type { CallbackAction } from 'reducers/NotificationReducer';
import NotificationButton from './components/NotificationButton'; import NotificationButton from './components/NotificationButton';
type Props = { type Props = {
type: string, type: string,
cancelable?: boolean; cancelable?: boolean;
@ -35,7 +34,6 @@ const Wrapper = styled.div`
background: ${colors.TEXT_SECONDARY}; background: ${colors.TEXT_SECONDARY};
padding: 24px 48px 24px 24px; padding: 24px 48px 24px 24px;
display: flex; display: flex;
min-height: 90px;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
@ -73,6 +71,10 @@ const Body = styled.div`
`} `}
`; `;
const Message = styled.div`
font-size: ${FONT_SIZE.SMALLER};
`;
const Title = styled.div` const Title = styled.div`
padding-bottom: 5px; padding-bottom: 5px;
font-weight: ${FONT_WEIGHT.BIGGER}; font-weight: ${FONT_WEIGHT.BIGGER};
@ -85,10 +87,6 @@ const CloseClick = styled.div`
padding: 20px 10px 0 0; padding: 20px 10px 0 0;
`; `;
const Message = styled.div`
font-size: ${FONT_SIZE.SMALLER};
`;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; position: relative;
top: -7px; top: -7px;
@ -148,11 +146,7 @@ const Notification = (props: Props): React$Element<string> => {
</IconWrapper> </IconWrapper>
<Texts> <Texts>
<Title>{ props.title }</Title> <Title>{ props.title }</Title>
{ props.message && ( { props.message ? <Message>{props.message}</Message> : '' }
<Message>
<p dangerouslySetInnerHTML={{ __html: props.message }} /> { /* eslint-disable-line */ }
</Message>
) }
</Texts> </Texts>
</Body> </Body>
<AdditionalContent> <AdditionalContent>
@ -174,10 +168,14 @@ const Notification = (props: Props): React$Element<string> => {
}; };
Notification.propTypes = { Notification.propTypes = {
className: PropTypes.string,
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
cancelable: PropTypes.bool, cancelable: PropTypes.bool,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
message: PropTypes.string, message: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]).isRequired,
actions: PropTypes.arrayOf(PropTypes.object), actions: PropTypes.arrayOf(PropTypes.object),
close: PropTypes.func, close: PropTypes.func,
loading: PropTypes.bool, 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)` const StyledNotification = styled(Notification)`
border-bottom: 1px solid ${props => getColor(props.type)}; border-bottom: 1px solid ${colors.WHITE};
&:last-child { &:last-child {
border: 0; border: 0;

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

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