Skip to content

Commit

Permalink
Fix Slider appearance
Browse files Browse the repository at this point in the history
  • Loading branch information
@KapJI
KapJI committed Aug 21, 2015
1 parent 0968696 commit 3560885
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 54 deletions.
95 changes: 42 additions & 53 deletions src/slider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,9 @@ let Slider = React.createClass({
},

getStyles() {
let size = this.getTheme().handleSize + this.getTheme().trackSize;
let gutter =
(this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2;
let fillGutter =
this.getTheme().handleSizeDisabled - this.getTheme().trackSize;
let fillGutter = this.getTheme().handleSize / 2;
let disabledGutter = this.getTheme().trackSize + this.getTheme().handleSizeDisabled / 2;
let calcDisabledSpacing = this.props.disabled ? ' - ' + disabledGutter + 'px' : '';
let styles = {
root: {
touchCallout: 'none',
Expand All @@ -134,10 +132,6 @@ let Slider = React.createClass({
height: '100%',
transition: Transitions.easeOut(null, 'margin'),
},
percentZeroRemaining: {
left: 1,
marginLeft: gutter,
},
handle: {
boxSizing: 'border-box',
position: 'absolute',
Expand All @@ -155,7 +149,8 @@ let Slider = React.createClass({
borderRadius: '50%',
transform: 'translate(-50%, -50%)',
transition:
Transitions.easeOut('450ms', 'border') + ',' +
Transitions.easeOut('450ms', 'background') + ',' +
Transitions.easeOut('450ms', 'border-color') + ',' +
Transitions.easeOut('450ms', 'width') + ',' +
Transitions.easeOut('450ms', 'height'),
overflow: 'visible',
Expand All @@ -166,37 +161,40 @@ let Slider = React.createClass({
backgroundColor: this.getTheme().trackColor,
width: this.getTheme().handleSizeDisabled,
height: this.getTheme().handleSizeDisabled,
border: '2px solid white',
border: 'none',
},
handleWhenPercentZero: {
border: this.getTheme().trackSize + 'px solid ' + this.getTheme().trackColor,
border: this.getTheme().trackSize + 'px solid ' + this.getTheme().handleColorZero,
backgroundColor: this.getTheme().handleFillColor,
boxShadow: 'none',
},
handleWhenPercentZeroAndDisabled: {
cursor: 'not-allowed',
width: this.getTheme().handleSizeDisabled,
height: this.getTheme().handleSizeDisabled,
},
handleWhenPercentZeroAndFocused: {
border: this.getTheme().trackSize + 'px solid ' +
this.getTheme().trackColorSelected,
},
handleWhenActive: {
borderColor: this.getTheme().trackColorSelected,
width: this.getTheme().handleSizeActive,
height: this.getTheme().handleSizeActive,
transition:
Transitions.easeOut('450ms', 'backgroundColor') + ',' +
Transitions.easeOut('450ms', 'width') + ',' +
Transitions.easeOut('450ms', 'height'),
},
ripples: {
height: '300%',
width: '300%',
top: '-12px',
left: '-12px',
ripple: {
height: this.getTheme().handleSize,
width: this.getTheme().handleSize,
overflow: 'visible',
},
handleWhenDisabledAndZero: {
width: (size / 2) + 'px',
height: (size /2) + 'px',
rippleWhenPercentZero: {
top: -this.getTheme().trackSize,
left: -this.getTheme().trackSize,
},
handleWhenPercentZeroAndHovered: {
border: this.getTheme().trackSize + 'px solid ' +
this.getTheme().handleColorZero,
width: size + 'px',
height: size + 'px',
rippleInner: {
height: '300%',
width: '300%',
top: -this.getTheme().handleSize,
left: -this.getTheme().handleSize,
},
};
styles.filled = this.mergeAndPrefix(styles.filledAndRemaining, {
Expand All @@ -205,13 +203,13 @@ let Slider = React.createClass({
this.getTheme().trackColor :
this.getTheme().selectionColor,
marginRight: fillGutter,
width: (this.state.percent * 100) + (this.props.disabled ? -1 : 0) + '%',
width: 'calc(' + (this.state.percent * 100) + '%' + calcDisabledSpacing + ')',
});
styles.remaining = this.mergeAndPrefix(styles.filledAndRemaining, {
right: 0,
backgroundColor: this.getTheme().trackColor,
marginLeft: fillGutter,
width: ((1 - this.state.percent) * 100) + (this.props.disabled ? -1 : 0) + '%',
width: 'calc(' + ((1 - this.state.percent) * 100) + '%' + calcDisabledSpacing + ')',
});

return styles;
Expand All @@ -221,41 +219,33 @@ let Slider = React.createClass({
let { ...others } = this.props;
let percent = this.state.percent;
if (percent > 1) percent = 1; else if (percent < 0) percent = 0;
let gutter = (this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2;
let fillGutter = this.getTheme().handleSizeDisabled - this.getTheme().trackSize;

let styles = this.getStyles();
let sliderStyles = this.mergeAndPrefix(styles.root, this.props.style);
let trackStyles = styles.track;
let filledStyles = styles.filled;
let remainingStyles = this.mergeAndPrefix(
styles.remaining,
percent === 0 && styles.percentZeroRemaining
);
let handleStyles = percent === 0 ? this.mergeAndPrefix(
styles.handle,
styles.handleWhenPercentZero,
this.state.active && styles.handleWhenActive,
this.state.focused && {outline: 'none'},
this.state.hovered && styles.handleWhenPercentZeroAndHovered,
this.props.disabled && styles.handleWhenDisabledAndZero
(this.state.hovered || this.state.focused) && !this.props.disabled
&& styles.handleWhenPercentZeroAndFocused,
this.props.disabled && styles.handleWhenPercentZeroAndDisabled,
) : this.mergeAndPrefix(
styles.handle,
this.state.active && styles.handleWhenActive,
this.state.focused && {outline: 'none'},
this.props.disabled && styles.handleWhenDisabled
);

let rippleStyle = {height: '12px', width: '12px', overflow: 'visible'};

let rippleStyle = this.mergeAndPrefix(
styles.ripple,
percent === 0 && styles.rippleWhenPercentZero,
);
let remainingStyles = styles.remaining;
if ((this.state.hovered || this.state.focused) && !this.props.disabled) {
remainingStyles.backgroundColor = this.getTheme().trackColorSelected;
}

if (percent === 0) filledStyles.marginRight = gutter;
if (this.state.percent === 0 && this.state.active) remainingStyles.marginLeft = fillGutter;

let rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active && this.state.percent !== 0;
let rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active;
let rippleColor = this.state.percent === 0 ? this.getTheme().handleColorZero : this.getTheme().rippleColor;
let focusRipple;
if (!this.props.disabled && !this.props.disableFocusRipple) {
Expand All @@ -264,12 +254,11 @@ let Slider = React.createClass({
ref="focusRipple"
key="focusRipple"
style={rippleStyle}
innerStyle={styles.ripples}
innerStyle={styles.rippleInner}
show={rippleShowCondition}
color={rippleColor}/>
);
}

return (
<div {...others } style={this.props.style}>
<span className="mui-input-highlight"></span>
Expand All @@ -283,8 +272,8 @@ let Slider = React.createClass({
onMouseEnter={this._onMouseEnter}
onMouseLeave={this._onMouseLeave}
onMouseUp={this._onMouseUp} >
<div ref="track" style={trackStyles}>
<div style={filledStyles}></div>
<div ref="track" style={styles.track}>
<div style={styles.filled}></div>
<div style={remainingStyles}></div>
<Draggable axis="x" bound="point"
cancel={this.props.disabled ? '*' : null}
Expand Down
2 changes: 1 addition & 1 deletion src/styles/themes/light-theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ let LightTheme = {
trackColorSelected: Colors.grey500,
handleSize: 12,
handleSizeDisabled: 8,
handleSizeActive: 18,
handleColorZero: Colors.grey400,
handleFillColor: Colors.white,
selectionColor: palette.primary3Color,
Expand Down Expand Up @@ -215,7 +216,6 @@ let LightTheme = {
obj.floatingActionButton.disabledTextColor = ColorManipulator.fade(palette.textColor, 0.3);
obj.raisedButton.disabledColor = ColorManipulator.darken(obj.raisedButton.color, 0.1);
obj.raisedButton.disabledTextColor = ColorManipulator.fade(obj.raisedButton.textColor, 0.3);
obj.slider.handleSizeActive = obj.slider.handleSize * 2;
obj.toggle.trackRequiredColor = ColorManipulator.fade(obj.toggle.thumbRequiredColor, 0.5);

return obj;
Expand Down

0 comments on commit 3560885

Please sign in to comment.