From c58e54b17686d46b8df0480f96a4c4a5b2f52359 Mon Sep 17 00:00:00 2001 From: Matthew Ross Date: Fri, 8 Jun 2018 16:41:01 -0400 Subject: [PATCH] Remove compile directive and initial new context menu --- package-lock.json | 150 ++++++++--------- package.json | 24 +-- src/app/board/column/column.component.html | 4 +- src/app/board/column/column.component.ts | 10 +- src/app/board/task/task.component.html | 6 +- src/app/board/task/task.component.ts | 153 +++++++++--------- src/app/shared/compile/compile.directive.ts | 84 ---------- .../context-menu-item.component.html | 2 + .../context-menu-item.component.ts | 53 +++++- .../context-menu/context-menu.component.html | 11 +- .../context-menu/context-menu.component.ts | 50 ++---- .../context-menu/context-menu.service.ts | 17 +- src/app/shared/models/index.ts | 1 - src/app/shared/shared.module.ts | 6 +- src/scss/_context-menu.scss | 27 +--- test/app/board/task/task.component.spec.ts | 2 +- .../context-menu.component.spec.ts | 7 - 17 files changed, 255 insertions(+), 352 deletions(-) delete mode 100644 src/app/shared/compile/compile.directive.ts create mode 100644 src/app/shared/context-menu/context-menu-item.component.html diff --git a/package-lock.json b/package-lock.json index 44655a3..bb6e6a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -429,19 +429,19 @@ } }, "@angular-devkit/schematics": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.7.tgz", - "integrity": "sha512-DdVYUJls09w+efSZAN96WdcwrAZ6dnJGcUeep7TvImCTu26UPmckEw/yy0HvfM1rSZZsu/VN8r1PoaQTbGc2vw==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.8.tgz", + "integrity": "sha512-R4YqAUdo62wtrhX/5HSRGSKXNTWqfQb66ZE6m8jj6GEJNFKdNXMdxOchxr07LCiKTxfh1w6G3nGzxIsu/+D4KA==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.7", + "@angular-devkit/core": "0.6.8", "rxjs": "^6.0.0" }, "dependencies": { "@angular-devkit/core": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz", - "integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz", + "integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -764,24 +764,24 @@ } }, "@angular/animations": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.3.tgz", - "integrity": "sha512-X8ey0dvh2ielxPCJOCcdNPAmKW5toCpzHdbjdZqlR9o6uP1UmzEKHd7Un7jVIINRtq9ZB7vnFWIJl0BA7C8U0g==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.4.tgz", + "integrity": "sha512-Ro1XEwShk8XRAogfu73fKLTBLnND1s+MGhN+ymwr7ib9hqxVr7jMNE+MXPqG2/1BX9c+7NHb30B8G4woQn62vw==", "requires": { "tslib": "^1.9.0" } }, "@angular/cli": { - "version": "6.0.7", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.7.tgz", - "integrity": "sha512-rPFhPjT6TegRV5qENEgg0MwQKFDuqbF+OoEqgE5QjTQC2gQhnG/sHOgyqixHtvdLOaPfZczCjEltGQj/ELArqw==", + "version": "6.0.8", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.8.tgz", + "integrity": "sha512-DhH1Zq5Yonthw6zh6W07fhf+9XrAZbD1fcQ0MrmbxlieCfLlTAdBqyK2LavFCKwSZkUMLF6UHM3+jiNRVZSSIg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.6.7", - "@angular-devkit/core": "0.6.7", - "@angular-devkit/schematics": "0.6.7", - "@schematics/angular": "0.6.7", - "@schematics/update": "0.6.7", + "@angular-devkit/architect": "0.6.8", + "@angular-devkit/core": "0.6.8", + "@angular-devkit/schematics": "0.6.8", + "@schematics/angular": "0.6.8", + "@schematics/update": "0.6.8", "opn": "~5.3.0", "resolve": "^1.1.7", "rxjs": "^6.0.0", @@ -792,19 +792,19 @@ }, "dependencies": { "@angular-devkit/architect": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.7.tgz", - "integrity": "sha512-ULn46EmEJ9/AD9LJ9DwFtT1CcujpC3x1FSYjpPWqmyv1CH0vsjtMSgUCBUPIonqM4jRjDvIuxclpWJrsH/t9og==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.8.tgz", + "integrity": "sha512-ZKTm/zC61iY9IBHOEAKoMSzZpvhkmv+1O/HHzpHEuR551jCzu6vSyCmMY9Z7GBcccscCV+hjeSMwgFrFRcqlkw==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.7", + "@angular-devkit/core": "0.6.8", "rxjs": "^6.0.0" } }, "@angular-devkit/core": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz", - "integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz", + "integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -1142,31 +1142,31 @@ } }, "@angular/common": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.3.tgz", - "integrity": "sha512-tqEYeEXoaw2kzSUfTrmC3ruJ87trS61SHayIf56f/jtEVn+4pbgJDTNvLSnB6QEaMTn7sX6QBroauMWmdTVSvA==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.4.tgz", + "integrity": "sha512-z2UE6a43u49omsqjzwdHhwD+wpCPauuD13FMkVQMLwzugKhNri0LjMk5I0I9xLz9OyXICm2B+wPAQN4d07savg==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.3.tgz", - "integrity": "sha512-nS65UI6f7grs2k+ggtkwXSBUQ1D/LVSFfXjWR5olxATx25QbIKABec90JphPE4FfhhVm1uonQ/vaSVCjh83Euw==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.4.tgz", + "integrity": "sha512-qwjuPacuRKUroD+xev653mljV9Jwhi2tvwGo/cVadq0isJ2rVH1hO6sa1FWFnNf1KPnyolMobZlMgg8DFW/yRw==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler-cli": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.3.tgz", - "integrity": "sha512-n7L/g2leGSl1LffZ3ZuB5bY4sJoZWjkG5tg9IafXQ8nAIUtKPl+ovoiNUhAaA4CvlUlgYHMcbezKpc9285LnyQ==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.4.tgz", + "integrity": "sha512-bkN21JJrsbIdXNfOc9I9iB7AETUe4/QvApC25R3/pERSyhkK7UNNHTqg4FY5xMdSxlZd1ccWj8rvSbS+hFbTBw==", "dev": true, "requires": { "chokidar": "^1.4.2", "minimist": "^1.2.0", "reflect-metadata": "^0.1.2", - "tsickle": "^0.27.2" + "tsickle": "^0.29.0" }, "dependencies": { "minimist": { @@ -1178,55 +1178,55 @@ } }, "@angular/core": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.3.tgz", - "integrity": "sha512-YJk0kS/V9C2JFKMHfiw6TNxmfkYWGW4HzqGOm/VoPkvj9O4Erkz/OtOOc8hYGmXFmQz1UpOAByzY2XIlEi72XQ==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.4.tgz", + "integrity": "sha512-WCW8wyRoIKkjGjOjVLFpUyhQw/K0//s3W0qo1/vH6m9njC63jP/VP+2Xnt8bdtgeET2NYUeyl+w/0vUXqYlnEA==", "requires": { "tslib": "^1.9.0" } }, "@angular/forms": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.3.tgz", - "integrity": "sha512-YAjRMERggkzb3cIo8iKOz1xB89Ko4fSh4A1suqrv9o2Xu41Qxs6LwrWVW+6x+N5kBzvbKFZyADqSz1otMQP83Q==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.4.tgz", + "integrity": "sha512-JcKyCCkAwF3NlWuwPxtpRhFX/8QbFUkA4W0N62L+Odm8G0/P4QhMw/99o5kRs5xrsQRVyFlGvdYOrkgDyyZkGg==", "requires": { "tslib": "^1.9.0" } }, "@angular/http": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.3.tgz", - "integrity": "sha512-9GF4hEsm/mK/kk+skn1y54IpsSGcgGnFxHctEFSSyUKTub9gFirkbuLOx9T9fXIKtXqCxnXolHCE7ncfOfS7GA==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.4.tgz", + "integrity": "sha512-bq7cS0/5hM3Af3FolEe7HpKP19/7MJWIPGi5k9rYCGM4dXKFiKa+LA/SbXE0DMiKxhAQbZDwQ9HN04r70DRyBQ==", "requires": { "tslib": "^1.9.0" } }, "@angular/language-service": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.3.tgz", - "integrity": "sha512-yeEMS8GwEhyMKD4nlzg/0Ug56k5Zb58uShjVlh+kr6WWHMRzAtecvNHePlakPjxyWzf/EIDWnMJV31HGOGQYZg==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.4.tgz", + "integrity": "sha512-LyFh/sFtnyjJJYO5UKM31nGSSkmGYFMwqzwbG+l0QNQXNoa9jj+OApvu0oOY5F0WP9DBrOAzj74j2M5olprtMQ==", "dev": true }, "@angular/platform-browser": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz", - "integrity": "sha512-OTgOE6WzytV9fnnCwvoyyXI4Avzmfu9RbBUhVRVontov6LlN9XL8BrzLidT7/lPAEQmHuoRCuNrSSY8TokPJCA==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.4.tgz", + "integrity": "sha512-4y6rSqOLuBs+RL0CIM+RZ5T8a5Tm1NisZcTUGvM8lVYPNkqTzNfHQXhBq8mTgRw9JopEwOj+UEqBbgrNX715yQ==", "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser-dynamic": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.3.tgz", - "integrity": "sha512-OSaBiog3jH52c+pJhG6qsZjVipzw3ThTcFaymetlBwdRkZ9ch7eIQFhlIXPe4oM3wJt39LTG7peRymWPbnx4uw==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.4.tgz", + "integrity": "sha512-uh7MoQi9kyKPFHrD7HPOU5gWyhF4pPJuGltyMTOtM/f5TNL9QQI2EugijKnnSFLQ8+7UQjmFAVeRqH9jylhIyQ==", "requires": { "tslib": "^1.9.0" } }, "@angular/router": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.3.tgz", - "integrity": "sha512-7pQYu5DnNXwZ8nZrKtTpBo3HQoirKSP2hGAoHA0rPsqZvavBfuhUzsksYVvKvFEtoPmBe69uEYydhr115MTTNQ==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.4.tgz", + "integrity": "sha512-IKUtbbRtHN8I+Hp8/pLqBPyXJmQHrPFGzKU3H43TovD++mmT5AaYVCeJgkGUB//wjtLN3y0X/yrmyWFWcN35Gw==", "requires": { "tslib": "^1.9.0" } @@ -1243,20 +1243,20 @@ } }, "@schematics/angular": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.7.tgz", - "integrity": "sha512-gO7xSSzBQhj1t8aD3qBd03rj3hJ1XIWJ9rzLsPpC5hVfmMCpsc6cBnwm2asJ+eZlZUah46ZDhwlnMFEu8Sfczw==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.8.tgz", + "integrity": "sha512-9kRphqTYG5Df/I8fvnT1zMsw0YNDPO9tl18tQZXj4am4raT7l9UCr+WkwJdlBoA5pwG6baWE9sL0iGWV/bzF/g==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.7", - "@angular-devkit/schematics": "0.6.7", + "@angular-devkit/core": "0.6.8", + "@angular-devkit/schematics": "0.6.8", "typescript": ">=2.6.2 <2.8" }, "dependencies": { "@angular-devkit/core": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz", - "integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz", + "integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -1579,13 +1579,13 @@ } }, "@schematics/update": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.7.tgz", - "integrity": "sha512-uogLzGy3+/VlbQdevn/7WFTfs2Utl5ffwN17eCNayRuXmNyHlytKtz7cx8m1w9oj/VYxZXPbWTDVM1Hlnd/mqQ==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.8.tgz", + "integrity": "sha512-1Uq7LYnwL2wBwGVCgNz76QAR13ghAk+2vDDHOi+VX5+usHManxydrpoMGeX66OBPd+y5D3D2MFb+8mYHE7mygg==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.7", - "@angular-devkit/schematics": "0.6.7", + "@angular-devkit/core": "0.6.8", + "@angular-devkit/schematics": "0.6.8", "npm-registry-client": "^8.5.1", "rxjs": "^6.0.0", "semver": "^5.3.0", @@ -1593,9 +1593,9 @@ }, "dependencies": { "@angular-devkit/core": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz", - "integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz", + "integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -13418,9 +13418,9 @@ } }, "tsickle": { - "version": "0.27.5", - "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.27.5.tgz", - "integrity": "sha512-NP+CjM1EXza/M8mOXBLH3vkFEJiu1zfEAlC5WdJxHPn8l96QPz5eooP6uAgYtw1CcKfuSyIiheNUdKxtDWCNeg==", + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.29.0.tgz", + "integrity": "sha512-JpID0Lv8/irRtPmqJJxb5fCwfZhjZeKmav9Zna7UjqVuJoSbI49Wue/c2PPybX1SbRrjl7bbI/JsCl0dSUJygA==", "dev": true, "requires": { "minimist": "^1.2.0", diff --git a/package.json b/package.json index 670dea3..2984775 100644 --- a/package.json +++ b/package.json @@ -40,15 +40,15 @@ "postinstall": "cd src/api/ && composer update && composer install --optimize-autoloader && cd ../../" }, "dependencies": { - "@angular/animations": "^6.0.3", - "@angular/common": "^6.0.3", - "@angular/compiler": "^6.0.3", - "@angular/core": "^6.0.3", - "@angular/forms": "^6.0.3", - "@angular/http": "^6.0.3", - "@angular/platform-browser": "^6.0.3", - "@angular/platform-browser-dynamic": "^6.0.3", - "@angular/router": "^6.0.3", + "@angular/animations": "^6.0.4", + "@angular/common": "^6.0.4", + "@angular/compiler": "^6.0.4", + "@angular/core": "^6.0.4", + "@angular/forms": "^6.0.4", + "@angular/http": "^6.0.4", + "@angular/platform-browser": "^6.0.4", + "@angular/platform-browser-dynamic": "^6.0.4", + "@angular/router": "^6.0.4", "chartist": "^0.11.0", "chartist-plugin-tooltips": "^0.0.17", "classlist.js": "^1.1.20150312", @@ -64,9 +64,9 @@ }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.5", - "@angular/cli": "^6.0.7", - "@angular/compiler-cli": "^6.0.3", - "@angular/language-service": "^6.0.3", + "@angular/cli": "^6.0.8", + "@angular/compiler-cli": "^6.0.4", + "@angular/language-service": "^6.0.4", "@types/jasmine": "~2.8.7", "@types/jasminewd2": "~2.0.3", "@types/node": "~10.1.4", diff --git a/src/app/board/column/column.component.html b/src/app/board/column/column.component.html index 21c304e..07fd228 100644 --- a/src/app/board/column/column.component.html +++ b/src/app/board/column/column.component.html @@ -86,7 +86,9 @@ (dblclick)="$event.preventDefault();showViewModal(task.id)"> - + + Column Test + ; public quickAdd: Task; public MODAL_CONFIRM_ID: string; @@ -102,10 +100,10 @@ export class ColumnDisplay implements OnInit, OnDestroy { let sub = stringsService.stringsChanged.subscribe(newStrings => { this.strings = newStrings; - this.contextMenuItems = [ - new ContextMenuItem(this.strings.boards_addTask, - this.getShowModalFunction()) - ]; + // this.contextMenuItems = [ + // new ContextMenuItem(this.strings.boards_addTask, + // this.getShowModalFunction()) + // ]; }); this.subs.push(sub); diff --git a/src/app/board/task/task.component.html b/src/app/board/task/task.component.html index d2da649..2b0cd14 100644 --- a/src/app/board/task/task.component.html +++ b/src/app/board/task/task.component.html @@ -55,6 +55,10 @@ [title]="getPercentTitle()"> - + + + Task Test + + diff --git a/src/app/board/task/task.component.ts b/src/app/board/task/task.component.ts index 15f3b17..0c7771c 100644 --- a/src/app/board/task/task.component.ts +++ b/src/app/board/task/task.component.ts @@ -14,7 +14,6 @@ import { ApiResponse, Board, Column, - ContextMenuItem, Notification, Task, UserOptions @@ -42,7 +41,6 @@ export class TaskDisplay implements OnInit { public activeBoard: Board; public userOptions: UserOptions; public boardsList: Array; - public contextMenuItems: Array; @Input('task') taskData: Task; @Input('add-task') addTask: Function; @@ -56,7 +54,7 @@ export class TaskDisplay implements OnInit { @Input('boards') set boards(boards: Array) { this.boardsList = boards; - this.generateContextMenuItems(); + // this.generateContextMenuItems(); } constructor(private auth: AuthService, @@ -69,13 +67,12 @@ export class TaskDisplay implements OnInit { this.totalTasks = 0; this.completeTasks = 0; this.percentComplete = 0; - this.contextMenuItems = []; stringsService.stringsChanged.subscribe(newStrings => { this.strings = newStrings; if (this.taskData) { - this.generateContextMenuItems(); + // this.generateContextMenuItems(); } }); @@ -101,7 +98,7 @@ export class TaskDisplay implements OnInit { complete: 0 }; - this.generateContextMenuItems(); + // this.generateContextMenuItems(); this.initMarked(); this.calcPercentComplete(); this.checkDueDate(); @@ -274,28 +271,28 @@ export class TaskDisplay implements OnInit { return text; } - private getMoveMenuItem() { - let menuText = this.strings.boards_moveTask + - ': '; - - let action = (event: any) => { - if (event.target.tagName !== 'SELECT') { - return; - } - - this.changeTaskColumn(); - }; - - return new ContextMenuItem(menuText, action, false, false, true); - } + // private getMoveMenuItem() { + // let menuText = this.strings.boards_moveTask + + // ': '; + // + // let action = (event: any) => { + // if (event.target.tagName !== 'SELECT') { + // return; + // } + // + // this.changeTaskColumn(); + // }; + // + // return new ContextMenuItem(menuText, action, false, false, true); + // } private calcPercentComplete() { this.percentComplete = 0; @@ -314,57 +311,57 @@ export class TaskDisplay implements OnInit { } } - private generateContextMenuItems() { - this.contextMenuItems = [ - new ContextMenuItem(this.strings.boards_viewTask, this.viewTask), - new ContextMenuItem(this.strings.boards_editTask, this.editTask), - new ContextMenuItem(this.strings.boards_removeTask, this.removeTask), - new ContextMenuItem('', null, true), - this.getMoveMenuItem(), - new ContextMenuItem('', null, true), - new ContextMenuItem(this.strings.boards_addTask, this.addTask) - ]; + // private generateContextMenuItems() { + // this.contextMenuItems = [ + // new ContextMenuItem(this.strings.boards_viewTask, this.viewTask), + // new ContextMenuItem(this.strings.boards_editTask, this.editTask), + // new ContextMenuItem(this.strings.boards_removeTask, this.removeTask), + // new ContextMenuItem('', null, true), + // this.getMoveMenuItem(), + // new ContextMenuItem('', null, true), + // new ContextMenuItem(this.strings.boards_addTask, this.addTask) + // ]; + // + // if (this.boardsList && this.boardsList.length > 1) { + // this.contextMenuItems + // .splice(3, 0, + // new ContextMenuItem('', null, true), + // this.getMenuItem(this.strings.boards_copyTaskTo), + // this.getMenuItem(this.strings.boards_moveTaskTo)); + // } + // } - if (this.boardsList && this.boardsList.length > 1) { - this.contextMenuItems - .splice(3, 0, - new ContextMenuItem('', null, true), - this.getMenuItem(this.strings.boards_copyTaskTo), - this.getMenuItem(this.strings.boards_moveTaskTo)); - } - } - - private getMenuItem(text: string): ContextMenuItem { - let menuText = text + ': ' + - ' ' + - ''; - - let action = (event: any) => { - if (event.target.tagName !== 'SELECT') { - return; - } - - if (text === this.strings.boards_copyTaskTo) { - this.copyTaskToBoard(); - return; - } - - this.moveTaskToBoard(); - }; - - return new ContextMenuItem(menuText, action, false, false, true); - } + // private getMenuItem(text: string): ContextMenuItem { + // let menuText = text + ': ' + + // ' ' + + // ''; + // + // let action = (event: any) => { + // if (event.target.tagName !== 'SELECT') { + // return; + // } + // + // if (text === this.strings.boards_copyTaskTo) { + // this.copyTaskToBoard(); + // return; + // } + // + // this.moveTaskToBoard(); + // }; + // + // return new ContextMenuItem(menuText, action, false, false, true); + // } private initMarked() { let renderer = new marked.Renderer(); diff --git a/src/app/shared/compile/compile.directive.ts b/src/app/shared/compile/compile.directive.ts deleted file mode 100644 index 25bc1f4..0000000 --- a/src/app/shared/compile/compile.directive.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { - Compiler, - Component, - ComponentRef, - Directive, - Input, - ModuleWithComponentFactories, - NgModule, - OnChanges, - Type, - ViewContainerRef -} from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@Directive({ - selector: '[compile]' -}) -export class CompileDirective implements OnChanges { - @Input() compile: string; - @Input() compileContext: any; - - compRef: ComponentRef; - - constructor(private vcRef: ViewContainerRef, - private compiler: Compiler) { } - - ngOnChanges() { - if (!this.compile) { - if (this.compRef) { - this.updateProperties(); - return; - } - - throw Error('You forgot to provide template'); - } - - this.vcRef.clear(); - this.compRef = null; - - const component = this.createDynamicComponent(this.compile); - const module = this.createDynamicModule(component); - - this.compiler.compileModuleAndAllComponentsAsync(module) - .then((moduleWithFactories: ModuleWithComponentFactories) => { - let compFactory = moduleWithFactories.componentFactories - .find(x => x.componentType === component); - - this.compRef = this.vcRef.createComponent(compFactory); - this.updateProperties(); - }) - .catch(error => { - console.error(error); // tslint:disable-line - }); - } - - updateProperties() { - for (let prop in this.compileContext) { - if (this.compileContext.hasOwnProperty(prop)) { - this.compRef.instance[prop] = this.compileContext[prop]; - } - } - } - - private createDynamicComponent (template: string) { - @Component({ - selector: 'custom-dynamic-component', - template - }) - class CustomDynamicComponent {} - - return CustomDynamicComponent; - } - - private createDynamicModule (component: Type) { - @NgModule({ - imports: [CommonModule], - declarations: [component] - }) - class DynamicModule {} - - return DynamicModule; - } -} - diff --git a/src/app/shared/context-menu/context-menu-item.component.html b/src/app/shared/context-menu/context-menu-item.component.html new file mode 100644 index 0000000..91de65e --- /dev/null +++ b/src/app/shared/context-menu/context-menu-item.component.html @@ -0,0 +1,2 @@ + +
 diff --git a/src/app/shared/context-menu/context-menu-item.component.ts b/src/app/shared/context-menu/context-menu-item.component.ts index 15f252e..c55e330 100644 --- a/src/app/shared/context-menu/context-menu-item.component.ts +++ b/src/app/shared/context-menu/context-menu-item.component.ts @@ -1,8 +1,53 @@ -import { Component } from '@angular/core'; +import { + Component, + ElementRef, + EventEmitter, + Input, + Output +} from '@angular/core'; @Component({ selector: 'tb-context-menu-item', - template:`
- - ` + templateUrl: './context-menu-item.component.html', + styles: [`:host { + cursor: pointer; + display: block; + padding: 4px 10px; + user-select: none; + + :hover:not([ng-reflect-is-separator]) { + background-color: lighten($color-background, 5%); + } + }`] }) +export class ContextMenuItem { + @Input() + isSeparator: boolean; + + @Output() + clickEvent: EventEmitter = new EventEmitter(); + + constructor(private el: ElementRef) { + const elem = el.nativeElement; + + elem.onclick = (event) => { + if (this.isSeparator) { + this.killEvent(event); + return; + } + + this.clickEvent.next(event); + }; + + elem.oncontextmenu = (event) => { + this.killEvent(event); + } + } + + private killEvent(event) { + event.preventDefault(); + event.stopPropagation(); + } + +} + diff --git a/src/app/shared/context-menu/context-menu.component.html b/src/app/shared/context-menu/context-menu.component.html index 9e22b7c..d1e9134 100644 --- a/src/app/shared/context-menu/context-menu.component.html +++ b/src/app/shared/context-menu/context-menu.component.html @@ -1,11 +1,4 @@ -
- -
- -
+
+
diff --git a/src/app/shared/context-menu/context-menu.component.ts b/src/app/shared/context-menu/context-menu.component.ts index 13c1ef1..d21d4f6 100644 --- a/src/app/shared/context-menu/context-menu.component.ts +++ b/src/app/shared/context-menu/context-menu.component.ts @@ -1,11 +1,5 @@ -import { - Component, - Input, - ElementRef -} from '@angular/core'; -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; +import { Component, ElementRef } from '@angular/core'; -import { ContextMenuItem } from './context-menu-item.model'; import { ContextMenuService } from './context-menu.service'; @Component({ @@ -13,53 +7,35 @@ import { ContextMenuService } from './context-menu.service'; templateUrl: './context-menu.component.html' }) export class ContextMenu { - @Input('menu-items') menuItems: Array; - - isOpen = false; + public isOpen = false; constructor(public el: ElementRef, - private menuService: ContextMenuService, - private sanitizer: DomSanitizer) { + private menuService: ContextMenuService) { menuService.registerMenu(this); - let parentElement = el.nativeElement.parentElement; + const parentEl = el.nativeElement.parentElement; - parentElement.oncontextmenu = (event: MouseEvent) => { + parentEl.oncontextmenu = (event: MouseEvent) => { this.parentEventHandler(event); }; } - getText(item: ContextMenuItem): SafeHtml { - return this.sanitizer.bypassSecurityTrustHtml(item.text); - } - - private captureChildEvents(event: MouseEvent) { + private parentEventHandler(event: MouseEvent) { event.preventDefault(); event.stopPropagation(); - } - private parentEventHandler(event: MouseEvent) { - this.captureChildEvents(event); - this.onParentContextMenu(event); - } - - private onParentContextMenu(event: MouseEvent) { this.menuService.closeAllMenus(); + this.el.nativeElement.style.top = '-10000px'; this.isOpen = true; - let edgeBuffer = 10; - let target = this.el.nativeElement.firstElementChild; - - // Set to the event position by default - target.style.left = event.pageX + 'px'; - target.style.top = event.pageY + 'px'; + const edgeBuffer = 10; // Adjust position if near an edge - let adjustPosition = () => { - let rect = target.getBoundingClientRect(); - - let offsetX = (event.pageX + rect.width + edgeBuffer) > window.innerWidth; - let offsetY = (event.pageY + rect.height + edgeBuffer) > window.innerHeight; + const adjustPosition = () => { + const target = this.el.nativeElement.firstElementChild; + const rect = target.getBoundingClientRect(); + const offsetX = (event.pageX + rect.width + edgeBuffer) > window.innerWidth; + const 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'; diff --git a/src/app/shared/context-menu/context-menu.service.ts b/src/app/shared/context-menu/context-menu.service.ts index 89bbace..d791559 100644 --- a/src/app/shared/context-menu/context-menu.service.ts +++ b/src/app/shared/context-menu/context-menu.service.ts @@ -4,18 +4,21 @@ import { ContextMenu } from './context-menu.component'; @Injectable() export class ContextMenuService { - private menus: Array; + private menus: Array = []; constructor() { - this.menus = []; - - document.addEventListener('click', event => { - this.closeAllMenus(); - }); + document.addEventListener('click', event => { this.closeAllMenus(); }); } registerMenu(newMenu: ContextMenu) { - this.menus.push(newMenu); + const index = this.menus.indexOf(newMenu); + + if (index === -1) { + this.menus.push(newMenu); + return; + } + + this.menus[index] = newMenu; } closeAllMenus() { diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts index 834bf1c..4ad3ce3 100644 --- a/src/app/shared/models/index.ts +++ b/src/app/shared/models/index.ts @@ -6,7 +6,6 @@ export * from './board.model'; export * from './category.model'; export * from './column.model'; export * from './comment.model'; -export * from '../context-menu/context-menu-item.model'; export * from './issue-tracker.model'; export * from './notification.model'; export * from './task.model'; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index fcc19ca..66107b6 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common'; import { AuthGuard } from './auth/auth.guard'; import { AuthService } from './auth/auth.service'; -import { CompileDirective } from './compile/compile.directive'; import { ContextMenu } from './context-menu/context-menu.component'; +import { ContextMenuItem } from './context-menu/context-menu-item.component'; import { ContextMenuService } from './context-menu/context-menu.service'; import { InlineEdit } from './inline-edit/inline-edit.component'; import { Modal } from './modal/modal.component'; @@ -33,8 +33,8 @@ import { Constants } from './constants'; CommonModule ], declarations: [ - CompileDirective, ContextMenu, + ContextMenuItem, InlineEdit, Modal, Notifications, @@ -50,8 +50,8 @@ import { Constants } from './constants'; StringsService ], exports: [ - CompileDirective, ContextMenu, + ContextMenuItem, InlineEdit, Modal, Notifications, diff --git a/src/scss/_context-menu.scss b/src/scss/_context-menu.scss index 9d8c157..5e6bb1c 100644 --- a/src/scss/_context-menu.scss +++ b/src/scss/_context-menu.scss @@ -1,8 +1,6 @@ .collapsed { .context-menu-container { - &.menu-open { - display: none; - } + display: none; } } @@ -12,32 +10,9 @@ background-color: $white; border-radius: 3px; color: $color-text; - display: none; 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%); - } - - &.no-highlight { - cursor: default; - - &:hover { - background-color: $white; - } - } - } } diff --git a/test/app/board/task/task.component.spec.ts b/test/app/board/task/task.component.spec.ts index 4e81d66..9022ba9 100644 --- a/test/app/board/task/task.component.spec.ts +++ b/test/app/board/task/task.component.spec.ts @@ -180,7 +180,7 @@ describe('TaskDisplay', () => { component.boards = [{ id: 1, name: 'one' }, { id: 2, name: 'test' }]; - expect(component.contextMenuItems.length).toEqual(10); + // expect(component.contextMenuItems.length).toEqual(10); }); it('calls a service to copy a task to another board', () => { diff --git a/test/app/shared/context-menu/context-menu.component.spec.ts b/test/app/shared/context-menu/context-menu.component.spec.ts index fc2a0a8..9ba9e3e 100644 --- a/test/app/shared/context-menu/context-menu.component.spec.ts +++ b/test/app/shared/context-menu/context-menu.component.spec.ts @@ -55,12 +55,5 @@ describe('ContextMenu', () => { }); }); - it('gets HTML formatted text from items', () => { - let actual = component.getText({ text: '

Test

' }); - - expect((actual).changingThisBreaksApplicationSecurity) - .toEqual('

Test

'); - }); - });