Skip to content

Commit 8541f8e

Browse files
devversionandrewseguin
authored andcommitted
feat(slide-toggle): use ripple service (#3068)
* Removes the temporary ripple mixin and uses the new ripple service. * Updates the ripple colors to match the specification images (no explicit opacity values are specified) * Triggers ripple on label mousedown (similar as in the Android Nougat implementation) Closes #2900.
1 parent 3b39bd2 commit 8541f8e

File tree

4 files changed

+40
-30
lines changed

4 files changed

+40
-30
lines changed

src/lib/slide-toggle/_slide-toggle-theme.scss

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import '../core/theming/palette';
22
@import '../core/theming/theming';
33

4-
54
@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
65
// Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
76
// the disabled styles.
@@ -16,21 +15,14 @@
1615
}
1716
}
1817

19-
// TODO(jelbourn): remove this when the real ripple has been applied to slide-toggle.
20-
@mixin _mat-slide-toggle-ripple($palette, $foreground, $thumb-checked-hue) {
21-
22-
&.mat-slide-toggle-focused {
23-
&:not(.mat-checked) .mat-ink-ripple {
24-
// When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity
25-
// of black in light themes and 12% of white in dark themes.
26-
background-color: mat-color($foreground, divider);
27-
}
28-
29-
.mat-ink-ripple {
30-
background-color: mat-color($palette, $thumb-checked-hue, 0.26);
31-
}
18+
// Applies the specified colors to the slide-toggle ripple elements.
19+
@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {
20+
&:not(.mat-checked) .mat-ripple-element {
21+
background-color: $ripple-unchecked-color;
22+
}
23+
.mat-ripple-element {
24+
background-color: $ripple-checked-color;
3225
}
33-
3426
}
3527

3628
@mixin mat-slide-toggle-theme($theme) {
@@ -50,19 +42,26 @@
5042
$bar-normal-color: mat-color($foreground, disabled);
5143
$bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));
5244

45+
// Ripple colors are based on the current palette and the state of the slide-toggle.
46+
// See https://material.google.com/components/selection-controls.html#selection-controls-switch
47+
$ripple-checked-opacity: 0.12;
48+
$ripple-unchecked-color: mat-color($foreground, base, if($is-dark, 0.12, 0.06));
49+
$ripple-primary-color: mat-color($primary, $thumb-checked-hue, $ripple-checked-opacity);
50+
$ripple-accent-color: mat-color($accent, $thumb-checked-hue, $ripple-checked-opacity);
51+
$ripple-warn-color: mat-color($warn, $thumb-checked-hue, $ripple-checked-opacity);
52+
5353
.mat-slide-toggle {
5454
@include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
55-
@include _mat-slide-toggle-ripple($accent, $foreground, $thumb-checked-hue);
56-
55+
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);
5756

5857
&.mat-primary {
5958
@include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
60-
@include _mat-slide-toggle-ripple($primary, $foreground, $thumb-checked-hue);
59+
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
6160
}
6261

6362
&.mat-warn {
6463
@include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
65-
@include _mat-slide-toggle-ripple($warn, $foreground, $thumb-checked-hue);
64+
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
6665
}
6766

6867
}

src/lib/slide-toggle/slide-toggle.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<label class="mat-slide-toggle-label">
1+
<label class="mat-slide-toggle-label" #label>
22

33
<div class="mat-slide-toggle-container">
44
<div class="mat-slide-toggle-bar"></div>
@@ -9,7 +9,12 @@
99
(slideend)="_onDragEnd()">
1010

1111
<div class="mat-slide-toggle-thumb">
12-
<div class="mat-ink-ripple"></div>
12+
<div class="mat-slide-toggle-ripple" md-ripple
13+
[mdRippleTrigger]="label"
14+
[mdRippleCentered]="true"
15+
[mdRippleDisabled]="disabled"
16+
[mdRippleSpeedFactor]="0.3">
17+
</div>
1318
</div>
1419
</div>
1520

src/lib/slide-toggle/slide-toggle.scss

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,9 @@ $mat-slide-toggle-bar-height: 14px !default;
1010
$mat-slide-toggle-thumb-size: 20px !default;
1111
$mat-slide-toggle-margin: 16px !default;
1212
$mat-slide-toggle-spacing: 8px !default;
13+
$mat-slide-toggle-ripple-radius: 23px !default;
1314

1415

15-
@mixin mat-switch-ripple() {
16-
// Temporary ripple effect for the thumb of the slide-toggle.
17-
// Bind to the parent selector and specify the current palette.
18-
@include mat-temporary-ink-ripple(slide-toggle, true);
19-
}
20-
2116
.mat-slide-toggle {
2217
display: flex;
2318
height: $mat-slide-toggle-height;
@@ -39,8 +34,6 @@ $mat-slide-toggle-spacing: 8px !default;
3934
}
4035
}
4136

42-
@include mat-switch-ripple();
43-
4437
&.mat-disabled {
4538

4639
.mat-slide-toggle-label, .mat-slide-toggle-container {
@@ -169,3 +162,15 @@ $mat-slide-toggle-spacing: 8px !default;
169162
transition-property: background-color;
170163
transition-delay: 50ms;
171164
}
165+
166+
// Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
167+
.mat-slide-toggle-ripple {
168+
position: absolute;
169+
top: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
170+
left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
171+
height: $mat-slide-toggle-ripple-radius * 2;
172+
width: $mat-slide-toggle-ripple-radius * 2;
173+
border-radius: 50%;
174+
z-index: 1;
175+
pointer-events: none;
176+
}

src/lib/slide-toggle/slide-toggle.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
CompatibilityModule,
2424
} from '../core';
2525
import {Observable} from 'rxjs/Observable';
26+
import {MdRippleModule} from '../core/ripple/ripple';
2627

2728

2829
export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
@@ -339,7 +340,7 @@ class SlideToggleRenderer {
339340

340341

341342
@NgModule({
342-
imports: [FormsModule, CompatibilityModule],
343+
imports: [FormsModule, MdRippleModule, CompatibilityModule],
343344
exports: [MdSlideToggle, CompatibilityModule],
344345
declarations: [MdSlideToggle],
345346
providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}],

0 commit comments

Comments
 (0)