From dad547475feaaa0c44019f1d3c021b181fdf2d51 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev Date: Wed, 5 Oct 2016 18:33:49 +0300 Subject: [PATCH 1/2] Modify Avatar component --- demos/app/avatarsample.component.ts | 105 +++++++++++++++++++--------- src/avatar/avatar.html | 5 +- src/avatar/avatar.ts | 81 ++++++++++++++++----- 3 files changed, 140 insertions(+), 51 deletions(-) diff --git a/demos/app/avatarsample.component.ts b/demos/app/avatarsample.component.ts index cf6446c2f9e..81a69f3271f 100644 --- a/demos/app/avatarsample.component.ts +++ b/demos/app/avatarsample.component.ts @@ -3,41 +3,78 @@ import { AvatarModule, Avatar } from "../../src/avatar/avatar"; @Component({ selector: "avatar-sample", + styles: [` + td { + padding: 5px; + } + `], template:`

Avatars

- - - - - - - - - - - - - - - - - - -
- - - - - - - - - + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
` @@ -48,7 +85,7 @@ export class AvatarSampleComponent { @ViewChildren(Avatar) avatar; initials: string = 'ZK'; bgColor: string = 'lightblue'; - source: string = ''; + src: string = ''; roundShape: string = "false"; constructor(){ @@ -57,7 +94,7 @@ export class AvatarSampleComponent { } setImageSource(){ - this.source = "https://unsplash.it/60/60?image=" + Math.floor((Math.random() * 50) + 1); + this.src = "https://unsplash.it/60/60?image=" + Math.floor((Math.random() * 50) + 1); } public changeLink() { diff --git a/src/avatar/avatar.html b/src/avatar/avatar.html index 1ef419b513b..c575e36efe2 100644 --- a/src/avatar/avatar.html +++ b/src/avatar/avatar.html @@ -1 +1,4 @@ - \ No newline at end of file +
+ + more_horiz +
\ No newline at end of file diff --git a/src/avatar/avatar.ts b/src/avatar/avatar.ts index b7133cc501b..72d63f76c12 100644 --- a/src/avatar/avatar.ts +++ b/src/avatar/avatar.ts @@ -7,40 +7,89 @@ import { OnInit, Input, Output, - ViewChild + ViewChild, + HostBinding } from '@angular/core'; import { CommonModule } from "@angular/common"; +export enum Size { SMALL, MEDIUM, LARGE }; + @Component({ selector: 'ig-avatar', moduleId: module.id, templateUrl: 'avatar.html', // host:{ - + // '[class]': '"ig-avatar--" + _size' // }, - styles: [`.rounded { + styles: [` + .rounded { border-radius: 50%; - }`] + } + .ig-avatar--small { + width: 45px; + height: 45px; + } + .ig-avatar--medium { + width: 60px; + height: 60px; + } + .ig-avatar--large { + width: 75px; + height: 75px; + } + .ig-avatar--empty{ + text-align:center; + background-color: lightgray; + vertical-align: middle; + } + `] }) export class Avatar { - @ViewChild('image') wrapper: ElementRef; + @ViewChild('image') image: ElementRef; + @Input() initials: string; - @Input() source: string; + @Input() src: string; @Input() roundShape: string = "false"; - @Input() bgColor: string; - @Input() width: number = 60; - @Input() textColor: string = 'white'; + @Input() color: string = 'white'; protected fontname = "Titillium Web"; + private _size: string; + private _bgColor: string; + public SizeEnum = Size; + + get size() : string{ + return this._size === undefined ? "small" : this._size; + } + + @Input("size") + set size(value: string){ + var sizeType = this.SizeEnum[value.toUpperCase()]; + + if(sizeType === undefined){ + this._size = "small"; + } else { + this._size = value; + } + } + + get bgColor(): string { + return this._bgColor; + } + + @Input("bgColor") + set bgColor(value: string) { + var color = value === "" ? "lightgrey" : value; + this._bgColor = color; + } public get srcImage() { - return this.wrapper.nativeElement.src; + return this.image ? this.image.nativeElement.src : ""; } public set srcImage(value: string) { - this.wrapper.nativeElement.src = value; + this.image.nativeElement.src = value; } - private get isRounded() : boolean{ + get isRounded() : boolean { return this.roundShape.toUpperCase() === "TRUE" ? true : false; } @@ -49,9 +98,9 @@ export class Avatar { } ngAfterViewInit() { - if(this.initials){ - var src = this.generateCanvas(this.width); - this.wrapper.nativeElement.src = src; + if(this.initials && this.image){ + var src = this.generateCanvas(parseInt(this.image.nativeElement.width)); + this.image.nativeElement.src = src; } } @@ -67,7 +116,7 @@ export class Avatar { ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.textAlign = "center"; - ctx.fillStyle = this.textColor; + ctx.fillStyle = this.color; ctx.font = fontSize + `px ${this.fontname}`; ctx.shadowColor = "black"; ctx.shadowOffsetX = 0; From 8adef1b17a0eaa76dbb6e82448d81c9cd2f55e72 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev Date: Wed, 5 Oct 2016 19:10:12 +0300 Subject: [PATCH 2/2] Fix falling tests --- src/avatar/avatar.spec.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/avatar/avatar.spec.ts b/src/avatar/avatar.spec.ts index f7b62631b0a..adaf9cecc2f 100644 --- a/src/avatar/avatar.spec.ts +++ b/src/avatar/avatar.spec.ts @@ -26,16 +26,17 @@ describe('Avatar', function(){ }); }); -@Component({ template: ``}) +@Component({ template: ` + `}) class InitAvatar { } -@Component({ template: ``}) class AvatarWithAttribs { initials: string = 'ZK'; bgColor: string = 'lightblue'; - source: string = 'https://unsplash.it/60/60?image=55'; roundShape: string = "false"; } \ No newline at end of file