Skip to content

Commit 6381948

Browse files
devversiontinayuangao
authored andcommitted
fix(ripple): make ripples conform with specs (#2859)
* fix(ripple): make ripples conform with specs This makes the ripple service conform with the specifications and other Material reference implementations. See https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move This means the following: * Ripples now trigger on `mousedown` * Ripples now persists as long as the element is being hold. * No longer adds an unnecessary background ripple. * Removes the ugly `scale(0.00001)` for ripple animations Not only visually the ripple has been changed. The whole renderer has been rewritten and now has a very simple API, that can be easily used by developers. References #1434 * Fix linting and IE11 unsupported error * Ensure style recalculation * Address comments * Address feedback * Document that fade-out duration can't be modified through the speedFactor
1 parent e728771 commit 6381948

17 files changed

+357
-659
lines changed

src/demo-app/ripple/ripple-demo.html

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,18 @@
2121
<section>
2222
Speed
2323
<md-radio-group [(ngModel)]="rippleSpeed">
24-
<md-radio-button name="demo-ripple-options" value="0.1">Slow</md-radio-button>
24+
<md-radio-button name="demo-ripple-options" value="0.4">Slow</md-radio-button>
2525
<md-radio-button name="demo-ripple-options" value="1">Normal</md-radio-button>
26-
<md-radio-button name="demo-ripple-options" value="4">Fast</md-radio-button>
26+
<md-radio-button name="demo-ripple-options" value="2.5">Fast</md-radio-button>
2727
</md-radio-group>
2828
</section>
2929
<section>
3030
<md-input-container>
31-
<input mdInput placeholder="Max radius" aria-label="radius" [(ngModel)]="maxRadius">
31+
<input mdInput placeholder="Ripple radius" aria-label="radius" [(ngModel)]="radius">
3232
</md-input-container>
3333
<md-input-container>
3434
<input mdInput placeholder="Ripple color" aria-label="color" [(ngModel)]="rippleColor">
3535
</md-input-container>
36-
<md-input-container>
37-
<input mdInput
38-
placeholder="Ripple background"
39-
aria-label="background"
40-
[(ngModel)]="rippleBackgroundColor">
41-
</md-input-container>
4236
</section>
4337
<section>
4438
<button md-raised-button (click)="doManualRipple()">Manual ripple</button>
@@ -51,9 +45,8 @@
5145
[mdRippleCentered]="centered"
5246
[mdRippleDisabled]="disabled"
5347
[mdRippleUnbounded]="unbounded"
54-
[mdRippleMaxRadius]="maxRadius"
48+
[mdRippleRadius]="radius"
5549
[mdRippleColor]="rippleColor"
56-
[mdRippleBackgroundColor]="rippleBackgroundColor"
5750
[mdRippleSpeedFactor]="rippleSpeed">
5851
Click me
5952
</div>

src/demo-app/ripple/ripple-demo.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,22 @@ import {MdRipple} from '@angular/material';
99
styleUrls: ['ripple-demo.css'],
1010
})
1111
export class RippleDemo {
12-
@ViewChild(MdRipple) manualRipple: MdRipple;
12+
@ViewChild(MdRipple) ripple: MdRipple;
1313

1414
centered = false;
1515
disabled = false;
1616
unbounded = false;
1717
rounded = false;
18-
maxRadius: number = null;
18+
radius: number = null;
1919
rippleSpeed = 1;
2020
rippleColor = '';
21-
rippleBackgroundColor = '';
2221

2322
disableButtonRipples = false;
2423

2524
doManualRipple() {
26-
if (this.manualRipple) {
27-
window.setTimeout(() => this.manualRipple.start(), 10);
28-
window.setTimeout(() => this.manualRipple.end(0, 0), 500);
25+
if (this.ripple) {
26+
this.ripple.launch(0, 0, { centered: true });
2927
}
3028
}
29+
3130
}

src/lib/button/button.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<span class="mat-button-wrapper"><ng-content></ng-content></span>
22
<div md-ripple *ngIf="!_isRippleDisabled()" class="mat-button-ripple"
33
[class.mat-button-ripple-round]="_isRoundButton()"
4-
[mdRippleTrigger]="_getHostElement()"
5-
[mdRippleColor]="_isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
6-
mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
4+
[mdRippleTrigger]="_getHostElement()"></div>
75
<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
86
<div class="mat-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>

src/lib/checkbox/_checkbox-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,15 @@
6969
}
7070

7171
.mat-checkbox:not(.mat-checkbox-disabled) {
72-
&.mat-primary .mat-checkbox-ripple .mat-ripple-foreground {
72+
&.mat-primary .mat-checkbox-ripple .mat-ripple-element {
7373
background-color: mat-color($primary, 0.26);
7474
}
7575

76-
&.mat-accent .mat-checkbox-ripple .mat-ripple-foreground {
76+
&.mat-accent .mat-checkbox-ripple .mat-ripple-element {
7777
background-color: mat-color($accent, 0.26);
7878
}
7979

80-
&.mat-warn .mat-checkbox-ripple .mat-ripple-foreground {
80+
&.mat-warn .mat-checkbox-ripple .mat-ripple-element {
8181
background-color: mat-color($warn, 0.26);
8282
}
8383
}

src/lib/checkbox/checkbox.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
<div md-ripple *ngIf="!_isRippleDisabled()" class="mat-checkbox-ripple"
1919
[mdRippleTrigger]="_getHostElement()"
2020
[mdRippleCentered]="true"
21-
[mdRippleSpeedFactor]="0.3"
22-
mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
21+
[mdRippleSpeedFactor]="0.3"></div>
2322
<div class="mat-checkbox-frame"></div>
2423
<div class="mat-checkbox-background">
2524
<svg version="1.1"

src/lib/core/option/option.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<ng-content></ng-content>
2-
<div class="mat-option-ripple" *ngIf="!disabled" md-ripple mdRippleBackgroundColor="rgba(0,0,0,0)"
3-
[mdRippleTrigger]="_getHostElement()"></div>
2+
<div class="mat-option-ripple" *ngIf="!disabled" md-ripple [mdRippleTrigger]="_getHostElement()">
3+
</div>

src/lib/core/ripple/README.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@ Properties:
1919
| --- | --- | --- |
2020
| `mdRippleTrigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`.
2121
| `mdRippleColor` | string | Custom color for foreground ripples
22-
| `mdRippleBackgroundColor` | string | Custom color for the ripple background
2322
| `mdRippleCentered` | boolean | If true, the ripple animation originates from the center of the `md-ripple` bounds rather than from the location of the click event.
24-
| `mdRippleMaxRadius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle.
23+
| `mdRippleRadius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle.
2524
| `mdRippleUnbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds.
26-
| `mdRippleFocused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus.
2725
| `mdRippleDisabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples.

src/lib/core/ripple/_ripple.scss

Lines changed: 6 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
@import '../theming/theming';
22

3-
4-
$mat-ripple-focused-opacity: 0.1;
5-
$mat-ripple-background-fade-duration: 300ms;
6-
$mat-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
7-
$mat-ripple-foreground-initial-opacity: 0.25;
8-
$mat-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
9-
3+
$mat-ripple-element-color: rgba(0, 0, 0, 0.1);
104

115
@mixin mat-ripple() {
126
// The host element of an md-ripple directive should always have a position of "absolute" or
@@ -19,55 +13,19 @@ $mat-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
1913
overflow: visible;
2014
}
2115

22-
.mat-ripple-background {
23-
background-color: $mat-ripple-background-default-color;
24-
opacity: 0;
25-
transition: opacity $mat-ripple-background-fade-duration linear;
16+
.mat-ripple-element {
2617
position: absolute;
27-
left: 0;
28-
top: 0;
29-
right: 0;
30-
bottom: 0;
31-
}
32-
33-
.mat-ripple-unbounded .mat-ripple-background {
34-
display: none;
35-
}
36-
37-
.mat-ripple-background.mat-ripple-active {
38-
opacity: 1;
39-
}
40-
41-
.mat-ripple-focused .mat-ripple-background {
42-
opacity: 1;
43-
}
44-
45-
.mat-ripple-foreground {
46-
background-color: $mat-ripple-foreground-default-color;
4718
border-radius: 50%;
4819
pointer-events: none;
49-
opacity: $mat-ripple-foreground-initial-opacity;
50-
position: absolute;
51-
// The transition duration is manually set based on the ripple size.
52-
transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
53-
}
5420

55-
.mat-ripple-foreground.mat-ripple-fade-in {
56-
opacity: 1;
57-
}
21+
background-color: $mat-ripple-element-color;
5822

59-
.mat-ripple-foreground.mat-ripple-fade-out {
60-
opacity: 0;
23+
transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
24+
transform: scale(0);
6125
}
6226
}
6327

64-
@mixin mat-ripple-theme($theme) {
65-
$accent: map-get($theme, accent);
66-
67-
.mat-ripple-focused .mat-ripple-background {
68-
background-color: mat-color($accent, $mat-ripple-focused-opacity);
69-
}
70-
}
28+
@mixin mat-ripple-theme($theme) {}
7129

7230

7331
// A mixin, which generates temporary ink ripple on a given component.

0 commit comments

Comments
 (0)