From 0e2434568d6697594a07b4cdae7710f60a211949 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 23 May 2017 23:00:35 +0200 Subject: [PATCH] feat(snack-bar): allow setting the layout direction (#4726) * feat(snack-bar): allow setting the layout direction * Allows the consumer to set the layout direction of a snack bar. * Fixes some bad indentation in the snack bar tests. Fixes #4721. * fix: turn off view encapsulation * chore: revert capitalization --- src/lib/snack-bar/simple-snack-bar.scss | 7 ++- src/lib/snack-bar/simple-snack-bar.ts | 7 ++- src/lib/snack-bar/snack-bar-config.ts | 5 ++- src/lib/snack-bar/snack-bar.spec.ts | 59 ++++++++++++++----------- src/lib/snack-bar/snack-bar.ts | 10 ++--- 5 files changed, 54 insertions(+), 34 deletions(-) diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss index cdfed768ce8f..0b8292327dad 100644 --- a/src/lib/snack-bar/simple-snack-bar.scss +++ b/src/lib/snack-bar/simple-snack-bar.scss @@ -4,7 +4,7 @@ $mat-snack-bar-button-margin: 48px !default; -:host { +.mat-simple-snackbar { display: flex; justify-content: space-between; color: white; @@ -28,4 +28,9 @@ $mat-snack-bar-button-margin: 48px !default; size: inherit; weight: 600; } + + [dir='rtl'] & { + margin-right: $mat-snack-bar-button-margin; + margin-left: 0; + } } diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts index 7926ca0cc4cf..37e8c4cd1616 100644 --- a/src/lib/snack-bar/simple-snack-bar.ts +++ b/src/lib/snack-bar/simple-snack-bar.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, ViewEncapsulation} from '@angular/core'; import {MdSnackBarRef} from './snack-bar-ref'; @@ -11,6 +11,7 @@ import {MdSnackBarRef} from './snack-bar-ref'; selector: 'simple-snack-bar', templateUrl: 'simple-snack-bar.html', styleUrls: ['simple-snack-bar.css'], + encapsulation: ViewEncapsulation.None, host: { '[class.mat-simple-snackbar]': 'true', } @@ -31,5 +32,7 @@ export class SimpleSnackBar { } /** If the action button should be shown. */ - get hasAction(): boolean { return !!this.action; } + get hasAction(): boolean { + return !!this.action; + } } diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index ed59f8a88bb2..031c9c3af9e1 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -1,5 +1,5 @@ import {ViewContainerRef} from '@angular/core'; -import {AriaLivePoliteness} from '../core'; +import {AriaLivePoliteness, LayoutDirection} from '../core'; /** * Configuration used when opening a snack-bar. @@ -19,4 +19,7 @@ export class MdSnackBarConfig { /** Extra CSS classes to be added to the snack bar container. */ extraClasses?: string[]; + + /** Text layout direction for the snack bar. */ + direction?: LayoutDirection = 'ltr'; } diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 9e8a1ad523bd..76e085c494c5 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -309,36 +309,45 @@ describe('MdSnackBar', () => { tick(500); })); - it('should dismiss automatically after a specified timeout', fakeAsync(() => { - let dismissObservableCompleted = false; - let config = new MdSnackBarConfig(); - config.duration = 250; - let snackBarRef = snackBar.open('content', 'test', config); - snackBarRef.afterDismissed().subscribe(() => { - dismissObservableCompleted = true; - }); + it('should dismiss automatically after a specified timeout', fakeAsync(() => { + let dismissObservableCompleted = false; + let config = new MdSnackBarConfig(); + config.duration = 250; + let snackBarRef = snackBar.open('content', 'test', config); + snackBarRef.afterDismissed().subscribe(() => { + dismissObservableCompleted = true; + }); - viewContainerFixture.detectChanges(); - flushMicrotasks(); - expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed'); + viewContainerFixture.detectChanges(); + flushMicrotasks(); + expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed'); - tick(1000); - viewContainerFixture.detectChanges(); - flushMicrotasks(); - expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); - })); + tick(1000); + viewContainerFixture.detectChanges(); + flushMicrotasks(); + expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); + })); - it('should add extra classes to the container', () => { - snackBar.open(simpleMessage, simpleActionLabel, { - viewContainerRef: testViewContainerRef, - extraClasses: ['one', 'two'] - }); + it('should add extra classes to the container', () => { + snackBar.open(simpleMessage, simpleActionLabel, { + viewContainerRef: testViewContainerRef, + extraClasses: ['one', 'two'] + }); - let containerClasses = overlayContainerElement.querySelector('snack-bar-container').classList; + let containerClasses = overlayContainerElement.querySelector('snack-bar-container').classList; + + expect(containerClasses).toContain('one'); + expect(containerClasses).toContain('two'); + }); + + it('should set the layout direction', () => { + snackBar.open(simpleMessage, simpleActionLabel, { direction: 'rtl' }); + + let pane = overlayContainerElement.querySelector('.cdk-overlay-pane'); + + expect(pane.getAttribute('dir')).toBe('rtl', 'Expected the pane to be in RTL mode.'); + }); - expect(containerClasses).toContain('one'); - expect(containerClasses).toContain('two'); - }); }); describe('MdSnackBar with parent MdSnackBar', () => { diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 4572069083d2..473bd0ef8925 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -54,7 +54,7 @@ export class MdSnackBar { */ openFromComponent(component: ComponentType, config?: MdSnackBarConfig): MdSnackBarRef { config = _applyConfigDefaults(config); - let overlayRef = this._createOverlay(); + let overlayRef = this._createOverlay(config); let snackBarContainer = this._attachSnackBarContainer(overlayRef, config); let snackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef); @@ -139,12 +139,12 @@ export class MdSnackBar { /** * Creates a new overlay and places it in the correct location. + * @param config The user-specified snack bar config. */ - private _createOverlay(): OverlayRef { + private _createOverlay(config: MdSnackBarConfig): OverlayRef { let state = new OverlayState(); - state.positionStrategy = this._overlay.position().global() - .centerHorizontally() - .bottom('0'); + state.direction = config.direction; + state.positionStrategy = this._overlay.position().global().centerHorizontally().bottom('0'); return this._overlay.create(state); } }