arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-06-27 18:32:35 +00:00
Code Issues Releases Wiki Activity

centering tooltip pos

Browse Source
This commit is contained in:
slowbackspace 2019-03-28 16:05:39 +01:00
parent c3a7fbec25
commit 668c25c4b4
3 changed files with 112 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
View File

@ -132,6 +132,10 @@ const StyledLink = styled(Link)`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
cursor: pointer; cursor: pointer;
padding-right: 1px;
`;
const TooltipContainer = styled.div`
margin-left: 6px; margin-left: 6px;
`; `;
@ -183,38 +187,44 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_GAS_LIMIT} /> <FormattedMessage {...l10nMessages.TR_GAS_LIMIT} />
<Tooltip <TooltipContainer>
content={ <Tooltip
<FormattedMessage content={
{...l10nMessages.TR_GAS_LIMIT_REFERS_TO} <FormattedMessage
values={{ {...l10nMessages.TR_GAS_LIMIT_REFERS_TO}
TR_GAS_QUOTATION: ( values={{
<GreenSpan> TR_GAS_QUOTATION: (
<FormattedMessage <GreenSpan>
{...l10nMessages.TR_GAS_QUOTATION} <FormattedMessage
/> {...l10nMessages.TR_GAS_QUOTATION}
</GreenSpan> />
), </GreenSpan>
gasLimitTooltipValue: ( ),
<GreenSpan>{gasLimitTooltipValue}</GreenSpan> gasLimitTooltipValue: (
), <GreenSpan>
gasLimitTooltipCurrency, {gasLimitTooltipValue}
}} </GreenSpan>
),
gasLimitTooltipCurrency,
}}
/>
}
maxWidth={410}
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
ctaText={
<FormattedMessage
{...l10nCommonMessages.TR_LEARN_MORE}
/>
}
placement="top"
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/> />
} </Tooltip>
maxWidth={410} </TooltipContainer>
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
ctaText={
<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} />
}
placement="top"
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left> </Left>
{showDefaultGasLimitButton && ( {showDefaultGasLimitButton && (
<Right> <Right>
@ -245,37 +255,41 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_GAS_PRICE} /> <FormattedMessage {...l10nMessages.TR_GAS_PRICE} />
<Tooltip <TooltipContainer>
content={ <Tooltip
<FormattedMessage content={
{...l10nMessages.TR_GAS_PRICE_REFERS_TO} <FormattedMessage
values={{ {...l10nMessages.TR_GAS_PRICE_REFERS_TO}
TR_GAS_PRICE_QUOTATION: ( values={{
<GreenSpan> TR_GAS_PRICE_QUOTATION: (
<FormattedMessage <GreenSpan>
{...l10nMessages.TR_GAS_PRICE_QUOTATION} <FormattedMessage
/> {...l10nMessages.TR_GAS_PRICE_QUOTATION}
</GreenSpan> />
), </GreenSpan>
recommendedGasPrice: ( ),
<GreenSpan>{recommendedGasPrice}</GreenSpan> recommendedGasPrice: (
), <GreenSpan>{recommendedGasPrice}</GreenSpan>
}} ),
}}
/>
}
maxWidth={400}
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
ctaText={
<FormattedMessage
{...l10nCommonMessages.TR_LEARN_MORE}
/>
}
placement="top"
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/> />
} </Tooltip>
maxWidth={400} </TooltipContainer>
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
ctaText={
<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} />
}
placement="top"
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }
@ -290,18 +304,22 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_DATA} /> <FormattedMessage {...l10nMessages.TR_DATA} />
<Tooltip <TooltipContainer>
content={ <Tooltip
<FormattedMessage {...l10nMessages.TR_DATA_IS_USUALLY_USED} /> content={
} <FormattedMessage
placement="top" {...l10nMessages.TR_DATA_IS_USUALLY_USED}
> />
<StyledIcon }
icon={ICONS.HELP} placement="top"
color={colors.TEXT_SECONDARY} >
size={12} <StyledIcon
/> icon={ICONS.HELP}
</Tooltip> color={colors.TEXT_SECONDARY}
size={12}
/>
</Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }

8
src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
View File

@ -66,6 +66,10 @@ const AdvancedSettingsSendButtonWrapper = styled.div`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
cursor: pointer; cursor: pointer;
padding-right: 1px;
`;
const TooltipContainer = styled.div`
margin-left: 6px; margin-left: 6px;
`; `;
@ -116,6 +120,7 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nSendMessages.TR_FEE} /> <FormattedMessage {...l10nSendMessages.TR_FEE} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage {...l10nMessages.TR_XRP_TRANSFER_COST} /> <FormattedMessage {...l10nMessages.TR_XRP_TRANSFER_COST} />
@ -133,6 +138,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }
@ -156,6 +162,7 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_XRP_DESTINATION_TAG} /> <FormattedMessage {...l10nMessages.TR_XRP_DESTINATION_TAG} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage <FormattedMessage
@ -175,6 +182,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }

21
src/views/Wallet/views/Account/Summary/ethereum/index.js
View File

@ -50,10 +50,13 @@ const AccountTitle = styled.div`
`; `;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
margin-left: 6px;
cursor: pointer; cursor: pointer;
`; `;
const TooltipContainer = styled.div`
margin-left: 6px;
`;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
`; `;
@ -111,13 +114,15 @@ const AccountSummary = (props: Props) => {
<H5> <H5>
<FormattedMessage {...l10nSummaryMessages.TR_TOKENS} /> <FormattedMessage {...l10nSummaryMessages.TR_TOKENS} />
</H5> </H5>
<Tooltip <TooltipContainer>
maxWidth={200} <Tooltip
placement="top" maxWidth={200}
content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)} placement="top"
> content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)}
<StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} /> >
</Tooltip> <StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
</Tooltip>
</TooltipContainer>
</TokensHeadingWrapper> </TokensHeadingWrapper>
<AsyncSelectWrapper> <AsyncSelectWrapper>
<AsyncSelect <AsyncSelect