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

Added arrow icon

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-26 23:36:43 +02:00
parent ae1a40bf3e
commit ea27662fc1
2 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Notification/NotificationGroups/components/Group/index.js
View File

@ -1,22 +1,31 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import colors from 'config/colors';
import { Notification } from 'components/Notification';
import { getIcon } from 'utils/notification';
import { getIcon, getColor } from 'utils/notification';
const Wrapper = styled.div``;
const Header = styled.div`
display: flex;
cursor: pointer;
justify-content: space-between;
background: ${colors.WHITE};
justify-content: flex-start;
align-items: center;
padding: 5px 10px;
border-bottom: 1px solid ${colors.BACKGROUND};
`;
const Left = styled.div`
display: flex;
justify-content: flex-start;
align-items: center;
`;
const Right = styled.div``;
const Body = styled.div``;
const Title = styled.div`
@ -47,20 +56,32 @@ class Group extends Component {
}
render() {
const { type, groupNotifications, color } = this.props;
const { type, groupNotifications } = this.props;
const color = getColor(type);
return (
<Wrapper>
{groupNotifications.length > 1 && (
<Header onClick={this.toggle}>
<Icon
color={color}
size={30}
icon={getIcon(type)}
/>
<Title
color={color}
>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
</Title>
<Left>
<Icon
color={color}
size={30}
icon={getIcon(type)}
/>
<Title
color={color}
>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
</Title>
</Left>
<Right>
<Icon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
isActive={this.state.visible}
canAnimate
/>
</Right>
</Header>
)}
<Body>

19
src/components/Notification/NotificationGroups/index.js
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import { getColor } from 'utils/notification';
import { PRIORITY } from 'constants/notifications';
import Group from './components/Group';
@ -22,14 +21,15 @@ class NotificationsGroup extends Component {
];
}
groupNotifications = notifications => notifications.reduce((acc, obj) => {
const key = obj.type;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
groupNotifications = notifications => notifications
.reduce((acc, obj) => {
const key = obj.type;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
sortByPriority(notifications) {
return notifications;
@ -45,7 +45,6 @@ class NotificationsGroup extends Component {
{Object.keys(sortedNotifications).map(group => (
<Group
groupNotifications={notificationGroups[group]}
color={getColor(group)}
type={group}
/>
))}