feat(user): allow use base64 images for user picture (#238)

akveo · Feb 19, 2018 · 28338a7 · 28338a7
1 parent f12e203
commit 28338a7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/e2e/user.e2e-spec.ts b/e2e/user.e2e-spec.ts
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { browser } from 'protractor';
+import { browser, element, by } from 'protractor';
 import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
 import badgeTests from './badge.e2e-spec';
 
@@ -36,4 +36,10 @@ describe('nb-user', () => {
  badgeTests(badgesConf);
  });
 
+ it('background image should have base64 image', () => {
+ element(by.css('#base64-image .user-picture.image')).getCssValue('background-image').then(value => {
+ expect(value).toEqual('url("data:image/png;base64,aaa")');
+ });
+ });
+
 });
diff --git a/src/app/user-test/user-test.component.ts b/src/app/user-test/user-test.component.ts
@@ -108,6 +108,10 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
  [badgePosition]="badge.TOP_LEFT">
  </nb-user>
  </div>
+ <div class="test-row" id="base64-image">
+ <nb-user
+ [picture]="'data:image/png;base64,aaa'"></nb-user>
+ </div>
  </nb-layout-column>
  </nb-layout>
  `,

diff --git a/src/framework/theme/components/user/user.component.html b/src/framework/theme/components/user/user.component.html
@@ -1,8 +1,8 @@
 <div class="user-container" (click)="toggleMenu()" [ngClass]="{'with-menu' : hasMenu()}">
- <div *ngIf="picture" class="user-picture image" style.background-image="url({{picture}})">
+ <div *ngIf="imageBackgroundStyle" class="user-picture image" [style.background-image]="imageBackgroundStyle">
  <nb-badge *ngIf="badgeText" [text]="badgeText" [status]="badgeStatus" [position]="badgePosition"></nb-badge>
  </div>
- <div *ngIf="!picture" class="user-picture background" [style.background-color]="color">
+ <div *ngIf="!imageBackgroundStyle" class="user-picture background" [style.background-color]="color">
  <ng-container *ngIf="showInitialsValue">
  {{ getInitials() }}
  </ng-container>

diff --git a/src/framework/theme/components/user/user.component.ts b/src/framework/theme/components/user/user.component.ts
@@ -5,6 +5,7 @@
  */
 
 import { Component, Input, HostBinding, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { convertToBoolProperty } from '../helpers';
 
 /**
@@ -118,11 +119,13 @@ export class NbUserComponent {
  @Input() title: string;
 
  /**
- * Absolute path to a user picture
+ * Absolute path to a user picture. Or base64 image
  * User name initials (JD for John Doe) will be shown if no picture specified
  * @type string
  */
- @Input() picture: string;
+ @Input() set picture(value: string) {
+ this.imageBackgroundStyle = value ? this.domSanitizer.bypassSecurityTrustStyle(`url(${value})`) : null;
+ }
 
  /**
  * Color of the area shown when no picture specified
@@ -217,12 +220,15 @@ export class NbUserComponent {
  */
  @Output() menuClick = new EventEmitter<NbUserMenuItem>();
 
+ imageBackgroundStyle: SafeStyle;
  showNameValue: boolean = true;
  showTitleValue: boolean = true;
  showInitialsValue: boolean = true;
  isMenuShown: boolean = false;
 
- constructor(private el: ElementRef) { }
+ constructor(
+ private el: ElementRef,
+ private domSanitizer: DomSanitizer) { }
 
  itemClick(event: any, item: NbUserMenuItem): boolean {
  this.menuClick.emit(item);