Skip to content

Commit 0ffddf3

Browse files
edcarrollmcosta74
edcarroll
authored and
mcosta74
committed
feat(datepicker): Moved calendar view title to separate component
Fixes style issue introduced by a long locale formatting string
1 parent c2fab41 commit 0ffddf3

File tree

8 files changed

+54
-37
lines changed

8 files changed

+54
-37
lines changed

‎src/modules/datepicker/components/calendar-view-title.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, Input, EventEmitter, Output } from "@angular/core";
2+
import { CalendarRangeService } from "../services/calendar-range.service";
3+
4+
@Component({
5+
selector: "sui-calendar-view-title",
6+
template: `
7+
<span class="title link" (click)="onZoomOut.emit()">
8+
<ng-content></ng-content>
9+
</span>
10+
<span class="prev link" [class.disabled]="!ranges?.canMovePrevious" (click)="ranges?.movePrevious()">
11+
<i class="chevron left icon"></i>
12+
</span>
13+
<span class="next link" [class.disabled]="!ranges?.canMoveNext" (click)="ranges?.moveNext()">
14+
<i class="chevron right icon"></i>
15+
</span>
16+
`,
17+
styles: [`
18+
.title.link {
19+
display: inline-block;
20+
margin-left: 2rem;
21+
margin-right: 2rem;
22+
}
23+
`]
24+
})
25+
export class SuiCalendarViewTitle {
26+
27+
@Input()
28+
public ranges:CalendarRangeService;
29+
30+
@Output("zoomOut")
31+
public onZoomOut:EventEmitter<void>;
32+
33+
constructor() {
34+
this.onZoomOut = new EventEmitter<void>();
35+
}
36+
}

‎src/modules/datepicker/datepicker.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { FormsModule } from "@angular/forms";
44
import { SuiPopupModule } from "../popup/index";
55
import { SuiLocalizationModule } from "../../behaviors/localization/index";
66
import { SuiUtilityModule } from "../../misc/util/index";
7+
import { SuiCalendarViewTitle } from "./components/calendar-view-title";
78
import { SuiCalendarYearView } from "./views/year-view";
89
import { SuiCalendarMonthView } from "./views/month-view";
910
import { SuiCalendarItem } from "./directives/calendar-item";
@@ -28,6 +29,7 @@ import {
2829
declarations: [
2930
SuiCalendarItem,
3031

32+
SuiCalendarViewTitle,
3133
SuiCalendarYearView,
3234
SuiCalendarMonthView,
3335
SuiCalendarDateView,

‎src/modules/datepicker/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export * from "./classes/calendar-mappings";
33
export * from "./classes/date-comparer";
44
export * from "./classes/date-parser";
55

6+
export * from "./components/calendar-view-title";
67
export * from "./components/datepicker";
78

89
export * from "./directives/calendar-item";

‎src/modules/datepicker/views/date-view.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,9 @@ export class CalendarRangeDateService extends CalendarRangeService {
2626
<thead>
2727
<tr>
2828
<th colspan="7">
29-
<span class="link" (click)="zoomOut()">{{ date }}</span>
30-
<span class="prev link" [class.disabled]="!ranges.canMovePrevious" (click)="ranges.movePrevious()">
31-
<i class="chevron left icon"></i>
32-
</span>
33-
<span class="next link" [class.disabled]="!ranges.canMoveNext" (click)="ranges.moveNext()">
34-
<i class="chevron right icon"></i>
35-
</span>
29+
<sui-calendar-view-title [ranges]="ranges" (zoomOut)="zoomOut()">
30+
{{ date }}
31+
</sui-calendar-view-title>
3632
</th>
3733
</tr>
3834
<tr>

‎src/modules/datepicker/views/hour-view.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export class CalendarRangeHourService extends CalendarRangeService {
1111
const customFormat:string = this.service.localeValues.formats.time.replace(/[ms]/g, "0");
1212
item.humanReadable = new DateParser(customFormat, this.service.localeValues).format(item.date);
1313
item.isOutsideRange = false;
14-
item.isToday = false;
1514
}
1615
}
1716

@@ -22,13 +21,9 @@ export class CalendarRangeHourService extends CalendarRangeService {
2221
<thead *ngIf="service.config.mode != 1">
2322
<tr>
2423
<th colspan="4">
25-
<span class="link" (click)="zoomOut()">{{ date }}</span>
26-
<span class="prev link" [class.disabled]="!ranges.canMovePrevious" (click)="ranges.movePrevious()">
27-
<i class="chevron left icon"></i>
28-
</span>
29-
<span class="next link" [class.disabled]="!ranges.canMoveNext" (click)="ranges.moveNext()">
30-
<i class="chevron right icon"></i>
31-
</span>
24+
<sui-calendar-view-title [ranges]="ranges" (zoomOut)="zoomOut()">
25+
{{ date }}
26+
</sui-calendar-view-title>
3227
</th>
3328
</tr>
3429
</thead>

‎src/modules/datepicker/views/minute-view.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export class CalendarRangeMinuteService extends CalendarRangeService {
2020
public configureItem(item:CalendarItem, baseDate:Date):void {
2121
item.humanReadable = new DateParser(this.service.localeValues.formats.time, this.service.localeValues).format(item.date);
2222
item.isOutsideRange = false;
23-
item.isToday = false;
2423
}
2524
}
2625

@@ -31,13 +30,9 @@ export class CalendarRangeMinuteService extends CalendarRangeService {
3130
<thead>
3231
<tr>
3332
<th colspan="4">
34-
<span class="link" (click)="zoomOut()">{{ date }}</span>
35-
<span class="prev link" [class.disabled]="!ranges.canMovePrevious" (click)="ranges.movePrevious()">
36-
<i class="chevron left icon"></i>
37-
</span>
38-
<span class="next link" [class.disabled]="!ranges.canMoveNext" (click)="ranges.moveNext()">
39-
<i class="chevron right icon"></i>
40-
</span>
33+
<sui-calendar-view-title [ranges]="ranges" (zoomOut)="zoomOut()">
34+
{{ date }}
35+
</sui-calendar-view-title>
4136
</th>
4237
</tr>
4338
</thead>

‎src/modules/datepicker/views/month-view.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,9 @@ export class CalendarRangeMonthService extends CalendarRangeService {
1919
<thead>
2020
<tr>
2121
<th colspan="3">
22-
<span class="link" (click)="zoomOut()">{{ year }}</span>
23-
<span class="prev link" [class.disabled]="!ranges.canMovePrevious" (click)="ranges.movePrevious()">
24-
<i class="chevron left icon"></i>
25-
</span>
26-
<span class="next link" [class.disabled]="!ranges.canMoveNext" (click)="ranges.moveNext()">
27-
<i class="chevron right icon"></i>
28-
</span>
22+
<sui-calendar-view-title [ranges]="ranges" (zoomOut)="zoomOut()">
23+
{{ year }}
24+
</sui-calendar-view-title>
2925
</th>
3026
</tr>
3127
</thead>

‎src/modules/datepicker/views/year-view.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,9 @@ export class CalendarRangeYearService extends CalendarRangeService {
1818
<thead>
1919
<tr>
2020
<th colspan="3">
21-
<span class="link" (click)="zoomOut()">{{ pad(decadeStart) }} - {{ pad(decadeStart + 10) }}</span>
22-
<span class="prev link" [class.disabled]="!ranges.canMovePrevious" (click)="ranges.movePrevious()">
23-
<i class="chevron left icon"></i>
24-
</span>
25-
<span class="next link" [class.disabled]="!ranges.canMoveNext" (click)="ranges.moveNext()">
26-
<i class="chevron right icon"></i>
27-
</span>
21+
<sui-calendar-view-title [ranges]="ranges" (zoomOut)="zoomOut()">
22+
{{ pad(decadeStart) }} - {{ pad(decadeStart + 10) }}
23+
</sui-calendar-view-title>
2824
</th>
2925
</tr>
3026
</thead>

0 commit comments

Comments
 (0)