feat(user): Eva style (#1354)

BREAKING CHANGE: 'isMenuShown' property removed from NbUserComponent. 'inverse' input removed from NbUserComponent. 'background' class renamed to 'initials'. NbUserComponent SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE size static properties were removed. Use NbComponentSize instead. Size class names were prefixed with 'size-'. small -> size-small medium -> size-medium large -> size-large xlarge -> size-giant Following properties were renamed: user-font-size -> user-[size]-initials-text-font-size, user-[size]-name-text-font-size, user-[size]-title-text-font-size user-line-height -> user-[size]-initials-text-line-height, user-[size]-name-text-line-height, user-[size]-title-text-line-height user-bg -> user-picture-box-background-color user-fg -> user-initials-text-color user-fg-highlight -> user-picture-box-border-color user-font-family-secondary -> user-name-text-font-family user-size-small -> user-small-height, user-small-width user-size-medium -> user-medium-height, user-medium-width user-size-large -> user-large-height, user-large-width user-size-xlarge -> user-giant-height, user-giant-width NbUserComponent 'showNameValue', 'showTitleValue', 'showInitialsValue' properties removed. Use 'showName', 'showTitle', 'showInitials' instead.
akveo · May 27, 2019 · 2d05714 · 2d05714
1 parent 6d11c95
commit 2d05714
Show file tree

Hide file tree

Showing 12 changed files with 549 additions and 140 deletions.
diff --git 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
@@ -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
@@ -2,15 +2,15 @@
  <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="!imageBackgroundStyle" class="user-picture background" [style.background-color]="color">
- <ng-container *ngIf="showInitialsValue">
+ <div *ngIf="!imageBackgroundStyle" class="user-picture initials" [style.background-color]="color">
+ <ng-container *ngIf="showInitials">
  {{ getInitials() }}
  </ng-container>
  <nb-badge *ngIf="badgeText" [text]="badgeText" [status]="badgeStatus" [position]="badgePosition"></nb-badge>
  </div>
 
  <div class="info-container">
- <div *ngIf="showNameValue && name" class="user-name">{{ name }}</div>
- <div *ngIf="showTitleValue && title" class="user-title">{{ title }}</div>
+ <div *ngIf="showName && name" class="user-name">{{ name }}</div>
+ <div *ngIf="showTitle && title" class="user-title">{{ title }}</div>
  </div>
 </div>
diff --git a/src/framework/theme/components/user/user.component.scss b/src/framework/theme/components/user/user.component.scss
@@ -17,25 +17,20 @@
 
  .user-picture {
  position: relative;
- border-radius: 50%;
  flex-shrink: 0;
 
  &.image {
  background-size: cover;
  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);