skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: use computed radius size for checkbox ripple during 2018 material spec update transition (#13038)

Browse Source
This commit is contained in:
Joey Perrott
2018-09-11 12:33:28 -07:00
committed by GitHub
parent 948e563ed9
commit 6575ade81a
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/checkbox/checkbox.scss
+1 -1
View File
@@ -438,7 +438,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
left: calc(50% - #{$_mat-checkbox-ripple-radius}); left: calc(50% - #{$_mat-checkbox-ripple-radius});
top: calc(50% - #{$_mat-checkbox-ripple-radius}); top: calc(50% - #{$_mat-checkbox-ripple-radius});
height: $_mat-checkbox-ripple-radius * 2; height: $_mat-checkbox-ripple-radius * 2;
width: $_mat_checkbox-ripple-radius * 2; width: $_mat-checkbox-ripple-radius * 2;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
src/lib/checkbox/checkbox.ts
+27 -1
View File
@@ -9,6 +9,7 @@
import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {coerceBooleanProperty} from '@angular/cdk/coercion';
import { import {
AfterViewChecked,
AfterViewInit, AfterViewInit,
Attribute, Attribute,
ChangeDetectionStrategy, ChangeDetectionStrategy,
@@ -50,6 +51,11 @@ import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-conf
// Increasing integer for generating unique ids for checkbox components. // Increasing integer for generating unique ids for checkbox components.
let nextUniqueId = 0; let nextUniqueId = 0;
// TODO(josephperrott): Revert to constants for ripple radius once 2018 Checkbox updates have
// landed.
// The radius for the checkbox's ripple, in pixels.
let calculatedRippleRadius = 0;
/** /**
* Provider Expression that allows mat-checkbox to register as a ControlValueAccessor. * Provider Expression that allows mat-checkbox to register as a ControlValueAccessor.
* This allows it to support [(ngModel)]. * This allows it to support [(ngModel)].
@@ -127,7 +133,8 @@ export const _MatCheckboxMixinBase:
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple { AfterViewChecked, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex,
CanDisableRipple {
/** /**
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
@@ -210,6 +217,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
.subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
} }
ngAfterViewChecked() {
this._calculateRippleRadius();
}
ngOnDestroy() { ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._inputElement); this._focusMonitor.stopMonitoring(this._inputElement);
} }
@@ -457,4 +468,19 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
return `mat-checkbox-anim-${animSuffix}`; return `mat-checkbox-anim-${animSuffix}`;
} }
// TODO(josephperrott): Revert to constants for ripple radius once 2018 Checkbox updates have
// landed.
/**
* Calculate the radius for the ripple based on the ripple elements width. Only calculated once
* for the application.
*/
private _calculateRippleRadius() {
if (!calculatedRippleRadius) {
const rippleWidth =
this._elementRef.nativeElement.querySelector('.mat-checkbox-ripple').clientWidth || 0;
calculatedRippleRadius = rippleWidth / 2;
}
this.ripple.radius = calculatedRippleRadius;
}
} }