From 3f4222e5e42abf20d58844d4f089cb13846d8c56 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 7 Mar 2018 17:17:05 -0500 Subject: [PATCH 1/8] Resolving Card action bar still visable after hiding with *ngIf #1421 --- src/modules/card/card-actions.component.scss | 7 +++++++ src/modules/card/card-actions.component.ts | 1 + src/modules/card/card.component.scss | 2 -- 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/modules/card/card-actions.component.scss diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss new file mode 100644 index 000000000..3027c1729 --- /dev/null +++ b/src/modules/card/card-actions.component.scss @@ -0,0 +1,7 @@ +@import "../../scss/mixins"; + +:host { + display: block; + @include sky-border(light, top); + padding: $sky-padding-3_4 0; +} \ No newline at end of file diff --git a/src/modules/card/card-actions.component.ts b/src/modules/card/card-actions.component.ts index aa955f173..7b6db7f03 100644 --- a/src/modules/card/card-actions.component.ts +++ b/src/modules/card/card-actions.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'sky-card-actions', + styleUrls: ['./card-actions.component.scss'], templateUrl: '../shared/simple-content.html' }) export class SkyCardActionsComponent { } diff --git a/src/modules/card/card.component.scss b/src/modules/card/card.component.scss index 21a48c63e..5d6759ed6 100644 --- a/src/modules/card/card.component.scss +++ b/src/modules/card/card.component.scss @@ -88,10 +88,8 @@ } .sky-card-actions { - @include sky-border(light, top); bottom: 0; flex-shrink: 0; - padding: $sky-padding-3_4 0; text-align: center; .sky-context-menu-btn { From a450054956bfa0efa21c71481ea49e9f82c22f08 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Thu, 8 Mar 2018 10:46:26 -0500 Subject: [PATCH 2/8] Addressed PR style comments --- src/modules/card/card-actions.component.scss | 8 ++++---- src/modules/card/card-actions.component.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss index 3027c1729..402369a03 100644 --- a/src/modules/card/card-actions.component.scss +++ b/src/modules/card/card-actions.component.scss @@ -1,7 +1,7 @@ @import "../../scss/mixins"; :host { - display: block; - @include sky-border(light, top); - padding: $sky-padding-3_4 0; -} \ No newline at end of file + display: block; + @include sky-border(light, top); + padding: $sky-padding-3_4 0; +} diff --git a/src/modules/card/card-actions.component.ts b/src/modules/card/card-actions.component.ts index 7b6db7f03..e23730367 100644 --- a/src/modules/card/card-actions.component.ts +++ b/src/modules/card/card-actions.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'sky-card-actions', - styleUrls: ['./card-actions.component.scss'], - templateUrl: '../shared/simple-content.html' + templateUrl: '../shared/simple-content.html', + styleUrls: ['./card-actions.component.scss'] }) export class SkyCardActionsComponent { } From e741dcf3ab31ed7838642d99b597fd0445725a46 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 11 Jun 2018 10:47:30 -0400 Subject: [PATCH 3/8] surfaced startingDay property on datepicker --- src/modules/datepicker/datepicker.component.html | 3 ++- src/modules/datepicker/datepicker.component.ts | 6 +++++- .../datepicker/fixtures/datepicker.component.fixture.html | 4 +++- .../datepicker/fixtures/datepicker.component.fixture.ts | 1 + 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/modules/datepicker/datepicker.component.html b/src/modules/datepicker/datepicker.component.html index 6f2192d10..b72883e53 100644 --- a/src/modules/datepicker/datepicker.component.html +++ b/src/modules/datepicker/datepicker.component.html @@ -12,7 +12,8 @@ (selectedDateChange)="dateSelected($event)" (calendarModeChange)="onCalendarModeChange()" [maxDate]="maxDate" - [minDate]="minDate"> + [minDate]="minDate" + [startingDay]="startingDay"> diff --git a/src/modules/datepicker/datepicker.component.ts b/src/modules/datepicker/datepicker.component.ts index 653394538..f6ea83b3b 100644 --- a/src/modules/datepicker/datepicker.component.ts +++ b/src/modules/datepicker/datepicker.component.ts @@ -1,7 +1,8 @@ import { Component, EventEmitter, - ViewChild + ViewChild, + Input } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @@ -26,6 +27,9 @@ export class SkyDatepickerComponent { @ViewChild(SkyDropdownComponent) public dropdown: SkyDropdownComponent; + @Input() + public startingDay: number; + public dropdownController = new Subject(); public dateChanged: EventEmitter = new EventEmitter(); public maxDate: Date; diff --git a/src/modules/datepicker/fixtures/datepicker.component.fixture.html b/src/modules/datepicker/fixtures/datepicker.component.fixture.html index a64d3b8a5..5e332b68d 100644 --- a/src/modules/datepicker/fixtures/datepicker.component.fixture.html +++ b/src/modules/datepicker/fixtures/datepicker.component.fixture.html @@ -1,5 +1,7 @@
- + Date: Wed, 13 Jun 2018 13:24:31 -0400 Subject: [PATCH 4/8] move startday to input to keep options on same elem --- .../datepicker/datepicker-input.directive.ts | 8 ++++++++ .../datepicker/datepicker.component.spec.ts | 16 ++++++++++++++++ src/modules/datepicker/datepicker.component.ts | 8 +++++--- .../fixtures/datepicker.component.fixture.html | 4 ++-- 4 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts index 2cace17c0..b50b0f2a6 100644 --- a/src/modules/datepicker/datepicker-input.directive.ts +++ b/src/modules/datepicker/datepicker-input.directive.ts @@ -76,6 +76,9 @@ export class SkyDatepickerInputDirective implements @Input() public maxDate: Date; + @Input() + public startingDay: number; + private dateFormatter = new SkyDateFormatter(); private modelValue: Date; @@ -118,6 +121,11 @@ export class SkyDatepickerInputDirective implements this._validatorChange(); this.skyDatepickerInput.setMaxDate(this.maxDate); } + + if (changes['startingDay']) { + this._validatorChange(); + this.skyDatepickerInput.setStartingDay(this.startingDay); + } } @HostListener('change', ['$event']) diff --git a/src/modules/datepicker/datepicker.component.spec.ts b/src/modules/datepicker/datepicker.component.spec.ts index 26f74e426..ccc356934 100644 --- a/src/modules/datepicker/datepicker.component.spec.ts +++ b/src/modules/datepicker/datepicker.component.spec.ts @@ -634,6 +634,22 @@ describe('datepicker', () => { expect(dateButtonEl).toHaveCssClass('sky-btn-disabled'); })); + + it('should pass starting day to calendar', fakeAsync(() => { + component.selectedDate = new Date('5/21/2017'); + component.startingDay = 5; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + openDatepicker(fixture.nativeElement, fixture); + tick(); + + let firstDayCol = fixture.nativeElement + .querySelectorAll('.sky-datepicker-center.sky-datepicker-weekdays').item(0) as HTMLElement; + + expect(firstDayCol.textContent).toContain('Fr'); + })); }); }); diff --git a/src/modules/datepicker/datepicker.component.ts b/src/modules/datepicker/datepicker.component.ts index f6ea83b3b..322efb295 100644 --- a/src/modules/datepicker/datepicker.component.ts +++ b/src/modules/datepicker/datepicker.component.ts @@ -27,11 +27,9 @@ export class SkyDatepickerComponent { @ViewChild(SkyDropdownComponent) public dropdown: SkyDropdownComponent; - @Input() - public startingDay: number; - public dropdownController = new Subject(); public dateChanged: EventEmitter = new EventEmitter(); + public startingDay: number; public maxDate: Date; public minDate: Date; @@ -54,6 +52,10 @@ export class SkyDatepickerComponent { this.maxDate = _maxDate; } + public setStartingDay(_startingDay: number) { + this.startingDay = _startingDay; + } + public onCalendarModeChange() { this.dropdownController.next({ type: SkyDropdownMessageType.Reposition diff --git a/src/modules/datepicker/fixtures/datepicker.component.fixture.html b/src/modules/datepicker/fixtures/datepicker.component.fixture.html index 5e332b68d..2422a90e5 100644 --- a/src/modules/datepicker/fixtures/datepicker.component.fixture.html +++ b/src/modules/datepicker/fixtures/datepicker.component.fixture.html @@ -1,13 +1,13 @@
+ #picker> From 67ad27947c552204733c4f9213e7386e3b273ae9 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 15 Jun 2018 09:28:53 -0400 Subject: [PATCH 5/8] fixed tslint issue --- src/modules/datepicker/datepicker.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/modules/datepicker/datepicker.component.ts b/src/modules/datepicker/datepicker.component.ts index 322efb295..e48459b5f 100644 --- a/src/modules/datepicker/datepicker.component.ts +++ b/src/modules/datepicker/datepicker.component.ts @@ -1,8 +1,7 @@ import { Component, EventEmitter, - ViewChild, - Input + ViewChild } from '@angular/core'; import { Subject } from 'rxjs/Subject'; From 1d51d9016ab85fd483c115df56222102d8901676 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 18 Jun 2018 12:48:40 -0400 Subject: [PATCH 6/8] switched to getters and setters for datepicker props --- .../datepicker/datepicker-input.directive.ts | 6 +-- .../datepicker/datepicker.component.ts | 39 ++++++++++++------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts index b50b0f2a6..0b330b5fa 100644 --- a/src/modules/datepicker/datepicker-input.directive.ts +++ b/src/modules/datepicker/datepicker-input.directive.ts @@ -114,17 +114,17 @@ export class SkyDatepickerInputDirective implements public ngOnChanges(changes: SimpleChanges) { if (changes['minDate']) { this._validatorChange(); - this.skyDatepickerInput.setMinDate(this.minDate); + this.skyDatepickerInput.minDate = this.minDate; } if (changes['maxDate']) { this._validatorChange(); - this.skyDatepickerInput.setMaxDate(this.maxDate); + this.skyDatepickerInput.maxDate = this.maxDate; } if (changes['startingDay']) { this._validatorChange(); - this.skyDatepickerInput.setStartingDay(this.startingDay); + this.skyDatepickerInput.startingDay = this.startingDay; } } diff --git a/src/modules/datepicker/datepicker.component.ts b/src/modules/datepicker/datepicker.component.ts index e48459b5f..d301eb20f 100644 --- a/src/modules/datepicker/datepicker.component.ts +++ b/src/modules/datepicker/datepicker.component.ts @@ -28,9 +28,30 @@ export class SkyDatepickerComponent { public dropdownController = new Subject(); public dateChanged: EventEmitter = new EventEmitter(); - public startingDay: number; - public maxDate: Date; - public minDate: Date; + private _startingDay: number; + private _maxDate: Date; + private _minDate: Date; + + public get startingDay(): number { + return this._startingDay; + } + public set startingDay(value: number) { + this._startingDay = value; + } + + public get minDate(): Date { + return this._minDate; + } + public set minDate(value: Date) { + this._minDate = value; + } + + public get maxDate(): Date { + return this._maxDate; + } + public set maxDate(value: Date) { + this._maxDate = value; + } public dateSelected(newDate: Date) { this.dateChanged.emit(newDate); @@ -43,18 +64,6 @@ export class SkyDatepickerComponent { this.calendar.writeValue(newDate); } - public setMinDate(_minDate: Date) { - this.minDate = _minDate; - } - - public setMaxDate(_maxDate: Date) { - this.maxDate = _maxDate; - } - - public setStartingDay(_startingDay: number) { - this.startingDay = _startingDay; - } - public onCalendarModeChange() { this.dropdownController.next({ type: SkyDropdownMessageType.Reposition From 5b3e147053efcedd20c6f6d33817f70274cd3483 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 18 Jun 2018 13:06:10 -0400 Subject: [PATCH 7/8] switched min and max back to using set func --- .../datepicker/datepicker-input.directive.ts | 4 +-- .../datepicker/datepicker.component.ts | 26 +++++++------------ 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts index 0b330b5fa..1162c601a 100644 --- a/src/modules/datepicker/datepicker-input.directive.ts +++ b/src/modules/datepicker/datepicker-input.directive.ts @@ -114,12 +114,12 @@ export class SkyDatepickerInputDirective implements public ngOnChanges(changes: SimpleChanges) { if (changes['minDate']) { this._validatorChange(); - this.skyDatepickerInput.minDate = this.minDate; + this.skyDatepickerInput.setMinDate(this.minDate); } if (changes['maxDate']) { this._validatorChange(); - this.skyDatepickerInput.maxDate = this.maxDate; + this.skyDatepickerInput.setMaxDate(this.maxDate); } if (changes['startingDay']) { diff --git a/src/modules/datepicker/datepicker.component.ts b/src/modules/datepicker/datepicker.component.ts index d301eb20f..2d7531398 100644 --- a/src/modules/datepicker/datepicker.component.ts +++ b/src/modules/datepicker/datepicker.component.ts @@ -29,8 +29,8 @@ export class SkyDatepickerComponent { public dropdownController = new Subject(); public dateChanged: EventEmitter = new EventEmitter(); private _startingDay: number; - private _maxDate: Date; - private _minDate: Date; + public maxDate: Date; + public minDate: Date; public get startingDay(): number { return this._startingDay; @@ -39,20 +39,6 @@ export class SkyDatepickerComponent { this._startingDay = value; } - public get minDate(): Date { - return this._minDate; - } - public set minDate(value: Date) { - this._minDate = value; - } - - public get maxDate(): Date { - return this._maxDate; - } - public set maxDate(value: Date) { - this._maxDate = value; - } - public dateSelected(newDate: Date) { this.dateChanged.emit(newDate); this.dropdownController.next({ @@ -64,6 +50,14 @@ export class SkyDatepickerComponent { this.calendar.writeValue(newDate); } + public setMinDate(_minDate: Date) { + this.minDate = _minDate; + } + + public setMaxDate(_maxDate: Date) { + this.maxDate = _maxDate; + } + public onCalendarModeChange() { this.dropdownController.next({ type: SkyDropdownMessageType.Reposition From b2abc1cee3fcec8819145588357991f9dafdcfab Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 18 Jun 2018 14:55:43 -0400 Subject: [PATCH 8/8] added default starting day to datepicker --- src/modules/datepicker/datepicker-input.directive.ts | 2 +- src/modules/datepicker/datepicker.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts index 1162c601a..540def210 100644 --- a/src/modules/datepicker/datepicker-input.directive.ts +++ b/src/modules/datepicker/datepicker-input.directive.ts @@ -77,7 +77,7 @@ export class SkyDatepickerInputDirective implements public maxDate: Date; @Input() - public startingDay: number; + public startingDay: number = 0; private dateFormatter = new SkyDateFormatter(); diff --git a/src/modules/datepicker/datepicker.component.ts b/src/modules/datepicker/datepicker.component.ts index 2d7531398..188260942 100644 --- a/src/modules/datepicker/datepicker.component.ts +++ b/src/modules/datepicker/datepicker.component.ts @@ -28,7 +28,7 @@ export class SkyDatepickerComponent { public dropdownController = new Subject(); public dateChanged: EventEmitter = new EventEmitter(); - private _startingDay: number; + private _startingDay: number = 0; public maxDate: Date; public minDate: Date;