Skip to content

Commit

Permalink
fix(slider): make min value style match mocks (#2641)
Browse files Browse the repository at this point in the history 
* make slider disabled state match mocks

* added test

* fix lint

* min value style

* thumb label min value style

* fix lint & add tests

* fix lint

* addressed comments
  • Loading branch information
@mmalerba
mmalerba authored Jan 18, 2017
1 parent 7562322 commit 737b608
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 22 deletions.
55 changes: 52 additions & 3 deletions src/lib/slider/_slider-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
@mixin md-slider-theme($theme) {
$accent: map-get($theme, accent);

// TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
$md-slider-off-color: rgba(black, 0.26);
$md-slider-focused-color: rgba(black, 0.38);
$md-slider-off-focused-color: rgba(black, 0.38);
$md-slider-disabled-color: rgba(black, 0.26);
$md-slider-labeled-min-value-thumb-color: black;
$md-slider-labeled-min-value-thumb-label-color: rgba(black, 0.26);

.md-slider-track-background {
background-color: $md-slider-off-color;
Expand All @@ -30,10 +31,58 @@
color: md-color($accent, default-contrast);
}

md-slider:hover,
.md-slider-active {
.md-slider-track-background {
background-color: $md-slider-off-focused-color;
}
}

.md-slider-disabled {
.md-slider-track-background,
.md-slider-track-fill,
.md-slider-thumb {
background-color: $md-slider-off-color;
background-color: $md-slider-disabled-color;
}

&:hover {
.md-slider-track-background {
background-color: $md-slider-disabled-color;
}
}
}

.md-slider-min-value {
&.md-slider-thumb-label-showing {
.md-slider-thumb,
.md-slider-thumb-label {
background-color: $md-slider-labeled-min-value-thumb-color;
}

&.md-slider-active {
.md-slider-thumb,
.md-slider-thumb-label {
background-color: $md-slider-labeled-min-value-thumb-label-color;
}
}
}

&:not(.md-slider-thumb-label-showing) {
.md-slider-thumb {
border-color: $md-slider-off-color;
background-color: transparent;
}

&:hover,
&.md-slider-active {
.md-slider-thumb {
border-color: $md-slider-off-focused-color;
}

&.md-slider-disabled .md-slider-thumb {
border-color: $md-slider-disabled-color;
}
}
}
}
}
41 changes: 29 additions & 12 deletions src/lib/slider/slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ $md-slider-padding: 8px !default;

$md-slider-track-thickness: 2px !default;
$md-slider-thumb-size: 20px !default;
$md-slider-thumb-border-width: 3px !default;
$md-slider-thumb-border-width-active: 2px !default;
$md-slider-thumb-border-width-disabled: 4px !default;

$md-slider-thumb-default-scale: 0.7 !default;
$md-slider-thumb-focus-scale: 1 !default;
Expand Down Expand Up @@ -45,13 +48,15 @@ md-slider {
.md-slider-track-fill {
position: absolute;
transform-origin: 0 0;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
background-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-track-background {
position: absolute;
transform-origin: 100% 100%;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
background-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-ticks-container {
Expand All @@ -62,6 +67,7 @@ md-slider {
}

.md-slider-ticks {
box-sizing: border-box;
opacity: 0;
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
}
Expand All @@ -76,11 +82,15 @@ md-slider {
position: absolute;
right: -$md-slider-thumb-size / 2;
bottom: -$md-slider-thumb-size / 2;
box-sizing: border-box;
width: $md-slider-thumb-size;
height: $md-slider-thumb-size;
border: $md-slider-thumb-border-width solid transparent;
border-radius: 50%;
transform: scale($md-slider-thumb-default-scale);
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
background-color $swift-ease-out-duration $swift-ease-out-timing-function,
border-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-thumb-label {
Expand All @@ -91,16 +101,17 @@ md-slider {
width: $md-slider-thumb-label-size;
height: $md-slider-thumb-label-size;
border-radius: 50%;
transition: 300ms $swift-ease-in-out-timing-function;
transition-property: transform, border-radius;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
border-radius $swift-ease-out-duration $swift-ease-out-timing-function,
background-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-thumb-label-text {
z-index: 1;
font-size: 12px;
font-weight: bold;
opacity: 0;
transition: opacity 300ms $swift-ease-in-out-timing-function;
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
}


Expand All @@ -123,13 +134,15 @@ md-slider {
position: absolute;
border: 0 solid $md-slider-tick-color;
opacity: 0;
transition: opacity 300ms $swift-ease-in-out-timing-function;
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
}

&.md-slider-active,
&:hover {
.md-slider-wrapper::after {
opacity: 1;
&:not(.md-slider-hide-last-tick) {
.md-slider-wrapper::after {
opacity: 1;
}
}

.md-slider-ticks {
Expand Down Expand Up @@ -162,6 +175,7 @@ md-slider {
// Active slider.
.md-slider-active {
.md-slider-thumb {
border-width: $md-slider-thumb-border-width-active;
transform: scale($md-slider-thumb-focus-scale);
}

Expand All @@ -182,6 +196,7 @@ md-slider {
// Disabled slider.
.md-slider-disabled {
.md-slider-thumb {
border-width: $md-slider-thumb-border-width-disabled;
transform: scale($md-slider-thumb-disabled-scale);
}

Expand Down Expand Up @@ -239,6 +254,7 @@ md-slider {
// (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
background: -moz-repeating-linear-gradient(0.0001deg, $md-slider-tick-color,
$md-slider-tick-color $md-slider-tick-size, transparent 0, transparent) repeat;
background-clip: content-box;
height: $md-slider-track-thickness;
width: 100%;
}
Expand All @@ -252,7 +268,7 @@ md-slider {
.md-slider-thumb-label {
right: -$md-slider-thumb-label-size / 2;
top: -($md-slider-thumb-label-size + $md-slider-thumb-arrow-gap);
transform: translateY($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap) scale(0.4)
transform: translateY($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap) scale(0.01)
rotate(45deg);
}

Expand Down Expand Up @@ -312,6 +328,7 @@ md-slider {
.md-slider-ticks {
background: repeating-linear-gradient(to bottom, $md-slider-tick-color,
$md-slider-tick-color $md-slider-tick-size, transparent 0, transparent) repeat;
background-clip: content-box;
width: $md-slider-track-thickness;
height: 100%;
}
Expand All @@ -325,8 +342,8 @@ md-slider {
.md-slider-thumb-label {
bottom: -$md-slider-thumb-label-size / 2;
left: -($md-slider-thumb-label-size + $md-slider-thumb-arrow-gap);
transform: translateX($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap)
scale(0.4) rotate(-45deg);
transform: translateX($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap) scale(0.01)
rotate(-45deg);
}

.md-slider-thumb-label-text {
Expand Down
27 changes: 26 additions & 1 deletion src/lib/slider/slider.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,23 @@ describe('MdSlider', () => {

expect(sliderNativeElement.classList).not.toContain('md-slider-sliding');
});

it('should have thumb gap when at min value', () => {
expect(trackFillElement.style.transform).toContain('translateX(-7px)');

dispatchClickEventSequence(sliderNativeElement, 0);
fixture.detectChanges();

expect(trackFillElement.style.transform).toContain('translateX(-10px)');
});

it('should not have thumb gap when not at min value', () => {
dispatchClickEventSequence(sliderNativeElement, 1);
fixture.detectChanges();

// Some browsers use '0' and some use '0px', so leave off the closing paren.
expect(trackFillElement.style.transform).toContain('translateX(0');
});
});

describe('disabled slider', () => {
Expand Down Expand Up @@ -1038,6 +1055,14 @@ describe('MdSlider', () => {

expect(sliderInstance.value).toBe(1);
});

it('should hide last tick when inverted and at min value', () => {
testComponent.invert = true;
fixture.detectChanges();

expect(sliderNativeElement.classList.contains('md-slider-hide-last-tick'))
.toBe(true, 'last tick should be hidden');
});
});

describe('vertical slider', () => {
Expand Down Expand Up @@ -1198,7 +1223,7 @@ class SliderWithChangeHandler {
}

@Component({
template: `<div [dir]="dir"><md-slider [invert]="invert"></md-slider></div>`,
template: `<div [dir]="dir"><md-slider [invert]="invert" tickInterval="5"></md-slider></div>`,
styles: [styles],
})
class SliderWithDirAndInvert {
Expand Down
39 changes: 33 additions & 6 deletions src/lib/slider/slider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
HammerInput,
coerceBooleanProperty,
coerceNumberProperty,
DefaultStyleCompatibilityModeModule,
DefaultStyleCompatibilityModeModule
} from '../core';
import {Dir} from '../core/rtl/dir';
import {CommonModule} from '@angular/common';
Expand All @@ -29,7 +29,7 @@ import {
LEFT_ARROW,
UP_ARROW,
RIGHT_ARROW,
DOWN_ARROW,
DOWN_ARROW
} from '../core/keyboard/keycodes';

/**
Expand All @@ -41,6 +41,12 @@ const MIN_AUTO_TICK_SEPARATION = 30;
/** The thumb gap size for a disabled slider. */
const DISABLED_THUMB_GAP = 7;

/** The thumb gap size for a non-active slider at its minimum value. */
const MIN_VALUE_NONACTIVE_THUMB_GAP = 7;

/** The thumb gap size for an active slider at its minimum value. */
const MIN_VALUE_ACTIVE_THUMB_GAP = 10;

/**
* Provider Expression that allows md-slider to register as a ControlValueAccessor.
* This allows it to support [(ngModel)] and [formControl].
Expand Down Expand Up @@ -87,7 +93,8 @@ export class MdSliderChange {
'[class.md-slider-sliding]': '_isSliding',
'[class.md-slider-thumb-label-showing]': 'thumbLabel',
'[class.md-slider-vertical]': 'vertical',
'[class.md-slider-min-value]': 'value === min',
'[class.md-slider-min-value]': '_isMinValue',
'[class.md-slider-hide-last-tick]': '_isMinValue && _thumbGap && invertAxis',
},
templateUrl: 'slider.html',
styleUrls: ['slider.css'],
Expand Down Expand Up @@ -249,12 +256,23 @@ export class MdSlider implements ControlValueAccessor {
return (this.direction == 'rtl' && !this.vertical) ? !this.invertAxis : this.invertAxis;
}

/** Whether the slider is at its minimum value. */
get _isMinValue() {
return this.percent === 0;
}

/**
* The amount of space to leave between the slider thumb and the track fill & track background
* elements.
*/
private get _thumbGap() {
return this.disabled ? DISABLED_THUMB_GAP : 0;
get _thumbGap() {
if (this.disabled) {
return DISABLED_THUMB_GAP;
}
if (this._isMinValue && !this.thumbLabel) {
return this._isActive ? MIN_VALUE_ACTIVE_THUMB_GAP : MIN_VALUE_NONACTIVE_THUMB_GAP;
}
return 0;
}

/** CSS styles for the track background element. */
Expand Down Expand Up @@ -297,11 +315,20 @@ export class MdSlider implements ControlValueAccessor {
// ticks 180 degrees so we're really cutting off the end edge abd not the start.
let sign = !this.vertical && this.direction == 'rtl' ? '-' : '';
let rotate = !this.vertical && this.direction == 'rtl' ? ' rotate(180deg)' : '';
return {
let styles: { [key: string]: string } = {
'backgroundSize': backgroundSize,
// Without translateZ ticks sometimes jitter as the slider moves on Chrome & Firefox.
'transform': `translateZ(0) translate${axis}(${sign}${tickSize / 2}%)${rotate}`
};

if (this._isMinValue && this._thumbGap) {
let side = this.vertical ?
(this.invertAxis ? 'Bottom' : 'Top') :
(this.invertAxis ? 'Right' : 'Left');
styles[`padding${side}`] = `${this._thumbGap}px`;
}

return styles;
}

get thumbContainerStyles(): { [key: string]: string } {
Expand Down

0 comments on commit 737b608

Please sign in to comment.