arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-02 21:28:12 +00:00
Code Issues Releases Wiki Activity

Make notification responsive, flow fix

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-11 12:21:24 +02:00 committed by Szymon Lesisz
parent 817b333d3a
commit 077b6dc7fa
4 changed files with 51 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/actions/NotificationActions.js
View File

@ -1,6 +1,5 @@
/* @flow */
import * as React from 'react';
import * as NOTIFICATION from 'actions/constants/notification';
import type {
@ -13,7 +12,7 @@ export type NotificationAction = {
payload: {
+type: string,
+title: string,
+message?: string,
+message?: React.Node | string,
+cancelable: boolean,
actions?: Array<CallbackAction>
}

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

@ -1,8 +1,6 @@
/* @flow */
import * as React from 'react';
import PropTypes from 'prop-types';
import media from 'styled-media-query';
import styled, { css } from 'styled-components';
import colors from 'config/colors';
import { getColor, getIcon } from 'utils/notification';
@ -20,7 +18,7 @@ type Props = {
type: string,
cancelable?: boolean;
title: string;
className: string;
className?: string;
message?: string;
actions?: Array<CallbackAction>;
close?: typeof NotificationActions.close,
@ -36,6 +34,8 @@ const Wrapper = styled.div`
display: flex;
flex-direction: row;
text-align: left;
justify-content: center;
align-items: center;
${props => props.type === 'info' && css`
color: ${colors.INFO_PRIMARY};
@ -56,19 +56,10 @@ const Wrapper = styled.div`
color: ${colors.ERROR_PRIMARY};
background: ${colors.ERROR_SECONDARY};
`}
${media.lessThan('610px')`
flex-direction: column;
`}
`;
const Body = styled.div`
display: flex;
width: 60%;
${media.lessThan('610px')`
width: 100%;
`}
`;
const Message = styled.div`
@ -77,6 +68,7 @@ const Message = styled.div`
const Title = styled.div`
padding-bottom: 5px;
line-height: 12px;
font-weight: ${FONT_WEIGHT.BIGGER};
`;
@ -99,6 +91,7 @@ const IconWrapper = styled.div`
const Texts = styled.div`
display: flex;
padding: 0 10px 0 0;
flex-direction: column;
flex: 1;
`;
@ -114,12 +107,6 @@ const ActionContent = styled.div`
display: flex;
justify-content: right;
align-items: flex-end;
${media.lessThan('610px')`
width: 100%;
padding: 10px 0 0 30px;
align-items: flex-start;
`}
`;
const Notification = (props: Props): React$Element<string> => {
@ -167,18 +154,4 @@ 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.oneOfType([
PropTypes.string,
PropTypes.element,
]).isRequired,
actions: PropTypes.arrayOf(PropTypes.object),
close: PropTypes.func,
loading: PropTypes.bool,
};
export default Notification;

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

@ -24,45 +24,50 @@ class NotificationsGroup extends PureComponent {
}
render() {
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 { 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',
actions:
[{
label: 'Update',
callback: 'props.routerActions.gotoBridgeUpdate',
}],
},
];
const notificationGroups = this.groupNotifications(notifications);
const sortedNotifications = this.sortByPriority(notificationGroups);

1
src/views/Wallet/views/FirmwareUpdate/index.js
View File

@ -3,7 +3,6 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { H1 } from 'components/Heading';