feat(context-menu): add context menu component

docs/articles/concept-ui-kit.md

@@ -12,6 +12,7 @@ Here's a list of Nebular components:
 - [User(Avatar)](#/docs/components/user-avatar)
 - [Checkbox](#/docs/components/checkbox)
 - [Popover](#/docs/components/popover)
+- [Context Menu](#/docs/components/context-menu)
 <hr class="section-end">
 
 <div class="note note-success">

docs/structure.ts

@@ -410,6 +410,22 @@ export const STRUCTURE = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'Context Menu',
+        children: [
+          {
+            type: 'block',
+            block: 'component',
+            blockData: 'NbContextMenuDirective',
+          },
+          {
+            type: 'block',
+            block: 'component',
+            blockData: 'NbContextMenuComponent',
+          },
+        ],
+      },
     ],
   },
   {

e2e/context-menu.e2e-spec.ts

@@ -0,0 +1,40 @@
+import { browser, by, element } from 'protractor';
+
+const withContextMenu = by.css('nb-card:nth-child(1) nb-user:nth-child(1)');
+const popover = by.css('nb-layout > nb-popover');
+
+describe('nb-context-menu', () => {
+
+  beforeEach((done) => {
+    browser.get('#/context-menu').then(done);
+  });
+
+  it('have to be opened by click', () => {
+    element(withContextMenu).click();
+    const containerContent = element(popover).element(by.css('nb-menu > ul'));
+    expect(containerContent.isPresent()).toBeTruthy();
+  });
+
+  it('should have two menu items', () => {
+    element(withContextMenu).click();
+    const menuItems = element(popover).all(by.css('nb-menu > ul > li'));
+
+    expect(menuItems.count()).toEqual(2);
+  });
+
+  it('have to open user page after click on first item', () => {
+    element(withContextMenu).click();
+    const menuItems = element(popover).all(by.css('nb-menu > ul > li'));
+    menuItems.get(0).click();
+
+    expect(browser.getCurrentUrl().then(it => it.split('#/')[1])).toEqual('user');
+  });
+
+  it('have to open popover page after click on second item', () => {
+    element(withContextMenu).click();
+    const menuItems = element(popover).all(by.css('nb-menu > ul > li'));
+    menuItems.get(1).click();
+
+    expect(browser.getCurrentUrl().then(it => it.split('#/')[1])).toEqual('popover');
+  });
+});

src/app/app.module.ts

@@ -23,6 +23,7 @@ import {
   NbThemeModule,
   NbUserModule,
   NbPopoverModule,
+  NbContextMenuModule,
 } from '@nebular/theme';
 
 import {
@@ -69,6 +70,7 @@ import { NbDynamicToAddComponent, NbThemeDynamicTestComponent } from './layout-t
 import { NbActionsTestComponent } from './actions-test/actions-test.component';
 import { NbBootstrapTestComponent } from './bootstrap-test/bootstrap-test.component';
 import { NbPopoverTestComponent } from './popover-test/popover-test.component';
+import { NbContextMenuTestComponent } from './context-menu-test/context-menu-test.component';
 
 import { routes } from './app.routes';
 
@@ -119,6 +121,7 @@ const NB_TEST_COMPONENTS = [
   NbPopoverTestComponent,
   NbCheckboxTestComponent,
   NbAclTestComponent,
+  NbContextMenuTestComponent,
 ];
 
 @NgModule({
@@ -138,6 +141,7 @@ const NB_TEST_COMPONENTS = [
     NbSearchModule,
     NbActionsModule,
     NbPopoverModule,
+    NbContextMenuModule,
     NbCheckboxModule,
     NbAuthModule.forRoot({
       forms: {

src/app/app.routes.ts

@@ -53,6 +53,7 @@ import {
 import { AuthGuard } from './auth-guard.service';
 import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
 import { NbAclTestComponent } from './acl-test/acl-test.component';
+import { NbContextMenuTestComponent } from './context-menu-test/context-menu-test.component';
 
 export const routes: Routes = [
   {
@@ -258,6 +259,10 @@ export const routes: Routes = [
     path: 'acl',
     component: NbAclTestComponent,
   },
+  {
+    path: 'context-menu',
+    component: NbContextMenuTestComponent,
+  },
   {
     path: '**',
     component: NbCardTestComponent,

src/app/context-menu-test/context-menu-test.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-context-menu-test',
+  template: `
+    <nb-layout>
+      <nb-layout-column>
+        <nb-card>
+          <nb-card-header>Context Menu</nb-card-header>
+          <nb-card-body>
+            <nb-user name="Nikita Poltoratsky" title="full-stack developer" [nbContextMenu]="items">
+            </nb-user>
+          </nb-card-body>
+        </nb-card>
+
+        <nb-card>
+          <nb-card-header>Context Menu</nb-card-header>
+          <nb-card-body>
+            <nb-user name="Nikita Poltoratsky" title="full-stack developer" [nbContextMenu]="itemsWithIcons">
+            </nb-user>
+          </nb-card-body>
+        </nb-card>
+      </nb-layout-column>
+    </nb-layout>
+  `,
+})
+export class NbContextMenuTestComponent {
+
+  items = [
+    { title: 'Profile', link: '/user' },
+    { title: 'Logout', link: '/popover' },
+  ];
+
+  itemsWithIcons = [
+    { title: 'Profile', link: '/user', icon: 'nb-compose' },
+    { title: 'Logout', link: '/popover', icon: 'nb-gear' },
+  ];
+}

src/app/popover-test/popover-test.component.ts

@@ -152,4 +152,6 @@ import { NbDynamicToAddComponent } from '../layout-test/theme-dynamic-test.compo
 export class NbPopoverTestComponent {
 
   customPopoverComponent = NbDynamicToAddComponent;
+
+  items = [{ title: 'Profile', link: '/card' }, { title: 'Log out', link: '/auth' }];
 }

src/framework/theme/components/context-menu/_context-menu.component.theme.scss

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../styles/core/mixins';
+
+@mixin nb-context-menu-theme() {
+  nb-menu.context-menu .menu-items .menu-item a {
+    color: nb-theme(context-menu-fg);
+    font-weight: nb-theme(font-weight-normal);
+
+    .menu-icon {
+      color: nb-theme(context-menu-fg);
+    }
+
+    @include hover-focus-active {
+      color: nb-theme(context-menu-active-fg);
+      background: nb-theme(context-menu-active-bg);
+      font-weight: nb-theme(font-weight-normal);
+
+      .menu-icon {
+        color: nb-theme(context-menu-active-fg);
+      }
+    }
+  }
+}

src/framework/theme/components/context-menu/context-menu.component.scss

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host /deep/ nb-menu {
+  display: inline;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+
+  ul.menu-items {
+    margin: 0;
+    padding: 0.5rem 0;
+
+    .menu-item {
+      border: none;
+      white-space: nowrap;
+
+      &:first-child {
+        border: none;
+      }
+
+      a {
+        cursor: pointer;
+        border-radius: 0;
+        padding: 0;
+
+        .menu-icon {
+          font-size: 1.5rem;
+          width: auto;
+        }
+
+        .menu-title {
+          padding: 0.375rem 3rem;
+        }
+
+        .menu-icon ~ .menu-title {
+          padding-left: 0;
+        }
+
+        .menu-icon:first-child {
+          padding-left: 1rem;
+        }
+      }
+    }
+  }
+}

src/framework/theme/components/context-menu/context-menu.component.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Input } from '@angular/core';
+import { NbMenuItem } from '../../';
+
+/**
+ * Context menu component used as content within NbContextMenuDirective.
+ *
+ * @styles
+ *
+ * context-menu-fg
+ * context-menu-active-fg
+ * context-menu-active-bg
+ * */
+@Component({
+  selector: 'nb-context-menu',
+  styleUrls: ['./context-menu.component.scss'],
+  template: '<nb-menu class="context-menu" [items]="items"></nb-menu>',
+})
+export class NbContextMenuComponent {
+
+  @Input()
+  items: NbMenuItem[] = [];
+}