From ba29c3aee05fb6e48503915f22f6d5da1d956416 Mon Sep 17 00:00:00 2001 From: Dmitry Sychugov Date: Fri, 4 Mar 2022 18:53:41 +0500 Subject: [PATCH] Web: Components: moved slider to components --- .../sub-components/avatar-editor-body.js | 4 +- .../styled-avatar-editor-body.js | 137 ------------------ 2 files changed, 2 insertions(+), 139 deletions(-) diff --git a/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js b/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js index cfa6fa7349..ae0807ee66 100644 --- a/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js +++ b/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js @@ -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} /> 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, };