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>
```

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:https://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:https://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:https://akveo.com' },
- { title: 'Exit', key: 'exit' },
- ];
-
- onMenuItemClick(event) {
- console.info(event);
- }
 }

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

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>

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

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

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,

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,