integration ngx-contextmenu

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sengi",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -214,6 +214,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.3.7.tgz",
+      "integrity": "sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+          "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.4.tgz",
@@ -8160,6 +8177,14 @@
       "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
       "dev": true
     },
+    "ngx-contextmenu": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-contextmenu/-/ngx-contextmenu-5.2.0.tgz",
+      "integrity": "sha512-S8W7YUJJ+McWCfHv04gWURK7doJBl+1YZUynyP8QQMMwGd02OiggBp38HrEHAdMr4TdvKyo4Td5Ud63x28tpLg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -28,6 +28,7 @@
     "private": true,
     "dependencies": {
         "@angular/animations": "^7.2.7",
+        "@angular/cdk": "^7.2.7",
         "@angular/common": "^7.2.7",
         "@angular/compiler": "^7.2.7",
         "@angular/core": "^7.2.7",
@@ -46,6 +47,7 @@
         "bootstrap": "^4.1.3",
         "core-js": "^2.5.4",
         "emojione": "~4.5.0",
+        "ngx-contextmenu": "^5.2.0",
         "rxjs": "^6.4.0",
         "tslib": "^1.9.0",
         "zone.js": "^0.8.29"

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { NgxsModule } from '@ngxs/store';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ContextMenuModule } from 'ngx-contextmenu';
 
 import { AppComponent } from "./app.component";
 import { LeftSideBarComponent } from "./components/left-side-bar/left-side-bar.component";
@@ -128,7 +129,8 @@ const routes: Routes = [
       StreamsState,
       SettingsState
     ]),
-    NgxsStoragePluginModule.forRoot()
+    NgxsStoragePluginModule.forRoot(),
+    ContextMenuModule.forRoot()
   ],
   providers: [AuthService, NavigationService, NotificationService, MastodonService, StreamingService],
   bootstrap: [AppComponent],

src/app/components/stream/status/action-bar/action-bar.component.html

@@ -27,7 +27,19 @@
         <fa-icon [icon]="faWindowCloseRegular"></fa-icon>
     </a>
 
-    <!-- <a href class="action-bar__link action-bar__link--more" title="More" (click)="more()">
+    <!-- <a href class="action-bar__link action-bar__link--more" (click)="return false;" title="More" [contextMenu]="basicMenu" [contextMenuSubject]="item"> -->
-        <fa-icon [icon]="faEllipsisH"></fa-icon>
+        <fa-icon [icon]="faEllipsisH" [contextMenu]="basicMenu" [contextMenuSubject]="item"></fa-icon>
-    </a> -->
+    <!-- </a> -->
+    <context-menu #basicMenu>
+        <ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">
+          Say hi!
+        </ng-template>
+        <ng-template contextMenuItem divider="true"></ng-template>
+        <ng-template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">
+          Bye, {{item?.name}}
+        </ng-template>
+        <ng-template contextMenuItem passive="true">
+          Input something: <input type="text">
+        </ng-template>
+      </context-menu>
 </div>

src/app/components/stream/status/action-bar/action-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Store } from '@ngxs/store';
 import { Observable, Subscription } from 'rxjs';
@@ -12,6 +12,8 @@ import { ToolsService } from '../../../../services/tools.service';
 import { NotificationService } from '../../../../services/notification.service';
 import { StatusWrapper } from '../../../../models/common.model';
 
+import { ContextMenuComponent } from 'ngx-contextmenu';
+
 @Component({
     selector: 'app-action-bar',
     templateUrl: './action-bar.component.html',
@@ -26,6 +28,12 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     faEllipsisH = faEllipsisH;
     faLock = faLock;
 
+    @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;
+    public items = [
+        { name: 'John', otherProperty: 'Foo' },
+        { name: 'Joe', otherProperty: 'Bar' }
+    ];
+
     @Input() statusWrapper: StatusWrapper;
     @Output() replyEvent = new EventEmitter();
     @Output() cwIsActiveEvent = new EventEmitter<boolean>();

src/index.html

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
     <style>
         .lds-ripple {