Tweak slider
This commit is contained in:
Fred Carlsen
@@ -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;
|
||||
`;
|
||||
`;
|
||||
|
||||
@@ -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;
|
||||
`;
|
||||
295
packages/website/ts/@next/pages/instant/rc-slider.css
Normal file
295
packages/website/ts/@next/pages/instant/rc-slider.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user