From 6027f021622042997dbdc7f071c50c2c3e37be89 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 27 Aug 2018 17:08:44 +0200 Subject: [PATCH] Prepare tooltip component (WIP) --- src/js/components/Tooltip/index.js | 160 ++++++++++++++++++ .../components/AccountMenu/index.js | 2 +- .../Wallet/views/AccountReceive/index.js | 2 +- .../AccountSend/components/AdvancedForm.js | 2 +- .../Wallet/views/AccountSummary/index.js | 2 +- 5 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 src/js/components/Tooltip/index.js diff --git a/src/js/components/Tooltip/index.js b/src/js/components/Tooltip/index.js new file mode 100644 index 00000000..07290d34 --- /dev/null +++ b/src/js/components/Tooltip/index.js @@ -0,0 +1,160 @@ +import Tooltip from 'rc-tooltip'; +import styled from 'styled-components'; +import colors from 'config/colors'; +import { FONT_SIZE } from 'config/variables'; + +const StyledTooltip = styled(Tooltip)` + .tooltip-wrapper { + width: 320px; + font-size: ${FONT_SIZE.SMALLEST}; + span { + color: ${colors.GREEN_PRIMARY}; + } + } + + .aside-tooltip-wrapper { + width: 260px; + font-size: ${FONT_SIZE.SMALLEST}; + } + + .rc-tooltip { + position: absolute; + z-index: 1070; + display: block; + visibility: visible; + border: 1px solid ${colors.DIVIDER}; + border-radius: 3px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); + } + + .rc-tooltip-hidden { + display: none; + } + + .rc-tooltip-inner { + padding: 8px 10px; + color: ${colors.TEXT_SECONDARY}; + font-size: ${FONT_SIZE.SMALLER}; + line-height: 1.5; + text-align: left; + text-decoration: none; + background-color: ${colors.WHITE}; + border-radius: 3px; + min-height: 34px; + border: 1px solid ${colors.WHITE}; + } + .rc-tooltip-arrow, + .rc-tooltip-arrow-inner { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + + .rc-tooltip-placement-top .rc-tooltip-arrow, + .rc-tooltip-placement-topLeft .rc-tooltip-arrow, + .rc-tooltip-placement-topRight .rc-tooltip-arrow { + bottom: -6px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-top .rc-tooltip-arrow-inner, + .rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, + .rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { + bottom: 2px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.WHITE}; + } + .rc-tooltip-placement-top .rc-tooltip-arrow { + left: 50%; + } + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + left: 15%; + } + .rc-tooltip-placement-topRight .rc-tooltip-arrow { + right: 15%; + } + .rc-tooltip-placement-right .rc-tooltip-arrow, + .rc-tooltip-placement-rightTop .rc-tooltip-arrow, + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + left: -5px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-right .rc-tooltip-arrow-inner, + .rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { + left: 1px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.WHITE}; + } + .rc-tooltip-placement-right .rc-tooltip-arrow { + top: 50%; + } + .rc-tooltip-placement-rightTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + bottom: 15%; + } + .rc-tooltip-placement-left .rc-tooltip-arrow, + .rc-tooltip-placement-leftTop .rc-tooltip-arrow, + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + right: -5px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-left .rc-tooltip-arrow-inner, + .rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { + right: 1px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.WHITE}; + } + .rc-tooltip-placement-left .rc-tooltip-arrow { + top: 50%; + } + .rc-tooltip-placement-leftTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + bottom: 15%; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow, + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + top: -5px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { + top: 1px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.WHITE}; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow { + left: 50%; + } + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { + left: 15%; + } + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + right: 15%; + } +`; + +export default StyledTooltip; diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index ed245279..805e204d 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -7,7 +7,7 @@ import Loader from 'components/Loader'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; import * as stateUtils from 'reducers/utils'; -import Tooltip from 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import ICONS from 'config/icons'; import { NavLink } from 'react-router-dom'; diff --git a/src/js/views/Wallet/views/AccountReceive/index.js b/src/js/views/Wallet/views/AccountReceive/index.js index e1289c2d..44e3781d 100644 --- a/src/js/views/Wallet/views/AccountReceive/index.js +++ b/src/js/views/Wallet/views/AccountReceive/index.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import { H2 } from 'components/Heading'; -import Tooltip from 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import { QRCode } from 'react-qr-svg'; import { Notification } from 'components/Notification'; diff --git a/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js b/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js index 978f9268..e487c526 100644 --- a/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js +++ b/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js @@ -2,7 +2,7 @@ import React from 'react'; -import Tooltip from 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import type { Props as BaseProps } from './index'; type Props = { diff --git a/src/js/views/Wallet/views/AccountSummary/index.js b/src/js/views/Wallet/views/AccountSummary/index.js index 6591b163..e5836c54 100644 --- a/src/js/views/Wallet/views/AccountSummary/index.js +++ b/src/js/views/Wallet/views/AccountSummary/index.js @@ -4,7 +4,7 @@ import React from 'react'; import { H2 } from 'components/Heading'; import BigNumber from 'bignumber.js'; import { Async as AsyncSelect } from 'react-select'; -import Tooltip from 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import { resolveAfter } from 'utils/promiseUtils'; import { Notification } from 'components/Notification';