From 01b8addea0f0b36a08b684f1a283523ad979400c Mon Sep 17 00:00:00 2001 From: Evgeny Lupanov Date: Fri, 16 Feb 2018 18:21:20 +0300 Subject: [PATCH 1/3] feat(user): allow use base64 images for user picture --- e2e/user.e2e-spec.ts | 8 +++++++- src/app/user-test/user-test.component.ts | 4 ++++ .../theme/components/user/user.component.html | 4 ++-- .../theme/components/user/user.component.ts | 14 +++++++++++--- 4 files changed, 24 insertions(+), 6 deletions(-) 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..2b15816c66 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..5826ddaf9b 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,14 @@ 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.pictureValue = value; + this.backgroundImageStyle = this.domSanitizer.bypassSecurityTrustStyle(`url(${value})`); + } /** * Color of the area shown when no picture specified @@ -217,12 +221,16 @@ export class NbUserComponent { */ @Output() menuClick = new EventEmitter(); + pictureValue: string; + backgroundImageStyle: 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); From 299d2820360b9274f45b810487144b97089294af Mon Sep 17 00:00:00 2001 From: Evgeny Lupanov Date: Sun, 18 Feb 2018 13:29:13 +0300 Subject: [PATCH 2/3] feat(user): code review changes --- src/framework/theme/components/user/user.component.html | 4 ++-- src/framework/theme/components/user/user.component.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/framework/theme/components/user/user.component.html b/src/framework/theme/components/user/user.component.html index 2b15816c66..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 5826ddaf9b..0257a66b47 100644 --- a/src/framework/theme/components/user/user.component.ts +++ b/src/framework/theme/components/user/user.component.ts @@ -124,8 +124,8 @@ export class NbUserComponent { * @type string */ @Input() set picture(value: string) { - this.pictureValue = value; - this.backgroundImageStyle = this.domSanitizer.bypassSecurityTrustStyle(`url(${value})`); + //this.pictureValue = value; + this.imageBackgroundStyle = value ? this.domSanitizer.bypassSecurityTrustStyle(`url(${value})`) : null; } /** @@ -222,7 +222,7 @@ export class NbUserComponent { @Output() menuClick = new EventEmitter(); pictureValue: string; - backgroundImageStyle: SafeStyle; + imageBackgroundStyle: SafeStyle; showNameValue: boolean = true; showTitleValue: boolean = true; showInitialsValue: boolean = true; From aaa9fee4751950e864c7574ff2ebe2dc639654ab Mon Sep 17 00:00:00 2001 From: Evgeny Lupanov Date: Sun, 18 Feb 2018 13:30:36 +0300 Subject: [PATCH 3/3] feat(user): fix lint --- src/framework/theme/components/user/user.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/framework/theme/components/user/user.component.ts b/src/framework/theme/components/user/user.component.ts index 0257a66b47..18dccfe230 100644 --- a/src/framework/theme/components/user/user.component.ts +++ b/src/framework/theme/components/user/user.component.ts @@ -124,7 +124,6 @@ export class NbUserComponent { * @type string */ @Input() set picture(value: string) { - //this.pictureValue = value; this.imageBackgroundStyle = value ? this.domSanitizer.bypassSecurityTrustStyle(`url(${value})`) : null; } @@ -221,7 +220,6 @@ export class NbUserComponent { */ @Output() menuClick = new EventEmitter(); - pictureValue: string; imageBackgroundStyle: SafeStyle; showNameValue: boolean = true; showTitleValue: boolean = true;