refactor(theme): remove user context menu (#231)

BREAKING CHANGES: NbUserComponent no longer has context menu. We've completely moved context menu in the separate component. So, to migrate from the previous version you have to remove user menu items ``` <nb-user [menu]="items"></nb-user> ``` and use NbContextMenuDirective: ``` <nb-user [nbContextMenu]="items"></nb-user> ```
akveo · Feb 20, 2018 · 959bd4a · 959bd4a
1 parent c044e5d
commit 959bd4a
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 533 deletions.
diff --git a/docs/output.json b/docs/output.json
diff --git a/src/app/user-test/user-test.component.ts b/src/app/user-test/user-test.component.ts
@@ -19,8 +19,7 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
   template: `
     <nb-layout id="layout-fluid">
       <nb-layout-header fixed>
-        <nb-user showInitials size="medium" name="Dmitry Nehaychik" title="Worker"
-                  [menu]="contextMenu" (menuClick)="onMenuItemClick($event)"></nb-user>
+        <nb-user showInitials size="medium" name="Dmitry Nehaychik" title="Worker"></nb-user>
       </nb-layout-header>
 
 
@@ -44,21 +43,17 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
           <nb-user inverse onlyPicture size="medium" name="Dmitry Nehaychik" title="Worker"></nb-user>
         </div>
         <div class="test-row">
-          <nb-user inverse size="medium" name="Dmitry Nehaychik" title="Worker"
-                    [menu]="contextMenu" (menuClick)="onMenuItemClick($event)"></nb-user>
+          <nb-user inverse size="medium" name="Dmitry Nehaychik" title="Worker"></nb-user>
         </div>
         <div class="test-row">
-          <nb-user inverse onlyPicture size="medium" name="Dmitry Nehaychik" title="Worker"
-                    [menu]="contextMenu" (menuClick)="onMenuItemClick($event)"></nb-user>
+          <nb-user inverse onlyPicture size="medium" name="Dmitry Nehaychik" title="Worker"></nb-user>
         </div>
         <div class="test-row">
           <nb-user inverse size="large" picture="http://lorempixel.com/400/200/animals/"
-                    name="Dmitry Nehaychik" title="Worker"
-                    [menu]="contextMenu" (menuClick)="onMenuItemClick($event)"></nb-user>
+                   name="Dmitry Nehaychik" title="Worker"></nb-user>
         </div>
         <div class="test-row">
-          <nb-user inverse showInitials size="medium" name="Dmitry Nehaychik" title="Worker"
-                    [menu]="contextMenu" (menuClick)="onMenuItemClick($event)"></nb-user>
+          <nb-user inverse showInitials size="medium" name="Dmitry Nehaychik" title="Worker"></nb-user>
         </div>
 
         <div class="test-row">
@@ -101,8 +96,6 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
             picture="http://lorempixel.com/400/200/animals/"
             name="Dmitry Nehaychik"
             title="Worker"
-            [menu]="contextMenu"
-            (menuClick)="onMenuItemClick($event)"
             badgeText="29"
             [badgeStatus]="badge.STATUS_DANGER"
             [badgePosition]="badge.TOP_LEFT">
@@ -119,14 +112,4 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
 export class NbUserTestComponent {
 
   badge = NbBadgeComponent;
-
-  contextMenu = [
-    { title: 'Profile', link: 'some/link', icon: 'nb-person' },
-    { title: 'Billing', target: '_blank', url: 'http://akveo.com' },
-    { title: 'Exit', key: 'exit' },
-  ];
-
-  onMenuItemClick(event) {
-    console.info(event);
-  }
 }
diff --git a/src/framework/theme/components/user/_user.component.theme.scss b/src/framework/theme/components/user/_user.component.theme.scss
@@ -60,28 +60,5 @@
         width: nb-theme(user-size-xlarge);
       }
     }
-
-    .user-context-menu {
-      border: 2px solid nb-theme(user-menu-border);
-      background: nb-theme(user-menu-bg);
-
-      ul > li > a {
-        color: nb-theme(user-menu-fg);
-
-        @include hover-focus-active {
-          color: nb-theme(user-menu-active-fg);
-          background: nb-theme(user-menu-active-bg);
-          text-decoration: none;
-        }
-      }
-
-      ul > li.arrow {
-        border-bottom: 11px solid nb-theme(user-menu-border) !important;
-
-        &::after {
-          border-bottom: 11px solid nb-theme(user-menu-bg) !important;
-        }
-      }
-    }
   }
 }
diff --git a/src/framework/theme/components/user/user.component.html b/src/framework/theme/components/user/user.component.html
@@ -1,4 +1,4 @@
-<div class="user-container" (click)="toggleMenu()" [ngClass]="{'with-menu' : hasMenu()}">
+<div class="user-container">
   <div *ngIf="imageBackgroundStyle" class="user-picture image" [style.background-image]="imageBackgroundStyle">
     <nb-badge *ngIf="badgeText" [text]="badgeText" [status]="badgeStatus" [position]="badgePosition"></nb-badge>
   </div>
@@ -13,26 +13,4 @@
     <div *ngIf="showNameValue && name" class="user-name">{{ name }}</div>
     <div *ngIf="showTitleValue && title" class="user-title">{{ title }}</div>
   </div>
-
-  <div *ngIf="hasMenu()"
-       [ngStyle]="{display: isMenuShown ? 'block' : 'none'}" class="user-context-menu">
-    <ul>
-      <li class="arrow"></li>
-      <li *ngFor="let item of menu" [class.with-icon]="item.icon">
-        <a *ngIf="item.link && !item.url" [routerLink]="item.link" [attr.target]="item.target">
-          <span *ngIf="item.icon" class="item-icon {{ item.icon  }}"></span>
-          {{ item.title }}
-        </a>
-        <a *ngIf="item.url && !item.link" [attr.href]="item.url" [attr.target]="item.target">
-          <span *ngIf="item.icon" class="item-icon {{ item.icon  }}"></span>
-          {{ item.title }}
-        </a>
-        <a *ngIf="!item.link && !item.url" href="#" [attr.target]="item.target"
-           (click)="itemClick($event, item)">
-          <span *ngIf="item.icon" class="item-icon {{ item.icon  }}"></span>
-          {{ item.title }}
-        </a>
-      </li>
-    </ul>
-  </div>
 </div>
diff --git a/src/framework/theme/components/user/user.component.scss b/src/framework/theme/components/user/user.component.scss
@@ -4,8 +4,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../styles/core/mixins';
-
 :host {
   display: flex;
 }
@@ -14,10 +12,6 @@
   position: relative;
   display: flex;
   align-items: center;
-
-  &.with-menu {
-    cursor: pointer;
-  }
 }
 
 .user-picture {
@@ -44,59 +38,3 @@
 .info-container {
   margin-left: 0.5rem;
 }
-
-.user-context-menu {
-  @include center-horizontal-absolute();
-
-  z-index: 1000;
-  top: calc(100% + 10px);
-  background-clip: padding-box;
-  border-radius: 5px;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-
-  ul {
-    margin: 0;
-    padding: 0.5rem 0;
-    list-style: none;
-
-    li {
-      display: block;
-      white-space: nowrap;
-      > a {
-        padding: 0.375rem 3rem;
-        display: flex;
-      }
-
-      &.with-icon > a {
-        padding-left: 1rem;
-
-        .item-icon {
-          font-size: 1.5rem;
-          padding-right: 0.5rem;
-        }
-      }
-
-      &.arrow {
-        @include center-horizontal-absolute();
-
-        top: -22px;
-        width: 0;
-        height: 0;
-        border: 11px solid transparent;
-
-        &::after {
-          position: absolute;
-          content: ' ';
-          width: 0;
-          height: 0;
-          top: -9px;
-          left: 0;
-          margin-left: -12px;
-          display: block;
-          border: 12px solid transparent;
-        }
-      }
-    }
-  }
-}
diff --git a/src/framework/theme/components/user/user.component.ts b/src/framework/theme/components/user/user.component.ts
@@ -4,45 +4,14 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, Input, HostBinding, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
+import { Component, Input, HostBinding } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { convertToBoolProperty } from '../helpers';
 
-/**
- * Action dropdown menu
- */
-export class NbUserMenuItem {
-  /**
-   * Menu title
-   * @type string
-   */
-  title: string;
-  /**
-   * Menu link for [routerLink] directive
-   * @type string
-   */
-  link?: string;
-  /**
-   * URL for absolute urls, used directly in href
-   * @type string
-   */
-  url?: string;
-  /**
-   * Link target (_blank, _self, etc)
-   * @type string
-   */
-  target?: string;
-  /**
-   * Icon class
-   * @type string
-   */
-  icon?: string;
-}
-
 /**
  * Represents a component showing a user avatar (picture) with a user name on the right.
  *
- * Can be used as a user profile link or can bring a user context menu.
+ * Can be used as a user profile link.
  *
  * @styles
  *
@@ -56,11 +25,6 @@ export class NbUserMenuItem {
  * user-size-medium:
  * user-size-large:
  * user-size-xlarge:
- * user-menu-fg:
- * user-menu-bg:
- * user-menu-active-fg:
- * user-menu-active-bg:
- * user-menu-border:
  */
 @Component({
   selector: 'nb-user',
@@ -133,12 +97,6 @@ export class NbUserComponent {
    */
   @Input() color: string;
 
-  /**
-   * List of menu items for a user context menu (shown when clicked)
-   * @type NbUserMenuItem[]
-   */
-  @Input() menu: NbUserMenuItem[] = [];
-
   /**
    * Size of the component, small|medium|large
    * @type string
@@ -214,40 +172,13 @@ export class NbUserComponent {
    */
   @Input() badgePosition: string;
 
-  /**
-   * Outputs when a context menu item is clicked
-   * @type EventEmitter<NbUserMenuItem>
-   */
-  @Output() menuClick = new EventEmitter<NbUserMenuItem>();
-
   imageBackgroundStyle: SafeStyle;
   showNameValue: boolean = true;
   showTitleValue: boolean = true;
   showInitialsValue: boolean = true;
   isMenuShown: boolean = false;
 
-  constructor(
-    private el: ElementRef,
-    private domSanitizer: DomSanitizer) { }
-
-  itemClick(event: any, item: NbUserMenuItem): boolean {
-    this.menuClick.emit(item);
-    return false;
-  }
-
-  /**
-   * Toggles a context menu
-   */
-  toggleMenu() {
-    this.isMenuShown = !this.isMenuShown;
-  }
-
-  @HostListener('document:click', ['$event'])
-  hideMenu(event: any) {
-    if (!this.el.nativeElement.contains(event.target)) {
-      this.isMenuShown = false;
-    }
-  }
+  constructor(private domSanitizer: DomSanitizer) { }
 
   getInitials(): string {
     if (this.name) {
@@ -258,9 +189,4 @@ export class NbUserComponent {
 
     return '';
   }
-
-  hasMenu(): boolean {
-    return this.menu && this.menu.length > 0;
-  }
-
 }
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
@@ -61,8 +61,6 @@ $theme: (
   user-fg: color-bg,
   user-bg: color-fg,
   user-fg-highlight: color-fg-highlight,
-  user-menu-active-bg: color-primary,
-  user-menu-border: color-primary,
 
   popover-border: color-primary,
   popover-shadow: shadow,

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -226,11 +226,6 @@ $theme: (
   user-size-medium: 2.5rem,
   user-size-large: 3.25rem,
   user-size-xlarge: 4rem,
-  user-menu-fg: color-fg-heading,
-  user-menu-bg: color-bg,
-  user-menu-active-fg: #ffffff,
-  user-menu-active-bg: color-success,
-  user-menu-border: color-success,
 
   popover-fg: color-fg-heading,
   popover-bg: color-bg,