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

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

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