diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index ebd96c4840..37fd0c20be 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -1172,6 +1172,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ component: 'UserHideCaptionsComponent', name: 'User Hide Captions', }, + { + path: 'user-shape.component', + link: '/user/user-shape.component', + component: 'NbUserShapeComponent', + name: 'Nb User Shape', + }, ], }, { diff --git a/src/framework/theme/components/user/_user.component.theme.scss b/src/framework/theme/components/user/_user.component.theme.scss index 1b8436e575..5d8d35d007 100644 --- a/src/framework/theme/components/user/_user.component.theme.scss +++ b/src/framework/theme/components/user/_user.component.theme.scss @@ -6,59 +6,54 @@ @mixin nb-user-theme() { nb-user { - - font-size: nb-theme(user-font-size); - line-height: nb-theme(user-line-height); - .user-picture { - height: nb-theme(user-size-medium); - width: nb-theme(user-size-medium); - background: nb-theme(user-bg); - border: solid 2px nb-theme(user-fg-highlight); + background-color: nb-theme(user-picture-box-background-color); + border: nb-theme(user-picture-box-border-width) solid nb-theme(user-picture-box-border-color); + } - &.background { - color: nb-theme(user-fg); - } + .initials { + color: nb-theme(user-initials-text-color); + font-family: nb-theme(user-initials-text-font-family); + font-weight: nb-theme(user-initials-text-font-weight); } .user-name { - font-family: nb-theme(user-font-family-secondary); + color: nb-theme(user-name-text-color); + font-family: nb-theme(user-name-text-font-family); + font-weight: nb-theme(user-name-text-font-weight); } - &.inverse { - .user-picture { - background: nb-theme(user-fg); - - &.background { - color: nb-theme(user-bg); - } - } + .user-title { + color: nb-theme(user-title-text-color); + font-family: nb-theme(user-title-text-font-family); + font-weight: nb-theme(user-title-text-font-weight); } + } - &.small { + @each $size in nb-get-sizes() { + nb-user.size-#{$size} { .user-picture { - height: nb-theme(user-size-small); - width: nb-theme(user-size-small); - font-size: 80%; + height: nb-theme(user-#{$size}-height); + width: nb-theme(user-#{$size}-width); } - } - &.medium { - .user-picture { - height: nb-theme(user-size-medium); - width: nb-theme(user-size-medium); + .initials { + font-size: nb-theme(user-#{$size}-initials-text-font-size); + line-height: nb-theme(user-#{$size}-initials-text-line-height); } - } - &.large { - .user-picture { - height: nb-theme(user-size-large); - width: nb-theme(user-size-large); + .user-name { + font-size: nb-theme(user-#{$size}-name-text-font-size); + line-height: nb-theme(user-#{$size}-name-text-line-height); } - } - &.xlarge { - .user-picture { - height: nb-theme(user-size-xlarge); - width: nb-theme(user-size-xlarge); + .user-title { + font-size: nb-theme(user-#{$size}-title-text-font-size); + line-height: nb-theme(user-#{$size}-title-text-line-height); } } } + + @each $shape in nb-get-shapes() { + nb-user.shape-#{$shape} .user-picture { + border-radius: nb-theme(user-#{$shape}-border-radius); + } + } } diff --git a/src/framework/theme/components/user/user.component.html b/src/framework/theme/components/user/user.component.html index 9fd9d0cd69..49101199c0 100644 --- a/src/framework/theme/components/user/user.component.html +++ b/src/framework/theme/components/user/user.component.html @@ -2,15 +2,15 @@
-
- +
+ {{ getInitials() }}
-
{{ name }}
-
{{ title }}
+
{{ name }}
+
{{ title }}
diff --git a/src/framework/theme/components/user/user.component.scss b/src/framework/theme/components/user/user.component.scss index 76b1fbc015..63dbe451d3 100644 --- a/src/framework/theme/components/user/user.component.scss +++ b/src/framework/theme/components/user/user.component.scss @@ -17,7 +17,6 @@ .user-picture { position: relative; - border-radius: 50%; flex-shrink: 0; &.image { @@ -25,17 +24,13 @@ background-repeat: no-repeat; } - &.background { + &.initials { display: flex; align-items: center; justify-content: center; } } - .user-title { - font-size: 0.75rem; - } - .user-name, .user-title { @include nb-rtl(text-align, right); diff --git a/src/framework/theme/components/user/user.component.ts b/src/framework/theme/components/user/user.component.ts index bd99fdb388..f3e51cf156 100644 --- a/src/framework/theme/components/user/user.component.ts +++ b/src/framework/theme/components/user/user.component.ts @@ -4,9 +4,12 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, Input, HostBinding } from '@angular/core'; +import { Component, HostBinding, Input } from '@angular/core'; import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; +import { NbComponentShape } from '@nebular/theme'; + import { convertToBoolProperty } from '../helpers'; +import { NbComponentSize } from '../component-size'; /** * Represents a component showing a user avatar (picture) with a user name on the right. @@ -22,7 +25,7 @@ import { convertToBoolProperty } from '../helpers'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbUserModule, * ], * }) @@ -41,19 +44,66 @@ import { convertToBoolProperty } from '../helpers'; * You can set custom avatar background-color, user image (as link or BASE64 string) and disable user initials: * @stacked-example(Avatar image settings, user/user-avatar-settings.component) * + * Component shape could be controlled with `shape` input. + * @stacked-example(Shapes, user/user-shape.component) * * @styles * - * user-font-size: - * user-line-height: - * user-bg: - * user-fg: - * user-fg-highlight: - * user-font-family-secondary: - * user-size-small: - * user-size-medium: - * user-size-large: - * user-size-xlarge: + * user-picture-box-background-color: + * user-picture-box-border-color: + * user-picture-box-border-width: + * user-initials-text-color: + * user-initials-text-font-family: + * user-initials-text-font-weight: + * user-name-text-color: + * user-name-text-font-family: + * user-name-text-font-weight: + * user-title-text-color: + * user-title-text-font-family: + * user-title-text-font-weight: + * user-rectangle-border-radius: + * user-semi-round-border-radius: + * user-round-border-radius: + * user-tiny-height: + * user-tiny-width: + * user-tiny-initials-text-font-size: + * user-tiny-initials-text-line-height: + * user-tiny-name-text-font-size: + * user-tiny-name-text-line-height: + * user-tiny-title-text-font-size: + * user-tiny-title-text-line-height: + * user-small-height: + * user-small-width: + * user-small-initials-text-font-size: + * user-small-initials-text-line-height: + * user-small-name-text-font-size: + * user-small-name-text-line-height: + * user-small-title-text-font-size: + * user-small-title-text-line-height: + * user-medium-height: + * user-medium-width: + * user-medium-initials-text-font-size: + * user-medium-initials-text-line-height: + * user-medium-name-text-font-size: + * user-medium-name-text-line-height: + * user-medium-title-text-font-size: + * user-medium-title-text-line-height: + * user-large-height: + * user-large-width: + * user-large-initials-text-font-size: + * user-large-initials-text-line-height: + * user-large-name-text-font-size: + * user-large-name-text-line-height: + * user-large-title-text-font-size: + * user-large-title-text-line-height: + * user-giant-height: + * user-giant-width: + * user-giant-initials-text-font-size: + * user-giant-initials-text-line-height: + * user-giant-name-text-font-size: + * user-giant-name-text-line-height: + * user-giant-title-text-font-size: + * user-giant-title-text-line-height: */ @Component({ selector: 'nb-user', @@ -62,42 +112,7 @@ import { convertToBoolProperty } from '../helpers'; }) export class NbUserComponent { - // TODO: it makes sense use object instead of list of variables (or even enum) - /* - static readonly SIZE = { - SMALL: 'small', - MEDIUM: 'medium', - LARGE: 'large', - }; - */ - static readonly SIZE_SMALL = 'small'; - static readonly SIZE_MEDIUM = 'medium'; - static readonly SIZE_LARGE = 'large'; - static readonly SIZE_XLARGE = 'xlarge'; - - private sizeValue: string; - - @HostBinding('class.inverse') inverseValue: boolean; - - @HostBinding('class.small') - get small() { - return this.sizeValue === NbUserComponent.SIZE_SMALL; - } - - @HostBinding('class.medium') - get medium() { - return this.sizeValue === NbUserComponent.SIZE_MEDIUM; - } - - @HostBinding('class.large') - get large() { - return this.sizeValue === NbUserComponent.SIZE_LARGE; - } - - @HostBinding('class.xlarge') - get xlarge() { - return this.sizeValue === NbUserComponent.SIZE_XLARGE; - } + imageBackgroundStyle: SafeStyle; /** * Specifies a name to be shown on the right of a user picture @@ -106,17 +121,18 @@ export class NbUserComponent { @Input() name: string = 'Anonymous'; /** - * Specifies a title (written in a smaller font) to be shown under the **name** + * Specifies a title to be shown under the **name** * @type string */ @Input() title: string; /** - * Absolute path to a user picture. Or base64 image - * User name initials (JD for John Doe) will be shown if no picture specified + * Absolute path to a user picture or base64 image. + * User name initials will be shown if no picture specified (JD for John Doe). * @type string */ - @Input() set picture(value: string) { + @Input() + set picture(value: string) { this.imageBackgroundStyle = value ? this.domSanitizer.bypassSecurityTrustStyle(`url(${value})`) : null; } @@ -127,57 +143,65 @@ export class NbUserComponent { @Input() color: string; /** - * Size of the component, small|medium|large|xlarge - * @type string + * Size of the component. + * Possible values: `tiny`, `small`, `medium` (default), `large`, 'giant'. */ - @Input() - set size(val: string) { - this.sizeValue = val; - } + @Input() size: NbComponentSize = 'medium'; + + /** + * Shape of the picture box. + * Possible values: `rectangle`, `semi-round`, `round`. + */ + @Input() shape: NbComponentShape = 'round'; /** * Whether to show a user name or not - * @type boolean */ @Input() + get showName(): boolean { + return this._showName; + } set showName(val: boolean) { - this.showNameValue = convertToBoolProperty(val); + this._showName = convertToBoolProperty(val); } + private _showName: boolean = true; /** * Whether to show a user title or not * @type boolean */ @Input() + get showTitle(): boolean { + return this._showTitle; + } set showTitle(val: boolean) { - this.showTitleValue = convertToBoolProperty(val); + this._showTitle = convertToBoolProperty(val); } + private _showTitle: boolean = true; /** * Whether to show a user initials (if no picture specified) or not * @type boolean */ @Input() + get showInitials(): boolean { + return this._showInitials; + } set showInitials(val: boolean) { - this.showInitialsValue = convertToBoolProperty(val); + this._showInitials = convertToBoolProperty(val); } + private _showInitials: boolean = true; /** * Whether to show only a picture or also show the name and title * @type boolean */ @Input() - set onlyPicture(val: boolean) { - this.showNameValue = this.showTitleValue = !convertToBoolProperty(val); + get onlyPicture(): boolean { + return !this.showName && !this.showTitle; } - - /** - * Makes colors inverse based on current theme - * @type boolean - */ - @Input() - set inverse(val: boolean) { - this.inverseValue = convertToBoolProperty(val); + set onlyPicture(val: boolean) { + this.showName = this.showTitle = !convertToBoolProperty(val); } /** @@ -188,7 +212,7 @@ export class NbUserComponent { /** * Badge status (adds specific styles): - * 'primary', 'info', 'success', 'warning', 'danger' + * `primary`, `info`, `success`, `warning`, `danger` * @param {string} val */ @Input() badgeStatus: string; @@ -202,11 +226,45 @@ export class NbUserComponent { */ @Input() badgePosition: string; - imageBackgroundStyle: SafeStyle; - showNameValue: boolean = true; - showTitleValue: boolean = true; - showInitialsValue: boolean = true; - isMenuShown: boolean = false; + @HostBinding('class.size-tiny') + get tiny(): boolean { + return this.size === 'tiny'; + } + + @HostBinding('class.size-small') + get small(): boolean { + return this.size === 'small'; + } + + @HostBinding('class.size-medium') + get medium(): boolean { + return this.size === 'medium'; + } + + @HostBinding('class.size-large') + get large(): boolean { + return this.size === 'large'; + } + + @HostBinding('class.size-giant') + get giant(): boolean { + return this.size === 'giant'; + } + + @HostBinding('class.shape-rectangle') + get rectangle(): boolean { + return this.shape === 'rectangle'; + } + + @HostBinding('class.shape-semi-round') + get semiRound(): boolean { + return this.shape === 'semi-round'; + } + + @HostBinding('class.shape-round') + get round(): boolean { + return this.shape === 'round'; + } constructor(private domSanitizer: DomSanitizer) { } diff --git a/src/framework/theme/components/user/user.spec.ts b/src/framework/theme/components/user/user.spec.ts new file mode 100644 index 0000000000..33d77fbc73 --- /dev/null +++ b/src/framework/theme/components/user/user.spec.ts @@ -0,0 +1,251 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NbComponentSize, NbLayoutDirectionService, NbUserComponent, NbUserModule } from '@nebular/theme'; + +const NAME_SELECTOR = '.user-name'; +const TITLE_SELECTOR = '.user-title'; +const INITIALS_SELECTOR = '.user-picture.initials'; +const PICTURE_SELECTOR = '.user-picture.image'; +const BADGE_SELECTOR = 'nb-badge'; +const COMPONENT_SIZES: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; + +describe('NbUserComponent', () => { + let fixture: ComponentFixture; + let userComponent: NbUserComponent; + let userElement: HTMLElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ NbUserModule ], + providers: [ NbLayoutDirectionService ], + }); + + fixture = TestBed.createComponent(NbUserComponent); + userComponent = fixture.componentInstance; + userElement = fixture.nativeElement; + fixture.detectChanges(); + }); + + it('should render name if set', () => { + const name = 'SomeName'; + userComponent.name = name; + fixture.detectChanges(); + + const nameElement = userElement.querySelector(NAME_SELECTOR); + expect(nameElement).not.toEqual(null); + expect(nameElement.textContent).toEqual(name); + }); + + it('should not render name if showName set to false', () => { + const name = 'SomeName'; + userComponent.name = name; + userComponent.showName = false; + fixture.detectChanges(); + + const nameElement = userElement.querySelector(NAME_SELECTOR); + expect(nameElement).toEqual(null); + }); + + it('should not render name if set to empty string', () => { + userComponent.name = ''; + fixture.detectChanges(); + + const nameElement = userElement.querySelector(NAME_SELECTOR); + expect(nameElement).toEqual(null); + }); + + it('should render title if set', () => { + const title = 'SomeTitle'; + userComponent.title = title; + fixture.detectChanges(); + + const titleElement = userElement.querySelector(TITLE_SELECTOR); + expect(titleElement).not.toEqual(null); + expect(titleElement.textContent).toEqual(title); + }); + + it('should not render title if showTitle set to false', () => { + const title = 'SomeName'; + userComponent.title = title; + userComponent.showTitle = false; + fixture.detectChanges(); + + const titleElement = userElement.querySelector(TITLE_SELECTOR); + expect(titleElement).toEqual(null); + }); + + it('should not render title if set to empty string', () => { + const title = ''; + userComponent.title = title; + fixture.detectChanges(); + + const titleElement = userElement.querySelector(TITLE_SELECTOR); + expect(titleElement).toEqual(null); + }); + + it(`should show initials if picture isn't set`, () => { + const name = 'Name Name'; + userComponent.name = name; + fixture.detectChanges(); + + const initialsElement = userElement.querySelector(INITIALS_SELECTOR); + expect(initialsElement.textContent.trim()).toEqual('NN'); + }); + + it(`should not show initials if picture is set`, () => { + userComponent.name = 'Name'; + userComponent.title = 'Title'; + userComponent.picture = '/'; + fixture.detectChanges(); + + expect(userElement.querySelector(INITIALS_SELECTOR)).toEqual(null); + }); + + it('should set color of initials if set color property is set', () => { + const color = 'red'; + userComponent.color = color; + fixture.detectChanges(); + + const initialsStyle = (userElement.querySelector(INITIALS_SELECTOR) as HTMLElement).style; + expect(initialsStyle.backgroundColor).toEqual(color); + }); + + describe('onlyPicture', () => { + it(`should not show title and name if onlyPicture is set to true`, () => { + userComponent.name = 'Name'; + userComponent.title = 'Title'; + userComponent.onlyPicture = true; + fixture.detectChanges(); + + expect(userElement.querySelector(NAME_SELECTOR)).toEqual(null); + expect(userElement.querySelector(TITLE_SELECTOR)).toEqual(null); + }); + + it(`should set showName and showTitle to false if set to true`, () => { + userComponent.showName = true; + userComponent.showTitle = true; + userComponent.onlyPicture = true; + + expect(userComponent.showName).toEqual(false); + expect(userComponent.showTitle).toEqual(false); + expect(userComponent.onlyPicture).toEqual(true); + }); + + it(`should be false if showName is set to true`, () => { + userComponent.showName = true; + expect(userComponent.onlyPicture).toEqual(false); + }); + + it(`should be false if showTitle is set to true`, () => { + userComponent.showTitle = true; + expect(userComponent.onlyPicture).toEqual(false); + }); + + it(`should be true if showName and showTitle is set to false`, () => { + userComponent.showName = false; + userComponent.showTitle = false; + expect(userComponent.onlyPicture).toEqual(true); + }); + }); + + describe('getInitials', () => { + it(`should return empty string if name isn't set`, () => { + userComponent.name = ''; + expect(userComponent.getInitials()).toEqual(''); + }); + + it(`should return one letter for one word name`, () => { + userComponent.name = 'Name'; + expect(userComponent.getInitials()).toEqual('N'); + }); + + it(`should return two letters for two word name`, () => { + userComponent.name = 'Name Name'; + expect(userComponent.getInitials()).toEqual('NN'); + }); + + it(`should return two letters for two first words letters if name set to more then two words`, () => { + userComponent.name = 'Name Name Name'; + expect(userComponent.getInitials()).toEqual('NN'); + + userComponent.name = 'Name Name Name Name Name Name Name Name Name'; + expect(userComponent.getInitials()).toEqual('NN'); + }); + }); + + it('should show badge with initials', () => { + userComponent.badgeText = 'badge text'; + fixture.detectChanges(); + + const badges = userElement.querySelectorAll(BADGE_SELECTOR); + expect(badges.length).toEqual(1); + }); + + it('should show badge with picture', () => { + userComponent.badgeText = 'badge text'; + userComponent.picture = '/'; + fixture.detectChanges(); + + const badges = userElement.querySelectorAll(BADGE_SELECTOR); + expect(badges.length).toEqual(1); + }); + + it('should show badge with if showInitials is false', () => { + userComponent.badgeText = 'badge text'; + userComponent.showInitials = false; + fixture.detectChanges(); + + const badges = userElement.querySelectorAll(BADGE_SELECTOR); + expect(badges.length).toEqual(1); + }); + + it('should show picture if set', () => { + userComponent.picture = '/'; + fixture.detectChanges(); + + expect(userElement.querySelector(PICTURE_SELECTOR)).not.toEqual(null); + }); + + it('should not set picture if falsy value was passed', () => { + userComponent.picture = ''; + expect(userComponent.imageBackgroundStyle).toEqual(null); + userComponent.picture = null; + expect(userComponent.imageBackgroundStyle).toEqual(null); + userComponent.picture = undefined; + expect(userComponent.imageBackgroundStyle).toEqual(null); + }); + + it('should set picture string as background image', () => { + const pictureUrl = '/'; + userComponent.picture = pictureUrl; + fixture.detectChanges(); + + const pictureStyle = (userElement.querySelector(PICTURE_SELECTOR) as HTMLElement).style; + expect(pictureStyle.backgroundImage).toEqual(`url("${pictureUrl}")`); + }); + + it('should be medium sized by default', () => { + expect(userComponent.size).toEqual('medium'); + }); + + it(`only one size property should be true`, () => { + const currentSize: NbComponentSize = 'tiny'; + const otherSizes = COMPONENT_SIZES.filter(s => s !== currentSize); + + userComponent.size = currentSize; + expect(userComponent[currentSize]).toEqual(true); + for (const size of otherSizes) { + expect(userComponent[size]).toEqual(false); + } + }); + + it('should be round shaped by default', () => { + expect(userComponent.shape).toEqual('round'); + }); + + it(`only one shape property should be true`, () => { + userComponent.shape = 'semi-round'; + expect(userComponent.semiRound).toEqual(true); + expect(userComponent.rectangle).toEqual(false); + expect(userComponent.round).toEqual(false); + }); +}); diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts index 4603203d82..942894e42d 100644 --- a/src/framework/theme/index.ts +++ b/src/framework/theme/index.ts @@ -15,6 +15,9 @@ export * from './services/direction.service'; export * from './services/scroll.service'; export * from './services/ruler.service'; export * from './components/component-status'; +export * from './components/component-size'; +export * from './components/component-shape'; +export * from './components/component-status'; export * from './components/card/card.module'; export * from './components/calendar/calendar.module'; export * from './components/calendar/calendar.component'; @@ -27,10 +30,13 @@ export * from './components/layout/restore-scroll-top.service'; export * from './components/menu/menu.module'; export { NbMenuService, NbMenuItem } from './components/menu/menu.service'; export * from './components/route-tabset/route-tabset.module'; +export * from './components/route-tabset/route-tabset.component'; export * from './components/sidebar/sidebar.module'; export * from './components/sidebar/sidebar.service'; export * from './components/tabset/tabset.module'; +export * from './components/tabset/tabset.component'; export * from './components/user/user.module'; +export * from './components/user/user.component'; export * from './components/actions/actions.module'; export * from './components/search/search.module'; export * from './components/search/search.service'; diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index ab0b52d2e4..7484c22dd5 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -408,16 +408,67 @@ $theme: ( route-tabs-selected: color-success, route-tabs-icon-only-max-width: 576px, - user-font-size: font-size, - user-line-height: line-height, - user-bg: color-bg, - user-fg: color-fg, - user-fg-highlight: #bcc3cc, - user-font-family-secondary: font-secondary, - user-size-small: 1.5rem, - user-size-medium: 2.5rem, - user-size-large: 3.25rem, - user-size-xlarge: 4rem, + user-picture-box-background-color: transparent, + user-picture-box-border-color: color-basic, + user-picture-box-border-width: 0.125rem, + user-initials-text-color: text-dark-color, + user-initials-text-font-family: text-paragraph-font-family, + user-initials-text-font-weight: text-paragraph-font-weight, + user-name-text-color: text-dark-color, + user-name-text-font-family: text-paragraph-font-family, + user-name-text-font-weight: text-paragraph-font-weight, + user-title-text-color: text-dark-color, + user-title-text-font-family: text-paragraph-2-font-family, + user-title-text-font-weight: text-paragraph-2-font-weight, + + user-rectangle-border-radius: 0.5rem, + user-semi-round-border-radius: 0.75rem, + user-round-border-radius: 50%, + + user-tiny-height: 1.25rem, + user-tiny-width: 1.25rem, + user-tiny-initials-text-font-size: text-caption-font-size, + user-tiny-initials-text-line-height: text-caption-line-height, + user-tiny-name-text-font-size: text-caption-font-size, + user-tiny-name-text-line-height: text-caption-line-height, + user-tiny-title-text-font-size: text-caption-font-size, + user-tiny-title-text-line-height: text-caption-line-height, + + user-small-height: 1.5rem, + user-small-width: 1.5rem, + user-small-initials-text-font-size: text-caption-font-size, + user-small-initials-text-line-height: text-caption-line-height, + user-small-name-text-font-size: text-caption-font-size, + user-small-name-text-line-height: text-caption-line-height, + user-small-title-text-font-size: text-caption-font-size, + user-small-title-text-line-height: text-caption-line-height, + + user-medium-height: 2.5rem, + user-medium-width: 2.5rem, + user-medium-initials-text-font-size: text-paragraph-font-size, + user-medium-initials-text-line-height: text-paragraph-line-height, + user-medium-name-text-font-size: text-paragraph-font-size, + user-medium-name-text-line-height: text-paragraph-line-height, + user-medium-title-text-font-size: text-caption-font-size, + user-medium-title-text-line-height: text-caption-line-height, + + user-large-height: 3.25rem, + user-large-width: 3.25rem, + user-large-initials-text-font-size: text-paragraph-font-size, + user-large-initials-text-line-height: text-paragraph-line-height, + user-large-name-text-font-size: text-paragraph-font-size, + user-large-name-text-line-height: text-paragraph-line-height, + user-large-title-text-font-size: text-paragraph-2-font-size, + user-large-title-text-line-height: text-paragraph-2-line-height, + + user-giant-height: 4rem, + user-giant-width: 4rem, + user-giant-initials-text-font-size: text-paragraph-font-size, + user-giant-initials-text-line-height: text-paragraph-line-height, + user-giant-name-text-font-size: text-paragraph-font-size, + user-giant-name-text-line-height: text-paragraph-line-height, + user-giant-title-text-font-size: text-paragraph-font-size, + user-giant-title-text-line-height: text-paragraph-line-height, popover-text-color: text-color-dark, popover-text-font-family: text-paragraph-font-family, diff --git a/src/playground/with-layout/user/user-routing.module.ts b/src/playground/with-layout/user/user-routing.module.ts index b0376925a3..687d632f2e 100644 --- a/src/playground/with-layout/user/user-routing.module.ts +++ b/src/playground/with-layout/user/user-routing.module.ts @@ -10,6 +10,7 @@ import { UserShowcaseComponent } from './user-showcase.component'; import { UserSizesComponent } from './user-sizes.component'; import { UserAvatarSettingsComponent } from './user-avatar-settings.component'; import { UserHideCaptionsComponent } from './user-hide-captions.component'; +import { NbUserShapeComponent } from './user-shape.component'; const routes: Route[] = [ { @@ -28,6 +29,10 @@ const routes: Route[] = [ path: 'user-hide-captions.component', component: UserHideCaptionsComponent, }, + { + path: 'user-shape.component', + component: NbUserShapeComponent, + }, ]; @NgModule({ diff --git a/src/playground/with-layout/user/user-shape.component.ts b/src/playground/with-layout/user/user-shape.component.ts new file mode 100644 index 0000000000..a0f77987b9 --- /dev/null +++ b/src/playground/with-layout/user/user-shape.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; + +@Component({ + template: ` + + +

Rectangle

+ + + + + + +

Semi-round

+ + + + + + +

Round

+ + + + `, +}) +export class NbUserShapeComponent {} diff --git a/src/playground/with-layout/user/user-sizes.component.html b/src/playground/with-layout/user/user-sizes.component.html index f1ed034104..eae888bfa2 100644 --- a/src/playground/with-layout/user/user-sizes.component.html +++ b/src/playground/with-layout/user/user-sizes.component.html @@ -1,9 +1,22 @@ + + + + + + + + + + title="Engineer" + [showTitle]="false"> @@ -13,7 +26,7 @@ - @@ -34,7 +47,7 @@ - diff --git a/src/playground/with-layout/user/user.module.ts b/src/playground/with-layout/user/user.module.ts index 168a3d2ecd..4fc8f1f5b9 100644 --- a/src/playground/with-layout/user/user.module.ts +++ b/src/playground/with-layout/user/user.module.ts @@ -11,6 +11,7 @@ import { UserShowcaseComponent } from './user-showcase.component'; import { UserSizesComponent } from './user-sizes.component'; import { UserAvatarSettingsComponent } from './user-avatar-settings.component'; import { UserHideCaptionsComponent } from './user-hide-captions.component'; +import { NbUserShapeComponent } from './user-shape.component'; @NgModule({ declarations: [ @@ -18,6 +19,7 @@ import { UserHideCaptionsComponent } from './user-hide-captions.component'; UserSizesComponent, UserAvatarSettingsComponent, UserHideCaptionsComponent, + NbUserShapeComponent, ], imports: [ NbUserModule, NbCardModule, UserRoutingModule ], })