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

Finalized notifiction refactor

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-29 15:48:05 +02:00
parent a7726081f2
commit 5a3bb77fb0
2 changed files with 29 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,8 +19,6 @@ const Wrapper = styled.div`
padding: 24px 48px 24px 24px; padding: 24px 48px 24px 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align: left; text-align: left;
${props => props.type === 'info' && css` ${props => props.type === 'info' && css`
@ -45,12 +43,13 @@ const Wrapper = styled.div`
`; `;
const Body = styled.div` const Body = styled.div`
flex: 1;
display: flex; display: flex;
margin-right: 40px; margin-right: 40px;
flex: 1;
`; `;
const Title = styled.div` const Title = styled.div`
padding-bottom: 5px;
font-weight: ${FONT_WEIGHT.BIGGER}; font-weight: ${FONT_WEIGHT.BIGGER};
`; `;
@ -64,20 +63,25 @@ const CloseClick = styled.div`
`; `;
const Message = styled.div` const Message = styled.div`
padding: 5px 0 0 0;
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};
`; `;
const IconContent = styled.div`
padding-right: 5px;
`;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; position: relative;
top: -7px; top: -7px;
`; `;
const MessageContent = styled.div``; const MessageContent = styled.div`
height: 20px;
display: flex;
`;
const Texts = styled.div`
display: flex;
flex-direction: column;
`;
const AdditionalContent = styled.div``;
export const Notification = (props: NProps): React$Element<string> => { export const Notification = (props: NProps): React$Element<string> => {
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
@ -117,25 +121,25 @@ export const Notification = (props: NProps): React$Element<string> => {
</CloseClick> </CloseClick>
)} )}
<Body> <Body>
<IconContent> <MessageContent>
<StyledIcon <StyledIcon
color={getIconColor(props.className)} color={getIconColor(props.className)}
icon={icons[props.className.toUpperCase()]} icon={icons[props.className.toUpperCase()]}
/> />
</IconContent> <Texts>
<MessageContent> <Title>{ props.title }</Title>
<Title>{ props.title }</Title> { props.message && (
{ props.message && ( <Message>
<Message> <p dangerouslySetInnerHTML={{ __html: props.message }} />
<p dangerouslySetInnerHTML={{ __html: props.message }} /> </Message>
</Message> ) }
) } </Texts>
</MessageContent> </MessageContent>
</Body> </Body>
{props.actions && props.actions.length > 0 && ( <AdditionalContent>
<ActionContent> {props.actions && props.actions.length > 0 && (
{props.actions <ActionContent>
.map(action => ( {props.actions.map(action => (
<NotificationButton <NotificationButton
key={action.label} key={action.label}
type={props.className} type={props.className}
@ -143,8 +147,9 @@ export const Notification = (props: NProps): React$Element<string> => {
onClick={() => { close(); action.callback(); }} onClick={() => { close(); action.callback(); }}
/> />
))} ))}
</ActionContent> </ActionContent>
)} )}
</AdditionalContent>
</Wrapper> </Wrapper>
); );
}; };

42
src/views/Wallet/views/Dashboard/index.js
View File

@ -2,8 +2,6 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Notification } from 'components/Notification';
import { H2 } from 'components/Heading'; import { H2 } from 'components/Heading';
import DashboardImg from 'images/dashboard.png'; import DashboardImg from 'images/dashboard.png';
@ -34,46 +32,6 @@ const P = styled.p`
const Dashboard = () => ( const Dashboard = () => (
<Wrapper> <Wrapper>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Config files are missing"
className="error"
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Config files are missing"
className="warning"
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Config files are missing"
className="success"
cancelable={false}
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Description hahahah aloglg lfkdlfkdlfk"
className="info"
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<StyledH2>Dashboard</StyledH2> <StyledH2>Dashboard</StyledH2>
<Row> <Row>
<H2>Please select your coin</H2> <H2>Please select your coin</H2>