Skip to content

Commit

Permalink
DDW-430 - Smart tooltips - fixing minWidth
Browse files Browse the repository at this point in the history
  • Loading branch information
@DeeJayElly
DeeJayElly committed Nov 19, 2020
1 parent 8fd1e69 commit d27146b
Show file tree
Hide file tree
Showing 17 changed files with 40 additions and 3 deletions.
1 change: 1 addition & 0 deletions source/renderer/app/components/loading/syncing-connecting/StatusIcons.js
View file
Expand Up @@ -244,6 +244,7 @@ export default class StatusIcons extends Component<Props> {

getIconWithPopover = (icon: string, paramName: string) => (
<PopOver
maxWidth={350}
themeVariables={{
'--rp-pop-over-bg-color':
'var(--theme-loading-status-icons-tooltip-color)',
Expand Down
3 changes: 3 additions & 0 deletions source/renderer/app/components/staking/delegation-center/WalletRow.js
View file
Expand Up @@ -182,6 +182,7 @@ export default class WalletRow extends Component<Props> {
>
{delegatedStakePoolId ? (
<PopOver
maxWidth={350}
content={
<div className={styles.tooltipLabelWrapper}>
<span>
Expand Down Expand Up @@ -254,6 +255,7 @@ export default class WalletRow extends Component<Props> {
]);
return [
<PopOver
maxWidth={350}
key="ticker"
content={
<div className={styles.tooltipLabelWrapper}>
Expand Down Expand Up @@ -326,6 +328,7 @@ export default class WalletRow extends Component<Props> {
</Fragment>
) : (
<PopOver
maxWidth={350}
content={intl.formatMessage(messages.syncingTooltipLabel, {
syncingProgress,
})}
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.js
View file
Expand Up @@ -253,6 +253,7 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
{isRestoring && (
<div className={styles.syncingProgress}>
<PopOver
maxWidth={350}
content={intl.formatMessage(
messages.syncingTooltipLabel,
{
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/staking/stake-pools/StakePoolsRanking.js
View file
Expand Up @@ -399,6 +399,7 @@ export default class StakePoolsRanking extends Component<Props, State> {
<div className={styles.col}>
<div className={styles.outOfRangeMaxAmount}>
<PopOver
maxWidth={350}
content={intl.formatMessage(messages.rankingExtraTooltip)}
>
{shortNumber(OUT_OF_RANGE_MAX_DELEGATION_FUNDS)}
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
View file
Expand Up @@ -113,6 +113,7 @@ export class StakePoolsSearch extends Component<Props> {
<div className={clearSearchClasses}>
{this.hasSearchClearButton && (
<PopOver
maxWidth={350}
content="Clear"
placement={isClearTooltipOpeningDownward ? 'bottom' : 'top'}
>
Expand Down
7 changes: 7 additions & 0 deletions source/renderer/app/components/staking/stake-pools/StakePoolsTable.js
View file
Expand Up @@ -279,6 +279,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'ranking',
title: (
<PopOver
maxWidth={350}
key="ranking"
placement="bottom"
content={
Expand All @@ -299,6 +300,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'saturation',
title: (
<PopOver
maxWidth={350}
key="saturation"
placement="bottom"
content={intl.formatMessage(messages.tableHeaderSaturationTooltip)}
Expand All @@ -311,6 +313,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'cost',
title: (
<PopOver
maxWidth={350}
key="cost"
placement="bottom"
content={intl.formatMessage(messages.tableHeaderCostTooltip)}
Expand All @@ -323,6 +326,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'profitMargin',
title: (
<PopOver
maxWidth={350}
key="profitMargin"
placement="bottom"
content={intl.formatMessage(messages.tableHeaderMarginTooltip)}
Expand All @@ -335,6 +339,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'producedBlocks',
title: (
<PopOver
maxWidth={350}
key="producedBlocks"
placement="bottom"
content={intl.formatMessage(messages.tableHeaderProducedBlocksTooltip)}
Expand All @@ -347,6 +352,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'nonMyopicMemberRewards',
title: (
<PopOver
maxWidth={350}
key="nonMyopicMemberRewards"
placement="bottom"
content={intl.formatMessage(
Expand All @@ -361,6 +367,7 @@ export class StakePoolsTable extends Component<Props, State> {
name: 'pledge',
title: (
<PopOver
maxWidth={350}
key="pledge"
placement="bottom"
content={intl.formatMessage(messages.tableHeaderPledgeTooltip)}
Expand Down
3 changes: 3 additions & 0 deletions source/renderer/app/components/staking/widgets/TooltipPool.js
View file
Expand Up @@ -551,6 +551,7 @@ export default class TooltipPool extends Component<Props, State> {
)}
{isIncentivizedTestnet && (
<PopOver
maxWidth={350}
key="experimentalTooltip"
content={intl.formatMessage(messages.experimentalTooltipLabel)}
>
Expand Down Expand Up @@ -652,6 +653,7 @@ export default class TooltipPool extends Component<Props, State> {
{intl.formatMessage(messages[field.key])}
</div>
<PopOver
maxWidth={350}
key={field.key}
content={
<div className={styles.tooltipWithHTMLContent}>
Expand Down Expand Up @@ -754,6 +756,7 @@ export default class TooltipPool extends Component<Props, State> {
</div>
)}
<PopOver
maxWidth={350}
key="id"
content={intl.formatMessage(messages.copyIdTooltipLabel)}
>
Expand Down
6 changes: 5 additions & 1 deletion source/renderer/app/components/status/DaedalusDiagnostics.js
View file
Expand Up @@ -550,7 +550,10 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
{getRow('platformVersion', platformVersion)}
{getRow(
'cpu',
<PopOver content={cpu}>
<PopOver
maxWidth={350}
content={cpu}
>
{cpu}
</PopOver>
)}
Expand Down Expand Up @@ -597,6 +600,7 @@ export default class DaedalusDiagnostics extends Component<Props, State> {
>
<div className={styles.stateDirectoryPath}>
<PopOver
maxWidth={400}
content={
<div className={styles.tooltipLabelWrapper}>
<div>{daedalusStateDirectoryPath}</div>
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/wallet/WalletCreateDialog.js
View file
Expand Up @@ -275,6 +275,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
{...spendingPasswordField.bind()}
/>
<PopOver
maxWidth={350}
content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
key="tooltip"
>
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/wallet/WalletRestoreDialog.js
View file
Expand Up @@ -613,6 +613,7 @@ export default class WalletRestoreDialog extends Component<Props, State> {
{...spendingPasswordField.bind()}
/>
<PopOver
maxWidth={350}
content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
key="tooltip"
>
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/components/wallet/settings/ChangeSpendingPasswordDialog.js
View file
Expand Up @@ -290,6 +290,7 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
onKeyPress={this.handleSubmitOnEnter}
/>
<PopOver
maxWidth={350}
content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
key="tooltip"
>
Expand All @@ -306,6 +307,7 @@ export default class ChangeSpendingPasswordDialog extends Component<Props> {
/>
{!isSpendingPasswordSet && (
<PopOver
maxWidth={350}
content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
key="tooltip"
>
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/wallet/settings/WalletRecoveryPhraseVerificationWidget.js
View file
Expand Up @@ -258,6 +258,7 @@ export default class WalletRecoveryPhraseVerificationWidget extends Component<Pr
<>
&nbsp;
<PopOver
maxWidth={350}
content={
<div className={styles.paperWalletTooltip}>
{intl.formatMessage(messages.paperWalletDescription)}
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/components/wallet/wallet-import/WalletSelectImportDialog.js
View file
Expand Up @@ -213,6 +213,7 @@ export default class WalletSelectImportDialog extends Component<Props> {
if (disabled) {
statusIcon = (
<PopOver
maxWidth={350}
content={
invalidWalletName ? (
this.context.intl.formatMessage(messages.enterWalletNameTooltip)
Expand Down Expand Up @@ -416,6 +417,7 @@ export default class WalletSelectImportDialog extends Component<Props> {
<div className={styles.walletsInputField}>
{!wallet.name ? (
<PopOver
maxWidth={350}
content={intl.formatMessage(
messages.enterWalletNameTooltip
)}
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/wallet/wallet-restore/ConfigurationDialog.js
View file
Expand Up @@ -278,6 +278,7 @@ export default class ConfigurationDialog extends Component<Props> {
{...spendingPasswordField.bind()}
/>
<PopOver
maxWidth={350}
content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
key="tooltip"
>
Expand Down
10 changes: 8 additions & 2 deletions source/renderer/app/components/widgets/Slider.js
View file
Expand Up @@ -78,7 +78,10 @@ export default class Slider extends Component<Props> {
<div className={styles.upperMarks}>
<div className={styles.minMark}>
{showTooltip ? (
<PopOver content={minTooltip}>
<PopOver
maxWidth={350}
content={minTooltip}
>
{shortNumber(minDisplayValue || min)}
</PopOver>
) : (
Expand All @@ -87,7 +90,10 @@ export default class Slider extends Component<Props> {
</div>
<div className={styles.maxMark}>
{showTooltip ? (
<PopOver content={maxTooltip}>
<PopOver
maxWidth={350}
content={maxTooltip}
>
{shortNumber(maxDisplayValue || max)}
</PopOver>
) : (
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/widgets/forms/FormFieldSkinTooltip.js
View file
Expand Up @@ -43,6 +43,7 @@ export const FormFieldSkin = (props: Props) => (
{props.label}
{props.error && (
<PopOver
maxWidth={350}
content={props.error}
key="tooltip"
placement="bottom"
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/widgets/forms/InlineEditingDropdown.js
View file
Expand Up @@ -65,6 +65,7 @@ export default class InlineEditingDropdown extends Component<Props> {
label,
!!tooltip && (
<PopOver
maxWidth={350}
content={tooltip}
key="tooltip"
>
Expand Down

0 comments on commit d27146b

Please sign in to comment.