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

fix(tabs): server-side rendering error when aligning ink bar (#5455)

Browse Source 
* Fixes a server-side rendering error in the ink bar due to a lack of `requestAnimationFrame`. The error is being logged, but it didn't fail the build, because it happens in a lifecycle hook.
* Enables the checkbox and button toggle cases in the kitchen sink since it looks like they're not failing anymore.
This commit is contained in:
Kristiyan Kostadinov
2017-07-07 00:47:30 +02:00
committed by mmalerba
parent 8de3b98935
commit 448db8b416
2 changed files with 28 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/tabs/ink-bar.ts
+12 -17
View File
@@ -33,14 +33,13 @@ export class MdInkBar {
alignToElement(element: HTMLElement) {
this.show();
this._ngZone.runOutsideAngular(() => {
requestAnimationFrame(() => {
this._renderer.setStyle(this._elementRef.nativeElement, 'left',
this._getLeftPosition(element));
this._renderer.setStyle(this._elementRef.nativeElement, 'width',
this._getElementWidth(element));
if (typeof requestAnimationFrame !== 'undefined') {
this._ngZone.runOutsideAngular(() => {
requestAnimationFrame(() => this._setStyles(element));
});
});
} else {
this._setStyles(element);
}
}
/** Shows the ink bar. */
@@ -54,18 +53,14 @@ export class MdInkBar {
}
/**
* Generates the pixel distance from the left based on the provided element in string format.
* Sets the proper styles to the ink bar element.
* @param element
*/
private _getLeftPosition(element: HTMLElement): string {
return element ? element.offsetLeft + 'px' : '0';
}
private _setStyles(element: HTMLElement) {
const left = element ? (element.offsetLeft || 0) + 'px' : '0';
const width = element ? (element.offsetWidth || 0) + 'px' : '0';
/**
* Generates the pixel width from the provided element in string format.
* @param element
*/
private _getElementWidth(element: HTMLElement): string {
return element ? element.offsetWidth + 'px' : '0';
this._renderer.setStyle(this._elementRef.nativeElement, 'left', left);
this._renderer.setStyle(this._elementRef.nativeElement, 'width', width);
}
}
src/universal-app/kitchen-sink/kitchen-sink.html
+16 -18
View File
@@ -21,22 +21,21 @@
<a md-fab href="https://google.com">Google</a>
<a md-mini-fab href="https://google.com">Google</a>
<!-- Button toggle doesn't work due to https://github.com/angular/angular/issues/17050 -->
<!--<h2>Button toggle</h2>-->
<h2>Button toggle</h2>
<!--<h3>Single selection</h3>-->
<!--<md-button-toggle-group>-->
<!--<md-button-toggle>Ketchup</md-button-toggle>-->
<!--<md-button-toggle>Mustard</md-button-toggle>-->
<!--<md-button-toggle>Mayo</md-button-toggle>-->
<!--</md-button-toggle-group>-->
<h3>Single selection</h3>
<md-button-toggle-group>
<md-button-toggle>Ketchup</md-button-toggle>
<md-button-toggle>Mustard</md-button-toggle>
<md-button-toggle>Mayo</md-button-toggle>
</md-button-toggle-group>
<!--<h3>Multi selection</h3>-->
<!--<md-button-toggle-group multiple>-->
<!--<md-button-toggle>Ketchup</md-button-toggle>-->
<!--<md-button-toggle>Mustard</md-button-toggle>-->
<!--<md-button-toggle>Mayo</md-button-toggle>-->
<!--</md-button-toggle-group>-->
<h3>Multi selection</h3>
<md-button-toggle-group multiple>
<md-button-toggle>Ketchup</md-button-toggle>
<md-button-toggle>Mustard</md-button-toggle>
<md-button-toggle>Mayo</md-button-toggle>
</md-button-toggle-group>
<h3>Standalone</h3>
<md-button-toggle>Hyperspinner enabled</md-button-toggle>
@@ -63,11 +62,10 @@
</md-card-footer>
</md-card>
<!-- Checkbox doesn't work due to https://github.com/angular/angular/issues/17050 -->
<!--<h2>Checkbox</h2>-->
<h2>Checkbox</h2>
<!--<md-checkbox>With a label</md-checkbox>-->
<!--<md-checkbox></md-checkbox>Without a label-->
<md-checkbox>With a label</md-checkbox>
<md-checkbox></md-checkbox>Without a label
<h2>Chips</h2>