From bb6cc836d16dd10d7fbf23f0bec8a9a5e018dd4e Mon Sep 17 00:00:00 2001 From: Steve Brush Date: Thu, 15 Feb 2018 09:52:19 -0500 Subject: [PATCH] Minor improvements; autocomplete adapter service (#1474) --- .../autocomplete-chrome-1000x800-dpr-1.png | Bin 2524 -> 0 bytes .../autocomplete-chrome-480x800-dpr-1.png | Bin 2331 -> 0 bytes .../autocomplete-visual.component.html | 2 +- .../autocomplete/autocomplete.visual-spec.ts | 4 +- skyuxconfig.json | 3 +- src/locales/resources_en_US.json | 4 +- .../autocomplete-adapter.service.ts | 43 ++++++++++++++++++ .../autocomplete-input.directive.ts | 4 +- .../autocomplete.component.spec.ts | 16 +++++-- .../autocomplete/autocomplete.component.ts | 29 ++---------- src/modules/dropdown/dropdown.component.ts | 1 - .../list-filter-inline-item.component.ts | 4 +- src/scss/_buttons.scss | 7 ++- 13 files changed, 73 insertions(+), 44 deletions(-) delete mode 100644 skyux-spa-visual-tests/screenshots-baseline/autocomplete-chrome-1000x800-dpr-1.png delete mode 100644 skyux-spa-visual-tests/screenshots-baseline/autocomplete-chrome-480x800-dpr-1.png create mode 100644 src/modules/autocomplete/autocomplete-adapter.service.ts diff --git a/skyux-spa-visual-tests/screenshots-baseline/autocomplete-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/autocomplete-chrome-1000x800-dpr-1.png deleted file mode 100644 index c1524815b4f00617e547bfaf372142eeb66d3499..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2524 zcmbtWdpOg58y|Drw8_l>vvt>`@TP)`|$hRznc#BHjq)b#Xp=^KIhzUi10X2v9awu%ZuMi$&vF&V0u8J+NO9N~e|&o4?9m6b&f zntQCl7v%8=5T{iqBy}LWt`+kBgub`eN)I?kQ;WQ<&aB| zTge}Ormuyv*}S}YU25mrwBu3kl7omyt5RP}dV8?0&mvX!RV+0~Nr@=6^=wXuYr7pR z!zEw2iJn|ZhiRO0hJXC|#z@0PrSocDZb_*6$O#nh2TMEVqKe^G-#I3R_9D)#9>{IJ zpN$#w=>F@dIjYj5%pqE;p2$zV${!4yWcV(fty-0sP9RT4n%@KCLcu!cD{|D{)ABg0ZT<$NFu6be(>$u}d) zmFbvlob~eDR=WYV`ohqI+~u%s zH1??;{xQCC49(AKg{BF7X^Gk^L`PYrLu_Bf_*iy*qj>FJ<}-wB)2~VuRR8PHQG#g9P&)QnxEcj`7UUa6N4hu}1uwgN zYh1^Y`Mhz}c~*C=$W~M<+jM}KpqPP}AW5p6>_Y}1%^yo-Kr$d4hzTD23n1JF1;T(B z5IkznYn@kc(FsA4iGGET0|wCz7uJVk5SYR|lubN8^7s8P+rkW#@eL0ELqZTPgcm>~ z(5N?eP{s-Py$;>*Zg>wI1MEM6G8QLk3H$=sUm*mu7vyHek>fn%_Xv@HgM;7&z7s&w zvjz7qWT}9v089!l<(9%nFmaCHMF0{3--WmBB#gXJ6q5b9PRR+hAJwVS<;$0@&;{?L zT}uKsU7@x0#*yXuu>#E$v46-iX+$0ztc1!c@4y#dnc2Hbxe&D5^y>$I^@c$@AWK=T z#m$>C8D>g;MwE-E6!}wQ@j$t%m-mNzP(dH?-fHLraGGK5?5eSc2j7t{olo-bAMJ3p zc=zhEH*@)(TS%|lzZZ3N%{C%FY_8*}Ubo zO`FulFqn)+4Q~F?eI!7Zr^M0MBZ7qOb&xWyg$`W=cT8?$M!5rOr)qRBSw|fX`)rF; zV*p}|rhivPlELv$TBttHGyD9vDX_Y-r}68%R7cT27v9bm-F+JD)BVtJ;QjFi@POQ7 z&X9rx@^#6R1kvn+#lD`+!edPdT-<1FE&jdp87qrO+4jJH|GaU9#xOeR&$Aj5|FwjNGB8cRnzX{nDs%FeN049fOeJnKGG&uWeozVE(Qzc^6meBL#Kny0|I=*TEf=tC{J&>n2c zhj(1Ic8*0}%f0NSmD9ugp{;B{yWCu#8<{N~__w9ip@})n)}NuO9nN#bHjK@VzxXG0ITpPio7Wauxd1Y};YL zF<#+~690WyXch^U;nr7T6GYF{OdVb82$3?k*w-J1cz&9*GPTO`Wl8qt*_BhxqIuy^ z&(&s`y8D5@c`ACE6r6uRcUD{tF6p7QsKK!mN7vNSF7OoBh9WR0yeq(OOqHvw{}GlD z@QT5!l)hs-3xN_kLpM30%WvDX?z8KX$3Ghv1CE4M;rh$V_5R8U%7hj{42p|T7TAWx zf+ng~UvkdDw3Fq`!t_C)S`+iLJb#2ovEaet5O5vz)93KDI-eD{>|Vw0+CKx|cU|^I zdrXFj7hj?|)PFhL%8a{nz|xnan`GroEA~sya?9E4_L}(0!iPqcJst z{o2>C@S<$xiT0JtoaW6NcXnFm++(nq6buaXU^kK^pTBRb&NqGgC`z3D?>RehdHf)( z1E^DXw6_ZPwD#&+kXPhnr$_XlvRB~LlZ*V1a>f%pNI!JfSGW2?SPwqCnullz_>Qni zrN+oa#9We+V_PPUy(Hwlc;pulS-}i9)Smikz$P#&-d&nLBmXibHj4cG#|ziSH7J2W zQIw>3O6xfQ6XGJcFx+c+;r`tfaH@5U*8B7}wCm=MbXUG+vD(@aME(5zIoD+=$gC60 z2_)neG17NJ}(bZPo@&5tim6#L& diff --git a/skyux-spa-visual-tests/screenshots-baseline/autocomplete-chrome-480x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/autocomplete-chrome-480x800-dpr-1.png deleted file mode 100644 index 8535a173a170dbe1126d4015405b31abd30e95b4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2331 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 Zm|*#*+qe_t2=LPbSP;pCGE +
diff --git a/skyux-spa-visual-tests/src/app/autocomplete/autocomplete.visual-spec.ts b/skyux-spa-visual-tests/src/app/autocomplete/autocomplete.visual-spec.ts index b78f81b95..c4365dd17 100644 --- a/skyux-spa-visual-tests/src/app/autocomplete/autocomplete.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/autocomplete/autocomplete.visual-spec.ts @@ -7,7 +7,7 @@ import { import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; describe('Autocomplete', () => { - it('should match previous alert screenshot', () => { + it('should match previous autocomplete screenshot', () => { return SkyVisualTest .setupTest('autocomplete') .then(() => { @@ -29,7 +29,7 @@ describe('Autocomplete', () => { }); }); - it('should match previous alert screenshot on small screens', () => { + it('should match previous autocomplete screenshot on small screens', () => { return SkyVisualTest .setupTest('autocomplete', 480) .then(() => { diff --git a/skyuxconfig.json b/skyuxconfig.json index 828166344..bd8f70622 100644 --- a/skyuxconfig.json +++ b/skyuxconfig.json @@ -1,5 +1,6 @@ { "name": "skyux2", "mode": "easy", - "compileMode": "aot" + "compileMode": "aot", + "cssPath": "src/scss/sky.scss" } diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json index 4e26402fc..3fb7dfae0 100644 --- a/src/locales/resources_en_US.json +++ b/src/locales/resources_en_US.json @@ -624,11 +624,11 @@ "message": "Open Help" }, "modal_footer_cancel_button": { - "_description": "Default lable text for modal cancel button", + "_description": "Default label text for modal cancel button", "message": "Cancel" }, "modal_footer_primary_button": { - "_description": "Default lable text for modal primary button", + "_description": "Default label text for modal primary button", "message": "Save" }, "month_short_april": { diff --git a/src/modules/autocomplete/autocomplete-adapter.service.ts b/src/modules/autocomplete/autocomplete-adapter.service.ts new file mode 100644 index 000000000..f8288b354 --- /dev/null +++ b/src/modules/autocomplete/autocomplete-adapter.service.ts @@ -0,0 +1,43 @@ +import { + ElementRef, + Injectable, + Renderer2, + RendererFactory2 +} from '@angular/core'; + +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/observable/fromEvent'; + +import { + SkyWindowRefService +} from '../window'; + +@Injectable() +export class SkyAutocompleteAdapterService { + private renderer: Renderer2; + + constructor( + private rendererFactory: RendererFactory2, + private windowRef: SkyWindowRefService + ) { + this.renderer = this.rendererFactory.createRenderer(undefined, undefined); + } + + public watchDropdownWidth(elementRef: ElementRef): void { + Observable + .fromEvent(this.windowRef.getWindow(), 'resize') + .subscribe(() => { + this.setDropdownWidth(elementRef); + }); + + this.windowRef.getWindow().setTimeout(() => { + this.setDropdownWidth(elementRef); + }); + } + + private setDropdownWidth(elementRef: ElementRef): void { + const dropdownContainer = elementRef.nativeElement.querySelector('.sky-popover-container'); + const width = elementRef.nativeElement.getBoundingClientRect().width; + this.renderer.setStyle(dropdownContainer, 'width', `${width}px`); + } +} diff --git a/src/modules/autocomplete/autocomplete-input.directive.ts b/src/modules/autocomplete/autocomplete-input.directive.ts index 03a35dc6c..bf9070224 100644 --- a/src/modules/autocomplete/autocomplete-input.directive.ts +++ b/src/modules/autocomplete/autocomplete-input.directive.ts @@ -50,8 +50,8 @@ export class SkyAutocompleteInputDirective public set value(value: any) { this._value = value; - this.textValue = value[this.displayWith]; - this.onChange(value); + this.textValue = this.value[this.displayWith]; + this.onChange(this.value); this.onTouched(); } diff --git a/src/modules/autocomplete/autocomplete.component.spec.ts b/src/modules/autocomplete/autocomplete.component.spec.ts index 7ef83fc18..20f85f3f1 100644 --- a/src/modules/autocomplete/autocomplete.component.spec.ts +++ b/src/modules/autocomplete/autocomplete.component.spec.ts @@ -349,6 +349,7 @@ describe('Autocomplete component', () => { it('should handle missing skyAutocomplete directive', fakeAsync(() => { fixture.detectChanges(); component.autocomplete['inputDirective'] = undefined; + tick(); try { autocomplete.ngAfterContentInit(); @@ -358,24 +359,29 @@ describe('Autocomplete component', () => { })); it('should set the width of the dropdown on window resize', fakeAsync(() => { + const adapterSpy = spyOn(autocomplete['adapter'], 'watchDropdownWidth').and.callThrough(); + const rendererSpy = spyOn(autocomplete['adapter']['renderer'], 'setStyle').and.callThrough(); + fixture.detectChanges(); const inputElement = getInputElement(); - const spy = spyOn(autocomplete['renderer'], 'setStyle').and.callThrough(); - const event = document.createEvent('CustomEvent'); - event.initEvent('resize', false, false); inputElement.value = 'r'; TestUtility.fireKeyboardEvent(inputElement, 'keyup'); - window.dispatchEvent(event); tick(); + + const event = document.createEvent('CustomEvent'); + event.initEvent('resize', false, false); + window.dispatchEvent(event); tick(); + expect(adapterSpy).toHaveBeenCalledWith(autocomplete['elementRef']); + const dropdownElement = document.querySelector('.sky-popover-container'); const autocompleteElement = getAutocompleteElement(); const formattedWidth = `${autocompleteElement.getBoundingClientRect().width}px`; - expect(spy).toHaveBeenCalledWith(dropdownElement, 'width', formattedWidth); + expect(rendererSpy).toHaveBeenCalledWith(dropdownElement, 'width', formattedWidth); })); }); diff --git a/src/modules/autocomplete/autocomplete.component.ts b/src/modules/autocomplete/autocomplete.component.ts index cde2b0135..794a0e9aa 100644 --- a/src/modules/autocomplete/autocomplete.component.ts +++ b/src/modules/autocomplete/autocomplete.component.ts @@ -10,7 +10,6 @@ import { OnDestroy, OnInit, Output, - Renderer2, TemplateRef, ViewChild } from '@angular/core'; @@ -25,10 +24,6 @@ import { SkyDropdownMessage } from '../dropdown'; -import { - SkyWindowRefService -} from '../window'; - import { SkyAutocompleteInputTextChange, SkyAutocompleteSearchFunction, @@ -36,6 +31,7 @@ import { SkyAutocompleteSelectionChange } from './types'; +import { SkyAutocompleteAdapterService } from './autocomplete-adapter.service'; import { SkyAutocompleteInputDirective } from './autocomplete-input.directive'; import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-search-function'; @@ -43,6 +39,7 @@ import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-sea selector: 'sky-autocomplete', templateUrl: './autocomplete.component.html', styleUrls: ['./autocomplete.component.scss'], + providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush }) export class SkyAutocompleteComponent @@ -146,10 +143,9 @@ export class SkyAutocompleteComponent private _selectionChange = new EventEmitter(); constructor( + private adapter: SkyAutocompleteAdapterService, private changeDetector: ChangeDetectorRef, - private elementRef: ElementRef, - private renderer: Renderer2, - private windowRef: SkyWindowRefService + private elementRef: ElementRef ) { } public ngOnInit(): void { @@ -175,13 +171,6 @@ export class SkyAutocompleteComponent .subscribe(() => { this.isMouseEnter = false; }); - - Observable - .fromEvent(this.windowRef.getWindow(), 'resize') - .takeUntil(this.destroy) - .subscribe(() => { - this.setDropdownWidth(); - }); } public ngAfterContentInit(): void { @@ -210,7 +199,7 @@ export class SkyAutocompleteComponent } }); - this.setDropdownWidth(); + this.adapter.watchDropdownWidth(this.elementRef); } public ngOnDestroy(): void { @@ -335,12 +324,4 @@ export class SkyAutocompleteComponent private hasSearchResults(): boolean { return (this.searchResults && this.searchResults.length > 0); } - - private setDropdownWidth() { - const dropdownContainer = this.elementRef.nativeElement - .querySelector('.sky-popover-container'); - - const width = this.elementRef.nativeElement.getBoundingClientRect().width; - this.renderer.setStyle(dropdownContainer, 'width', `${width}px`); - } } diff --git a/src/modules/dropdown/dropdown.component.ts b/src/modules/dropdown/dropdown.component.ts index 7b5b2764e..97ea75b0f 100644 --- a/src/modules/dropdown/dropdown.component.ts +++ b/src/modules/dropdown/dropdown.component.ts @@ -197,7 +197,6 @@ export class SkyDropdownComponent implements OnInit, AfterContentInit, OnDestroy public onPopoverClosed() { this.isOpen = false; this.isKeyboardActive = false; - this.menuComponent.reset(); } public getPopoverTriggerType(): SkyPopoverTrigger { diff --git a/src/modules/list-filters/list-filter-inline-item.component.ts b/src/modules/list-filters/list-filter-inline-item.component.ts index d8d415b99..f50dc7511 100644 --- a/src/modules/list-filters/list-filter-inline-item.component.ts +++ b/src/modules/list-filters/list-filter-inline-item.component.ts @@ -24,13 +24,13 @@ export class SkyListFilterInlineItemComponent implements OnInit { @Input() public defaultValue: any; - /* tslint:disable */ + /* tslint:disable:no-input-rename */ @Input('filter') public filterFunction: (item: ListItemModel, filter: any) => boolean; @Input('template') public templateInput: TemplateRef; - /* tslint:enable */ + /* tslint:enable:no-input-rename */ public onChange: EventEmitter = new EventEmitter(); diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index ead2d4524..8d3760fe3 100644 --- a/src/scss/_buttons.scss +++ b/src/scss/_buttons.scss @@ -1,5 +1,4 @@ -@import "mixins"; -@import "variables"; +@import 'mixins'; .sky-btn { background-color: transparent; @@ -115,7 +114,7 @@ margin-right: $sky-margin-half; padding-bottom: $sky-padding-half; padding-top: $sky-padding-half; - + &:hover, &:focus { text-decoration: none; color: $sky-text-color-default; @@ -135,5 +134,5 @@ color: $sky-text-color-deemphasized; box-shadow: none; } - + }