Skip to content

Commit aeb1c99

Browse files
ddinchevaddincheva
authored
Merge branch 'master' into rkaraivanov/grids-spa-and-wellbeing
2 parents bc42564 + e86a130 commit aeb1c99

File tree

20 files changed

+376
-521
lines changed

20 files changed

+376
-521
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,12 @@ All notable changes for each version of this project will be documented in this
4444
- `pagerHidden `
4545
- `dropdownEnabled`
4646
- `dropdownHidden`
47-
47+
- `IgxSnackbarComponent`
48+
- Deprecated property `message` is now removed;
49+
- **Breaking Change** - the `snackbarAnimationStarted` and `snackbarAnimationDone` methods are now removed. The `animationStarted` and `animationDone` events now provide reference to the `ToggleViewEventArgs` interface as an argument and are emitted by the `onOpened` and `onClosed` events of the `IgxToggleDirective`.
50+
- `IgxToastComponent`
51+
- Deprecated property `message` is now removed;
52+
- **Breaking Change** - The `isVisibleChange` event now provides reference to the `ToggleViewEventArgs` interface as an argument.
4853

4954
- **Breaking Change** - `IgxOverlayService` events are renamed as follows:
5055
- `onOpening` -> `opening`
@@ -3222,7 +3227,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
32223227
[igxForContainerSize]='"500px"'
32233228
[igxForItemSize]='"50px"'
32243229
let-rowIndex="index">
3225-
<div style='height:50px;'>{{rowIndex}} : {{item.text}}</div>
3230+
<div style='height: 50px;'>{{rowIndex}} : {{item.text}}</div>
32263231
</ng-template>
32273232
</div>
32283233
```

‎projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
212212
* ```
213213
* ```html
214214
* <igx-buttongroup #MyChild [multiSelection]="!multi" (selected)="selectedHandler($event)"></igx-buttongroup>
215-
* <igx-toast #toast message="You have made a selection!"></igx-toast>
215+
* <igx-toast #toast>You have made a selection!</igx-toast>
216216
* ```
217217
*/
218218
@Output()
@@ -230,7 +230,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
230230
* ```
231231
* ```html
232232
* <igx-buttongroup> #MyChild [multiSelection]="multi" (deselected)="deselectedHandler($event)"></igx-buttongroup>
233-
* <igx-toast #toast message="You have deselected a button!"></igx-toast>
233+
* <igx-toast #toast>You have deselected a button!</igx-toast>
234234
* ```
235235
*/
236236
@Output()

‎projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
/// @requires --var
8888
@mixin igx-snackbar($theme) {
8989
@include igx-css-vars($theme);
90+
@include fade-in();
9091

9192
// @debug $theme;
9293

@@ -114,6 +115,10 @@
114115
backdrop-filter: blur(8px);
115116
}
116117

118+
%igx-snackbar-message {
119+
@include animation('fade-in' .35s ease-out);
120+
}
121+
117122
%igx-snackbar-button {
118123
background: transparent;
119124
color: --var($theme, 'button-color');
@@ -129,6 +134,7 @@
129134
font-size: inherit;
130135
font-family: inherit;
131136
cursor: pointer;
137+
@include animation('fade-in' .35s ease-out);
132138

133139
&:hover {
134140
color: --var($theme, 'button-color');

‎projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { Directive, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
import { IToggleView } from '../../core/navigation';
4+
import { IPositionStrategy, OverlaySettings } from '../../services/public_api';
5+
import { IgxOverlayOutletDirective, IgxToggleDirective } from '../toggle/toggle.directive';
6+
7+
@Directive()
8+
export abstract class IgxNotificationsDirective extends IgxToggleDirective
9+
implements IToggleView, OnDestroy {
10+
/**
11+
* Sets/gets the `aria-live` attribute.
12+
* If not set, `aria-live` will have value `"polite"`.
13+
*/
14+
@HostBinding('attr.aria-live')
15+
@Input()
16+
public ariaLive = 'polite';
17+
18+
/**
19+
* Sets/gets whether the element will be hidden after the `displayTime` is over.
20+
* Default value is `true`.
21+
*/
22+
@Input()
23+
public autoHide = true;
24+
25+
/**
26+
* Sets/gets the duration of time span (in milliseconds) which the element will be visible
27+
* after it is being shown.
28+
* Default value is `4000`.
29+
*/
30+
@Input()
31+
public displayTime = 4000;
32+
33+
/**
34+
* Gets/Sets the container used for the element.
35+
*
36+
* @remarks
37+
* `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
38+
*/
39+
@Input()
40+
public outlet: IgxOverlayOutletDirective | ElementRef;
41+
42+
/**
43+
* Enables/Disables the visibility of the element.
44+
* If not set, the `isVisible` attribute will have value `false`.
45+
*/
46+
@Input()
47+
public get isVisible() {
48+
return !this.collapsed;
49+
}
50+
51+
public set isVisible(value) {
52+
if (value !== this.isVisible) {
53+
if (value) {
54+
requestAnimationFrame(() => {
55+
this.open();
56+
});
57+
} else {
58+
this.close();
59+
}
60+
}
61+
}
62+
63+
/**
64+
* @hidden
65+
* @internal
66+
*/
67+
public textMessage: string | OverlaySettings = '';
68+
69+
/**
70+
* @hidden
71+
*/
72+
public timeoutId: number;
73+
public d$ = new Subject<boolean>();
74+
75+
/**
76+
* @hidden
77+
*/
78+
protected strategy: IPositionStrategy;
79+
80+
/**
81+
* @hidden
82+
*/
83+
public open() {
84+
clearInterval(this.timeoutId);
85+
86+
const overlaySettings: OverlaySettings = {
87+
positionStrategy: this.strategy,
88+
closeOnEscape: false,
89+
closeOnOutsideClick: false,
90+
modal: false,
91+
outlet: this.outlet
92+
};
93+
94+
super.open(overlaySettings);
95+
96+
if (this.autoHide) {
97+
this.timeoutId = window.setTimeout(() => {
98+
this.close();
99+
}, this.displayTime);
100+
}
101+
}
102+
103+
/**
104+
* Hides the element.
105+
*/
106+
public close() {
107+
clearTimeout(this.timeoutId);
108+
super.close();
109+
}
110+
111+
/**
112+
* @hidden
113+
*/
114+
public ngOnDestroy() {
115+
this.d$.next(true);
116+
this.d$.complete();
117+
}
118+
}

‎projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
338338
const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event };
339339
delete this._overlayId;
340340
this.onClosed.emit(closedEventArgs);
341+
this.cdr.markForCheck();
341342
};
342343

343344
private subscribe() {

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,10 @@
147147
</div>
148148

149149
<div class="igx-grid__addrow-snackbar">
150-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
150+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
151151
</div>
152+
153+
<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
152154
</div>
153155

154156

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,10 @@
108108
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
109109
</div>
110110
<div class="igx-grid__addrow-snackbar">
111-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
111+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
112112
</div>
113+
114+
<div igxOverlayOutlet #igxBodyOverlayOutlet></div>
113115
</div>
114116

115117
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,10 @@
101101
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
102102
</div>
103103
<div class="igx-grid__addrow-snackbar">
104-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
104+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
105105
</div>
106+
107+
<div igxOverlayOutlet #igxBodyOverlayOutlet></div>
106108
</div>
107109

108110
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>

‎projects/igniteui-angular/src/lib/snackbar/snackbar.component.html

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
<div class="igx-snackbar" *ngIf="isVisible" (@slideInOut.start)="snackbarAnimationStarted($event)" (@slideInOut.done)="snackbarAnimationDone($event)"
2-
[@slideInOut]="isVisible">
3-
<div class="igx-snackbar__message" [@fadeInOut]="isVisible">
4-
{{ snackbarMessage }}
5-
<ng-content></ng-content>
6-
</div>
7-
<button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" [@fadeInOut] (click)="triggerAction()">
8-
{{ actionText }}
9-
</button>
1+
<div class="igx-snackbar__message">
2+
{{ textMessage }}
3+
<ng-content></ng-content>
104
</div>
5+
<button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" (click)="triggerAction()">
6+
{{ actionText }}
7+
</button>

0 commit comments

Comments
 (0)