Initial functional context menu - WIP

src/app/board/column/column.component.ts

@@ -54,7 +54,7 @@ export class ColumnDisplay implements OnInit {
         this.tasks = [];
         this.collapseTasks = false;
 
-        this.contextMenuItems.push(new ContextMenuItem('Add Task'));
+        this.contextMenuItems.push(new ContextMenuItem('Add New Task'));
 
         this.MODAL_ID = 'add-task-form-';
         this.modalProps = new Task();

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

@@ -1,4 +1,8 @@
-import { Component, Input } from '@angular/core';
+import {
+    Component,
+    Input,
+    ElementRef
+} from '@angular/core';
 
 import { ContextMenuItem } from './context-menu-item.model';
 
@@ -12,8 +16,34 @@ export class ContextMenu {
     isOpen = false;
     animate = true;
 
-    constructor() {
-        // TODO
+    constructor(private el: ElementRef) {
+        let parentElement = el.nativeElement.parentElement;
+
+        el.nativeElement.ownerDocument.addEventListener('click', () => {
+            this.isOpen = false;
+        });
+
+        parentElement.oncontextmenu = (event: MouseEvent) => {
+            event.preventDefault();
+            this.onParentContextMenu(event);
+        };
+    }
+
+    private onParentContextMenu(event: MouseEvent) {
+        this.isOpen = true;
+
+        let edgeBuffer = 10;
+        let target = this.el.nativeElement.firstElementChild;
+
+        setTimeout(() => {
+            let rect = target.getBoundingClientRect();
+
+            let offsetX = (event.pageX + rect.width + edgeBuffer) > window.innerWidth;
+            let offsetY = (event.pageY + rect.height + edgeBuffer) > window.innerHeight;
+
+            target.style.left = event.pageX - (offsetX ? rect.width : 0) + 'px';
+            target.style.top = event.pageY - (offsetY ? rect.height : 0) + 'px';
+        }, 10);
     }
 }
 

src/scss/_context-menu.scss

@@ -1,8 +1,35 @@
-.context-menu-container {
+.collapsed {
+    .context-menu-container {
+        &.menu-open {
             display: none;
+        }
+    }
+}
+
+.context-menu-container {
+    @include shadow-high;
+
+    background-color: #fff;
+    border-radius: 3px;
+    display: none;
+    margin: 2px 0 0;
+    padding: 5px 0;
+    position: fixed;
+    width: 200px;
+    z-index: 100;
 
     &.menu-open {
         display: block;
     }
+
+    .menu-item {
+        cursor: pointer;
+        padding: 4px 10px;
+        user-select: none;
+
+        &:hover {
+            background-color: lighten($color-background, 5%);
+        }
+    }
 }