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