1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-27 02:38:18 +00:00

smaller switch in settings, add show all

This commit is contained in:
Vladimir Volek 2019-04-23 14:35:07 +02:00
parent bbabdca732
commit ee9ebd2916
4 changed files with 61 additions and 17 deletions

View File

@ -380,6 +380,8 @@ export const handleCoinVisibility = (
}); });
}; };
// export const handleAllCoinsVisibility => ();
export const getHiddenCoins = (): Array<string> => { export const getHiddenCoins = (): Array<string> => {
const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS); const coinsConfig: ?string = storageUtils.get(TYPE, KEY_HIDDEN_COINS);
if (coinsConfig) { if (coinsConfig) {

View File

@ -23,6 +23,7 @@ type DispatchProps = {|
setLocalCurrency: typeof WalletActions.setLocalCurrency, setLocalCurrency: typeof WalletActions.setLocalCurrency,
setHideBalance: typeof WalletActions.setHideBalance, setHideBalance: typeof WalletActions.setHideBalance,
handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility, handleCoinVisibility: typeof LocalStorageActions.handleCoinVisibility,
// handleAllCoinsVisibility: typeof LocalStorageActions.handleAllCoinsVisibility,
|}; |};
export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |}; export type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
@ -37,6 +38,10 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch), setLocalCurrency: bindActionCreators(WalletActions.setLocalCurrency, dispatch),
setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch), setHideBalance: bindActionCreators(WalletActions.setHideBalance, dispatch),
handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch), handleCoinVisibility: bindActionCreators(LocalStorageActions.handleCoinVisibility, dispatch),
// handleAllCoinsVisibility: bindActionCreators(
// LocalStorageActions.handleAllCoinsVisibility,
// dispatch
// ),
}); });
export default injectIntl<OwnProps>( export default injectIntl<OwnProps>(

View File

@ -35,6 +35,7 @@ const Content = styled.div`
const Label = styled.div` const Label = styled.div`
display: flex; display: flex;
padding: 10px 0; padding: 10px 0;
justify-content: space-between;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
align-items: center; align-items: center;
`; `;
@ -66,7 +67,10 @@ const Left = styled.div`
align-items: center; align-items: center;
`; `;
const Right = styled.div``; const Right = styled.div`
display: flex;
align-items: center;
`;
const Name = styled.div` const Name = styled.div`
display: flex; display: flex;
@ -86,14 +90,23 @@ const CoinsSettings = (props: Props) => (
<Row> <Row>
<Content> <Content>
<Label> <Label>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} /> <Left>
<Tooltip <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS} />
content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />} <Tooltip
maxWidth={210} content={
placement="right" <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
> }
<TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} /> maxWidth={210}
</Tooltip> placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left>
<Right>Show all</Right>
</Label> </Label>
{props.networks {props.networks
.filter(network => !network.isHidden) .filter(network => !network.isHidden)
@ -107,6 +120,11 @@ const CoinsSettings = (props: Props) => (
</Left> </Left>
<Right> <Right>
<Switch <Switch
width={36}
height={18}
handleDiameter={14}
checkedIcon={false}
uncheckedIcon={false}
onChange={visible => { onChange={visible => {
props.handleCoinVisibility(network.shortcut, visible); props.handleCoinVisibility(network.shortcut, visible);
}} }}
@ -118,14 +136,23 @@ const CoinsSettings = (props: Props) => (
</Content> </Content>
<Content> <Content>
<Label> <Label>
<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} /> <Left>
<Tooltip <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXTERNAL} />
content={<FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />} <Tooltip
maxWidth={210} content={
placement="right" <FormattedMessage {...l10nMessages.TR_VISIBLE_COINS_EXPLAINED} />
> }
<TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} /> maxWidth={210}
</Tooltip> placement="right"
>
<TooltipIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left>
<Right>Show all</Right>
</Label> </Label>
{coins {coins
.sort((a, b) => a.order - b.order) .sort((a, b) => a.order - b.order)
@ -139,6 +166,11 @@ const CoinsSettings = (props: Props) => (
</Left> </Left>
<Right> <Right>
<Switch <Switch
width={36}
height={18}
handleDiameter={14}
checkedIcon={false}
uncheckedIcon={false}
onChange={visible => { onChange={visible => {
props.handleCoinVisibility(network.id, visible); props.handleCoinVisibility(network.id, visible);
}} }}

View File

@ -103,6 +103,11 @@ const WalletSettings = (props: Props) => (
</Tooltip> </Tooltip>
</Label> </Label>
<Switch <Switch
width={36}
height={18}
handleDiameter={14}
checkedIcon={false}
uncheckedIcon={false}
onChange={checked => { onChange={checked => {
props.setHideBalance(checked); props.setHideBalance(checked);
}} }}