|
|
@ -12,7 +12,7 @@ import { picasso } from '@app/framework/internal'; |
|
|
@Component({ |
|
|
@Component({ |
|
|
selector: 'sqx-avatar', |
|
|
selector: 'sqx-avatar', |
|
|
template: ` |
|
|
template: ` |
|
|
<img |
|
|
<img *ngIf="imageSource" |
|
|
[style.width]="sizeInPx" |
|
|
[style.width]="sizeInPx" |
|
|
[style.height]="sizeInPx" |
|
|
[style.height]="sizeInPx" |
|
|
[src]="imageSource | sqxSafeUrl" |
|
|
[src]="imageSource | sqxSafeUrl" |
|
|
@ -20,9 +20,6 @@ import { picasso } from '@app/framework/internal'; |
|
|
` |
|
|
` |
|
|
}) |
|
|
}) |
|
|
export class AvatarComponent implements OnChanges { |
|
|
export class AvatarComponent implements OnChanges { |
|
|
public imageSource: string; |
|
|
|
|
|
public sizeInPx: string; |
|
|
|
|
|
|
|
|
|
|
|
@Input() |
|
|
@Input() |
|
|
public identifier: string; |
|
|
public identifier: string; |
|
|
|
|
|
|
|
|
@ -32,6 +29,9 @@ export class AvatarComponent implements OnChanges { |
|
|
@Input() |
|
|
@Input() |
|
|
public size = 50; |
|
|
public size = 50; |
|
|
|
|
|
|
|
|
|
|
|
public imageSource: string | null; |
|
|
|
|
|
public sizeInPx: string; |
|
|
|
|
|
|
|
|
public ngOnChanges() { |
|
|
public ngOnChanges() { |
|
|
this.imageSource = this.image || this.createSvg(); |
|
|
this.imageSource = this.image || this.createSvg(); |
|
|
|
|
|
|
|
|
@ -39,6 +39,10 @@ export class AvatarComponent implements OnChanges { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private createSvg() { |
|
|
private createSvg() { |
|
|
|
|
|
if (!this.identifier) { |
|
|
|
|
|
return null; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const svg = picasso(this.identifier); |
|
|
const svg = picasso(this.identifier); |
|
|
|
|
|
|
|
|
return `data:image/svg+xml;utf8,${svg}`; |
|
|
return `data:image/svg+xml;utf8,${svg}`; |
|
|
|