arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-26 23:32:30 +00:00
Code Issues Releases Wiki Activity

Styled notification content

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-29 12:07:47 +02:00
parent 59ce098c92
commit 8b519544d7
4 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Icon/index.js
View File

@ -28,9 +28,10 @@ const SvgWrapper = styled.svg`
const Path = styled.path``; const Path = styled.path``;
const Icon = ({ const Icon = ({
icon, size = 32, color = 'black', isActive, canAnimate, icon, size = 32, color = 'black', isActive, canAnimate, className,
}) => ( }) => (
<SvgWrapper <SvgWrapper
className={className}
canAnimate={canAnimate} canAnimate={canAnimate}
isActive={isActive} isActive={isActive}
style={{ style={{
@ -53,6 +54,7 @@ const Icon = ({
); );
Icon.propTypes = { Icon.propTypes = {
className: PropTypes.string,
canAnimate: PropTypes.bool, canAnimate: PropTypes.bool,
icon: PropTypes.arrayOf(PropTypes.string).isRequired, icon: PropTypes.arrayOf(PropTypes.string).isRequired,
size: PropTypes.number, size: PropTypes.number,

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

@ -1,8 +1,4 @@
/* @flow */
import React from 'react'; import React from 'react';
import { H2 } from 'components/Heading';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
@ -10,33 +6,17 @@ import colors from 'config/colors';
import Button from 'components/Button'; import Button from 'components/Button';
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 * as NOTIFICATION from 'actions/constants/notification'; import * as NOTIFICATION from 'actions/constants/notification';
import * as NotificationActions from 'actions/NotificationActions'; import * as NotificationActions from 'actions/NotificationActions';
import type { Action, State, Dispatch } from 'flowtype';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
type Props = {
notifications: $ElementType<State, 'notifications'>,
close: (notif?: any) => Action
}
type NProps = {
key?: number;
className: string;
cancelable?: boolean;
title: string;
message?: string;
actions?: Array<any>;
close?: typeof NotificationActions.close,
loading?: boolean
}
const Wrapper = styled.div` const Wrapper = styled.div`
position: relative; position: relative;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
background: ${colors.TEXT_SECONDARY}; background: ${colors.TEXT_SECONDARY};
padding: 24px 48px 24px 80px; padding: 24px 48px 24px 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -66,14 +46,33 @@ const Wrapper = styled.div`
const Body = styled.div` const Body = styled.div`
flex: 1; flex: 1;
margin-right: 24px; display: flex;
margin-right: 40px;
`; `;
const ActionContent = styled.div` const Title = styled.div`
font-weight: ${FONT_WEIGHT.BIGGER};
`; `;
const ActionContent = styled.div``;
const CloseClick = styled.div``; const CloseClick = styled.div``;
const Message = styled.div`
padding: 5px 0 0 0;
font-size: ${FONT_SIZE.SMALLER};
`;
const IconContent = styled.div`
padding-right: 5px;
`;
const StyledIcon = styled(Icon)`
position: relative;
top: -6px;
`;
const MessageContent = 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
@ -101,31 +100,38 @@ export const Notification = (props: NProps): React$Element<string> => {
return ( return (
<Wrapper type={props.className}> <Wrapper type={props.className}>
{ props.cancelable && ( {props.loading && <Loader size={50} /> }
{props.cancelable && (
<CloseClick onClick={() => close()}> <CloseClick onClick={() => close()}>
<Icon icon={icons.CLOSE} size={25} /> <Icon icon={icons.CLOSE} size={25} />
</CloseClick> </CloseClick>
) )}
}
<Body> <Body>
<H2>{ props.title }</H2> <IconContent>
{ props.message && <p dangerouslySetInnerHTML={{ __html: props.message }} /> } <StyledIcon icon={icons[props.className.toUpperCase()]} />
</IconContent>
<MessageContent>
<Title>{ props.title }</Title>
{ props.message && (
<Message>
<p dangerouslySetInnerHTML={{ __html: props.message }} />
</Message>
) }
</MessageContent>
</Body> </Body>
{ props.actions && props.actions.length > 0 && ( {props.actions && props.actions.length > 0 && (
<ActionContent> <ActionContent>
{props.actions {props.actions
.map(action => ( .map(action => (
<Button <Button
key={action.label}
color={getButtonColor(props.className)} color={getButtonColor(props.className)}
text={action.label} text={action.label}
onClick={() => { close(); action.callback(); }} onClick={() => { close(); action.callback(); }}
/> />
))} ))}
</ActionContent> </ActionContent>
) )}
}
{ props.loading && <Loader size={50} /> }
</Wrapper> </Wrapper>
); );
}; };

9
src/config/icons.js
View File

@ -36,6 +36,15 @@ export default {
WARNING: [ WARNING: [
'M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z', 'M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z',
], ],
INFO: [
'M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM507.904 300.192c27.008 0 48.992 21.984 48.992 49.088 0 27.296-21.984 49.472-48.992 49.472-27.264 0-49.536-22.176-49.536-49.472 0-27.552 21.728-49.088 49.536-49.088zM586.656 660.8c0 10.304-4.96 15.328-15.264 15.328h-126.464c-10.304 0-15.328-5.024-15.328-15.328v-32.256c0-10.304 5.024-15.264 15.328-15.264h23.36v-136.064h-23.872c-10.304 0-15.264-5.024-15.264-15.328v-32.224c0-10.304 4.96-15.264 15.264-15.264h88.288c10.304 0 15.264 4.96 15.264 15.264v183.648h23.424c10.304 0 15.264 4.96 15.264 15.264v32.224z',
],
ERROR: [
'M693.12 330.88c-46.317-46.267-110.276-74.88-180.919-74.88-141.385 0-256 114.615-256 256s114.615 256 256 256c70.642 0 134.602-28.613 180.921-74.882l-0.002 0.002c46.387-46.337 75.081-110.377 75.081-181.12s-28.694-134.783-75.079-181.118l-0.002-0.002zM494.080 344.32h53.12c16 0 18.24 9.28 18.24 14.72v10.24l-10.88 194.56c0 14.4-8 17.28-18.88 17.28h-28.16c-10.56 0-17.28-2.88-18.88-17.92l-10.88-193.92v-10.56c-1.28-4.8 2.24-14.080 16.32-14.080zM521.28 717.76c-0.095 0.001-0.207 0.001-0.319 0.001-27.747 0-50.24-22.493-50.24-50.24s22.493-50.24 50.24-50.24c27.747 0 50.24 22.493 50.24 50.24 0 0.112 0 0.224-0.001 0.336v-0.017c0 0 0 0.001 0 0.001 0 27.634-22.311 50.057-49.903 50.239h-0.017z',
],
SUCCESS: [
'M692.8 313.92l-1.92-1.92c-6.246-7.057-15.326-11.484-25.44-11.484s-19.194 4.427-25.409 11.448l-0.031 0.036-196.48 224-3.84 1.6-3.84-1.92-48.64-57.28c-7.010-7.905-17.193-12.862-28.533-12.862-21.031 0-38.080 17.049-38.080 38.080 0 7.495 2.165 14.485 5.905 20.377l-0.092-0.155 100.8 148.16c5.391 8.036 14.386 13.292 24.618 13.44h8.662c17.251-0.146 32.385-9.075 41.163-22.529l0.117-0.191 195.2-296.32c4.473-6.632 7.141-14.803 7.141-23.597 0-11.162-4.297-21.32-11.326-28.911l0.025 0.028z',
],
}; };
/* /*

11
src/styles/notification.less
View File

@ -23,17 +23,6 @@
} }
} }
// &.info {
// .notification-action button {
// border: 1px solid @color_info_primary;
// color: @color_info_primary;
// &:hover {
// color: @color_white;
// background: @color_info_primary;
// }
// }
// }
&.success { &.success {
.notification-action button { .notification-action button {