styling context menu

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

@@ -27,19 +27,19 @@
         <fa-icon [icon]="faWindowCloseRegular"></fa-icon>
     </a>
 
-    <!-- <a href class="action-bar__link action-bar__link--more" (click)="return false;" title="More" [contextMenu]="basicMenu" [contextMenuSubject]="item"> -->
+    <a href class="action-bar__link action-bar__link--more" (click)="onContextMenu($event, item)" title="More" [contextMenu]="basicMenu" [contextMenuSubject]="item">
-        <fa-icon [icon]="faEllipsisH" [contextMenu]="basicMenu" [contextMenuSubject]="item"></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 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">
+        <!-- <ng-template contextMenuItem passive="true">
           Input something: <input type="text">
-        </ng-template>
+        </ng-template> -->
       </context-menu>
 </div>

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

@@ -1,8 +1,9 @@
 @import "variables";
+@import "context-menu";
 
 .action-bar {
     // outline: 1px solid greenyellow; // height: 20px;
-    margin: 5px 10px 5px $avatar-column-space;
+    margin: 5px 0px 5px $avatar-column-space;
     padding: 0;
     font-size: 18px;
     height: 30px;
@@ -41,14 +42,12 @@
             font-size: 22px;
         }
 
-        
+        &--more {
-
+            position: absolute;
-
+            right: -5px;
-        // &--more {
+            // left: 155px;
-        //     position: absolute;
+            bottom: -2px;
-        //     left: 155px;
+        }
-        //     bottom: -6px;
-        // }
     }
 
     &__lock {

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

@@ -12,7 +12,7 @@ import { ToolsService } from '../../../../services/tools.service';
 import { NotificationService } from '../../../../services/notification.service';
 import { StatusWrapper } from '../../../../models/common.model';
 
-import { ContextMenuComponent } from 'ngx-contextmenu';
+import { ContextMenuComponent, ContextMenuService } from 'ngx-contextmenu';
 
 @Component({
     selector: 'app-action-bar',
@@ -59,6 +59,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     private accountSub: Subscription;
 
     constructor(
+        private contextMenuService: ContextMenuService,
         private readonly store: Store,
         private readonly toolsService: ToolsService,
         private readonly mastodonService: MastodonService,
@@ -220,4 +221,15 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         console.warn('more'); //TODO
         return false;
     }
+
+    public onContextMenu($event: MouseEvent, item: any): void {
+        this.contextMenuService.show.next({
+          // Optional - if unspecified, all context menu components will open
+          contextMenu: this.basicMenu,
+          event: $event,
+          item: item,
+        });
+        $event.preventDefault();
+        $event.stopPropagation();
+      }
 }

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">
+    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
 
     <style>
         .lds-ripple {

src/sass/_context-menu.scss

@@ -0,0 +1,38 @@
+@import "variables";
+::ng-deep .ngx-contextmenu {
+    transition: all .4s;
+    border-radius: 3px;
+    
+    & .dropdown-menu {
+        border: solid 1px $context-menu-border-color;
+        background-color: $context-menu-border-color;
+        background-color: $context-menu-background;
+        padding: 0;
+        border: solid 2px $context-menu-border-color;
+    }
+
+    & li {
+        display: block;
+        // border-top: solid 1px $context-menu-border-color;
+        // text-transform: uppercase;
+        // text-align: center;
+
+        &:first-child {
+            border-top: none;
+        }
+    }
+
+    & a {
+        color: $btn-primary-font-color;
+        display: block;
+        padding: 0.5em 1em;
+        padding: 5px 10px;
+        text-decoration: none;
+
+        &:hover {
+            color: $btn-primary-font-color;
+            background-color: $context-menu-background-hover;
+            text-decoration: none;
+        }
+    }
+}

src/sass/_variables.scss

@@ -52,4 +52,17 @@ $button-border-color: #303957;
 
 $column-background: #0f111a;
 
-$card-border-color: #1e2435;
+$card-border-color: #1e2435;
+
+
+$context-menu-background: #0f111a;
+$context-menu-background: #686970;
+$context-menu-background: #16171d;
+$context-menu-background: #090b10;
+$context-menu-background-hover: #16171d;
+$context-menu-font-color: #4e5572;
+$context-menu-border-color: #4e5572;
+$context-menu-border-color: #cccccc;
+$context-menu-border-color: #181616;
+$context-menu-border-color: #555661;
+$context-menu-border-color: #4e5572;