diff --git a/e2e/user.e2e-spec.ts b/e2e/user.e2e-spec.ts index 88c9398f74..309d28ed59 100644 --- 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 index 12abb245b9..4a78a9916c 100644 --- 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"> +
+ +
`, diff --git a/src/framework/theme/components/user/user.component.html b/src/framework/theme/components/user/user.component.html index b94bfde878..6e1fd8b3bc 100644 --- a/src/framework/theme/components/user/user.component.html +++ b/src/framework/theme/components/user/user.component.html @@ -1,8 +1,8 @@
-
+
-
+
{{ getInitials() }} diff --git a/src/framework/theme/components/user/user.component.ts b/src/framework/theme/components/user/user.component.ts index c49ef5b981..18dccfe230 100644 --- 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(); + 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);