Web: Components: moved slider to components
This commit is contained in:
parent
b7b59072f6
commit
ba29c3aee0
@ -10,6 +10,7 @@ import Box from "../../box";
|
||||
import ContextMenuButton from "../../context-menu-button";
|
||||
import IconButton from "../../icon-button";
|
||||
|
||||
import Slider from "../../slider";
|
||||
import {
|
||||
isDesktop,
|
||||
//isTablet,
|
||||
@ -27,7 +28,6 @@ import {
|
||||
StyledAvatarEditorBody,
|
||||
StyledAvatarContainer,
|
||||
DropZoneContainer,
|
||||
Slider,
|
||||
StyledErrorContainer,
|
||||
} from "./styled-avatar-editor-body";
|
||||
|
||||
@ -458,11 +458,11 @@ class AvatarEditorBody extends React.Component {
|
||||
id="scale"
|
||||
type="range"
|
||||
className="custom-range"
|
||||
onChange={this.handleScale}
|
||||
min={this.state.allowZoomOut ? "0.1" : min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={this.state.scale}
|
||||
onChange={this.handleScale}
|
||||
/>
|
||||
<IconButton
|
||||
size="16"
|
||||
|
@ -15,142 +15,6 @@ const StyledErrorContainer = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Slider = styled.input.attrs({
|
||||
type: "range",
|
||||
})`
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.width};
|
||||
margin: ${(props) => props.theme.avatarEditorBody.slider.margin};
|
||||
background-color: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.backgroundColor};
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.background};
|
||||
border: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.borderRadius};
|
||||
width: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.width};
|
||||
height: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.height};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
margin-top: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.marginTop};
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.sliderThumb.width};
|
||||
height: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.height};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.background};
|
||||
border: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.height};
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-webkit-box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.boxShadow};
|
||||
box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.boxShadow};
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.focusBackground};
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeTrack.background};
|
||||
border: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeTrack.background};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeTrack.borderRadius};
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.rangeTrack.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.rangeTrack.height};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.height};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.borderRadius};
|
||||
cursor: pointer;
|
||||
-moz-box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.boxShadow};
|
||||
box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.boxShadow};
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.track.background};
|
||||
border-color: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.track.borderColor};
|
||||
border-width: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.track.borderWidth};
|
||||
color: ${(props) => props.theme.avatarEditorBody.slider.track.color};
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.track.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.track.height};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillLower.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.fillLower.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillLower.borderRadius};
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillUpper.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.fillUpper.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillUpper.borderRadius};
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.thumb.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.thumb.height};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.thumb.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.borderRadius};
|
||||
cursor: pointer;
|
||||
margin-top: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.marginTop};
|
||||
/*Needed to keep the Edge thumb centred*/
|
||||
box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.boxShadow};
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillLower.focusBackground};
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-upper {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillUpper.focusBackground};
|
||||
}
|
||||
`;
|
||||
Slider.defaultProps = { theme: Base };
|
||||
|
||||
const DropZoneContainer = styled.div`
|
||||
outline: none;
|
||||
|
||||
@ -333,6 +197,5 @@ export {
|
||||
StyledAvatarEditorBody,
|
||||
StyledAvatarContainer,
|
||||
DropZoneContainer,
|
||||
Slider,
|
||||
StyledErrorContainer,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user