Add initial context menu component

README.md

@@ -150,11 +150,11 @@ Because I like seeing the numbers.
 
 Language     |   Files |    Blank | Comment |     Code
 -------------|--------:|---------:|--------:|---------:
-TypeScript   |      54 |      602 |      24 |     2827
+TypeScript   |      57 |      610 |      25 |     2855
 PHP          |      18 |      559 |      19 |     1743
-HTML         |      18 |      126 |       9 |     1147
-SASS         |      13 |      209 |      12 |      964
-__SUM:__     | __103__ | __1499__ |  __64__ | __6681__
+HTML         |      19 |      130 |       9 |     1157
+SASS         |      14 |      215 |      12 |      976
+__SUM:__     | __108__ | __1514__ |  __65__ | __6731__
 
 Command: `cloc --exclude-dir=vendor --exclude-ext=json src/`
 

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { API_HTTP_PROVIDERS } from './app.api-http';
 import { Constants } from './shared/constants';
 import {
     AuthGuard,
+    ContextMenu,
     InlineEdit,
     Modal,
     Notifications,
@@ -45,6 +46,7 @@ import { BoardService } from './board/board.service';
     declarations: [
         AppComponent,
         InlineEdit,
+        ContextMenu,
         Modal,
         Notifications,
         TopNav,

src/app/board/column/column.component.html

@@ -32,6 +32,8 @@
         [task]="task"></tb-task>
 </div>
 
+<tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>
+
 <!--<tb-modal modal-title="Confirm Task Removal" blocking="true">-->
 <!--    <div class="center">Removing a task cannot be undone.<br>Continue?</div>-->
 <!--    <div class="buttons">-->
@@ -42,7 +44,7 @@
 <!--    </div>-->
 <!--</tb-modal>-->
 
-<tb-modal  *ngIf="activeBoard" modal-title="Add Task"
+<tb-modal *ngIf="activeBoard" modal-title="Add Task"
     modal-id="{{ MODAL_ID + columnData.id }}">
     <label>
         Title

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

@@ -10,6 +10,8 @@ import {
     Board,
     Category,
     Column,
+    ContextMenu,
+    ContextMenuItem,
     Modal,
     Notification,
     Task,
@@ -35,6 +37,8 @@ export class ColumnDisplay implements OnInit {
     private userOptions: UserOptions;
     private tasks: Array<Task>;
 
+    private contextMenuItems: Array<ContextMenuItem> = [];
+
     private MODAL_ID: string;
     private modalProps: Task;
 
@@ -50,6 +54,8 @@ export class ColumnDisplay implements OnInit {
         this.tasks = [];
         this.collapseTasks = false;
 
+        this.contextMenuItems.push(new ContextMenuItem('Add Task'));
+
         this.MODAL_ID = 'add-task-form-';
         this.modalProps = new Task();
 

src/app/shared/context-menu/context-menu-item.model.ts

@@ -0,0 +1,7 @@
+export class ContextMenuItem {
+    constructor(public text: string = '',
+                public action: Function = null,
+                public isSeparator: boolean = false) {
+    }
+}
+

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

@@ -0,0 +1,12 @@
+<div class="context-menu-container"
+    [ngClass]="{ animated: animate, 'menu-open': isOpen }">
+
+    <div class="menu-item" *ngFor="let item of menuItems">
+        <hr *ngIf="item.isSeparator">
+
+        <div *ngIf="!item.isSeparator">
+            {{ item.text }}
+        </div>
+    </div>
+</div>
+

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { ContextMenuItem } from './context-menu-item.model';
+
+@Component({
+    selector: 'tb-context-menu',
+    templateUrl: 'app/shared/context-menu/context-menu.component.html'
+})
+export class ContextMenu {
+    @Input('menu-items') menuItems: Array<ContextMenuItem>;
+
+    isOpen = false;
+    animate = true;
+
+    constructor() {
+        // TODO
+    }
+}
+

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

@@ -0,0 +1,2 @@
+export * from './context-menu.component';
+export * from './context-menu-item.model';

src/app/shared/index.ts

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './auth/index';
+export * from './context-menu/index';
 export * from './inline-edit/inline-edit.component';
 export * from './modal/index';
 export * from './models/index';

src/scss/_context-menu.scss

@@ -0,0 +1,8 @@
+.context-menu-container {
+    display: none;
+
+    &.menu-open {
+        display: block;
+    }
+}
+

src/scss/main.scss

@@ -27,4 +27,5 @@
 @import 'icons';
 @import 'notifications';
 @import 'modal';
+@import 'context-menu';