arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-27 08:21:27 +00:00
Code Issues Releases Wiki Activity

added explaining tooltips

Browse Source
This commit is contained in:
Vladimir Volek 2019-04-17 16:42:34 +02:00
parent 7d5b08aa3b
commit dc4efba477
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/Wallet/views/WalletSettings/components/Coins/index.js
View File

@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';
import coins from 'constants/coins'; import coins from 'constants/coins';
import { colors, Switch, CoinLogo } from 'trezor-ui-components'; import { colors, Switch, CoinLogo, Tooltip, Icon, icons as ICONS } from 'trezor-ui-components';
import l10nMessages from '../../index.messages'; import l10nMessages from '../../index.messages';
const Wrapper = styled.div` const Wrapper = styled.div`
@ -13,13 +13,6 @@ const Wrapper = styled.div`
flex-direction: column; flex-direction: column;
`; `;
const Label = styled.div`
display: flex;
padding: 10px 0;
color: ${colors.TEXT_SECONDARY};
align-items: center;
`;
const Row = styled.div` const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -31,6 +24,18 @@ const Content = styled.div`
flex-direction: column; flex-direction: column;
`; `;
const Label = styled.div`
display: flex;
padding: 10px 0;
color: ${colors.TEXT_SECONDARY};
align-items: center;
`;
const TooltipIcon = styled(Icon)`
margin-left: 6px;
cursor: pointer;
`;
const CoinRow = styled.div` const CoinRow = styled.div`
height: 50px; height: 50px;
align-items: center; align-items: center;
@ -74,6 +79,13 @@ const CoinsSettings = (props: Props) => (
<Content> <Content>
<Label> <Label>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} /> <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
<Tooltip
content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
maxWidth={210}
placement="right"
>
<TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
</Tooltip>
</Label> </Label>
{props.networks {props.networks
.filter(network => !network.isHidden) .filter(network => !network.isHidden)
@ -99,6 +111,13 @@ const CoinsSettings = (props: Props) => (
<Content> <Content>
<Label> <Label>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} /> <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
<Tooltip
content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />}
maxWidth={210}
placement="right"
>
<TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
</Tooltip>
</Label> </Label>
{coins {coins
.sort((a, b) => a.order - b.order) .sort((a, b) => a.order - b.order)

2
src/views/Wallet/views/WalletSettings/index.messages.js
View File

@ -26,7 +26,7 @@ const definedMessages: Messages = defineMessages({
}, },
TR_VISIBLE_COINS_EXPLAINED: { TR_VISIBLE_COINS_EXPLAINED: {
id: 'TR_VISIBLE_COINS_EXPLAINED', id: 'TR_VISIBLE_COINS_EXPLAINED',
defaultMessage: 'The changes are saved automatically as they are made', defaultMessage: 'Select a coins which will be visible in wallet',
}, },
}); });