Skip to content

Commit

Permalink
feat(checkbox): add ripple (#1611)
Browse files Browse the repository at this point in the history
  • Loading branch information
tinayuangao authored and jelbourn committed Oct 26, 2016
1 parent 3c79855 commit ef4c3c9
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 8 deletions.
7 changes: 3 additions & 4 deletions src/lib/checkbox/_checkbox-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,17 +68,16 @@
}
}

// TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
.md-checkbox-focused {
&.md-primary .md-ink-ripple {
&.md-primary .md-checkbox-ripple .md-ripple-foreground {
background-color: md-color($primary, 0.26);
}

&.md-accent .md-ink-ripple {
&.md-accent .md-checkbox-ripple .md-ripple-foreground {
background-color: md-color($accent, 0.26);
}

&.md-warn .md-ink-ripple {
&.md-warn .md-checkbox-ripple .md-ripple-foreground {
background-color: md-color($warn, 0.26);
}
}
Expand Down
6 changes: 5 additions & 1 deletion src/lib/checkbox/checkbox.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@
(blur)="_onInputBlur()"
(change)="_onInteractionEvent($event)"
(click)="_onInputClick($event)">
<div class="md-ink-ripple"></div>
<div md-ripple *ngIf="!disableRipple" class="md-checkbox-ripple"
[md-ripple-trigger]="getHostElement()"
[md-ripple-centered]="true"
[md-ripple-speed-factor]="0.3"
md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
<div class="md-checkbox-frame"></div>
<div class="md-checkbox-background">
<svg version="1.1"
Expand Down
13 changes: 12 additions & 1 deletion src/lib/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ $md-checkbox-item-spacing: $md-toggle-padding;
$_md-checkbox-mark-path-length: 22.910259;
$_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);

// The ripple size of the checkbox
$md-checkbox-ripple-size: 15px;

// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
@keyframes md-checkbox-fade-in-background {
0% {
Expand Down Expand Up @@ -414,4 +417,12 @@ md-checkbox {
left: 50%;
}

@include md-temporary-ink-ripple(checkbox);
.md-checkbox-ripple {
position: absolute;
left: -$md-checkbox-ripple-size;
top: -$md-checkbox-ripple-size;
right: -$md-checkbox-ripple-size;
bottom: -$md-checkbox-ripple-size;
border-radius: 50%;
z-index: 1;
}
20 changes: 19 additions & 1 deletion src/lib/checkbox/checkbox.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -483,6 +483,20 @@ describe('MdCheckbox', () => {

expect(inputElement.tabIndex).toBe(13);
});

it('should remove ripple if md-ripple-disabled input is set', async(() => {
testComponent.disableRipple = true;
fixture.detectChanges();

expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length)
.toBe(0, 'Expect no [md-ripple] in checkbox');

testComponent.disableRipple = false;
fixture.detectChanges();

expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length)
.toBe(1, 'Expect [md-ripple] in checkbox');
}));
});

describe('with multiple checkboxes', () => {
Expand Down Expand Up @@ -598,12 +612,16 @@ class MultipleCheckboxes { }
/** Simple test component with tabIndex */
@Component({
template: `
<md-checkbox [tabindex]="customTabIndex" [disabled]="isDisabled">
<md-checkbox
[tabindex]="customTabIndex"
[disabled]="isDisabled"
[disableRipple]="disableRipple">
</md-checkbox>`,
})
class CheckboxWithTabIndex {
customTabIndex: number = 7;
isDisabled: boolean = false;
disableRipple: boolean = false;
}

/** Simple test component with an aria-label set. */
Expand Down
15 changes: 14 additions & 1 deletion src/lib/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ import {
NgModule,
ModuleWithProviders,
} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
import {coerceBooleanProperty} from '../core/coersion/boolean-property';

import {MdRippleModule} from '../core';

/**
* Monotonically increasing integer used to auto-generate unique ids for checkbox components.
Expand Down Expand Up @@ -89,6 +90,13 @@ export class MdCheckbox implements ControlValueAccessor {
/** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
@Input() id: string = `md-checkbox-${++nextId}`;

/** Whether the ripple effect on click should be disabled. */
private _disableRipple: boolean;

@Input()
get disableRipple(): boolean { return this._disableRipple; }
set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }

/** ID to be applied to the `input` element */
get inputId(): string {
return `input-${this.id}`;
Expand Down Expand Up @@ -338,10 +346,15 @@ export class MdCheckbox implements ControlValueAccessor {

return `md-checkbox-anim-${animSuffix}`;
}

getHostElement() {
return this._elementRef.nativeElement;
}
}


@NgModule({
imports: [CommonModule, MdRippleModule],
exports: [MdCheckbox],
declarations: [MdCheckbox],
})
Expand Down

0 comments on commit ef4c3c9

Please sign in to comment.