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);