Skip to content

Commit ae5b70f

Browse files
SAndreevaSAndreeva
committed
feat(pickers): remove css and unify retemplating approach #4647 
1 parent b52a5c2 commit ae5b70f

10 files changed

+52
-54
lines changed

‎projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<ng-template #defaultDatePickerActions>
2-
<button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
3-
{{ cancelButtonLabel }}
4-
</button>
5-
<button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
6-
{{ todayButtonLabel }}
7-
</button>
2+
<div *ngIf="cancelButtonLabel || todayButtonLabel" class="igx-date-picker__buttons">
3+
<button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
4+
{{ cancelButtonLabel }}
5+
</button>
6+
<button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
7+
{{ todayButtonLabel }}
8+
</button>
9+
</div>
810
</ng-template>
911
<div>
1012
<igx-calendar #calendar></igx-calendar>
11-
<div [class]="datePickerActions && datePickerActions.cssClasses ? datePickerActions.cssClasses : 'igx-date-picker__buttons'">
12-
<ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
13-
</div>
13+
<ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
1414
</div>

‎projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts

-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,4 @@ export class IgxDatePickerTemplateDirective {
2121
})
2222
export class IgxDatePickerActionsDirective {
2323
constructor(public template: TemplateRef<any>) { }
24-
25-
@Input()
26-
public cssClasses = '';
2724
}

‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@
2424
</ng-template>
2525
<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
2626

27+
<ng-template #defaultTimePickerActions>
28+
<div *ngIf="cancelButtonLabel || okButtonLabel" class="igx-time-picker__buttons">
29+
<button *ngIf="cancelButtonLabel" igxButton="flat" (click)="cancelButtonClick()">
30+
{{cancelButtonLabel}}
31+
</button>
32+
<button *ngIf="okButtonLabel" igxButton="flat" (click)="okButtonClick()">
33+
{{okButtonLabel}}
34+
</button>
35+
</div>
36+
</ng-template>
2737
<div #container igxToggle class="igx-time-picker"
2838
[ngClass]="{'igx-time-picker--dropdown': mode === 'dropdown', 'igx-time-picker--vertical': vertical && mode === 'dialog'}">
2939
<div *ngIf="mode === 'dialog'" class="igx-time-picker__header">
@@ -44,16 +54,6 @@ <h2 class="igx-time-picker__header-hour">
4454
<span [igxAmPmItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
4555
</div>
4656
</div>
47-
<div *ngIf="!timePickerActionsDirective && (cancelButtonLabel || okButtonLabel)" class="igx-time-picker__buttons">
48-
<button *ngIf="cancelButtonLabel" igxButton="flat" (click)="cancelButtonClick()">
49-
{{cancelButtonLabel}}
50-
</button>
51-
<button *ngIf="okButtonLabel" igxButton="flat" (click)="okButtonClick()">
52-
{{okButtonLabel}}
53-
</button>
54-
</div>
55-
<ng-container *ngIf="timePickerActionsDirective">
56-
<ng-content select="igx-time-picker-actions,[igxTimePickerActions]"></ng-content>
57-
</ng-container>
57+
<ng-container *ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions"></ng-container>
5858
</div>
5959
</div>

‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1523,7 +1523,7 @@ describe('IgxTimePicker', () => {
15231523
tick();
15241524
fixture.detectChanges();
15251525

1526-
const buttons = document.getElementsByClassName('igx-time-picker__buttons')[0];
1526+
const buttons = document.getElementsByClassName('test')[0];
15271527
expect(buttons.children.length).toEqual(1);
15281528

15291529
const customBtn = buttons.children[0] as HTMLElement;
@@ -1707,9 +1707,11 @@ template: `
17071707
</igx-suffix>
17081708
</igx-input-group>
17091709
</ng-template>
1710-
<igx-time-picker-actions>
1711-
<button igxButton="flat" (click)="select(picker)">SELECT</button>
1712-
</igx-time-picker-actions>
1710+
<ng-template igxTimePickerActions>
1711+
<div class="test">
1712+
<button igxButton="flat" (click)="select(picker)">SELECT</button>
1713+
</div>
1714+
</ng-template>
17131715
</igx-time-picker>
17141716
`
17151717
})

‎projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts

+2-8
Original file line numberDiff line numberDiff line change
@@ -349,14 +349,8 @@ export class IgxTimePickerTemplateDirective {
349349
* This directive can be used to add custom action buttons to the dropdownb/dialog.
350350
*/
351351
@Directive({
352-
selector: 'igx-time-picker-actions,[igxTimePickerActions]'
352+
selector: '[igxTimePickerActions]'
353353
})
354354
export class IgxTimePickerActionsDirective {
355-
@HostBinding('class')
356-
get defaultClass(): string {
357-
return this.cssClasses ? this.cssClasses : 'igx-time-picker__buttons';
358-
};
359-
360-
@Input()
361-
public cssClasses = '';
355+
constructor(public template: TemplateRef<any>) { }
362356
}

‎src/app/date-picker/date-picker.sample.html

+14-6
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@ <h4 class="sample-title">DropDown Date Picker</h4>
5555
</igx-suffix>
5656
</igx-input-group>
5757
</ng-template>
58-
<ng-template igxDatePickerActions [cssClasses]="actionBtnCss">
59-
<button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
58+
<ng-template igxDatePickerActions>
59+
<div class="action-buttons">
60+
<button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
61+
</div>
6062
</ng-template>
6163
</igx-date-picker>
6264
<label>Date: {{ retemplated.value | date:'longDate'}}</label>
@@ -77,11 +79,17 @@ <h4 class="sample-title">DropDown Date Picker</h4>
7779
<h4 class="sample-title">DropDown Date Picker bind with ngModel</h4>
7880
<p class="sample-description">isSpinLoop set to false</p>
7981
<div class="preview">
80-
<igx-date-picker #editableDatePicker mode="dropdown" [weekStart]="1" [(ngModel)]="date1"
81-
[isSpinLoop]="false">
82+
<igx-date-picker #editableDatePicker
83+
mode="dropdown"
84+
cancelButtonLabel="close"
85+
todayButtonLabel="today"
86+
[weekStart]="1"
87+
[(ngModel)]="date1"
88+
[isSpinLoop]="false">
8289
</igx-date-picker>
83-
<button igxButton igxRipple type="raised" (click)="deselect(editableDatePicker)">Deselect
84-
date</button>
90+
<button igxButton igxRipple type="raised" (click)="deselect(editableDatePicker)">
91+
Deselect date
92+
</button>
8593
</div>
8694
</article>
8795
</section>

‎src/app/date-picker/date-picker.sample.scss

+4-6
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@
77
width: 200px;
88
}
99

10-
:host ::ng-deep {
11-
.action-buttons {
12-
display: flex;
13-
flex-flow: column;
14-
margin: 10px;
15-
}
10+
.action-buttons {
11+
display: flex;
12+
flex-flow: column;
13+
margin: 10px;
1614
}

‎src/app/date-picker/date-picker.sample.ts

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { DatePipe, formatDate } from '@angular/common';
1414

1515
export class DatePickerSampleComponent {
1616
date = new Date('10/3/2018');
17-
actionBtnCss = "action-buttons";
1817

1918
public formatOptions = {
2019
day: 'numeric',

‎src/app/time-picker/time-picker.sample.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h4 class="sample-title">Templated Time Picker</h4>
7676
<h4 class="sample-title">Templated Time Picker</h4>
7777
<p class="sample-description">Time picker with dropdown mode</p>
7878
<div class="preview">
79-
<igx-time-picker [value]="today" format="HH:mm" mode="dropdown">
79+
<igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm" mode="dropdown">
8080
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
8181
<igx-input-group>
8282
<input #dropDownTarget igxInput [value]="displayTime" (blur)="onBlur(dropDownTarget.value, value)"/>
@@ -101,9 +101,11 @@ <h4 class="sample-title">Templated Time Picker</h4>
101101
</igx-suffix>
102102
</igx-input-group>
103103
</ng-template>
104-
<igx-time-picker-actions [cssClasses]="actionBtnCss">
105-
<button igxButton="flat" (click)="selectToday(picker)">Today</button>
106-
</igx-time-picker-actions>
104+
<ng-template igxTimePickerActions>
105+
<div class="action-buttons">
106+
<button igxButton="flat" (click)="selectToday(picker)">Today</button>
107+
</div>
108+
</ng-template>
107109
</igx-time-picker>
108110
</div>
109111
</article>

‎src/app/time-picker/time-picker.sample.ts

-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ export class TimePickerSampleComponent implements AfterViewInit {
1010
max = '19:00';
1111
min = '09:00';
1212

13-
actionBtnCss = 'action-buttons';
14-
1513
itemsDelta = { hours: 1, minutes: 5 };
1614
format = 'hh:mm tt';
1715
isSpinLoop = true;

0 commit comments

Comments
 (0)