Web: Components: moved slider to components

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}
                         />
                         <IconButton
                           size="16"

packages/asc-web-components/avatar-editor/sub-components/styled-avatar-editor-body.js

@@ -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,
 };