diff options
4 files changed, 376 insertions, 18 deletions
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx index 119311d94..d63ea118b 100644 --- a/packages/website/ts/@next/pages/instant/config_generator.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator.tsx @@ -12,7 +12,7 @@ import { MultiSelect } from 'ts/components/ui/multi_select'; import { Spinner } from 'ts/components/ui/spinner'; import { Text } from 'ts/components/ui/text'; import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input'; -import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; +import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -303,21 +303,6 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec </Container> ); -const Mark = ({ checked }) => ( - <StyledMark checked={checked}> - {checked && ''} - </StyledMark> -); - -const StyledMark = styled.div` - border: 1px solid #ccc; - border-radius: 50%; - width: 16px; - height: 16px; - border-color: ${props => props.checked && colors.brandLight}; - background-color: ${props => props.checked && colors.brandLight}; -`; - ConfigGeneratorSection.defaultProps = { marginBottom: '30px', }; @@ -337,4 +322,4 @@ const CheckboxText = styled.span` const OptionalAction = styled(OptionalText)` cursor: pointer; -`;
\ No newline at end of file +`; diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx new file mode 100644 index 000000000..47b8d2b8f --- /dev/null +++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx @@ -0,0 +1,78 @@ +import Slider from 'rc-slider'; +import * as React from 'react'; +import styled from 'styled-components'; +import 'ts/@next/pages/instant/rc-slider.css'; + +import { colors } from 'ts/style/colors'; + +const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); +// tslint:disable-next-line:no-unused-expression + +export interface FeePercentageSliderProps { + value: number; + onChange: (value: number) => void; +} + +export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> { + public render(): React.ReactNode { + return ( + <StyledSlider + min={0} + max={0.05} + step={0.0025} + value={this.props.value} + onChange={this.props.onChange} + tipFormatter={this._feePercentageSliderFormatter} + tipProps={{ placement: 'bottom', overlayStyle: { backgroundColor: '#fff', borderRadius: '4px' } }} + trackStyle={{ + backgroundColor: colors.brandLight, + }} + railStyle={{ + backgroundColor: 'rgba(255, 255, 255, 0.2)', + }} + handleStyle={{ + border: 'none', + boxShadow: 'none', + }} + activeDotStyle={{ + boxShadow: 'none', + border: 'none', + }} + /> + ); + } + private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => { + return <Text>{`${(value * 100).toFixed(2)}%`}</Text>; + }; +} + +const StyledSlider = styled(SliderWithTooltip)` + .rc-slider-tooltip__inner { + box-shadow: none !important; + background-color: ${colors.white} !important; + border-radius: 4px !important; + padding: 3px 12px !important; + height: auto !important; + position: relative; + top: 7px; + &:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } +`; + +const Text = styled.span` + color: #000000; + font-size: 12px; + line-height: 18px; +`; diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/@next/pages/instant/rc-slider.css new file mode 100644 index 000000000..a4a521d54 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/rc-slider.css @@ -0,0 +1,295 @@ +.rc-slider { + position: relative; + height: 14px; + padding: 5px 0; + width: 100%; + border-radius: 6px; + -ms-touch-action: none; + touch-action: none; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-rail { + position: absolute; + width: 100%; + background-color: #e9e9e9; + height: 4px; + border-radius: 6px; +} + +.rc-slider-track { + position: absolute; + left: 0; + height: 4px; + border-radius: 6px; + background-color: #abe2fb; +} + +.rc-slider-handle { + position: absolute; + margin-left: -7px; + margin-top: -5px; + width: 14px; + height: 14px; + cursor: pointer; + cursor: -webkit-grab; + cursor: grab; + border-radius: 50%; + border: solid 2px #96dbfa; + background-color: #fff; + -ms-touch-action: pan-x; + touch-action: pan-x; +} + +.rc-slider-handle:focus { + border-color: #57c5f7; + box-shadow: 0 0 0 5px #96dbfa; + outline: none; +} + +.rc-slider-handle-click-focused:focus { + border-color: #96dbfa; + box-shadow: unset; +} + +.rc-slider-handle:hover { + border-color: #57c5f7; +} + +.rc-slider-handle:active { + border-color: #57c5f7; + box-shadow: 0 0 5px #57c5f7; + cursor: -webkit-grabbing; + cursor: grabbing; +} + +.rc-slider-mark { + position: absolute; + top: 18px; + left: 0; + width: 100%; + font-size: 12px; +} + +.rc-slider-mark-text { + position: absolute; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + color: #999; +} + +.rc-slider-mark-text-active { + color: #666; +} + +.rc-slider-step { + position: absolute; + width: 100%; + height: 4px; + background: transparent; +} + +.rc-slider-dot { + position: absolute; + bottom: -2px; + margin-left: -4px; + width: 8px; + height: 8px; + border: 2px solid #e9e9e9; + background-color: #fff; + cursor: pointer; + border-radius: 50%; + vertical-align: middle; +} + +.rc-slider-dot-active { + border-color: #96dbfa; +} + +.rc-slider-disabled { + background-color: #e9e9e9; +} + +.rc-slider-disabled .rc-slider-track { + background-color: #ccc; +} + +.rc-slider-disabled .rc-slider-handle, +.rc-slider-disabled .rc-slider-dot { + border-color: #ccc; + box-shadow: none; + background-color: #fff; + cursor: not-allowed; +} + +.rc-slider-disabled .rc-slider-mark-text, +.rc-slider-disabled .rc-slider-dot { + cursor: not-allowed !important; +} + +.rc-slider-vertical { + width: 14px; + height: 100%; + padding: 0 5px; +} + +.rc-slider-vertical .rc-slider-rail { + height: 100%; + width: 4px; +} + +.rc-slider-vertical .rc-slider-track { + left: 5px; + bottom: 0; + width: 4px; +} + +.rc-slider-vertical .rc-slider-handle { + margin-left: -5px; + margin-bottom: -7px; + -ms-touch-action: pan-y; + touch-action: pan-y; +} + +.rc-slider-vertical .rc-slider-mark { + top: 0; + left: 18px; + height: 100%; +} + +.rc-slider-vertical .rc-slider-step { + height: 100%; + width: 4px; +} + +.rc-slider-vertical .rc-slider-dot { + left: 2px; + margin-bottom: -4px; +} + +.rc-slider-vertical .rc-slider-dot:first-child { + margin-bottom: -4px; +} + +.rc-slider-vertical .rc-slider-dot:last-child { + margin-bottom: -4px; +} + +.rc-slider-tooltip-zoom-down-enter, +.rc-slider-tooltip-zoom-down-appear { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; + animation-play-state: paused; +} + +.rc-slider-tooltip-zoom-down-leave { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; + animation-play-state: paused; +} + +.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, +.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { + animation-name: rcSliderTooltipZoomDownIn; + animation-play-state: running; +} + +.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { + animation-name: rcSliderTooltipZoomDownOut; + animation-play-state: running; +} + +.rc-slider-tooltip-zoom-down-enter, +.rc-slider-tooltip-zoom-down-appear { + transform: scale(0, 0); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} + +.rc-slider-tooltip-zoom-down-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} + +@keyframes rcSliderTooltipZoomDownIn { + 0% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } + + 100% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } +} + +@keyframes rcSliderTooltipZoomDownOut { + 0% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } + + 100% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } +} + +.rc-slider-tooltip { + position: absolute; + left: -9999px; + top: -9999px; + visibility: visible; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-tooltip * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-tooltip-hidden { + display: none; +} + +.rc-slider-tooltip-placement-top { + padding: 4px 0 8px 0; +} + +.rc-slider-tooltip-inner { + padding: 4px 6px 4px; + min-width: 24px; + height: 24px; + font-size: 12px; + line-height: 1; + color: #000; + text-align: center; + text-decoration: none; +} + +.rc-slider-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { + bottom: 4px; + left: 50%; + margin-left: -4px; + border-width: 4px 4px 0; + border-top-color: #6c6c6c; +} diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx index 3fc6b381d..176240f2e 100644 --- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -1,5 +1,5 @@ import Slider from 'rc-slider'; -import 'rc-slider/assets/index.css'; +//import 'rc-slider/assets/index.css'; import * as React from 'react'; import styled from 'styled-components'; |