diff --git a/README.md b/README.md index 5c68124..9dc24be 100644 --- a/README.md +++ b/README.md @@ -150,11 +150,11 @@ Because I like seeing the numbers. Language | Files | Blank | Comment | Code -------------|--------:|---------:|--------:|---------: -TypeScript | 57 | 610 | 25 | 2855 -PHP | 18 | 559 | 19 | 1743 -HTML | 19 | 130 | 9 | 1157 -SASS | 14 | 215 | 12 | 976 -__SUM:__ | __108__ | __1514__ | __65__ | __6731__ +TypeScript | 58 | 629 | 26 | 2939 +PHP | 18 | 558 | 19 | 1740 +HTML | 19 | 131 | 9 | 1160 +SASS | 14 | 221 | 12 | 1005 +__SUM:__ | __109__ | __1539__ | __66__ | __6848__ Command: `cloc --exclude-dir=vendor --exclude-ext=json src/` diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4ef741a..90927e5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,6 +18,7 @@ import { Notifications, TopNav, AuthService, + ContextMenuService, ModalService, NotificationsService, StringsService @@ -39,6 +40,7 @@ import { BoardService } from './board/board.service'; Title, AuthService, BoardService, + ContextMenuService, ModalService, NotificationsService, StringsService diff --git a/src/app/board/board.component.ts b/src/app/board/board.component.ts index e33cbf6..daa3684 100644 --- a/src/app/board/board.component.ts +++ b/src/app/board/board.component.ts @@ -12,6 +12,7 @@ import { User, Notification, AuthService, + ContextMenuService, NotificationsService, StringsService } from '../shared/index'; @@ -38,6 +39,7 @@ export class BoardDisplay implements OnInit { private active: ActivatedRoute, private auth: AuthService, private boardService: BoardService, + private menuService: ContextMenuService, private notes: NotificationsService, private stringsService: StringsService, private dragula: DragulaService) { diff --git a/src/app/board/column/column.component.html b/src/app/board/column/column.component.html index 5e7d707..6bddd7a 100644 --- a/src/app/board/column/column.component.html +++ b/src/app/board/column/column.component.html @@ -29,7 +29,7 @@
+ [task]="task" [add-task]="getShowModalFunction()">
diff --git a/src/app/board/column/column.component.ts b/src/app/board/column/column.component.ts index 7e3bd24..1ad09c9 100644 --- a/src/app/board/column/column.component.ts +++ b/src/app/board/column/column.component.ts @@ -37,7 +37,7 @@ export class ColumnDisplay implements OnInit { private userOptions: UserOptions; private tasks: Array; - private contextMenuItems: Array = []; + private contextMenuItems: Array; private MODAL_ID: string; private modalProps: Task; @@ -54,7 +54,10 @@ export class ColumnDisplay implements OnInit { this.tasks = []; this.collapseTasks = false; - this.contextMenuItems.push(new ContextMenuItem('Add New Task')); + this.contextMenuItems = [ + new ContextMenuItem('Add New Task', + this.getShowModalFunction()) + ]; this.MODAL_ID = 'add-task-form-'; this.modalProps = new Task(); @@ -142,6 +145,10 @@ export class ColumnDisplay implements OnInit { }); } + private getShowModalFunction(): Function { + return () => { this.showModal(); }; + } + private showModal() { this.modalProps = new Task(); this.modalProps.column_id = this.columnData.id; diff --git a/src/app/board/task/task.component.html b/src/app/board/task/task.component.html index 39ce249..bc871d2 100644 --- a/src/app/board/task/task.component.html +++ b/src/app/board/task/task.component.html @@ -39,5 +39,6 @@ + diff --git a/src/app/board/task/task.component.ts b/src/app/board/task/task.component.ts index 42c08ba..c4208f7 100644 --- a/src/app/board/task/task.component.ts +++ b/src/app/board/task/task.component.ts @@ -1,10 +1,16 @@ -import { Component, Input } from '@angular/core'; +import { + Component, + Input, + OnInit +} from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import * as Marked from 'marked'; import * as hljs from 'highlight.js'; import { + ContextMenu, + ContextMenuItem, Task, UserOptions, AuthService @@ -14,10 +20,12 @@ import { selector: 'tb-task', templateUrl: 'app/board/task/task.component.html' }) -export class TaskDisplay { +export class TaskDisplay implements OnInit { private userOptions: UserOptions; + private contextMenuItems: Array; @Input('task') taskData: Task; + @Input('add-task') addTask: Function; constructor(private auth: AuthService, private sanitizer: DomSanitizer) { @@ -28,6 +36,18 @@ export class TaskDisplay { this.initMarked(); } + ngOnInit() { + this.contextMenuItems = [ + new ContextMenuItem('View Task'), + new ContextMenuItem('Edit Task'), + new ContextMenuItem('Delete Task'), + new ContextMenuItem('', null, true), + new ContextMenuItem('Move to Column:', null, false, false), + new ContextMenuItem('', null, true), + new ContextMenuItem('Add New Task', this.addTask) + ]; + } + getTaskDescription(): SafeHtml { return this.sanitizer.bypassSecurityTrustHtml( Marked(this.taskData.description)); diff --git a/src/app/shared/context-menu/context-menu-item.model.ts b/src/app/shared/context-menu/context-menu-item.model.ts index 04aca30..9d7d33a 100644 --- a/src/app/shared/context-menu/context-menu-item.model.ts +++ b/src/app/shared/context-menu/context-menu-item.model.ts @@ -1,7 +1,8 @@ export class ContextMenuItem { constructor(public text: string = '', public action: Function = null, - public isSeparator: boolean = false) { + public isSeparator: boolean = false, + public canHighlight: boolean = true) { } } diff --git a/src/app/shared/context-menu/context-menu.component.html b/src/app/shared/context-menu/context-menu.component.html index d584ede..c0855b3 100644 --- a/src/app/shared/context-menu/context-menu.component.html +++ b/src/app/shared/context-menu/context-menu.component.html @@ -1,12 +1,15 @@
- diff --git a/src/app/shared/context-menu/context-menu.component.ts b/src/app/shared/context-menu/context-menu.component.ts index b0b48e8..ccfba8b 100644 --- a/src/app/shared/context-menu/context-menu.component.ts +++ b/src/app/shared/context-menu/context-menu.component.ts @@ -5,6 +5,7 @@ import { } from '@angular/core'; import { ContextMenuItem } from './context-menu-item.model'; +import { ContextMenuService } from './context-menu.service'; @Component({ selector: 'tb-context-menu', @@ -16,20 +17,28 @@ export class ContextMenu { isOpen = false; animate = true; - constructor(private el: ElementRef) { - let parentElement = el.nativeElement.parentElement; + constructor(private el: ElementRef, + private menuService: ContextMenuService) { + menuService.registerMenu(this); - el.nativeElement.ownerDocument.addEventListener('click', () => { - this.isOpen = false; - }); + let parentElement = el.nativeElement.parentElement; parentElement.oncontextmenu = (event: MouseEvent) => { event.preventDefault(); + event.stopPropagation(); + this.onParentContextMenu(event); }; } + callAction(action: Function) { + if (action) { + action(); + } + } + private onParentContextMenu(event: MouseEvent) { + this.menuService.closeAllMenus(); this.isOpen = true; let edgeBuffer = 10; diff --git a/src/app/shared/context-menu/context-menu.service.ts b/src/app/shared/context-menu/context-menu.service.ts index 4e5c524..8dbf176 100644 --- a/src/app/shared/context-menu/context-menu.service.ts +++ b/src/app/shared/context-menu/context-menu.service.ts @@ -18,7 +18,7 @@ export class ContextMenuService { this.menus.push(newMenu); } - private closeAllMenus() { + closeAllMenus() { this.menus.forEach(menu => { menu.isOpen = false; }); diff --git a/src/app/shared/context-menu/index.ts b/src/app/shared/context-menu/index.ts index 4a4e884..e9c9b5e 100644 --- a/src/app/shared/context-menu/index.ts +++ b/src/app/shared/context-menu/index.ts @@ -1,2 +1,3 @@ export * from './context-menu.component'; export * from './context-menu-item.model'; +export * from './context-menu.service'; diff --git a/src/scss/_context-menu.scss b/src/scss/_context-menu.scss index 67b3c94..466b1f5 100644 --- a/src/scss/_context-menu.scss +++ b/src/scss/_context-menu.scss @@ -9,7 +9,7 @@ .context-menu-container { @include shadow-high; - background-color: #fff; + background-color: $white; border-radius: 3px; display: none; margin: 2px 0 0; @@ -30,6 +30,14 @@ &:hover { background-color: lighten($color-background, 5%); } + + &.no-highlight { + cursor: default; + + &:hover { + background-color: $white; + } + } } }